diff --git a/Client/OwnCord.Client.Tests/Converters/ConverterTests.cs b/Client/OwnCord.Client.Tests/Converters/ConverterTests.cs
new file mode 100644
index 00000000..dabfef32
--- /dev/null
+++ b/Client/OwnCord.Client.Tests/Converters/ConverterTests.cs
@@ -0,0 +1,529 @@
+using System.Globalization;
+using System.Windows;
+using System.Windows.Media;
+using OwnCord.Client.Converters;
+using OwnCord.Client.Models;
+
+namespace OwnCord.Client.Tests.Converters;
+
+public class FirstCharConverterTests
+{
+    private readonly FirstCharConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Theory]
+    [InlineData("hello", "H")]
+    [InlineData("World", "W")]
+    [InlineData("a", "A")]
+    [InlineData("123", "1")]
+    public void Convert_ReturnsFirstCharUppercased(string input, string expected)
+    {
+        var result = _converter.Convert(input, typeof(string), null!, _culture);
+        Assert.Equal(expected, result);
+    }
+
+    [Fact]
+    public void Convert_EmptyString_ReturnsQuestionMark()
+    {
+        var result = _converter.Convert("", typeof(string), null!, _culture);
+        Assert.Equal("?", result);
+    }
+
+    [Fact]
+    public void Convert_Null_ReturnsQuestionMark()
+    {
+        var result = _converter.Convert(null, typeof(string), null!, _culture);
+        Assert.Equal("?", result);
+    }
+
+    [Fact]
+    public void Convert_NonString_ReturnsQuestionMark()
+    {
+        var result = _converter.Convert(42, typeof(string), null!, _culture);
+        Assert.Equal("?", result);
+    }
+
+    [Fact]
+    public void ConvertBack_ThrowsNotSupported()
+    {
+        Assert.Throws<NotSupportedException>(() =>
+            _converter.ConvertBack("H", typeof(string), null!, _culture));
+    }
+}
+
+public class FirstLetterConverterTests
+{
+    private readonly FirstLetterConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Theory]
+    [InlineData("alice", "A")]
+    [InlineData("Bob", "B")]
+    public void Convert_ReturnsFirstLetterUppercased(string input, string expected)
+    {
+        var result = _converter.Convert(input, typeof(string), null!, _culture);
+        Assert.Equal(expected, result);
+    }
+
+    [Fact]
+    public void Convert_EmptyString_ReturnsQuestionMark()
+    {
+        var result = _converter.Convert("", typeof(string), null!, _culture);
+        Assert.Equal("?", result);
+    }
+
+    [Fact]
+    public void Convert_Null_ReturnsQuestionMark()
+    {
+        var result = _converter.Convert(null, typeof(string), null!, _culture);
+        Assert.Equal("?", result);
+    }
+}
+
+public class RelativeTimeConverterTests
+{
+    private readonly RelativeTimeConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_JustNow_WithinLastMinute()
+    {
+        var dt = DateTime.UtcNow.AddSeconds(-30);
+        var result = (string)_converter.Convert(dt, typeof(string), null!, _culture);
+        Assert.Equal("just now", result);
+    }
+
+    [Fact]
+    public void Convert_MinutesAgo()
+    {
+        var dt = DateTime.UtcNow.AddMinutes(-15);
+        var result = (string)_converter.Convert(dt, typeof(string), null!, _culture);
+        Assert.Equal("15m ago", result);
+    }
+
+    [Fact]
+    public void Convert_HoursAgo()
+    {
+        var dt = DateTime.UtcNow.AddHours(-3);
+        var result = (string)_converter.Convert(dt, typeof(string), null!, _culture);
+        Assert.Equal("3h ago", result);
+    }
+
+    [Fact]
+    public void Convert_Yesterday()
+    {
+        var dt = DateTime.UtcNow.AddHours(-30);
+        var result = (string)_converter.Convert(dt, typeof(string), null!, _culture);
+        Assert.Equal("yesterday", result);
+    }
+
+    [Fact]
+    public void Convert_DaysAgo()
+    {
+        var dt = DateTime.UtcNow.AddDays(-4);
+        var result = (string)_converter.Convert(dt, typeof(string), null!, _culture);
+        Assert.Equal("4d ago", result);
+    }
+
+    [Fact]
+    public void Convert_OlderThanWeek_ReturnsFormattedDate()
+    {
+        var dt = DateTime.UtcNow.AddDays(-30);
+        var result = (string)_converter.Convert(dt, typeof(string), null!, _culture);
+        // Should be formatted like "Feb 13" (month abbrev + day)
+        Assert.Matches(@"^[A-Z][a-z]{2} \d{1,2}$", result);
+    }
+
+    [Fact]
+    public void Convert_NonDateTime_ReturnsNever()
+    {
+        var result = _converter.Convert("not a date", typeof(string), null!, _culture);
+        Assert.Equal("never", result);
+    }
+
+    [Fact]
+    public void Convert_Null_ReturnsNever()
+    {
+        var result = _converter.Convert(null, typeof(string), null!, _culture);
+        Assert.Equal("never", result);
+    }
+
+    [Fact]
+    public void ConvertBack_ThrowsNotSupported()
+    {
+        Assert.Throws<NotSupportedException>(() =>
+            _converter.ConvertBack("just now", typeof(DateTime?), null!, _culture));
+    }
+}
+
+public class ColorToBrushConverterTests
+{
+    private readonly ColorToBrushConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_ValidHex_ReturnsBrush()
+    {
+        var result = _converter.Convert("#ff0000", typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Colors.Red, brush.Color);
+    }
+
+    [Fact]
+    public void Convert_Null_ReturnsFallbackBlurple()
+    {
+        var result = _converter.Convert(null, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Color.FromRgb(0x58, 0x65, 0xF2), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_ShortString_ReturnsFallback()
+    {
+        var result = _converter.Convert("#fff", typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Color.FromRgb(0x58, 0x65, 0xF2), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_InvalidHex_ReturnsFallback()
+    {
+        var result = _converter.Convert("#zzzzzz", typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Color.FromRgb(0x58, 0x65, 0xF2), brush.Color);
+    }
+
+    [Fact]
+    public void ConvertBack_ThrowsNotSupported()
+    {
+        Assert.Throws<NotSupportedException>(() =>
+            _converter.ConvertBack(new SolidColorBrush(), typeof(string), null!, _culture));
+    }
+}
+
+public class HexColorToBrushConverterTests
+{
+    private readonly HexColorToBrushConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_ValidHex_ReturnsBrush()
+    {
+        var result = _converter.Convert("#00ff00", typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Color.FromRgb(0, 255, 0), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_NoHashPrefix_ReturnsFallback()
+    {
+        var result = _converter.Convert("ff0000", typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        // Fallback is #949ba4
+        Assert.Equal(Color.FromRgb(0x94, 0x9B, 0xA4), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_Null_ReturnsFallback()
+    {
+        var result = _converter.Convert(null, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Color.FromRgb(0x94, 0x9B, 0xA4), brush.Color);
+    }
+}
+
+public class HostPortConverterTests
+{
+    private readonly HostPortConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_DefaultPort_ReturnsHostOnly()
+    {
+        var result = _converter.Convert(
+            new object[] { "example.com", 8443 }, typeof(string), null!, _culture);
+        Assert.Equal("example.com", result);
+    }
+
+    [Fact]
+    public void Convert_CustomPort_ReturnsHostColon()
+    {
+        var result = _converter.Convert(
+            new object[] { "example.com", 9090 }, typeof(string), null!, _culture);
+        Assert.Equal("example.com:9090", result);
+    }
+
+    [Fact]
+    public void Convert_NullHost_ReturnsEmptyWithPort()
+    {
+        var result = _converter.Convert(
+            new object[] { null!, 9090 }, typeof(string), null!, _culture);
+        Assert.Equal(":9090", result);
+    }
+
+    [Fact]
+    public void Convert_SingleValue_DefaultsPort8443()
+    {
+        var result = _converter.Convert(
+            new object[] { "example.com" }, typeof(string), null!, _culture);
+        Assert.Equal("example.com", result);
+    }
+
+    [Fact]
+    public void ConvertBack_ThrowsNotSupported()
+    {
+        Assert.Throws<NotSupportedException>(() =>
+            _converter.ConvertBack("x", new[] { typeof(string) }, null!, _culture));
+    }
+}
+
+public class BoolToVisibilityConverterTests
+{
+    private readonly BoolToVisibilityConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_True_ReturnsVisible()
+    {
+        var result = _converter.Convert(true, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Visible, result);
+    }
+
+    [Fact]
+    public void Convert_False_ReturnsCollapsed()
+    {
+        var result = _converter.Convert(false, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Collapsed, result);
+    }
+
+    [Fact]
+    public void ConvertBack_Visible_ReturnsTrue()
+    {
+        var result = _converter.ConvertBack(Visibility.Visible, typeof(bool), null!, _culture);
+        Assert.Equal(true, result);
+    }
+
+    [Fact]
+    public void ConvertBack_Collapsed_ReturnsFalse()
+    {
+        var result = _converter.ConvertBack(Visibility.Collapsed, typeof(bool), null!, _culture);
+        Assert.Equal(false, result);
+    }
+}
+
+public class InverseBoolToVisibilityConverterTests
+{
+    private readonly InverseBoolToVisibilityConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_True_ReturnsCollapsed()
+    {
+        var result = _converter.Convert(true, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Collapsed, result);
+    }
+
+    [Fact]
+    public void Convert_False_ReturnsVisible()
+    {
+        var result = _converter.Convert(false, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Visible, result);
+    }
+
+    [Fact]
+    public void ConvertBack_Collapsed_ReturnsTrue()
+    {
+        var result = _converter.ConvertBack(Visibility.Collapsed, typeof(bool), null!, _culture);
+        Assert.Equal(true, result);
+    }
+}
+
+public class IntToVisibilityConverterTests
+{
+    private readonly IntToVisibilityConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_PositiveInt_ReturnsVisible()
+    {
+        var result = _converter.Convert(5, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Visible, result);
+    }
+
+    [Fact]
+    public void Convert_Zero_ReturnsCollapsed()
+    {
+        var result = _converter.Convert(0, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Collapsed, result);
+    }
+
+    [Fact]
+    public void Convert_NegativeInt_ReturnsCollapsed()
+    {
+        var result = _converter.Convert(-1, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Collapsed, result);
+    }
+
+    [Fact]
+    public void Convert_NonInt_ReturnsCollapsed()
+    {
+        var result = _converter.Convert("not an int", typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Collapsed, result);
+    }
+}
+
+public class NullToVisibilityConverterTests
+{
+    private readonly NullToVisibilityConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_NonNull_ReturnsVisible()
+    {
+        var result = _converter.Convert("something", typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Visible, result);
+    }
+
+    [Fact]
+    public void Convert_Null_ReturnsCollapsed()
+    {
+        var result = _converter.Convert(null, typeof(Visibility), null!, _culture);
+        Assert.Equal(Visibility.Collapsed, result);
+    }
+}
+
+public class InverseBoolConverterTests
+{
+    private readonly InverseBoolConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_True_ReturnsFalse()
+    {
+        var result = _converter.Convert(true, typeof(bool), null!, _culture);
+        Assert.Equal(false, result);
+    }
+
+    [Fact]
+    public void Convert_False_ReturnsTrue()
+    {
+        var result = _converter.Convert(false, typeof(bool), null!, _culture);
+        Assert.Equal(true, result);
+    }
+
+    [Fact]
+    public void ConvertBack_True_ReturnsFalse()
+    {
+        var result = _converter.ConvertBack(true, typeof(bool), null!, _culture);
+        Assert.Equal(false, result);
+    }
+}
+
+public class StatusToBrushConverterTests
+{
+    private readonly StatusToBrushConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_Online_ReturnsGreen()
+    {
+        var result = _converter.Convert(UserStatus.Online, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#23a55a"), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_Idle_ReturnsYellow()
+    {
+        var result = _converter.Convert(UserStatus.Idle, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#f0b232"), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_Dnd_ReturnsRed()
+    {
+        var result = _converter.Convert(UserStatus.Dnd, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#f23f43"), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_Offline_ReturnsGray()
+    {
+        var result = _converter.Convert(UserStatus.Offline, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#6d6f78"), brush.Color);
+    }
+}
+
+public class BoolToRedBrushConverterTests
+{
+    private readonly BoolToRedBrushConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_True_ReturnsRed()
+    {
+        var result = _converter.Convert(true, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#f23f43"), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_False_ReturnsNormal()
+    {
+        var result = _converter.Convert(false, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#b5bac1"), brush.Color);
+    }
+}
+
+public class SpeakingToStrokeBrushConverterTests
+{
+    private readonly SpeakingToStrokeBrushConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_True_ReturnsGreen()
+    {
+        var result = _converter.Convert(true, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal((Color)ColorConverter.ConvertFromString("#23a55a"), brush.Color);
+    }
+
+    [Fact]
+    public void Convert_False_ReturnsTransparent()
+    {
+        var result = _converter.Convert(false, typeof(SolidColorBrush), null!, _culture);
+        var brush = Assert.IsType<SolidColorBrush>(result);
+        Assert.Equal(Colors.Transparent, brush.Color);
+    }
+}
+
+public class BoolToArrowConverterTests
+{
+    private readonly BoolToArrowConverter _converter = new();
+    private readonly CultureInfo _culture = CultureInfo.InvariantCulture;
+
+    [Fact]
+    public void Convert_True_ReturnsDownArrow()
+    {
+        var result = _converter.Convert(true, typeof(string), null!, _culture);
+        Assert.Equal("\u25BE", result); // ▾
+    }
+
+    [Fact]
+    public void Convert_False_ReturnsRightArrow()
+    {
+        var result = _converter.Convert(false, typeof(string), null!, _culture);
+        Assert.Equal("\u25B8", result); // ▸
+    }
+
+    [Fact]
+    public void ConvertBack_ThrowsNotSupported()
+    {
+        Assert.Throws<NotSupportedException>(() =>
+            _converter.ConvertBack("▾", typeof(bool), null!, _culture));
+    }
+}
diff --git a/Client/OwnCord.Client.Tests/Models/ModelTests.cs b/Client/OwnCord.Client.Tests/Models/ModelTests.cs
new file mode 100644
index 00000000..752b2707
--- /dev/null
+++ b/Client/OwnCord.Client.Tests/Models/ModelTests.cs
@@ -0,0 +1,524 @@
+using OwnCord.Client.Models;
+
+namespace OwnCord.Client.Tests.Models;
+
+// ── ServerProfile Tests ─────────────────────────────────────────────────────
+
+public class ServerProfileTests
+{
+    [Fact]
+    public void Create_GeneratesUniqueId()
+    {
+        var p = ServerProfile.Create("Home", "localhost");
+        Assert.False(string.IsNullOrEmpty(p.Id));
+    }
+
+    [Fact]
+    public void Create_TwoCallsProduceDifferentIds()
+    {
+        var a = ServerProfile.Create("A", "a.local");
+        var b = ServerProfile.Create("B", "b.local");
+        Assert.NotEqual(a.Id, b.Id);
+    }
+
+    [Fact]
+    public void Create_StoresNameHostUsername()
+    {
+        var p = ServerProfile.Create("Home", "192.168.1.1", "alice");
+        Assert.Equal("Home", p.Name);
+        Assert.Equal("192.168.1.1", p.Host);
+        Assert.Equal("alice", p.LastUsername);
+    }
+
+    [Fact]
+    public void Create_DefaultsPortTo8443()
+    {
+        var p = ServerProfile.Create("Home", "localhost");
+        Assert.Equal(8443, p.Port);
+    }
+
+    [Fact]
+    public void Create_DefaultsColorToAccent()
+    {
+        var p = ServerProfile.Create("Home", "localhost");
+        Assert.Equal("#5865f2", p.Color);
+    }
+
+    [Fact]
+    public void Create_CustomPortAndColor()
+    {
+        var p = ServerProfile.Create("Home", "localhost", port: 9443, color: "#ff0000");
+        Assert.Equal(9443, p.Port);
+        Assert.Equal("#ff0000", p.Color);
+    }
+
+    [Fact]
+    public void Create_AutoConnectDefaultsFalse()
+    {
+        var p = ServerProfile.Create("Home", "localhost");
+        Assert.False(p.AutoConnect);
+    }
+
+    [Fact]
+    public void Create_LastConnectedIsNull()
+    {
+        var p = ServerProfile.Create("Home", "localhost");
+        Assert.Null(p.LastConnected);
+    }
+
+    [Fact]
+    public void HostDisplay_OmitsDefaultPort()
+    {
+        var p = ServerProfile.Create("Home", "192.168.1.1", port: 8443);
+        Assert.Equal("192.168.1.1", p.HostDisplay);
+    }
+
+    [Fact]
+    public void HostDisplay_IncludesNonDefaultPort()
+    {
+        var p = ServerProfile.Create("Home", "192.168.1.1", port: 9443);
+        Assert.Equal("192.168.1.1:9443", p.HostDisplay);
+    }
+
+    [Fact]
+    public void WithExpression_CreatesNewInstance()
+    {
+        var original = ServerProfile.Create("Old", "old.local");
+        var updated = original with { Name = "New" };
+        Assert.Equal("New", updated.Name);
+        Assert.Equal("Old", original.Name);
+        Assert.Equal(original.Id, updated.Id);
+    }
+}
+
+// ── MessageDisplayItem Tests ────────────────────────────────────────────────
+
+public class MessageDisplayItemTests
+{
+    private static User Alice => new(1, "alice", null, 1, UserStatus.Online);
+    private static User Bob => new(2, "bob", null, 1, UserStatus.Online);
+
+    private static Message Msg(long id, User author, DateTime ts, long? replyTo = null)
+        => new(id, 1, author, "hello", ts, replyTo, null, false, [], []);
+
+    [Fact]
+    public void FirstMessage_NotGrouped()
+    {
+        var item = new MessageDisplayItem(Msg(1, Alice, DateTime.Today.AddHours(10)), null);
+        Assert.False(item.IsGrouped);
+    }
+
+    [Fact]
+    public void FirstMessage_ShowsDayDivider()
+    {
+        var item = new MessageDisplayItem(Msg(1, Alice, DateTime.Today.AddHours(10)), null);
+        Assert.True(item.ShowDayDivider);
+    }
+
+    [Fact]
+    public void SameAuthor_Within7Min_IsGrouped()
+    {
+        var ts = DateTime.Today.AddHours(10);
+        var prev = Msg(1, Alice, ts);
+        var curr = Msg(2, Alice, ts.AddMinutes(3));
+        var item = new MessageDisplayItem(curr, prev);
+        Assert.True(item.IsGrouped);
+    }
+
+    [Fact]
+    public void SameAuthor_Over7Min_NotGrouped()
+    {
+        var ts = DateTime.Today.AddHours(10);
+        var prev = Msg(1, Alice, ts);
+        var curr = Msg(2, Alice, ts.AddMinutes(8));
+        var item = new MessageDisplayItem(curr, prev);
+        Assert.False(item.IsGrouped);
+    }
+
+    [Fact]
+    public void DifferentAuthor_NotGrouped()
+    {
+        var ts = DateTime.Today.AddHours(10);
+        var prev = Msg(1, Alice, ts);
+        var curr = Msg(2, Bob, ts.AddMinutes(1));
+        var item = new MessageDisplayItem(curr, prev);
+        Assert.False(item.IsGrouped);
+    }
+
+    [Fact]
+    public void Reply_BreaksGrouping()
+    {
+        var ts = DateTime.Today.AddHours(10);
+        var prev = Msg(1, Alice, ts);
+        var curr = Msg(2, Alice, ts.AddMinutes(1), replyTo: 99);
+        var item = new MessageDisplayItem(curr, prev);
+        Assert.False(item.IsGrouped);
+    }
+
+    [Fact]
+    public void DifferentDay_ShowsDayDivider()
+    {
+        var prev = Msg(1, Alice, DateTime.Today.AddDays(-1).AddHours(23));
+        var curr = Msg(2, Alice, DateTime.Today.AddHours(0));
+        var item = new MessageDisplayItem(curr, prev);
+        Assert.True(item.ShowDayDivider);
+        Assert.False(item.IsGrouped);
+    }
+
+    [Fact]
+    public void Today_DayDividerText_SaysToday()
+    {
+        var item = new MessageDisplayItem(Msg(1, Alice, DateTime.Today.AddHours(10)), null);
+        Assert.Equal("Today", item.DayDividerText);
+    }
+
+    [Fact]
+    public void Yesterday_DayDividerText_SaysYesterday()
+    {
+        var item = new MessageDisplayItem(Msg(1, Alice, DateTime.Today.AddDays(-1).AddHours(10)), null);
+        Assert.Equal("Yesterday", item.DayDividerText);
+    }
+
+    [Fact]
+    public void OlderDate_DayDividerText_FormatsDate()
+    {
+        var date = new DateTime(2026, 1, 15, 10, 0, 0);
+        var item = new MessageDisplayItem(Msg(1, Alice, date), null);
+        Assert.Contains("January", item.DayDividerText);
+        Assert.Contains("15", item.DayDividerText);
+        Assert.Contains("2026", item.DayDividerText);
+    }
+
+    [Fact]
+    public void SameDay_NoDayDivider()
+    {
+        var ts = DateTime.Today.AddHours(10);
+        var prev = Msg(1, Alice, ts);
+        var curr = Msg(2, Bob, ts.AddHours(1));
+        var item = new MessageDisplayItem(curr, prev);
+        Assert.False(item.ShowDayDivider);
+        Assert.Null(item.DayDividerText);
+    }
+
+    [Fact]
+    public void PassThroughProperties_MatchMessage()
+    {
+        var msg = new Message(42, 1, Alice, "test content", DateTime.UtcNow, 10, "2026-01-01", false, [new Reaction("\ud83d\udc4d", 3, true)], []);
+        var item = new MessageDisplayItem(msg, null);
+        Assert.Equal(42, item.Id);
+        Assert.Equal(Alice, item.Author);
+        Assert.Equal("test content", item.Content);
+        Assert.Equal(10, item.ReplyToId);
+        Assert.Equal("2026-01-01", item.EditedAt);
+        Assert.True(item.IsEdited);
+        Assert.True(item.HasReactions);
+        Assert.Single(item.Reactions);
+    }
+
+    [Fact]
+    public void IsReply_TrueWhenBothIdAndMessageSet()
+    {
+        var reply = Msg(2, Alice, DateTime.Today.AddHours(10), replyTo: 1);
+        var replyTarget = Msg(1, Bob, DateTime.Today.AddHours(9));
+        var item = new MessageDisplayItem(reply, null) { ReplyToMessage = replyTarget };
+        Assert.True(item.IsReply);
+    }
+
+    [Fact]
+    public void IsReply_FalseWhenNoReplyTo()
+    {
+        var item = new MessageDisplayItem(Msg(1, Alice, DateTime.Today.AddHours(10)), null);
+        Assert.False(item.IsReply);
+    }
+
+    [Fact]
+    public void IsReply_FalseWhenReplyToIdButNoMessage()
+    {
+        var reply = Msg(2, Alice, DateTime.Today.AddHours(10), replyTo: 1);
+        var item = new MessageDisplayItem(reply, null);
+        Assert.False(item.IsReply);
+    }
+}
+
+// ── ChannelGroup Tests ──────────────────────────────────────────────────────
+
+public class ChannelGroupTests
+{
+    [Fact]
+    public void HasCategory_TrueWhenSet()
+    {
+        var group = new ChannelGroup { CategoryName = "Text Channels" };
+        Assert.True(group.HasCategory);
+    }
+
+    [Fact]
+    public void HasCategory_FalseWhenNull()
+    {
+        var group = new ChannelGroup { CategoryName = null };
+        Assert.False(group.HasCategory);
+    }
+
+    [Fact]
+    public void DisplayName_UppercaseCategory()
+    {
+        var group = new ChannelGroup { CategoryName = "Text Channels" };
+        Assert.Equal("TEXT CHANNELS", group.DisplayName);
+    }
+
+    [Fact]
+    public void DisplayName_EmptyWhenNoCategory()
+    {
+        var group = new ChannelGroup { CategoryName = null };
+        Assert.Equal(string.Empty, group.DisplayName);
+    }
+
+    [Fact]
+    public void IsExpanded_DefaultsTrue()
+    {
+        var group = new ChannelGroup();
+        Assert.True(group.IsExpanded);
+    }
+
+    [Fact]
+    public void IsExpanded_RaisesPropertyChanged()
+    {
+        var group = new ChannelGroup();
+        string? changed = null;
+        group.PropertyChanged += (_, e) => changed = e.PropertyName;
+        group.IsExpanded = false;
+        Assert.Equal("IsExpanded", changed);
+    }
+
+    [Fact]
+    public void IsExpanded_SameValue_NoEvent()
+    {
+        var group = new ChannelGroup();
+        string? changed = null;
+        group.PropertyChanged += (_, e) => changed = e.PropertyName;
+        group.IsExpanded = true; // same as default
+        Assert.Null(changed);
+    }
+
+    [Fact]
+    public void Items_InitializedEmpty()
+    {
+        var group = new ChannelGroup();
+        Assert.Empty(group.Items);
+    }
+}
+
+// ── ChannelItem Tests ───────────────────────────────────────────────────────
+
+public class ChannelItemTests
+{
+    private static Channel TextChannel => new(1, "general", ChannelType.Text, "Chat", 0, 3, null, "Welcome");
+    private static Channel VoiceChannel => new(2, "Lounge", ChannelType.Voice, "Voice", 1, 0, null);
+
+    [Fact]
+    public void PassThrough_Id() => Assert.Equal(1, new ChannelItem { Channel = TextChannel }.Id);
+
+    [Fact]
+    public void PassThrough_Name() => Assert.Equal("general", new ChannelItem { Channel = TextChannel }.Name);
+
+    [Fact]
+    public void PassThrough_Type() => Assert.Equal(ChannelType.Text, new ChannelItem { Channel = TextChannel }.Type);
+
+    [Fact]
+    public void PassThrough_UnreadCount() => Assert.Equal(3, new ChannelItem { Channel = TextChannel }.UnreadCount);
+
+    [Fact]
+    public void PassThrough_Topic() => Assert.Equal("Welcome", new ChannelItem { Channel = TextChannel }.Topic);
+
+    [Fact]
+    public void VoiceUsers_InitializedEmpty()
+    {
+        var item = new ChannelItem { Channel = VoiceChannel };
+        Assert.Empty(item.VoiceUsers);
+    }
+
+    [Fact]
+    public void VoiceUsers_CanAddState()
+    {
+        var item = new ChannelItem { Channel = VoiceChannel };
+        item.VoiceUsers.Add(new VoiceStateInfo { UserId = 1, ChannelId = 2, Username = "alice" });
+        Assert.Single(item.VoiceUsers);
+    }
+}
+
+// ── MemberGroup Tests ───────────────────────────────────────────────────────
+
+public class MemberGroupTests
+{
+    [Fact]
+    public void Members_InitializedEmpty()
+    {
+        var mg = new MemberGroup();
+        Assert.Empty(mg.Members);
+    }
+
+    [Fact]
+    public void MemberCount_ReflectsCollection()
+    {
+        var mg = new MemberGroup { RoleName = "Admin" };
+        mg.Members.Add(new User(1, "alice", null, 1, UserStatus.Online));
+        mg.Members.Add(new User(2, "bob", null, 1, UserStatus.Online));
+        Assert.Equal(2, mg.MemberCount);
+    }
+
+    [Fact]
+    public void Properties_StoreValues()
+    {
+        var mg = new MemberGroup { RoleName = "Owner", RoleColor = "#e74c3c", Position = 100 };
+        Assert.Equal("Owner", mg.RoleName);
+        Assert.Equal("#e74c3c", mg.RoleColor);
+        Assert.Equal(100, mg.Position);
+    }
+}
+
+// ── VoiceStateInfo Tests ────────────────────────────────────────────────────
+
+public class VoiceStateInfoTests
+{
+    [Fact]
+    public void Muted_RaisesPropertyChanged()
+    {
+        var vs = new VoiceStateInfo { UserId = 1 };
+        string? changed = null;
+        vs.PropertyChanged += (_, e) => changed = e.PropertyName;
+        vs.Muted = true;
+        Assert.Equal("Muted", changed);
+    }
+
+    [Fact]
+    public void Deafened_RaisesPropertyChanged()
+    {
+        var vs = new VoiceStateInfo { UserId = 1 };
+        string? changed = null;
+        vs.PropertyChanged += (_, e) => changed = e.PropertyName;
+        vs.Deafened = true;
+        Assert.Equal("Deafened", changed);
+    }
+
+    [Fact]
+    public void Speaking_RaisesPropertyChanged()
+    {
+        var vs = new VoiceStateInfo { UserId = 1 };
+        string? changed = null;
+        vs.PropertyChanged += (_, e) => changed = e.PropertyName;
+        vs.Speaking = true;
+        Assert.Equal("Speaking", changed);
+    }
+
+    [Fact]
+    public void SameValue_NoEvent()
+    {
+        var vs = new VoiceStateInfo { UserId = 1 };
+        string? changed = null;
+        vs.PropertyChanged += (_, e) => changed = e.PropertyName;
+        vs.Muted = false; // default is false
+        Assert.Null(changed);
+    }
+
+    [Fact]
+    public void ChannelId_IsMutable()
+    {
+        var vs = new VoiceStateInfo { UserId = 1, ChannelId = 10 };
+        vs.ChannelId = 20;
+        Assert.Equal(20, vs.ChannelId);
+    }
+}
+
+// ── Channel Record Tests ────────────────────────────────────────────────────
+
+public class ChannelRecordTests
+{
+    [Fact]
+    public void WithExpression_CreatesNewInstance()
+    {
+        var original = new Channel(1, "general", ChannelType.Text, "Chat", 0, 0, null);
+        var updated = original with { UnreadCount = 5 };
+        Assert.Equal(5, updated.UnreadCount);
+        Assert.Equal(0, original.UnreadCount);
+    }
+
+    [Fact]
+    public void Topic_DefaultsToNull()
+    {
+        var ch = new Channel(1, "general", ChannelType.Text, "Chat", 0, 0, null);
+        Assert.Null(ch.Topic);
+    }
+
+    [Fact]
+    public void ChannelType_EnumValues()
+    {
+        Assert.Equal(ChannelType.Text, new Channel(1, "g", ChannelType.Text, null, 0, 0, null).Type);
+        Assert.Equal(ChannelType.Voice, new Channel(2, "v", ChannelType.Voice, null, 0, 0, null).Type);
+        Assert.Equal(ChannelType.Announcement, new Channel(3, "a", ChannelType.Announcement, null, 0, 0, null).Type);
+    }
+}
+
+// ── User Record Tests ───────────────────────────────────────────────────────
+
+public class UserRecordTests
+{
+    [Fact]
+    public void WithExpression_CreatesNewInstance()
+    {
+        var original = new User(1, "alice", null, 1, UserStatus.Online);
+        var updated = original with { Status = UserStatus.Dnd };
+        Assert.Equal(UserStatus.Dnd, updated.Status);
+        Assert.Equal(UserStatus.Online, original.Status);
+    }
+
+    [Fact]
+    public void UserStatus_AllValues()
+    {
+        Assert.Equal(4, Enum.GetValues<UserStatus>().Length);
+    }
+}
+
+// ── Message Record Tests ────────────────────────────────────────────────────
+
+public class MessageRecordTests
+{
+    [Fact]
+    public void WithExpression_EditedAt()
+    {
+        var msg = new Message(1, 1, new User(1, "alice", null, 1, UserStatus.Online), "hi", DateTime.UtcNow, null, null, false, [], []);
+        var edited = msg with { Content = "edited", EditedAt = "2026-01-01T00:00:00Z" };
+        Assert.Equal("edited", edited.Content);
+        Assert.NotNull(edited.EditedAt);
+        Assert.Null(msg.EditedAt);
+    }
+
+    [Fact]
+    public void WithExpression_Deleted()
+    {
+        var msg = new Message(1, 1, new User(1, "alice", null, 1, UserStatus.Online), "hi", DateTime.UtcNow, null, null, false, [], []);
+        var deleted = msg with { Deleted = true, Content = "[deleted]" };
+        Assert.True(deleted.Deleted);
+        Assert.Equal("[deleted]", deleted.Content);
+        Assert.False(msg.Deleted);
+    }
+
+    [Fact]
+    public void Reactions_EmptyByDefault()
+    {
+        var msg = new Message(1, 1, new User(1, "a", null, 1, UserStatus.Online), "hi", DateTime.UtcNow, null, null, false, [], []);
+        Assert.Empty(msg.Reactions);
+    }
+}
+
+// ── Reaction Record Tests ───────────────────────────────────────────────────
+
+public class ReactionRecordTests
+{
+    [Fact]
+    public void Stores_Values()
+    {
+        var r = new Reaction("👍", 3, true);
+        Assert.Equal("👍", r.Emoji);
+        Assert.Equal(3, r.Count);
+        Assert.True(r.Me);
+    }
+}
diff --git a/Client/OwnCord.Client.Tests/OwnCord.Client.Tests.csproj b/Client/OwnCord.Client.Tests/OwnCord.Client.Tests.csproj
index 56252c0a..d1545866 100644
--- a/Client/OwnCord.Client.Tests/OwnCord.Client.Tests.csproj
+++ b/Client/OwnCord.Client.Tests/OwnCord.Client.Tests.csproj
@@ -7,6 +7,7 @@
 
     <IsPackable>false</IsPackable>
     <IsTestProject>true</IsTestProject>
+    <UseWPF>true</UseWPF>
   </PropertyGroup>
 
   <ItemGroup>
@@ -21,6 +22,10 @@
     <Using Include="Xunit" />
   </ItemGroup>
 
+  <ItemGroup>
+    <FrameworkReference Include="Microsoft.AspNetCore.App" />
+  </ItemGroup>
+
   <ItemGroup>
     <ProjectReference Include="..\OwnCord.Client\OwnCord.Client.csproj" />
   </ItemGroup>
diff --git a/Client/OwnCord.Client.Tests/Services/ApiClientTests.cs b/Client/OwnCord.Client.Tests/Services/ApiClientTests.cs
index 361e374f..46897147 100644
--- a/Client/OwnCord.Client.Tests/Services/ApiClientTests.cs
+++ b/Client/OwnCord.Client.Tests/Services/ApiClientTests.cs
@@ -1,4 +1,5 @@
 using System.Net;
+using System.Net.Http;
 using System.Text.Json;
 using OwnCord.Client.Models;
 using OwnCord.Client.Services;
diff --git a/Client/OwnCord.Client.Tests/Services/ChatServiceTests.cs b/Client/OwnCord.Client.Tests/Services/ChatServiceTests.cs
index c8095466..af8d2de3 100644
--- a/Client/OwnCord.Client.Tests/Services/ChatServiceTests.cs
+++ b/Client/OwnCord.Client.Tests/Services/ChatServiceTests.cs
@@ -49,6 +49,11 @@ public class FakeApiClient : IApiClient
 
     public Task<HealthResponse> HealthCheckAsync(string host, CancellationToken ct)
         => Task.FromResult(HealthResult ?? throw new InvalidOperationException("HealthResult not set"));
+
+    public AuthResponse? VerifyTotpResult { get; set; }
+
+    public Task<AuthResponse> VerifyTotpAsync(string host, string partialToken, string code, CancellationToken ct)
+        => Task.FromResult(VerifyTotpResult ?? throw new InvalidOperationException("VerifyTotpResult not set"));
 }
 
 public class FakeWebSocketService : IWebSocketService
@@ -130,7 +135,7 @@ public class ChatServiceTests
         var result = await svc.LoginAsync("localhost:8443", "alice", "password");
 
         Assert.Equal("tok_abc", result.Token);
-        Assert.Equal("alice", result.User.Username);
+        Assert.Equal("alice", result.User!.Username);
         Assert.Equal("tok_abc", svc.CurrentToken);
         Assert.Equal("alice", svc.CurrentUser?.Username);
         Assert.Equal("localhost:8443", _api.LastLoginHost);
diff --git a/Client/OwnCord.Client.Tests/Services/ChatServiceVoiceTests.cs b/Client/OwnCord.Client.Tests/Services/ChatServiceVoiceTests.cs
new file mode 100644
index 00000000..26d199f4
--- /dev/null
+++ b/Client/OwnCord.Client.Tests/Services/ChatServiceVoiceTests.cs
@@ -0,0 +1,441 @@
+using System.Text.Json;
+using OwnCord.Client.Models;
+using OwnCord.Client.Services;
+
+namespace OwnCord.Client.Tests.Services;
+
+/// <summary>Tests for ChatService voice commands and additional dispatch events.</summary>
+public class ChatServiceVoiceTests
+{
+    private static readonly ApiUser TestUser = new(1, "alice", null, "online", 1, "2026-01-01T00:00:00Z");
+    private static readonly AuthResponse TestAuthResponse = new("tok_abc", TestUser);
+
+    private readonly FakeApiClient _api = new();
+    private readonly FakeWebSocketService _ws = new();
+
+    private ChatService CreateService() => new(_api, _ws);
+
+    private async Task<ChatService> CreateConnectedService()
+    {
+        var svc = CreateService();
+        await svc.ConnectWebSocketAsync("host:8443", "tok");
+        return svc;
+    }
+
+    // ── Voice outbound commands ──────────────────────────────────────────
+
+    [Fact]
+    public async Task JoinVoiceAsync_SendsCorrectEnvelope()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.JoinVoiceAsync(42);
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("voice_join", sent.RootElement.GetProperty("type").GetString());
+        Assert.Equal(42, sent.RootElement.GetProperty("payload").GetProperty("channel_id").GetInt64());
+    }
+
+    [Fact]
+    public async Task LeaveVoiceAsync_SendsCorrectEnvelope()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.LeaveVoiceAsync();
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("voice_leave", sent.RootElement.GetProperty("type").GetString());
+    }
+
+    [Fact]
+    public async Task SendVoiceMuteAsync_SendsCorrectEnvelope()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.SendVoiceMuteAsync(true);
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("voice_mute", sent.RootElement.GetProperty("type").GetString());
+        Assert.True(sent.RootElement.GetProperty("payload").GetProperty("muted").GetBoolean());
+    }
+
+    [Fact]
+    public async Task SendVoiceDeafenAsync_SendsCorrectEnvelope()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.SendVoiceDeafenAsync(true);
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("voice_deafen", sent.RootElement.GetProperty("type").GetString());
+        Assert.True(sent.RootElement.GetProperty("payload").GetProperty("deafened").GetBoolean());
+    }
+
+    [Fact]
+    public async Task SendChannelFocusAsync_SendsCorrectEnvelope()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.SendChannelFocusAsync(7);
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("channel_focus", sent.RootElement.GetProperty("type").GetString());
+        Assert.Equal(7, sent.RootElement.GetProperty("payload").GetProperty("channel_id").GetInt64());
+    }
+
+    // ── Voice inbound events ─────────────────────────────────────────────
+
+    [Fact]
+    public async Task Dispatches_VoiceState_Event()
+    {
+        var svc = await CreateConnectedService();
+        VoiceStatePayload? received = null;
+        svc.VoiceStateReceived += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 1, "channel_id": 5, "username": "alice", "muted": true, "deafened": false } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal(1, received!.UserId);
+        Assert.Equal(5, received.ChannelId);
+        Assert.True(received.Muted);
+        Assert.False(received.Deafened);
+    }
+
+    [Fact]
+    public async Task Dispatches_VoiceLeave_Event()
+    {
+        var svc = await CreateConnectedService();
+        VoiceLeavePayload? received = null;
+        svc.VoiceLeaveReceived += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "voice_leave", "payload": { "user_id": 2, "channel_id": 5 } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal(2, received!.UserId);
+        Assert.Equal(5, received.ChannelId);
+    }
+
+    [Fact]
+    public async Task Dispatches_VoiceConfig_Event()
+    {
+        var svc = await CreateConnectedService();
+        VoiceConfigPayload? received = null;
+        svc.VoiceConfigReceived += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "voice_config", "payload": { "channel_id": 5, "quality": "high", "bitrate": 128000, "mode": "sfu" } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal("high", received!.Quality);
+        Assert.Equal(128000, received.Bitrate);
+    }
+
+    [Fact]
+    public async Task Dispatches_VoiceSpeakers_Event()
+    {
+        var svc = await CreateConnectedService();
+        VoiceSpeakersPayload? received = null;
+        svc.VoiceSpeakersReceived += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "voice_speakers", "payload": { "channel_id": 5, "speakers": [1, 3], "mode": "sfu" } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal(5, received!.ChannelId);
+        Assert.Equal(new long[] { 1, 3 }, received.Speakers);
+    }
+
+    // ── Additional dispatch events ───────────────────────────────────────
+
+    [Fact]
+    public async Task Dispatches_ChatSendOk_Event()
+    {
+        var svc = await CreateConnectedService();
+        ChatSendOkPayload? received = null;
+        svc.ChatSendOk += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "chat_send_ok", "payload": { "message_id": 99, "timestamp": "2026-01-01T00:00:00Z" } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal(99, received!.MessageId);
+    }
+
+    [Fact]
+    public async Task Dispatches_ReactionUpdate_Event()
+    {
+        var svc = await CreateConnectedService();
+        ReactionUpdatePayload? received = null;
+        svc.ReactionUpdated += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "reaction_update", "payload": { "message_id": 10, "channel_id": 1, "emoji": "👍", "user_id": 2, "action": "add" } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal("add", received!.Action);
+        Assert.Equal(10, received.MessageId);
+    }
+
+    [Fact]
+    public async Task Dispatches_ServerRestart_Event()
+    {
+        var svc = await CreateConnectedService();
+        ServerRestartPayload? received = null;
+        svc.ServerRestarting += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "server_restart", "payload": { "reason": "update", "delay_seconds": 30 } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal("update", received!.Reason);
+        Assert.Equal(30, received.DelaySeconds);
+    }
+
+    [Fact]
+    public async Task Dispatches_MemberJoin_Event()
+    {
+        var svc = await CreateConnectedService();
+        WsMember? received = null;
+        svc.MemberJoined += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "member_join", "payload": { "id": 10, "username": "newuser", "avatar": null, "status": "online", "role_id": 1 } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal("newuser", received!.Username);
+    }
+
+    [Fact]
+    public async Task Dispatches_ChannelCreate_Event()
+    {
+        var svc = await CreateConnectedService();
+        ChannelEventPayload? received = null;
+        svc.ChannelCreated += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "channel_create", "payload": { "id": 5, "name": "new-channel", "type": "text", "category": "Chat", "topic": "Hello", "position": 3 } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal("new-channel", received!.Name);
+    }
+
+    [Fact]
+    public async Task Dispatches_ChannelUpdate_Event()
+    {
+        var svc = await CreateConnectedService();
+        ChannelEventPayload? received = null;
+        svc.ChannelUpdated += p => received = p;
+
+        _ws.SimulateMessage("""{ "type": "channel_update", "payload": { "id": 5, "name": "renamed-channel", "type": "text", "category": "Chat", "topic": null, "position": 3 } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal("renamed-channel", received!.Name);
+    }
+
+    [Fact]
+    public async Task Dispatches_ChannelDelete_Event()
+    {
+        var svc = await CreateConnectedService();
+        long? received = null;
+        svc.ChannelDeleted += id => received = id;
+
+        _ws.SimulateMessage("""{ "type": "channel_delete", "payload": { "id": 5 } }""");
+
+        Assert.NotNull(received);
+        Assert.Equal(5, received);
+    }
+
+    // ── TOTP ─────────────────────────────────────────────────────────────
+
+    [Fact]
+    public async Task VerifyTotpAsync_CallsApiAndStoresState()
+    {
+        _api.VerifyTotpResult = TestAuthResponse;
+        var svc = CreateService();
+
+        var result = await svc.VerifyTotpAsync("localhost:8443", "partial_tok", "123456");
+
+        Assert.Equal("tok_abc", result.Token);
+        Assert.Equal("alice", result.User!.Username);
+        Assert.Equal("tok_abc", svc.CurrentToken);
+    }
+
+    // ── Register ─────────────────────────────────────────────────────────
+
+    [Fact]
+    public async Task RegisterAsync_CallsApiAndStoresState()
+    {
+        _api.RegisterResult = TestAuthResponse;
+        var svc = CreateService();
+
+        var result = await svc.RegisterAsync("localhost:8443", "alice", "pass", "invite123");
+
+        Assert.Equal("tok_abc", result.Token);
+        Assert.Equal("alice", svc.CurrentUser?.Username);
+    }
+
+    // ── Edge cases ───────────────────────────────────────────────────────
+
+    [Fact]
+    public async Task MalformedJson_DoesNotThrow()
+    {
+        var svc = await CreateConnectedService();
+
+        var exception = Record.Exception(() => _ws.SimulateMessage("not json at all"));
+
+        Assert.Null(exception);
+    }
+
+    [Fact]
+    public async Task KnownType_NullPayload_DoesNotThrow()
+    {
+        var svc = await CreateConnectedService();
+
+        // A known type like "chat_message" with null payload should not crash
+        var exception = Record.Exception(() =>
+            _ws.SimulateMessage("""{ "type": "chat_message", "payload": null }"""));
+
+        Assert.Null(exception);
+    }
+
+    [Fact]
+    public async Task KnownType_MissingPayload_DoesNotThrow()
+    {
+        var svc = await CreateConnectedService();
+
+        // A known type with no payload key at all
+        var exception = Record.Exception(() =>
+            _ws.SimulateMessage("""{ "type": "chat_message" }"""));
+
+        Assert.Null(exception);
+    }
+
+    [Fact]
+    public async Task DisconnectWebSocketAsync_SetsIntentionalFlag()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.DisconnectWebSocketAsync();
+
+        Assert.True(_ws.DisconnectCalled);
+    }
+
+    [Fact]
+    public async Task VoiceMute_False_SendsCorrectPayload()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.SendVoiceMuteAsync(false);
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.False(sent.RootElement.GetProperty("payload").GetProperty("muted").GetBoolean());
+    }
+
+    // ── Edit / Delete message outbound commands ──────────────────────────
+
+    [Fact]
+    public async Task EditMessageAsync_SendsCorrectType()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.EditMessageAsync(77, "updated content");
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("chat_edit", sent.RootElement.GetProperty("type").GetString());
+    }
+
+    [Fact]
+    public async Task EditMessageAsync_SendsCorrectMessageId()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.EditMessageAsync(77, "updated content");
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal(77, sent.RootElement.GetProperty("payload").GetProperty("message_id").GetInt64());
+    }
+
+    [Fact]
+    public async Task EditMessageAsync_SendsCorrectContent()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.EditMessageAsync(77, "updated content");
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("updated content", sent.RootElement.GetProperty("payload").GetProperty("content").GetString());
+    }
+
+    [Fact]
+    public async Task EditMessageAsync_IncludesNonEmptyId()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.EditMessageAsync(77, "updated content");
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        var id = sent.RootElement.GetProperty("id").GetString();
+        Assert.NotNull(id);
+        Assert.NotEmpty(id);
+    }
+
+    [Fact]
+    public async Task DeleteMessageAsync_SendsCorrectType()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.DeleteMessageAsync(55);
+
+        Assert.Single(_ws.SentMessages);
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal("chat_delete", sent.RootElement.GetProperty("type").GetString());
+    }
+
+    [Fact]
+    public async Task DeleteMessageAsync_SendsCorrectMessageId()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.DeleteMessageAsync(55);
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        Assert.Equal(55, sent.RootElement.GetProperty("payload").GetProperty("message_id").GetInt64());
+    }
+
+    [Fact]
+    public async Task DeleteMessageAsync_IncludesNonEmptyId()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.DeleteMessageAsync(55);
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        var id = sent.RootElement.GetProperty("id").GetString();
+        Assert.NotNull(id);
+        Assert.NotEmpty(id);
+    }
+
+    [Fact]
+    public async Task EditMessageAsync_EachCallProducesUniqueId()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.EditMessageAsync(1, "first");
+        await svc.EditMessageAsync(2, "second");
+
+        var id1 = JsonDocument.Parse(_ws.SentMessages[0]).RootElement.GetProperty("id").GetString();
+        var id2 = JsonDocument.Parse(_ws.SentMessages[1]).RootElement.GetProperty("id").GetString();
+        Assert.NotEqual(id1, id2);
+    }
+
+    [Fact]
+    public async Task DeleteMessageAsync_DoesNotIncludeContentField()
+    {
+        var svc = await CreateConnectedService();
+
+        await svc.DeleteMessageAsync(55);
+
+        var sent = JsonDocument.Parse(_ws.SentMessages[0]);
+        var payload = sent.RootElement.GetProperty("payload");
+        Assert.False(payload.TryGetProperty("content", out _));
+    }
+}
diff --git a/Client/OwnCord.Client.Tests/Services/MessageContentParserTests.cs b/Client/OwnCord.Client.Tests/Services/MessageContentParserTests.cs
new file mode 100644
index 00000000..c95dd3ff
--- /dev/null
+++ b/Client/OwnCord.Client.Tests/Services/MessageContentParserTests.cs
@@ -0,0 +1,521 @@
+using OwnCord.Client.Services;
+using static OwnCord.Client.Services.MessageContentParser;
+
+namespace OwnCord.Client.Tests.Services;
+
+public class MessageContentParserTests
+{
+    // ── Helpers ───────────────────────────────────────────────────────────────
+
+    private static ContentSegment Text(string text) =>
+        new(SegmentType.Text, text);
+
+    private static ContentSegment Code(string text, string? lang = null) =>
+        new(SegmentType.CodeBlock, text, lang);
+
+    private static ContentSegment Inline(string text) =>
+        new(SegmentType.InlineCode, text);
+
+    private static ContentSegment Bold(string text) =>
+        new(SegmentType.Bold, text);
+
+    private static ContentSegment Italic(string text) =>
+        new(SegmentType.Italic, text);
+
+    // ── 1. Plain text → single Text segment ──────────────────────────────────
+
+    [Fact]
+    public void Parse_PlainText_ReturnsSingleTextSegment()
+    {
+        var result = Parse("Hello, world!");
+
+        Assert.Single(result);
+        Assert.Equal(Text("Hello, world!"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_PlainTextWithSpaces_PreservesWhitespace()
+    {
+        var result = Parse("  spaces   around  ");
+
+        Assert.Single(result);
+        Assert.Equal(Text("  spaces   around  "), result[0]);
+    }
+
+    // ── 2. Empty string → empty list ─────────────────────────────────────────
+
+    [Fact]
+    public void Parse_EmptyString_ReturnsEmptyList()
+    {
+        var result = Parse(string.Empty);
+
+        Assert.Empty(result);
+    }
+
+    [Fact]
+    public void Parse_NullString_ReturnsEmptyList()
+    {
+        var result = Parse(null!);
+
+        Assert.Empty(result);
+    }
+
+    // ── 3. Code block with language ───────────────────────────────────────────
+
+    [Fact]
+    public void Parse_CodeBlockWithLanguage_ReturnsCodeBlockSegmentWithLanguage()
+    {
+        var result = Parse("```csharp\nvar x = 1;\n```");
+
+        Assert.Single(result);
+        var seg = result[0];
+        Assert.Equal(SegmentType.CodeBlock, seg.Type);
+        Assert.Equal("var x = 1;\n", seg.Text);
+        Assert.Equal("csharp", seg.Language);
+    }
+
+    [Fact]
+    public void Parse_CodeBlockWithLanguage_CapturesMultilineCode()
+    {
+        var input = "```go\nfunc main() {\n    fmt.Println(\"hello\")\n}\n```";
+
+        var result = Parse(input);
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        Assert.Equal("go", result[0].Language);
+        Assert.Contains("func main()", result[0].Text);
+    }
+
+    // ── 4. Code block without language ───────────────────────────────────────
+
+    [Fact]
+    public void Parse_CodeBlockWithoutLanguage_ReturnsNullLanguage()
+    {
+        var result = Parse("```\nsome code\n```");
+
+        Assert.Single(result);
+        var seg = result[0];
+        Assert.Equal(SegmentType.CodeBlock, seg.Type);
+        Assert.Null(seg.Language);
+        Assert.Equal("some code\n", seg.Text);
+    }
+
+    [Fact]
+    public void Parse_CodeBlockWithoutLanguageNoNewline_ReturnsNullLanguage()
+    {
+        // Regex allows optional newline after language: ```(\w*)\n?
+        var result = Parse("```some code```");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        // "some" would be captured as language since it matches \w+
+        // "some" is captured by group 1 (\w*), space breaks \w so "some" is language
+        Assert.Equal("some", result[0].Language);
+    }
+
+    // ── 5. Inline code ────────────────────────────────────────────────────────
+
+    [Fact]
+    public void Parse_InlineCode_ReturnsInlineCodeSegment()
+    {
+        var result = Parse("`var x = 1`");
+
+        Assert.Single(result);
+        Assert.Equal(Inline("var x = 1"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_InlineCode_CapturedTextExcludesBackticks()
+    {
+        var result = Parse("`hello`");
+
+        Assert.Single(result);
+        Assert.Equal("hello", result[0].Text);
+        Assert.Equal(SegmentType.InlineCode, result[0].Type);
+        Assert.Null(result[0].Language);
+    }
+
+    // ── 6. Bold text ─────────────────────────────────────────────────────────
+
+    [Fact]
+    public void Parse_BoldText_ReturnsBoldSegment()
+    {
+        var result = Parse("**bold text**");
+
+        Assert.Single(result);
+        Assert.Equal(Bold("bold text"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_BoldText_CapturedTextExcludesAsterisks()
+    {
+        var result = Parse("**important**");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Bold, result[0].Type);
+        Assert.Equal("important", result[0].Text);
+    }
+
+    // ── 7. Italic text ────────────────────────────────────────────────────────
+
+    [Fact]
+    public void Parse_ItalicText_ReturnsItalicSegment()
+    {
+        var result = Parse("*italic text*");
+
+        Assert.Single(result);
+        Assert.Equal(Italic("italic text"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_ItalicText_CapturedTextExcludesAsterisks()
+    {
+        var result = Parse("*emphasis*");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Italic, result[0].Type);
+        Assert.Equal("emphasis", result[0].Text);
+    }
+
+    // ── 8. Mixed: "Hello `code` world" ───────────────────────────────────────
+
+    [Fact]
+    public void Parse_TextInlineCodeText_ReturnsThreeSegments()
+    {
+        var result = Parse("Hello `code` world");
+
+        Assert.Equal(3, result.Count);
+        Assert.Equal(Text("Hello "), result[0]);
+        Assert.Equal(Inline("code"), result[1]);
+        Assert.Equal(Text(" world"), result[2]);
+    }
+
+    [Fact]
+    public void Parse_InlineCodeAtStart_ReturnsInlineCodeThenText()
+    {
+        var result = Parse("`start` and more");
+
+        Assert.Equal(2, result.Count);
+        Assert.Equal(Inline("start"), result[0]);
+        Assert.Equal(Text(" and more"), result[1]);
+    }
+
+    [Fact]
+    public void Parse_InlineCodeAtEnd_ReturnsTextThenInlineCode()
+    {
+        var result = Parse("prefix `end`");
+
+        Assert.Equal(2, result.Count);
+        Assert.Equal(Text("prefix "), result[0]);
+        Assert.Equal(Inline("end"), result[1]);
+    }
+
+    // ── 9. Code block with surrounding text ──────────────────────────────────
+
+    [Fact]
+    public void Parse_TextCodeBlockText_ReturnsThreeSegments()
+    {
+        var input = "Before:\n```python\nprint(\"hi\")\n```\nAfter";
+
+        var result = Parse(input);
+
+        Assert.Equal(3, result.Count);
+        Assert.Equal(SegmentType.Text, result[0].Type);
+        Assert.Equal("Before:\n", result[0].Text);
+        Assert.Equal(SegmentType.CodeBlock, result[1].Type);
+        Assert.Equal("python", result[1].Language);
+        Assert.Equal(SegmentType.Text, result[2].Type);
+        Assert.Equal("\nAfter", result[2].Text);
+    }
+
+    [Fact]
+    public void Parse_CodeBlockAtStart_ReturnsCodeBlockThenText()
+    {
+        var input = "```js\nconsole.log(1)\n```\nDone.";
+
+        var result = Parse(input);
+
+        Assert.Equal(2, result.Count);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        Assert.Equal("js", result[0].Language);
+        Assert.Equal(SegmentType.Text, result[1].Type);
+        Assert.Equal("\nDone.", result[1].Text);
+    }
+
+    // ── 10. Multiple inline codes in one message ──────────────────────────────
+
+    [Fact]
+    public void Parse_MultipleInlineCodes_AllCaptured()
+    {
+        var result = Parse("`foo` and `bar` and `baz`");
+
+        Assert.Equal(5, result.Count);
+        Assert.Equal(Inline("foo"), result[0]);
+        Assert.Equal(Text(" and "), result[1]);
+        Assert.Equal(Inline("bar"), result[2]);
+        Assert.Equal(Text(" and "), result[3]);
+        Assert.Equal(Inline("baz"), result[4]);
+    }
+
+    [Fact]
+    public void Parse_TwoAdjacentInlineCodes_BothCaptured()
+    {
+        var result = Parse("`a``b`");
+
+        // `a` matches, then `` ` `` (empty) is skipped (regex requires [^`\n]+),
+        // then `b` matches: result is [Inline("a"), Inline("b")]
+        Assert.Equal(2, result.Count);
+        Assert.Equal(Inline("a"), result[0]);
+        Assert.Equal(Inline("b"), result[1]);
+    }
+
+    // ── 11. Bold and italic mixed ─────────────────────────────────────────────
+
+    [Fact]
+    public void Parse_BoldAndItalic_BothSegmentsPresent()
+    {
+        var result = Parse("**bold** and *italic*");
+
+        Assert.Equal(3, result.Count);
+        Assert.Equal(Bold("bold"), result[0]);
+        Assert.Equal(Text(" and "), result[1]);
+        Assert.Equal(Italic("italic"), result[2]);
+    }
+
+    [Fact]
+    public void Parse_ItalicThenBold_BothSegmentsPresent()
+    {
+        var result = Parse("*em* then **strong**");
+
+        Assert.Equal(3, result.Count);
+        Assert.Equal(SegmentType.Italic, result[0].Type);
+        Assert.Equal("em", result[0].Text);
+        Assert.Equal(Text(" then "), result[1]);
+        Assert.Equal(Bold("strong"), result[2]);
+    }
+
+    // ── 12. Bold containing text (no nesting) ────────────────────────────────
+
+    [Fact]
+    public void Parse_BoldSpan_InnerTextIsPreservedVerbatim()
+    {
+        // The parser does NOT recurse into bold/italic — inner text is raw.
+        var result = Parse("**hello world**");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Bold, result[0].Type);
+        Assert.Equal("hello world", result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_BoldContainingAsterisk_MatchesInnerContent()
+    {
+        // Bold uses .+? so it stops at the first **
+        var result = Parse("**a * b**");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Bold, result[0].Type);
+        Assert.Equal("a * b", result[0].Text);
+    }
+
+    // ── 13. Unclosed backtick → plain text ───────────────────────────────────
+
+    [Fact]
+    public void Parse_UnclosedInlineBacktick_TreatedAsPlainText()
+    {
+        // InlineCode regex requires a closing backtick on the same line
+        var result = Parse("hello `world");
+
+        Assert.Single(result);
+        Assert.Equal(Text("hello `world"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_BacktickWithNewlineInside_TreatedAsPlainText()
+    {
+        // [^`\n]+ excludes newlines, so a backtick spanning lines cannot match
+        var result = Parse("`line1\nline2`");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Text, result[0].Type);
+        Assert.Equal("`line1\nline2`", result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_OnlyOpeningBacktick_TreatedAsPlainText()
+    {
+        var result = Parse("`");
+
+        Assert.Single(result);
+        Assert.Equal(Text("`"), result[0]);
+    }
+
+    // ── 14. Empty code block ──────────────────────────────────────────────────
+
+    [Fact]
+    public void Parse_EmptyCodeBlockNoLanguage_CodeBlockWithEmptyText()
+    {
+        // ```(\w*)\n?([\s\S]*?)``` — lazy *? can match empty string
+        var result = Parse("``````");
+
+        // ``` `` ``` — three backticks open, zero chars, three backticks close
+        Assert.Single(result);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        Assert.Equal(string.Empty, result[0].Text);
+        Assert.Null(result[0].Language);
+    }
+
+    [Fact]
+    public void Parse_CodeBlockWithOnlyNewline_CodeBlockWithNewlineText()
+    {
+        var result = Parse("```\n\n```");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        // The optional \n? consumes the first newline; second \n is part of the code
+        Assert.Equal("\n", result[0].Text);
+        Assert.Null(result[0].Language);
+    }
+
+    // ── 15. Code block with special characters ────────────────────────────────
+
+    [Fact]
+    public void Parse_CodeBlockWithSpecialChars_PreservesContent()
+    {
+        var code = "x < 10 && y > 5 || z == 0;\n<script>alert('xss')</script>\n";
+        var input = $"```\n{code}```";
+
+        var result = Parse(input);
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        Assert.Equal(code, result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_CodeBlockWithUnicode_PreservesContent()
+    {
+        var input = "```\n日本語テスト 🎉\n```";
+
+        var result = Parse(input);
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.CodeBlock, result[0].Type);
+        Assert.Contains("日本語テスト", result[0].Text);
+        Assert.Contains("🎉", result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_CodeBlockWithSqlChars_PreservesContent()
+    {
+        var input = "```sql\nSELECT * FROM users WHERE id = '1' OR '1'='1';\n```";
+
+        var result = Parse(input);
+
+        Assert.Single(result);
+        Assert.Equal("sql", result[0].Language);
+        Assert.Contains("SELECT * FROM users", result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_InlineCodeWithSpecialChars_PreservesContent()
+    {
+        var result = Parse("`x < y && z > 0`");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.InlineCode, result[0].Type);
+        Assert.Equal("x < y && z > 0", result[0].Text);
+    }
+
+    // ── Boundary / additional edge cases ─────────────────────────────────────
+
+    [Fact]
+    public void Parse_BoldWithNoSurroundingText_NoBoundaryTextSegments()
+    {
+        var result = Parse("**only bold**");
+
+        Assert.Single(result);
+        Assert.Equal(Bold("only bold"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_ItalicWithNoSurroundingText_NoBoundaryTextSegments()
+    {
+        var result = Parse("*only italic*");
+
+        Assert.Single(result);
+        Assert.Equal(Italic("only italic"), result[0]);
+    }
+
+    [Fact]
+    public void Parse_DoubleAsterisksAreNotItalic()
+    {
+        // ** is consumed by bold regex; the italic lookahead (?<!\*)\*(?!\*)
+        // prevents ** from matching italic
+        var result = Parse("**bold**");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Bold, result[0].Type);
+    }
+
+    [Fact]
+    public void Parse_MultipleCodeBlocks_AllCapturedInOrder()
+    {
+        var input = "```\nfirst\n``` middle ```\nsecond\n```";
+
+        var result = Parse(input);
+
+        // Two code blocks with text between them
+        var codeBlocks = result.Where(s => s.Type == SegmentType.CodeBlock).ToList();
+        Assert.Equal(2, codeBlocks.Count);
+        Assert.Contains("first", codeBlocks[0].Text);
+        Assert.Contains("second", codeBlocks[1].Text);
+    }
+
+    [Fact]
+    public void Parse_WhitespaceOnlyString_ReturnsSingleTextSegment()
+    {
+        // string.IsNullOrEmpty("   ") is false, so whitespace-only goes through parsing
+        // No formatting marks → AddTextSegment adds it as Text
+        var result = Parse("   ");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.Text, result[0].Type);
+        Assert.Equal("   ", result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_InlineCodeInsideTextWithBold_InlineCodeTakesPrecedence()
+    {
+        // Inline code is processed before bold/italic, so **...**  inside inline code
+        // is NOT parsed as bold — it's raw code content.
+        var result = Parse("`**not bold**`");
+
+        Assert.Single(result);
+        Assert.Equal(SegmentType.InlineCode, result[0].Type);
+        Assert.Equal("**not bold**", result[0].Text);
+    }
+
+    [Fact]
+    public void Parse_SegmentTypesAreNeverNull()
+    {
+        var inputs = new[]
+        {
+            "plain text",
+            "**bold**",
+            "*italic*",
+            "`code`",
+            "```\nblock\n```",
+            "mix **bold** and `code`",
+        };
+
+        foreach (var input in inputs)
+        {
+            var result = Parse(input);
+            Assert.All(result, seg => Assert.True(
+                Enum.IsDefined(typeof(SegmentType), seg.Type),
+                $"Invalid segment type in: {input}"));
+        }
+    }
+}
diff --git a/Client/OwnCord.Client.Tests/ViewModels/ConnectViewModelTests.cs b/Client/OwnCord.Client.Tests/ViewModels/ConnectViewModelTests.cs
index 035854a1..f9ed1f67 100644
--- a/Client/OwnCord.Client.Tests/ViewModels/ConnectViewModelTests.cs
+++ b/Client/OwnCord.Client.Tests/ViewModels/ConnectViewModelTests.cs
@@ -6,8 +6,8 @@ namespace OwnCord.Client.Tests.ViewModels;
 
 public sealed class ConnectViewModelTests
 {
-    private static ConnectViewModel MakeVm(IProfileService? svc = null, ICredentialService? creds = null)
-        => new(svc ?? new FakeProfileService(), creds ?? new FakeCredentialService());
+    private static ConnectViewModel MakeVm(IProfileService? svc = null, ICredentialService? creds = null, IApiClient? api = null)
+        => new(svc ?? new FakeProfileService(), creds ?? new FakeCredentialService(), api ?? new StubApiClient());
 
     [Fact]
     public void DefaultMode_IsLogin()
@@ -251,6 +251,33 @@ internal sealed class FakeCredentialService : ICredentialService
     public void DeletePassword(string host, string username) => _passwords.Remove(Key(host, username));
 }
 
+internal sealed class StubApiClient : IApiClient
+{
+    public HealthResponse? HealthResult { get; set; } = new("ok", "1.0.0");
+    public bool HealthThrows { get; set; }
+
+    public Task<AuthResponse> LoginAsync(string host, string username, string password, CancellationToken ct = default)
+        => throw new NotImplementedException();
+    public Task<AuthResponse> RegisterAsync(string host, string username, string password, string inviteCode, CancellationToken ct = default)
+        => throw new NotImplementedException();
+    public Task LogoutAsync(string host, string token, CancellationToken ct = default)
+        => throw new NotImplementedException();
+    public Task<ApiUser> GetMeAsync(string host, string token, CancellationToken ct = default)
+        => throw new NotImplementedException();
+    public Task<IReadOnlyList<ApiChannel>> GetChannelsAsync(string host, string token, CancellationToken ct = default)
+        => throw new NotImplementedException();
+    public Task<MessagesResponse> GetMessagesAsync(string host, string token, long channelId, int limit = 50, long? before = null, CancellationToken ct = default)
+        => throw new NotImplementedException();
+    public Task<AuthResponse> VerifyTotpAsync(string host, string partialToken, string code, CancellationToken ct = default)
+        => throw new NotImplementedException();
+
+    public Task<HealthResponse> HealthCheckAsync(string host, CancellationToken ct = default)
+    {
+        if (HealthThrows) throw new Exception("Connection refused");
+        return Task.FromResult(HealthResult ?? new HealthResponse("ok", "1.0.0"));
+    }
+}
+
 internal sealed class FakeProfileService : IProfileService
 {
     public List<ServerProfile> Saved = [];
diff --git a/Client/OwnCord.Client.Tests/ViewModels/MainViewModelTests.cs b/Client/OwnCord.Client.Tests/ViewModels/MainViewModelTests.cs
index 286cf9f1..6f51fecf 100644
--- a/Client/OwnCord.Client.Tests/ViewModels/MainViewModelTests.cs
+++ b/Client/OwnCord.Client.Tests/ViewModels/MainViewModelTests.cs
@@ -26,7 +26,7 @@ public sealed class MainViewModelTests
         => new(id, name, null, 4, UserStatus.Online);
 
     private static Message MakeMessage(long id, long channelId, string content)
-        => new(id, channelId, MakeUser(1, "alice"), content, DateTime.UtcNow, null, null, false, []);
+        => new(id, channelId, MakeUser(1, "alice"), content, DateTime.UtcNow, null, null, false, [], []);
 
     [Fact]
     public void SendCommand_DisabledWhenInputEmpty()
diff --git a/Client/OwnCord.Client.Tests/ViewModels/MainViewModelVoiceTests.cs b/Client/OwnCord.Client.Tests/ViewModels/MainViewModelVoiceTests.cs
new file mode 100644
index 00000000..7bbc35df
--- /dev/null
+++ b/Client/OwnCord.Client.Tests/ViewModels/MainViewModelVoiceTests.cs
@@ -0,0 +1,549 @@
+using OwnCord.Client.Models;
+using OwnCord.Client.Services;
+using OwnCord.Client.Tests.Services;
+using OwnCord.Client.ViewModels;
+
+namespace OwnCord.Client.Tests.ViewModels;
+
+/// <summary>Tests for MainViewModel voice events, channel CRUD, member events, and grouping.</summary>
+public sealed class MainViewModelVoiceTests
+{
+    private static readonly ApiUser TestUser = new(1, "alice", null, "online", 1, "2026-01-01T00:00:00Z");
+    private static readonly AuthResponse TestAuth = new("tok_abc", TestUser);
+
+    private static MainViewModel MakeVmWithChat(out FakeApiClient api, out FakeWebSocketService ws)
+    {
+        api = new FakeApiClient();
+        ws = new FakeWebSocketService();
+        var chat = new ChatService(api, ws);
+        var vm = new MainViewModel();
+        vm.Initialize(chat);
+        return vm;
+    }
+
+    private static async Task<(MainViewModel vm, FakeApiClient api, FakeWebSocketService ws)> MakeLoggedInVm()
+    {
+        var api = new FakeApiClient { LoginResult = TestAuth };
+        var ws = new FakeWebSocketService();
+        var chat = new ChatService(api, ws);
+        var vm = new MainViewModel();
+        vm.Initialize(chat);
+        await chat.LoginAsync("host:8443", "alice", "pass");
+        await chat.ConnectWebSocketAsync("host:8443", "tok_abc");
+        return (vm, api, ws);
+    }
+
+    private static Channel MakeChannel(long id, string name, ChannelType type = ChannelType.Text, string? category = null, int position = 0)
+        => new(id, name, type, category, position, 0, null);
+
+    private static User MakeUser(long id, string name, long roleId = 1)
+        => new(id, name, null, roleId, UserStatus.Online);
+
+    private static Message MakeMessage(long id, long channelId, string content, long authorId = 1, string authorName = "alice")
+        => new(id, channelId, MakeUser(authorId, authorName), content, DateTime.UtcNow, null, null, false, [], []);
+
+    private static string ReadyJson(string channels = "[]", string members = "[]", string voiceStates = "[]", string roles = "[]")
+        => $@"{{ ""type"": ""ready"", ""payload"": {{ ""channels"": {channels}, ""members"": {members}, ""voice_states"": {voiceStates}, ""roles"": {roles} }} }}";
+
+    // ── Voice state event ────────────────────────────────────────────────
+
+    [Fact]
+    public void VoiceState_AddsNewVoiceUser()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(5, "voice-room", ChannelType.Voice)]);
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 5, "username": "bob", "muted": false, "deafened": false } }""");
+
+        Assert.Single(vm.VoiceStates);
+        Assert.Equal("bob", vm.VoiceStates[0].Username);
+        Assert.Equal(5, vm.VoiceStates[0].ChannelId);
+    }
+
+    [Fact]
+    public void VoiceState_UpdatesExistingUser()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(5, "voice-room", ChannelType.Voice)]);
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 5, "username": "bob", "muted": false, "deafened": false } }""");
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 5, "username": "bob", "muted": true, "deafened": false } }""");
+
+        Assert.Single(vm.VoiceStates);
+        Assert.True(vm.VoiceStates[0].Muted);
+    }
+
+    [Fact]
+    public async Task VoiceState_LocalUser_SetsVoiceWidgetState()
+    {
+        var (vm, _, ws) = await MakeLoggedInVm();
+
+        // Fire ready to populate channels and set CurrentUser on ChatService
+        ws.SimulateMessage(ReadyJson(
+            channels: @"[{ ""id"": 5, ""name"": ""voice-room"", ""type"": ""voice"", ""category"": ""Voice"", ""topic"": """", ""position"": 0, ""slow_mode"": 0, ""archived"": false, ""created_at"": ""2026-01-01T00:00:00Z"" }]",
+            members: @"[{ ""id"": 1, ""username"": ""alice"", ""avatar"": null, ""status"": ""online"", ""role_id"": 1 }]"
+        ));
+
+        // Simulate local user (id=1) joining voice
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 1, "channel_id": 5, "username": "alice", "muted": false, "deafened": false } }""");
+
+        Assert.True(vm.IsInVoice);
+        Assert.Equal("voice-room", vm.VoiceChannelName);
+        Assert.False(vm.IsMuted);
+    }
+
+    // ── Voice leave event ────────────────────────────────────────────────
+
+    [Fact]
+    public void VoiceLeave_RemovesVoiceUser()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 5, "username": "bob", "muted": false, "deafened": false } }""");
+        Assert.Single(vm.VoiceStates);
+
+        ws.SimulateMessage("""{ "type": "voice_leave", "payload": { "user_id": 2, "channel_id": 5 } }""");
+        Assert.Empty(vm.VoiceStates);
+    }
+
+    [Fact]
+    public async Task VoiceLeave_LocalUser_ClearsVoiceWidget()
+    {
+        var (vm, _, ws) = await MakeLoggedInVm();
+
+        ws.SimulateMessage(ReadyJson(
+            channels: @"[{ ""id"": 5, ""name"": ""voice-room"", ""type"": ""voice"", ""category"": null, ""topic"": """", ""position"": 0, ""slow_mode"": 0, ""archived"": false, ""created_at"": ""2026-01-01T00:00:00Z"" }]",
+            members: @"[{ ""id"": 1, ""username"": ""alice"", ""avatar"": null, ""status"": ""online"", ""role_id"": 1 }]"
+        ));
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 1, "channel_id": 5, "username": "alice", "muted": false, "deafened": false } }""");
+        Assert.True(vm.IsInVoice);
+
+        ws.SimulateMessage("""{ "type": "voice_leave", "payload": { "user_id": 1, "channel_id": 5 } }""");
+        Assert.False(vm.IsInVoice);
+        Assert.Null(vm.VoiceChannelName);
+        Assert.False(vm.IsMuted);
+        Assert.False(vm.IsDeafened);
+    }
+
+    // ── Voice speakers event ─────────────────────────────────────────────
+
+    [Fact]
+    public void VoiceSpeakers_UpdatesSpeakingState()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 5, "username": "bob", "muted": false, "deafened": false } }""");
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 3, "channel_id": 5, "username": "carol", "muted": false, "deafened": false } }""");
+
+        ws.SimulateMessage("""{ "type": "voice_speakers", "payload": { "channel_id": 5, "speakers": [2], "mode": "sfu" } }""");
+
+        var bob = vm.VoiceStates.First(vs => vs.UserId == 2);
+        var carol = vm.VoiceStates.First(vs => vs.UserId == 3);
+        Assert.True(bob.Speaking);
+        Assert.False(carol.Speaking);
+    }
+
+    // ── Channel CRUD events ──────────────────────────────────────────────
+
+    [Fact]
+    public void ChannelCreated_AddsNewChannel()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general")]);
+
+        ws.SimulateMessage("""{ "type": "channel_create", "payload": { "id": 2, "name": "random", "type": "text", "category": "Chat", "topic": null, "position": 1 } }""");
+
+        Assert.Equal(2, vm.Channels.Count);
+        Assert.Contains(vm.Channels, c => c.Name == "random");
+    }
+
+    [Fact]
+    public void ChannelCreated_DuplicateId_DoesNotAdd()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general")]);
+
+        ws.SimulateMessage("""{ "type": "channel_create", "payload": { "id": 1, "name": "general-dup", "type": "text", "category": null, "topic": null, "position": 0 } }""");
+
+        Assert.Single(vm.Channels);
+    }
+
+    [Fact]
+    public void ChannelUpdated_UpdatesExistingChannel()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general")]);
+
+        ws.SimulateMessage("""{ "type": "channel_update", "payload": { "id": 1, "name": "general-renamed", "type": "text", "category": "Chat", "topic": "New topic", "position": 0 } }""");
+
+        Assert.Equal("general-renamed", vm.Channels[0].Name);
+        Assert.Equal("New topic", vm.Channels[0].Topic);
+    }
+
+    [Fact]
+    public void ChannelUpdated_SelectedChannel_NotifiesTopicChanged()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general")]);
+        vm.SelectedChannel = vm.Channels[0];
+
+        bool topicNotified = false;
+        vm.PropertyChanged += (_, e) =>
+        {
+            if (e.PropertyName == nameof(vm.SelectedChannelTopic))
+                topicNotified = true;
+        };
+
+        ws.SimulateMessage("""{ "type": "channel_update", "payload": { "id": 1, "name": "general", "type": "text", "category": null, "topic": "Updated!", "position": 0 } }""");
+
+        Assert.True(topicNotified);
+        // The channel in Channels collection has the updated topic
+        Assert.Equal("Updated!", vm.Channels[0].Topic);
+    }
+
+    [Fact]
+    public void ChannelDeleted_RemovesChannel()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general"), MakeChannel(2, "random")]);
+
+        ws.SimulateMessage("""{ "type": "channel_delete", "payload": { "id": 2 } }""");
+
+        Assert.Single(vm.Channels);
+        Assert.Equal("general", vm.Channels[0].Name);
+    }
+
+    [Fact]
+    public void ChannelDeleted_SelectedChannel_SelectsAnother()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general"), MakeChannel(2, "random")]);
+        vm.SelectedChannel = vm.Channels.First(c => c.Id == 2);
+
+        ws.SimulateMessage("""{ "type": "channel_delete", "payload": { "id": 2 } }""");
+
+        Assert.NotNull(vm.SelectedChannel);
+        Assert.Equal(1, vm.SelectedChannel!.Id);
+    }
+
+    // ── Member events ────────────────────────────────────────────────────
+
+    [Fact]
+    public void MemberJoined_AddsNewMember()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadMembers([MakeUser(1, "alice")]);
+
+        ws.SimulateMessage("""{ "type": "member_join", "payload": { "id": 10, "username": "newuser", "avatar": null, "status": "online", "role_id": 1 } }""");
+
+        Assert.Equal(2, vm.Members.Count);
+        Assert.Contains(vm.Members, m => m.Username == "newuser");
+    }
+
+    [Fact]
+    public void MemberJoined_DuplicateId_DoesNotAdd()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadMembers([MakeUser(1, "alice")]);
+
+        ws.SimulateMessage("""{ "type": "member_join", "payload": { "id": 1, "username": "alice-dup", "avatar": null, "status": "online", "role_id": 1 } }""");
+
+        Assert.Single(vm.Members);
+    }
+
+    [Fact]
+    public void Presence_UpdatesMemberStatus()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadMembers([MakeUser(1, "alice")]);
+
+        ws.SimulateMessage("""{ "type": "presence", "payload": { "user_id": 1, "status": "idle" } }""");
+
+        Assert.Equal(UserStatus.Idle, vm.Members[0].Status);
+    }
+
+    // ── Channel grouping ─────────────────────────────────────────────────
+
+    [Fact]
+    public void ChannelGroups_GroupedByCategory()
+    {
+        var vm = new MainViewModel();
+        vm.LoadChannels([
+            MakeChannel(1, "general", ChannelType.Text, "Chat", 0),
+            MakeChannel(2, "random", ChannelType.Text, "Chat", 1),
+            MakeChannel(3, "voice", ChannelType.Voice, "Voice", 0),
+        ]);
+
+        Assert.Equal(2, vm.ChannelGroups.Count);
+        Assert.Contains(vm.ChannelGroups, g => g.CategoryName == "Chat" && g.Items.Count == 2);
+        Assert.Contains(vm.ChannelGroups, g => g.CategoryName == "Voice" && g.Items.Count == 1);
+    }
+
+    [Fact]
+    public void ChannelGroups_PreservesExpandedState()
+    {
+        var vm = new MainViewModel();
+        vm.LoadChannels([
+            MakeChannel(1, "general", ChannelType.Text, "Chat", 0),
+            MakeChannel(2, "voice", ChannelType.Voice, "Voice", 0),
+        ]);
+
+        // Collapse the Chat group
+        var chatGroup = vm.ChannelGroups.First(g => g.CategoryName == "Chat");
+        chatGroup.IsExpanded = false;
+
+        // Reload channels — should preserve collapsed state
+        vm.LoadChannels([
+            MakeChannel(1, "general", ChannelType.Text, "Chat", 0),
+            MakeChannel(2, "voice", ChannelType.Voice, "Voice", 0),
+            MakeChannel(3, "random", ChannelType.Text, "Chat", 1),
+        ]);
+
+        var chatGroupAfter = vm.ChannelGroups.First(g => g.CategoryName == "Chat");
+        Assert.False(chatGroupAfter.IsExpanded);
+    }
+
+    [Fact]
+    public void ChannelGroups_VoiceChannelsIncludeVoiceUsers()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(5, "voice-room", ChannelType.Voice, "Voice")]);
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 5, "username": "bob", "muted": false, "deafened": false } }""");
+
+        var voiceGroup = vm.ChannelGroups.First(g => g.CategoryName == "Voice");
+        var voiceItem = voiceGroup.Items[0];
+        Assert.Single(voiceItem.VoiceUsers);
+        Assert.Equal("bob", voiceItem.VoiceUsers[0].Username);
+    }
+
+    [Fact]
+    public void ChannelGroups_NullCategory_SortedFirst()
+    {
+        var vm = new MainViewModel();
+        vm.LoadChannels([
+            MakeChannel(1, "general", ChannelType.Text, null, 0),
+            MakeChannel(2, "chat", ChannelType.Text, "Chat", 0),
+        ]);
+
+        Assert.Null(vm.ChannelGroups[0].CategoryName);
+        Assert.Equal("Chat", vm.ChannelGroups[1].CategoryName);
+    }
+
+    // ── Member grouping ──────────────────────────────────────────────────
+
+    [Fact]
+    public void MemberGroups_GroupedByRole()
+    {
+        var vm = new MainViewModel();
+        vm.Roles.Add(new WsRole(1, "Admin", "#ff0000", 0, 0, false));
+        vm.Roles.Add(new WsRole(2, "Member", null, 0, 1, true));
+        vm.LoadMembers([
+            MakeUser(1, "alice", 1),
+            MakeUser(2, "bob", 2),
+            MakeUser(3, "carol", 2),
+        ]);
+
+        Assert.Equal(2, vm.MemberGroups.Count);
+        var adminGroup = vm.MemberGroups.First(g => g.RoleName == "Admin");
+        Assert.Single(adminGroup.Members);
+        var memberGroup = vm.MemberGroups.First(g => g.RoleName == "Member");
+        Assert.Equal(2, memberGroup.Members.Count);
+    }
+
+    [Fact]
+    public void MemberGroups_UnknownRole_DefaultsToMembers()
+    {
+        var vm = new MainViewModel();
+        vm.LoadMembers([MakeUser(1, "alice", 99)]);
+
+        Assert.Single(vm.MemberGroups);
+        Assert.Equal("Members", vm.MemberGroups[0].RoleName);
+    }
+
+    // ── Connection status ────────────────────────────────────────────────
+
+    [Fact]
+    public void ConnectionStatus_SetsHasConnectionIssue()
+    {
+        var vm = new MainViewModel();
+        Assert.False(vm.HasConnectionIssue);
+
+        vm.ConnectionStatus = "Disconnected";
+        Assert.True(vm.HasConnectionIssue);
+
+        vm.ConnectionStatus = null;
+        Assert.False(vm.HasConnectionIssue);
+    }
+
+    // ── Ready event with voice states ────────────────────────────────────
+
+    [Fact]
+    public void Ready_LoadsVoiceStates()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+
+        ws.SimulateMessage(ReadyJson(
+            channels: @"[{ ""id"": 5, ""name"": ""voice"", ""type"": ""voice"", ""category"": null, ""topic"": """", ""position"": 0, ""slow_mode"": 0, ""archived"": false, ""created_at"": ""2026-01-01T00:00:00Z"" }]",
+            voiceStates: @"[{ ""user_id"": 2, ""channel_id"": 5, ""username"": ""bob"", ""muted"": true, ""deafened"": false, ""speaking"": false }]"
+        ));
+
+        Assert.Single(vm.VoiceStates);
+        Assert.Equal("bob", vm.VoiceStates[0].Username);
+        Assert.True(vm.VoiceStates[0].Muted);
+    }
+
+    [Fact]
+    public void Ready_LoadsRoles()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+
+        ws.SimulateMessage(ReadyJson(
+            roles: @"[{ ""id"": 1, ""name"": ""Admin"", ""color"": ""#ff0000"", ""permissions"": 255, ""position"": 0, ""is_default"": false }, { ""id"": 2, ""name"": ""Member"", ""color"": null, ""permissions"": 1, ""position"": 1, ""is_default"": true }]"
+        ));
+
+        Assert.Equal(2, vm.Roles.Count);
+        Assert.Equal("Admin", vm.Roles[0].Name);
+    }
+
+    [Fact]
+    public void Ready_SelectsFirstTextChannel()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+
+        ws.SimulateMessage(ReadyJson(
+            channels: @"[{ ""id"": 5, ""name"": ""voice"", ""type"": ""voice"", ""category"": null, ""topic"": """", ""position"": 0, ""slow_mode"": 0, ""archived"": false, ""created_at"": ""2026-01-01T00:00:00Z"" }, { ""id"": 1, ""name"": ""general"", ""type"": ""text"", ""category"": null, ""topic"": """", ""position"": 1, ""slow_mode"": 0, ""archived"": false, ""created_at"": ""2026-01-01T00:00:00Z"" }]"
+        ));
+
+        Assert.NotNull(vm.SelectedChannel);
+        Assert.Equal("general", vm.SelectedChannel!.Name);
+    }
+
+    // ── Chat message to non-selected channel increments unread ──────────
+
+    [Fact]
+    public void ChatMessage_OtherChannel_IncrementsUnread()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+        vm.LoadChannels([MakeChannel(1, "general"), MakeChannel(2, "random")]);
+        vm.SelectedChannel = vm.Channels[0]; // selected = general (id 1)
+
+        ws.SimulateMessage("""{ "type": "chat_message", "payload": { "id": 50, "channel_id": 2, "user": { "id": 2, "username": "bob", "avatar": null }, "content": "hi", "reply_to": null, "timestamp": "2026-01-01T00:00:00Z" } }""");
+
+        Assert.Equal(1, vm.Channels.First(c => c.Id == 2).UnreadCount);
+    }
+
+    // ── Display messages ─────────────────────────────────────────────────
+
+    [Fact]
+    public void AddMessage_CreatesDisplayMessage()
+    {
+        var vm = new MainViewModel();
+        vm.AddMessage(MakeMessage(1, 1, "hello"));
+
+        Assert.Single(vm.DisplayMessages);
+        Assert.Equal("hello", vm.DisplayMessages[0].Content);
+    }
+
+    [Fact]
+    public void AddMessage_SecondBySameAuthor_GroupedTogether()
+    {
+        var vm = new MainViewModel();
+        vm.AddMessage(MakeMessage(1, 1, "hello", 1, "alice"));
+        vm.AddMessage(MakeMessage(2, 1, "world", 1, "alice"));
+
+        Assert.Equal(2, vm.DisplayMessages.Count);
+        Assert.False(vm.DisplayMessages[0].IsGrouped);  // First message shows header
+        Assert.True(vm.DisplayMessages[1].IsGrouped);   // Second is grouped (no header)
+    }
+
+    // ── Toggle commands ──────────────────────────────────────────────────
+
+    [Fact]
+    public void ToggleMemberList_TogglesVisibility()
+    {
+        var vm = new MainViewModel();
+        Assert.True(vm.IsMemberListVisible);
+
+        vm.ToggleMemberListCommand.Execute(null);
+        Assert.False(vm.IsMemberListVisible);
+
+        vm.ToggleMemberListCommand.Execute(null);
+        Assert.True(vm.IsMemberListVisible);
+    }
+
+    [Fact]
+    public void ToggleCategory_TogglesExpandedState()
+    {
+        var vm = new MainViewModel();
+        vm.LoadChannels([MakeChannel(1, "general", ChannelType.Text, "Chat")]);
+
+        var group = vm.ChannelGroups[0];
+        Assert.True(group.IsExpanded);
+
+        vm.ToggleCategoryCommand.Execute(group);
+        Assert.False(group.IsExpanded);
+
+        vm.ToggleCategoryCommand.Execute(group);
+        Assert.True(group.IsExpanded);
+    }
+
+    // ── GetVoiceUsersForChannel ──────────────────────────────────────────
+
+    [Fact]
+    public void GetVoiceUsersForChannel_FiltersCorrectly()
+    {
+        var vm = MakeVmWithChat(out _, out var ws);
+
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 1, "channel_id": 5, "username": "alice", "muted": false, "deafened": false } }""");
+        ws.SimulateMessage("""{ "type": "voice_state", "payload": { "user_id": 2, "channel_id": 6, "username": "bob", "muted": false, "deafened": false } }""");
+
+        var users5 = vm.GetVoiceUsersForChannel(5).ToList();
+        var users6 = vm.GetVoiceUsersForChannel(6).ToList();
+        var users7 = vm.GetVoiceUsersForChannel(7).ToList();
+
+        Assert.Single(users5);
+        Assert.Single(users6);
+        Assert.Empty(users7);
+    }
+
+    // ── CurrentUser properties ───────────────────────────────────────────
+
+    [Fact]
+    public void CurrentUsername_DefaultsToUnknown()
+    {
+        var vm = new MainViewModel();
+        Assert.Equal("Unknown", vm.CurrentUsername);
+    }
+
+    [Fact]
+    public void CurrentUserStatusEnum_DefaultsToOffline()
+    {
+        var vm = new MainViewModel();
+        Assert.Equal(UserStatus.Offline, vm.CurrentUserStatusEnum);
+    }
+
+    // ── SelectChannelCommand ─────────────────────────────────────────────
+
+    [Fact]
+    public void SelectChannelCommand_WithChannelItem_SelectsChannel()
+    {
+        var vm = new MainViewModel();
+        var ch = MakeChannel(1, "general");
+        vm.LoadChannels([ch]);
+
+        var item = vm.ChannelGroups[0].Items[0];
+        vm.SelectChannelCommand.Execute(item);
+
+        Assert.Equal(ch.Id, vm.SelectedChannel?.Id);
+    }
+
+    [Fact]
+    public void SelectChannelCommand_WithNull_DoesNothing()
+    {
+        var vm = new MainViewModel();
+        vm.SelectChannelCommand.Execute(null);
+        Assert.Null(vm.SelectedChannel);
+    }
+}
diff --git a/Client/OwnCord.Client/App.xaml b/Client/OwnCord.Client/App.xaml
index 6ab8337d..e17d3d3c 100644
--- a/Client/OwnCord.Client/App.xaml
+++ b/Client/OwnCord.Client/App.xaml
@@ -4,10 +4,30 @@
              xmlns:conv="clr-namespace:OwnCord.Client.Converters"
              Startup="Application_Startup">
     <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Themes/Colors.xaml"/>
+                <ResourceDictionary Source="Themes/Typography.xaml"/>
+                <ResourceDictionary Source="Themes/Controls.xaml"/>
+            </ResourceDictionary.MergedDictionaries>
+
         <conv:BoolToVisibilityConverter x:Key="BoolToVisibility"/>
         <conv:IntToVisibilityConverter x:Key="IntToVisibility"/>
         <conv:InverseBoolToVisibilityConverter x:Key="InverseBoolToVisibility"/>
         <conv:NullToVisibilityConverter x:Key="NullToVisibility"/>
         <conv:InverseBoolConverter x:Key="InverseBool"/>
+        <conv:RelativeTimeConverter x:Key="RelativeTime"/>
+        <conv:FirstCharConverter x:Key="FirstChar"/>
+        <conv:ColorToBrushConverter x:Key="ColorToBrush"/>
+        <conv:HostPortConverter x:Key="HostPort"/>
+        <conv:HexColorToBrushConverter x:Key="HexColorToBrush"/>
+        <conv:StatusToBrushConverter x:Key="StatusToBrush"/>
+        <conv:FirstLetterConverter x:Key="FirstLetter"/>
+        <conv:BoolToRedBrushConverter x:Key="BoolToRedBrush"/>
+        <conv:SpeakingToStrokeBrushConverter x:Key="SpeakingToStroke"/>
+        <conv:BoolToArrowConverter x:Key="BoolToArrow"/>
+        <conv:HealthStatusToBrushConverter x:Key="HealthStatusToBrush"/>
+        <conv:StringEqualsConverter x:Key="StringEquals"/>
+        </ResourceDictionary>
     </Application.Resources>
 </Application>
diff --git a/Client/OwnCord.Client/App.xaml.cs b/Client/OwnCord.Client/App.xaml.cs
index 2adfb8dd..449e6bdf 100644
--- a/Client/OwnCord.Client/App.xaml.cs
+++ b/Client/OwnCord.Client/App.xaml.cs
@@ -22,7 +22,7 @@ public partial class App : Application
         var apiClient = ApiClient.CreateWithTofuTls(trustService);
         var chatService = new ChatService(apiClient, wsService);
 
-        var connectVm = new ConnectViewModel(profileService, credentialService);
+        var connectVm = new ConnectViewModel(profileService, credentialService, apiClient);
         var mainVm = new MainViewModel();
 
         var mainWindow = new MainWindow(connectVm, mainVm, chatService);
diff --git a/Client/OwnCord.Client/Controls/AttachmentControl.xaml b/Client/OwnCord.Client/Controls/AttachmentControl.xaml
new file mode 100644
index 00000000..8bc105f3
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/AttachmentControl.xaml
@@ -0,0 +1,71 @@
+<UserControl x:Class="OwnCord.Client.Controls.AttachmentControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Name="Root">
+
+    <Grid MaxWidth="400">
+        <!-- Image attachment: shown when mime starts with "image/" -->
+        <Border x:Name="ImagePanel"
+                Visibility="Collapsed"
+                CornerRadius="8"
+                Height="200"
+                ClipToBounds="True">
+            <Border.Background>
+                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                    <GradientStop Color="{StaticResource BgSecondaryColor}" Offset="0"/>
+                    <GradientStop Color="{StaticResource BgActiveColor}" Offset="1"/>
+                </LinearGradientBrush>
+            </Border.Background>
+
+            <!-- Placeholder icon centered -->
+            <TextBlock Text="&#x1F5BC;"
+                       FontSize="36"
+                       Foreground="{StaticResource TextMuted}"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"/>
+        </Border>
+
+        <!-- File attachment: shown for non-image mimes -->
+        <Border x:Name="FilePanel"
+                Visibility="Collapsed"
+                BorderBrush="{StaticResource BorderBrush}"
+                BorderThickness="1"
+                CornerRadius="8"
+                ClipToBounds="True">
+            <Border Background="{StaticResource BgSecondary}"
+                    Padding="12"
+                    CornerRadius="8">
+                <StackPanel Orientation="Horizontal">
+                    <!-- File icon -->
+                    <Border Width="36" Height="36"
+                            CornerRadius="6"
+                            Background="{StaticResource Accent}">
+                        <TextBlock Text="&#x1F4C4;"
+                                   FontSize="16"
+                                   Foreground="White"
+                                   HorizontalAlignment="Center"
+                                   VerticalAlignment="Center"/>
+                    </Border>
+
+                    <!-- File info -->
+                    <StackPanel Margin="12,0,0,0"
+                                VerticalAlignment="Center">
+                        <TextBlock x:Name="FilenameText"
+                                   FontFamily="{StaticResource FontBody}"
+                                   FontSize="13"
+                                   Foreground="{StaticResource TextLink}"
+                                   Cursor="Hand"
+                                   TextTrimming="CharacterEllipsis"
+                                   MaxWidth="320"/>
+
+                        <TextBlock x:Name="FileSizeText"
+                                   FontFamily="{StaticResource FontBody}"
+                                   FontSize="11"
+                                   Foreground="{StaticResource TextMuted}"
+                                   Margin="0,2,0,0"/>
+                    </StackPanel>
+                </StackPanel>
+            </Border>
+        </Border>
+    </Grid>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/AttachmentControl.xaml.cs b/Client/OwnCord.Client/Controls/AttachmentControl.xaml.cs
new file mode 100644
index 00000000..13456ad6
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/AttachmentControl.xaml.cs
@@ -0,0 +1,99 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace OwnCord.Client.Controls;
+
+public partial class AttachmentControl : UserControl
+{
+    public static readonly DependencyProperty FilenameProperty =
+        DependencyProperty.Register(
+            nameof(Filename),
+            typeof(string),
+            typeof(AttachmentControl),
+            new PropertyMetadata(string.Empty, OnPropertyChanged));
+
+    public static readonly DependencyProperty FileSizeProperty =
+        DependencyProperty.Register(
+            nameof(FileSize),
+            typeof(long),
+            typeof(AttachmentControl),
+            new PropertyMetadata(0L, OnPropertyChanged));
+
+    public static readonly DependencyProperty MimeTypeProperty =
+        DependencyProperty.Register(
+            nameof(MimeType),
+            typeof(string),
+            typeof(AttachmentControl),
+            new PropertyMetadata(string.Empty, OnPropertyChanged));
+
+    public static readonly DependencyProperty FileUrlProperty =
+        DependencyProperty.Register(
+            nameof(FileUrl),
+            typeof(string),
+            typeof(AttachmentControl),
+            new PropertyMetadata(string.Empty));
+
+    public string Filename
+    {
+        get => (string)GetValue(FilenameProperty);
+        set => SetValue(FilenameProperty, value);
+    }
+
+    public long FileSize
+    {
+        get => (long)GetValue(FileSizeProperty);
+        set => SetValue(FileSizeProperty, value);
+    }
+
+    public string MimeType
+    {
+        get => (string)GetValue(MimeTypeProperty);
+        set => SetValue(MimeTypeProperty, value);
+    }
+
+    public string FileUrl
+    {
+        get => (string)GetValue(FileUrlProperty);
+        set => SetValue(FileUrlProperty, value);
+    }
+
+    public AttachmentControl()
+    {
+        InitializeComponent();
+    }
+
+    private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is AttachmentControl control)
+        {
+            control.UpdateDisplay();
+        }
+    }
+
+    private void UpdateDisplay()
+    {
+        var isImage = !string.IsNullOrEmpty(MimeType)
+                      && MimeType.StartsWith("image/", StringComparison.OrdinalIgnoreCase);
+
+        ImagePanel.Visibility = isImage ? Visibility.Visible : Visibility.Collapsed;
+        FilePanel.Visibility = isImage ? Visibility.Collapsed : Visibility.Visible;
+
+        if (!isImage)
+        {
+            FilenameText.Text = Filename;
+            FileSizeText.Text = FormatFileSize(FileSize);
+        }
+    }
+
+    private static string FormatFileSize(long bytes)
+    {
+        return bytes switch
+        {
+            < 1024 => $"{bytes} B",
+            < 1024 * 1024 => $"{bytes / 1024.0:F1} KB",
+            < 1024 * 1024 * 1024 => $"{bytes / (1024.0 * 1024.0):F1} MB",
+            _ => $"{bytes / (1024.0 * 1024.0 * 1024.0):F2} GB"
+        };
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/CodeBlockControl.xaml b/Client/OwnCord.Client/Controls/CodeBlockControl.xaml
new file mode 100644
index 00000000..5581dd8c
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/CodeBlockControl.xaml
@@ -0,0 +1,34 @@
+<UserControl x:Class="OwnCord.Client.Controls.CodeBlockControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Name="Root">
+
+    <Border Background="{StaticResource BgTertiary}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1"
+            CornerRadius="4"
+            Padding="12">
+        <Grid>
+            <!-- Language label in top-right corner -->
+            <TextBlock x:Name="LanguageLabel"
+                       HorizontalAlignment="Right"
+                       VerticalAlignment="Top"
+                       FontFamily="{StaticResource FontBody}"
+                       FontSize="11"
+                       Foreground="{StaticResource TextMuted}"
+                       Margin="0,-2,0,0"/>
+
+            <!-- Code content with horizontal scrolling -->
+            <ScrollViewer HorizontalScrollBarVisibility="Auto"
+                          VerticalScrollBarVisibility="Disabled"
+                          Margin="0,14,0,0">
+                <TextBlock x:Name="CodeText"
+                           FontFamily="{StaticResource FontMono}"
+                           FontSize="13"
+                           Foreground="{StaticResource TextNormal}"
+                           TextWrapping="NoWrap"
+                           xml:space="preserve"/>
+            </ScrollViewer>
+        </Grid>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/CodeBlockControl.xaml.cs b/Client/OwnCord.Client/Controls/CodeBlockControl.xaml.cs
new file mode 100644
index 00000000..307b7ab8
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/CodeBlockControl.xaml.cs
@@ -0,0 +1,55 @@
+using System.Windows;
+using System.Windows.Controls;
+
+namespace OwnCord.Client.Controls;
+
+public partial class CodeBlockControl : UserControl
+{
+    public static readonly DependencyProperty CodeProperty =
+        DependencyProperty.Register(
+            nameof(Code),
+            typeof(string),
+            typeof(CodeBlockControl),
+            new PropertyMetadata(string.Empty, OnPropertyChanged));
+
+    public static readonly DependencyProperty CodeLanguageProperty =
+        DependencyProperty.Register(
+            nameof(CodeLanguage),
+            typeof(string),
+            typeof(CodeBlockControl),
+            new PropertyMetadata(string.Empty, OnPropertyChanged));
+
+    public string Code
+    {
+        get => (string)GetValue(CodeProperty);
+        set => SetValue(CodeProperty, value);
+    }
+
+    public string CodeLanguage
+    {
+        get => (string)GetValue(CodeLanguageProperty);
+        set => SetValue(CodeLanguageProperty, value);
+    }
+
+    public CodeBlockControl()
+    {
+        InitializeComponent();
+    }
+
+    private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is CodeBlockControl control)
+        {
+            control.UpdateDisplay();
+        }
+    }
+
+    private void UpdateDisplay()
+    {
+        CodeText.Text = Code;
+
+        var hasLanguage = !string.IsNullOrWhiteSpace(CodeLanguage);
+        LanguageLabel.Text = hasLanguage ? CodeLanguage : string.Empty;
+        LanguageLabel.Visibility = hasLanguage ? Visibility.Visible : Visibility.Collapsed;
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/DmSidebarControl.xaml b/Client/OwnCord.Client/Controls/DmSidebarControl.xaml
new file mode 100644
index 00000000..763a6a23
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/DmSidebarControl.xaml
@@ -0,0 +1,185 @@
+<UserControl x:Class="OwnCord.Client.Controls.DmSidebarControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Width="240"
+             Background="{StaticResource BgSecondary}">
+
+    <UserControl.Resources>
+        <!-- DM item hover button -->
+        <Style x:Key="DmItemButton" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="8,6" Background="Transparent">
+                            <ContentPresenter/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Close DM button (visible on hover via parent) -->
+        <Style x:Key="CloseDmButton" TargetType="Button">
+            <Setter Property="Width" Value="16"/>
+            <Setter Property="Height" Value="16"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Visibility" Value="Hidden"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" Background="Transparent" CornerRadius="4">
+                            <TextBlock Text="&#x2715;" FontSize="10" Foreground="{StaticResource TextMuted}"
+                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgActive}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Nav item button (Friends, Nitro) -->
+        <Style x:Key="NavItemButton" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="10,8" Background="Transparent" Margin="8,1">
+                            <ContentPresenter/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="48"/>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+
+        <!-- Search header -->
+        <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22" Padding="10,8">
+            <Border Background="{StaticResource BgTertiary}" CornerRadius="4" Padding="8,5">
+                <TextBlock Text="Find or start a conversation"
+                           Foreground="{StaticResource TextMuted}" FontSize="13"
+                           VerticalAlignment="Center"/>
+            </Border>
+        </Border>
+
+        <!-- Navigation items -->
+        <StackPanel Grid.Row="1" Margin="0,8,0,0">
+            <!-- Friends -->
+            <Button Style="{StaticResource NavItemButton}"
+                    Command="{Binding FriendsCommand, RelativeSource={RelativeSource AncestorType=UserControl}}">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Text="&#x1F465;" FontSize="16" Margin="0,0,10,0" VerticalAlignment="Center"/>
+                    <TextBlock Text="Friends" Foreground="{StaticResource TextNormal}" FontSize="14"
+                               FontWeight="Medium" VerticalAlignment="Center"/>
+                </StackPanel>
+            </Button>
+
+            <!-- Nitro placeholder -->
+            <Button Style="{StaticResource NavItemButton}" IsEnabled="False">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Text="&#x2728;" FontSize="16" Margin="0,0,10,0" VerticalAlignment="Center"/>
+                    <TextBlock Text="Nitro" Foreground="{StaticResource TextMuted}" FontSize="14"
+                               FontWeight="Medium" VerticalAlignment="Center"/>
+                </StackPanel>
+            </Button>
+        </StackPanel>
+
+        <!-- DM list -->
+        <Grid Grid.Row="2" Margin="0,8,0,0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <!-- DM list header -->
+            <Grid Grid.Row="0" Margin="16,8,8,4">
+                <TextBlock Text="DIRECT MESSAGES" Foreground="{StaticResource TextMicro}"
+                           FontSize="11" FontWeight="Bold" VerticalAlignment="Center"/>
+                <Button HorizontalAlignment="Right" Cursor="Hand" ToolTip="Create DM">
+                    <Button.Template>
+                        <ControlTemplate TargetType="Button">
+                            <TextBlock x:Name="Txt" Text="+" Foreground="{StaticResource TextMuted}"
+                                       FontSize="16" FontWeight="Bold"/>
+                            <ControlTemplate.Triggers>
+                                <Trigger Property="IsMouseOver" Value="True">
+                                    <Setter TargetName="Txt" Property="Foreground" Value="{StaticResource TextNormal}"/>
+                                </Trigger>
+                            </ControlTemplate.Triggers>
+                        </ControlTemplate>
+                    </Button.Template>
+                </Button>
+            </Grid>
+
+            <!-- DM conversation items -->
+            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+                <ItemsControl ItemsSource="{Binding DirectMessages, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                              Margin="8,0">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Button Style="{StaticResource DmItemButton}"
+                                    Command="{Binding DataContext.SelectDmCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                                    CommandParameter="{Binding}"
+                                    HorizontalContentAlignment="Stretch"
+                                    Margin="0,1">
+                                <Grid>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+
+                                    <!-- Avatar with status dot -->
+                                    <Grid Grid.Column="0" Width="32" Height="32" Margin="0,0,10,0">
+                                        <Border Width="32" Height="32" CornerRadius="16" Background="#5865f2">
+                                            <TextBlock Text="{Binding Username, Converter={StaticResource FirstLetter}}"
+                                                       Foreground="White" FontWeight="Bold" FontSize="12"
+                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                        </Border>
+                                        <Ellipse Width="10" Height="10"
+                                                 HorizontalAlignment="Right" VerticalAlignment="Bottom"
+                                                 Fill="{Binding Status, Converter={StaticResource StatusToBrush}}"
+                                                 Stroke="{StaticResource BgSecondary}" StrokeThickness="2"/>
+                                    </Grid>
+
+                                    <!-- Username -->
+                                    <TextBlock Grid.Column="1" Text="{Binding Username}" FontSize="14"
+                                               Foreground="{StaticResource TextMuted}"
+                                               VerticalAlignment="Center"
+                                               TextTrimming="CharacterEllipsis"/>
+
+                                    <!-- Close button (shows on hover) -->
+                                    <Button x:Name="CloseBtn" Grid.Column="2" Style="{StaticResource CloseDmButton}"
+                                            Command="{Binding DataContext.CloseDmCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                                            CommandParameter="{Binding}"
+                                            VerticalAlignment="Center"/>
+                                </Grid>
+                            </Button>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/DmSidebarControl.xaml.cs b/Client/OwnCord.Client/Controls/DmSidebarControl.xaml.cs
new file mode 100644
index 00000000..bda4cf67
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/DmSidebarControl.xaml.cs
@@ -0,0 +1,79 @@
+using System.Collections;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class DmSidebarControl : UserControl
+{
+    public static readonly DependencyProperty DirectMessagesProperty =
+        DependencyProperty.Register(
+            nameof(DirectMessages),
+            typeof(IEnumerable),
+            typeof(DmSidebarControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty SelectedDmProperty =
+        DependencyProperty.Register(
+            nameof(SelectedDm),
+            typeof(object),
+            typeof(DmSidebarControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty SelectDmCommandProperty =
+        DependencyProperty.Register(
+            nameof(SelectDmCommand),
+            typeof(ICommand),
+            typeof(DmSidebarControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty FriendsCommandProperty =
+        DependencyProperty.Register(
+            nameof(FriendsCommand),
+            typeof(ICommand),
+            typeof(DmSidebarControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty CloseDmCommandProperty =
+        DependencyProperty.Register(
+            nameof(CloseDmCommand),
+            typeof(ICommand),
+            typeof(DmSidebarControl),
+            new PropertyMetadata(null));
+
+    public DmSidebarControl()
+    {
+        InitializeComponent();
+    }
+
+    public IEnumerable? DirectMessages
+    {
+        get => (IEnumerable?)GetValue(DirectMessagesProperty);
+        set => SetValue(DirectMessagesProperty, value);
+    }
+
+    public object? SelectedDm
+    {
+        get => GetValue(SelectedDmProperty);
+        set => SetValue(SelectedDmProperty, value);
+    }
+
+    public ICommand? SelectDmCommand
+    {
+        get => (ICommand?)GetValue(SelectDmCommandProperty);
+        set => SetValue(SelectDmCommandProperty, value);
+    }
+
+    public ICommand? FriendsCommand
+    {
+        get => (ICommand?)GetValue(FriendsCommandProperty);
+        set => SetValue(FriendsCommandProperty, value);
+    }
+
+    public ICommand? CloseDmCommand
+    {
+        get => (ICommand?)GetValue(CloseDmCommandProperty);
+        set => SetValue(CloseDmCommandProperty, value);
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/EmojiPickerControl.xaml b/Client/OwnCord.Client/Controls/EmojiPickerControl.xaml
new file mode 100644
index 00000000..782490a9
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/EmojiPickerControl.xaml
@@ -0,0 +1,93 @@
+<UserControl x:Class="OwnCord.Client.Controls.EmojiPickerControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Width="320">
+
+    <UserControl.Resources>
+        <Style x:Key="EmojiButton" TargetType="Button">
+            <Setter Property="Width" Value="28"/>
+            <Setter Property="Height" Value="28"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="FontSize" Value="16"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Background="Transparent"
+                                HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background"
+                                        Value="{StaticResource BgHover}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Border Background="{StaticResource BgPrimary}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1"
+            CornerRadius="8">
+        <Border.Effect>
+            <DropShadowEffect BlurRadius="12" ShadowDepth="4" Opacity="0.4" Color="Black"/>
+        </Border.Effect>
+
+        <DockPanel>
+            <!-- Search header -->
+            <Border DockPanel.Dock="Top" Margin="8,8,8,4">
+                <TextBox x:Name="SearchBox"
+                         Text="{Binding SearchText, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
+                         Background="{StaticResource BgTertiary}"
+                         Foreground="{StaticResource TextNormal}"
+                         FontSize="13"
+                         Padding="8,6"
+                         BorderThickness="0"
+                         Tag="Search emoji..."/>
+                <!-- Placeholder handled via style or code-behind -->
+            </Border>
+
+            <!-- Scrollable emoji categories -->
+            <ScrollViewer VerticalScrollBarVisibility="Auto"
+                          HorizontalScrollBarVisibility="Disabled"
+                          MaxHeight="320"
+                          Margin="4,0,4,4">
+                <ItemsControl x:Name="CategoryList">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <StackPanel Margin="4,4,4,0">
+                                <!-- Category label -->
+                                <TextBlock Text="{Binding Name}"
+                                           FontSize="11"
+                                           FontWeight="Bold"
+                                           Foreground="{StaticResource TextFaint}"
+                                           Margin="4,4,0,4">
+                                </TextBlock>
+
+                                <!-- Emoji grid -->
+                                <ItemsControl ItemsSource="{Binding Emojis}">
+                                    <ItemsControl.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <WrapPanel/>
+                                        </ItemsPanelTemplate>
+                                    </ItemsControl.ItemsPanel>
+                                    <ItemsControl.ItemTemplate>
+                                        <DataTemplate>
+                                            <Button Style="{StaticResource EmojiButton}"
+                                                    Content="{Binding}"
+                                                    Command="{Binding EmojiSelectedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                                                    CommandParameter="{Binding}"/>
+                                        </DataTemplate>
+                                    </ItemsControl.ItemTemplate>
+                                </ItemsControl>
+                            </StackPanel>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+        </DockPanel>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/EmojiPickerControl.xaml.cs b/Client/OwnCord.Client/Controls/EmojiPickerControl.xaml.cs
new file mode 100644
index 00000000..28db0a7d
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/EmojiPickerControl.xaml.cs
@@ -0,0 +1,66 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using OwnCord.Client.Services;
+
+namespace OwnCord.Client.Controls;
+
+public partial class EmojiPickerControl : UserControl
+{
+    public static readonly DependencyProperty EmojiSelectedCommandProperty =
+        DependencyProperty.Register(
+            nameof(EmojiSelectedCommand),
+            typeof(ICommand),
+            typeof(EmojiPickerControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty SearchTextProperty =
+        DependencyProperty.Register(
+            nameof(SearchText),
+            typeof(string),
+            typeof(EmojiPickerControl),
+            new PropertyMetadata(string.Empty, OnSearchTextChanged));
+
+    public EmojiPickerControl()
+    {
+        InitializeComponent();
+        RefreshCategories();
+    }
+
+    public ICommand EmojiSelectedCommand
+    {
+        get => (ICommand)GetValue(EmojiSelectedCommandProperty);
+        set => SetValue(EmojiSelectedCommandProperty, value);
+    }
+
+    public string SearchText
+    {
+        get => (string)GetValue(SearchTextProperty);
+        set => SetValue(SearchTextProperty, value);
+    }
+
+    private static void OnSearchTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is EmojiPickerControl picker)
+            picker.RefreshCategories();
+    }
+
+    private void RefreshCategories()
+    {
+        var query = SearchText?.Trim() ?? string.Empty;
+
+        if (string.IsNullOrEmpty(query))
+        {
+            CategoryList.ItemsSource = EmojiData.Categories;
+            return;
+        }
+
+        var filtered = EmojiData.Categories
+            .Where(c => c.Name.Contains(query, StringComparison.OrdinalIgnoreCase))
+            .ToList();
+
+        CategoryList.ItemsSource = filtered.Count > 0
+            ? filtered
+            : EmojiData.Categories;
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/FriendsViewControl.xaml b/Client/OwnCord.Client/Controls/FriendsViewControl.xaml
new file mode 100644
index 00000000..b09ea13f
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/FriendsViewControl.xaml
@@ -0,0 +1,329 @@
+<UserControl x:Class="OwnCord.Client.Controls.FriendsViewControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:converters="clr-namespace:OwnCord.Client.Converters"
+             Background="{StaticResource BgPrimary}">
+
+    <UserControl.Resources>
+        <converters:StringEqualsConverter x:Key="StringEquals"/>
+
+        <!-- Tab button style -->
+        <Style x:Key="FriendsTabButton" TargetType="Button">
+            <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="FontWeight" Value="Medium"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Margin" Value="0,0,8,0"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="8,4" Background="Transparent">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                                <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Active tab button style -->
+        <Style x:Key="FriendsTabButtonActive" TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
+            <Setter Property="Foreground" Value="White"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgActive}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Add Friend tab (green) -->
+        <Style x:Key="AddFriendTabButton" TargetType="Button">
+            <Setter Property="Foreground" Value="White"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="FontWeight" Value="Bold"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Margin" Value="0,0,8,0"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="8,4" Background="{StaticResource Green}">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="#1a8f4a"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Friend item hover -->
+        <Style x:Key="FriendItemBorder" TargetType="Border">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Style.Triggers>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="Background" Value="{StaticResource BgHover}"/>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <!-- Friend action button -->
+        <Style x:Key="FriendActionButton" TargetType="Button">
+            <Setter Property="Width" Value="32"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" Width="32" Height="32" CornerRadius="16"
+                                Background="{StaticResource BgSecondary}">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgActive}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="48"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+
+        <!-- ═══ Header ═══ -->
+        <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22">
+            <StackPanel Orientation="Horizontal" Margin="16,0" VerticalAlignment="Center">
+                <!-- Friends icon + title -->
+                <TextBlock Text="&#x1F465;" FontSize="16" Margin="0,0,8,0" VerticalAlignment="Center"/>
+                <TextBlock Text="Friends" Foreground="White" FontSize="15" FontWeight="Bold"
+                           VerticalAlignment="Center" Margin="0,0,16,0"/>
+
+                <!-- Divider -->
+                <Border Width="1" Height="24" Background="{StaticResource BorderBrush}" Margin="0,0,16,0"/>
+
+                <!-- Online tab -->
+                <Button Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                        CommandParameter="online">
+                    <Button.Style>
+                        <Style TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource StringEquals}, ConverterParameter=online}" Value="True">
+                                    <Setter Property="Foreground" Value="White"/>
+                                    <Setter Property="Template">
+                                        <Setter.Value>
+                                            <ControlTemplate TargetType="Button">
+                                                <Border CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
+                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                                </Border>
+                                            </ControlTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Button.Style>
+                    <TextBlock Text="Online" FontSize="13" FontWeight="Medium"/>
+                </Button>
+
+                <!-- All tab -->
+                <Button Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                        CommandParameter="all">
+                    <Button.Style>
+                        <Style TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource StringEquals}, ConverterParameter=all}" Value="True">
+                                    <Setter Property="Foreground" Value="White"/>
+                                    <Setter Property="Template">
+                                        <Setter.Value>
+                                            <ControlTemplate TargetType="Button">
+                                                <Border CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
+                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                                </Border>
+                                            </ControlTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Button.Style>
+                    <TextBlock Text="All" FontSize="13" FontWeight="Medium"/>
+                </Button>
+
+                <!-- Pending tab -->
+                <Button Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                        CommandParameter="pending">
+                    <Button.Style>
+                        <Style TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource StringEquals}, ConverterParameter=pending}" Value="True">
+                                    <Setter Property="Foreground" Value="White"/>
+                                    <Setter Property="Template">
+                                        <Setter.Value>
+                                            <ControlTemplate TargetType="Button">
+                                                <Border CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
+                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                                </Border>
+                                            </ControlTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Button.Style>
+                    <TextBlock Text="Pending" FontSize="13" FontWeight="Medium"/>
+                </Button>
+
+                <!-- Add Friend tab (green) -->
+                <Button Style="{StaticResource AddFriendTabButton}"
+                        Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                        CommandParameter="add">
+                    <TextBlock Text="Add Friend" FontSize="13" FontWeight="Bold"/>
+                </Button>
+            </StackPanel>
+        </Border>
+
+        <!-- ═══ Friends list content ═══ -->
+        <Grid Grid.Row="1" Margin="20,16,20,0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <!-- Search bar -->
+            <Border Grid.Row="0" Background="{StaticResource BgTertiary}" CornerRadius="4"
+                    Padding="10,7" Margin="0,0,0,16">
+                <TextBox Text="{Binding FriendSearchText, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
+                         Background="Transparent" BorderThickness="0"
+                         Foreground="{StaticResource TextNormal}"
+                         CaretBrush="{StaticResource TextNormal}"
+                         FontSize="13" VerticalAlignment="Center">
+                    <TextBox.Style>
+                        <Style TargetType="TextBox">
+                            <Setter Property="Tag" Value="Search"/>
+                        </Style>
+                    </TextBox.Style>
+                </TextBox>
+            </Border>
+
+            <!-- Count label -->
+            <TextBlock Grid.Row="1" FontSize="11" FontWeight="Bold"
+                       Foreground="{StaticResource TextMicro}" Margin="0,0,0,8">
+                <TextBlock.Style>
+                    <Style TargetType="TextBlock">
+                        <Setter Property="Text" Value="ALL FRIENDS"/>
+                        <Style.Triggers>
+                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="online">
+                                <Setter Property="Text" Value="ONLINE"/>
+                            </DataTrigger>
+                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="pending">
+                                <Setter Property="Text" Value="PENDING"/>
+                            </DataTrigger>
+                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="add">
+                                <Setter Property="Text" Value="ADD FRIEND"/>
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </TextBlock.Style>
+            </TextBlock>
+
+            <!-- Friend items list -->
+            <ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
+                <ItemsControl ItemsSource="{Binding Friends, RelativeSource={RelativeSource AncestorType=UserControl}}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border Style="{StaticResource FriendItemBorder}"
+                                    CornerRadius="8" Padding="8,8" Margin="0,0,0,1"
+                                    BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderBrush}">
+                                <Grid>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+
+                                    <!-- Avatar with status dot -->
+                                    <Grid Grid.Column="0" Width="40" Height="40" Margin="0,0,12,0">
+                                        <Border Width="40" Height="40" CornerRadius="20" Background="#5865f2">
+                                            <TextBlock Text="{Binding Username, Converter={StaticResource FirstLetter}}"
+                                                       Foreground="White" FontWeight="Bold" FontSize="14"
+                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                        </Border>
+                                        <Ellipse Width="14" Height="14"
+                                                 HorizontalAlignment="Right" VerticalAlignment="Bottom"
+                                                 Fill="{Binding Status, Converter={StaticResource StatusToBrush}}"
+                                                 Stroke="{StaticResource BgPrimary}" StrokeThickness="3"/>
+                                    </Grid>
+
+                                    <!-- Username and status text -->
+                                    <StackPanel Grid.Column="1" VerticalAlignment="Center">
+                                        <TextBlock Text="{Binding Username}" Foreground="White"
+                                                   FontSize="14" FontWeight="Bold"/>
+                                        <TextBlock Foreground="{StaticResource TextMuted}" FontSize="12">
+                                            <TextBlock.Style>
+                                                <Style TargetType="TextBlock">
+                                                    <Setter Property="Text" Value="Offline"/>
+                                                    <Style.Triggers>
+                                                        <DataTrigger Binding="{Binding Status}" Value="Online">
+                                                            <Setter Property="Text" Value="Online"/>
+                                                        </DataTrigger>
+                                                        <DataTrigger Binding="{Binding Status}" Value="Idle">
+                                                            <Setter Property="Text" Value="Idle"/>
+                                                        </DataTrigger>
+                                                        <DataTrigger Binding="{Binding Status}" Value="Dnd">
+                                                            <Setter Property="Text" Value="Do Not Disturb"/>
+                                                        </DataTrigger>
+                                                    </Style.Triggers>
+                                                </Style>
+                                            </TextBlock.Style>
+                                        </TextBlock>
+                                    </StackPanel>
+
+                                    <!-- Action buttons -->
+                                    <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
+                                        <!-- Message button -->
+                                        <Button Style="{StaticResource FriendActionButton}"
+                                                Command="{Binding DataContext.MessageFriendCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                                                CommandParameter="{Binding}"
+                                                ToolTip="Message" Margin="0,0,8,0">
+                                            <TextBlock Text="&#x1F4AC;" FontSize="14"
+                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                        </Button>
+                                        <!-- More button -->
+                                        <Button Style="{StaticResource FriendActionButton}" ToolTip="More">
+                                            <TextBlock Text="&#x22EF;" FontSize="16" Foreground="{StaticResource TextMuted}"
+                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                        </Button>
+                                    </StackPanel>
+                                </Grid>
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+        </Grid>
+    </Grid>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/FriendsViewControl.xaml.cs b/Client/OwnCord.Client/Controls/FriendsViewControl.xaml.cs
new file mode 100644
index 00000000..079c37ed
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/FriendsViewControl.xaml.cs
@@ -0,0 +1,79 @@
+using System.Collections;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class FriendsViewControl : UserControl
+{
+    public static readonly DependencyProperty SelectedTabProperty =
+        DependencyProperty.Register(
+            nameof(SelectedTab),
+            typeof(string),
+            typeof(FriendsViewControl),
+            new PropertyMetadata("online"));
+
+    public static readonly DependencyProperty FriendsProperty =
+        DependencyProperty.Register(
+            nameof(Friends),
+            typeof(IEnumerable),
+            typeof(FriendsViewControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty FriendSearchTextProperty =
+        DependencyProperty.Register(
+            nameof(FriendSearchText),
+            typeof(string),
+            typeof(FriendsViewControl),
+            new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty SelectTabCommandProperty =
+        DependencyProperty.Register(
+            nameof(SelectTabCommand),
+            typeof(ICommand),
+            typeof(FriendsViewControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty MessageFriendCommandProperty =
+        DependencyProperty.Register(
+            nameof(MessageFriendCommand),
+            typeof(ICommand),
+            typeof(FriendsViewControl),
+            new PropertyMetadata(null));
+
+    public FriendsViewControl()
+    {
+        InitializeComponent();
+    }
+
+    public string SelectedTab
+    {
+        get => (string)GetValue(SelectedTabProperty);
+        set => SetValue(SelectedTabProperty, value);
+    }
+
+    public IEnumerable? Friends
+    {
+        get => (IEnumerable?)GetValue(FriendsProperty);
+        set => SetValue(FriendsProperty, value);
+    }
+
+    public string FriendSearchText
+    {
+        get => (string)GetValue(FriendSearchTextProperty);
+        set => SetValue(FriendSearchTextProperty, value);
+    }
+
+    public ICommand? SelectTabCommand
+    {
+        get => (ICommand?)GetValue(SelectTabCommandProperty);
+        set => SetValue(SelectTabCommandProperty, value);
+    }
+
+    public ICommand? MessageFriendCommand
+    {
+        get => (ICommand?)GetValue(MessageFriendCommandProperty);
+        set => SetValue(MessageFriendCommandProperty, value);
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/MessageActionsBar.xaml b/Client/OwnCord.Client/Controls/MessageActionsBar.xaml
new file mode 100644
index 00000000..3b2bffdd
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/MessageActionsBar.xaml
@@ -0,0 +1,73 @@
+<UserControl x:Class="OwnCord.Client.Controls.MessageActionsBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Name="Root">
+
+    <UserControl.Resources>
+        <!-- BgFloating not in global theme; define locally -->
+        <SolidColorBrush x:Key="BgFloating" Color="#232428"/>
+
+        <Style x:Key="ActionButton" TargetType="Button">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+            <Setter Property="FontSize" Value="14"/>
+            <Setter Property="Width" Value="32"/>
+            <Setter Property="Height" Value="28"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                                CornerRadius="4">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                                <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Visibility converter for IsOwnMessage -->
+        <BooleanToVisibilityConverter x:Key="BoolToVis"/>
+    </UserControl.Resources>
+
+    <Border Background="{StaticResource BgFloating}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1"
+            CornerRadius="4"
+            Padding="2">
+        <StackPanel Orientation="Horizontal">
+            <!-- Reply button (always visible) -->
+            <Button Command="{Binding ReplyCommand, ElementName=Root}"
+                    CommandParameter="{Binding CommandParameter, ElementName=Root}"
+                    Style="{StaticResource ActionButton}"
+                    ToolTip="Reply">
+                <TextBlock Text="&#x21A9;" FontSize="14"/>
+            </Button>
+
+            <!-- Edit button (own messages only) -->
+            <Button Command="{Binding EditCommand, ElementName=Root}"
+                    CommandParameter="{Binding CommandParameter, ElementName=Root}"
+                    Style="{StaticResource ActionButton}"
+                    Visibility="{Binding IsOwnMessage, ElementName=Root, Converter={StaticResource BoolToVis}}"
+                    ToolTip="Edit">
+                <TextBlock Text="&#x270E;" FontSize="14"/>
+            </Button>
+
+            <!-- Delete button (own messages only) -->
+            <Button Command="{Binding DeleteCommand, ElementName=Root}"
+                    CommandParameter="{Binding CommandParameter, ElementName=Root}"
+                    Style="{StaticResource ActionButton}"
+                    Visibility="{Binding IsOwnMessage, ElementName=Root, Converter={StaticResource BoolToVis}}"
+                    ToolTip="Delete">
+                <TextBlock Text="&#x1F5D1;" FontSize="13"/>
+            </Button>
+        </StackPanel>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/MessageActionsBar.xaml.cs b/Client/OwnCord.Client/Controls/MessageActionsBar.xaml.cs
new file mode 100644
index 00000000..b10fdc3b
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/MessageActionsBar.xaml.cs
@@ -0,0 +1,78 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class MessageActionsBar : UserControl
+{
+    public static readonly DependencyProperty ReplyCommandProperty =
+        DependencyProperty.Register(
+            nameof(ReplyCommand),
+            typeof(ICommand),
+            typeof(MessageActionsBar),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty EditCommandProperty =
+        DependencyProperty.Register(
+            nameof(EditCommand),
+            typeof(ICommand),
+            typeof(MessageActionsBar),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty DeleteCommandProperty =
+        DependencyProperty.Register(
+            nameof(DeleteCommand),
+            typeof(ICommand),
+            typeof(MessageActionsBar),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty IsOwnMessageProperty =
+        DependencyProperty.Register(
+            nameof(IsOwnMessage),
+            typeof(bool),
+            typeof(MessageActionsBar),
+            new PropertyMetadata(false));
+
+    public static readonly DependencyProperty CommandParameterProperty =
+        DependencyProperty.Register(
+            nameof(CommandParameter),
+            typeof(object),
+            typeof(MessageActionsBar),
+            new PropertyMetadata(null));
+
+    public ICommand? ReplyCommand
+    {
+        get => (ICommand?)GetValue(ReplyCommandProperty);
+        set => SetValue(ReplyCommandProperty, value);
+    }
+
+    public ICommand? EditCommand
+    {
+        get => (ICommand?)GetValue(EditCommandProperty);
+        set => SetValue(EditCommandProperty, value);
+    }
+
+    public ICommand? DeleteCommand
+    {
+        get => (ICommand?)GetValue(DeleteCommandProperty);
+        set => SetValue(DeleteCommandProperty, value);
+    }
+
+    public bool IsOwnMessage
+    {
+        get => (bool)GetValue(IsOwnMessageProperty);
+        set => SetValue(IsOwnMessageProperty, value);
+    }
+
+    public object? CommandParameter
+    {
+        get => GetValue(CommandParameterProperty);
+        set => SetValue(CommandParameterProperty, value);
+    }
+
+    public MessageActionsBar()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/ReplyComposeBar.xaml b/Client/OwnCord.Client/Controls/ReplyComposeBar.xaml
new file mode 100644
index 00000000..358ab551
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/ReplyComposeBar.xaml
@@ -0,0 +1,42 @@
+<UserControl x:Class="OwnCord.Client.Controls.ReplyComposeBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Name="Root">
+
+    <Border Background="{StaticResource BgSecondary}"
+            BorderBrush="{StaticResource Accent}"
+            BorderThickness="0,2,0,0"
+            Padding="12,6"
+            CornerRadius="8,8,0,0">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <!-- Reply indicator text -->
+            <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
+                <TextBlock Text="Replying to "
+                           Foreground="{StaticResource TextMuted}"
+                           FontSize="13"
+                           FontFamily="{StaticResource FontBody}"
+                           VerticalAlignment="Center"/>
+                <TextBlock Text="{Binding Username, ElementName=Root}"
+                           Foreground="{StaticResource TextNormal}"
+                           FontSize="13"
+                           FontWeight="SemiBold"
+                           FontFamily="{StaticResource FontBody}"
+                           VerticalAlignment="Center"/>
+            </StackPanel>
+
+            <!-- Cancel button -->
+            <Button Grid.Column="1"
+                    Command="{Binding CancelCommand, ElementName=Root}"
+                    Style="{StaticResource SmallIconButton}"
+                    ToolTip="Cancel reply"
+                    VerticalAlignment="Center">
+                <TextBlock Text="&#x2715;" FontSize="14" Foreground="{StaticResource TextMuted}"/>
+            </Button>
+        </Grid>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/ReplyComposeBar.xaml.cs b/Client/OwnCord.Client/Controls/ReplyComposeBar.xaml.cs
new file mode 100644
index 00000000..9f51d5b1
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/ReplyComposeBar.xaml.cs
@@ -0,0 +1,39 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class ReplyComposeBar : UserControl
+{
+    public static readonly DependencyProperty UsernameProperty =
+        DependencyProperty.Register(
+            nameof(Username),
+            typeof(string),
+            typeof(ReplyComposeBar),
+            new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty CancelCommandProperty =
+        DependencyProperty.Register(
+            nameof(CancelCommand),
+            typeof(ICommand),
+            typeof(ReplyComposeBar),
+            new PropertyMetadata(null));
+
+    public string Username
+    {
+        get => (string)GetValue(UsernameProperty);
+        set => SetValue(UsernameProperty, value);
+    }
+
+    public ICommand? CancelCommand
+    {
+        get => (ICommand?)GetValue(CancelCommandProperty);
+        set => SetValue(CancelCommandProperty, value);
+    }
+
+    public ReplyComposeBar()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/ServerStripControl.xaml b/Client/OwnCord.Client/Controls/ServerStripControl.xaml
new file mode 100644
index 00000000..f142b71b
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/ServerStripControl.xaml
@@ -0,0 +1,183 @@
+<UserControl x:Class="OwnCord.Client.Controls.ServerStripControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:converters="clr-namespace:OwnCord.Client.Converters"
+             Width="72"
+             Background="{StaticResource BgTertiary}">
+
+    <UserControl.Resources>
+        <converters:FirstCharConverter x:Key="FirstCharConverter"/>
+        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
+
+        <!-- Server icon button base template -->
+        <Style x:Key="ServerIconButton" TargetType="Button">
+            <Setter Property="Width" Value="48"/>
+            <Setter Property="Height" Value="48"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Padding" Value="0"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Grid>
+                            <!-- Active indicator bar (left side) -->
+                            <Rectangle x:Name="Indicator"
+                                       Width="4" Height="0"
+                                       Fill="White"
+                                       HorizontalAlignment="Left"
+                                       VerticalAlignment="Center"
+                                       RadiusX="2" RadiusY="2"
+                                       Margin="-12,0,0,0"/>
+
+                            <!-- Icon circle -->
+                            <Border x:Name="IconBorder"
+                                    Width="48" Height="48"
+                                    CornerRadius="24"
+                                    Background="{TemplateBinding Background}">
+                                <ContentPresenter HorizontalAlignment="Center"
+                                                  VerticalAlignment="Center"/>
+                            </Border>
+                        </Grid>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="IconBorder" Property="CornerRadius" Value="12"/>
+                                <Setter TargetName="Indicator" Property="Height" Value="20"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Add server button style -->
+        <Style x:Key="AddServerButton" TargetType="Button">
+            <Setter Property="Width" Value="48"/>
+            <Setter Property="Height" Value="48"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="AddBorder"
+                                Width="48" Height="48"
+                                CornerRadius="24"
+                                Background="Transparent"
+                                BorderBrush="{StaticResource Green}"
+                                BorderThickness="2"
+                                Style="{x:Null}">
+                            <Border.Resources>
+                                <Style TargetType="Border"/>
+                            </Border.Resources>
+                            <TextBlock Text="+"
+                                       Foreground="{StaticResource Green}"
+                                       FontSize="24"
+                                       FontWeight="Bold"
+                                       HorizontalAlignment="Center"
+                                       VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="AddBorder" Property="CornerRadius" Value="12"/>
+                                <Setter TargetName="AddBorder" Property="Background" Value="{StaticResource Green}"/>
+                                <Setter TargetName="AddBorder" Property="BorderThickness" Value="0"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <ScrollViewer VerticalScrollBarVisibility="Auto"
+                  HorizontalScrollBarVisibility="Disabled"
+                  Padding="0">
+        <ScrollViewer.Resources>
+            <!-- Hide scrollbar but keep scrolling -->
+            <Style TargetType="ScrollBar">
+                <Setter Property="Width" Value="0"/>
+            </Style>
+        </ScrollViewer.Resources>
+
+        <StackPanel HorizontalAlignment="Center"
+                    Orientation="Vertical"
+                    Margin="0,12,0,12">
+
+            <!-- Home / DM button -->
+            <Button x:Name="HomeButton"
+                    Style="{StaticResource ServerIconButton}"
+                    Background="{StaticResource Accent}"
+                    Command="{Binding HomeCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    ToolTip="Direct Messages"
+                    Margin="0,0,0,8">
+                <TextBlock Text="O"
+                           Foreground="White"
+                           FontSize="18"
+                           FontWeight="Bold"/>
+            </Button>
+
+            <!-- Separator -->
+            <Border Width="32" Height="2"
+                    Background="{StaticResource BorderBrush}"
+                    CornerRadius="1"
+                    Margin="0,0,0,8"/>
+
+            <!-- Server list -->
+            <ItemsControl x:Name="ServerList"
+                          ItemsSource="{Binding Servers, RelativeSource={RelativeSource AncestorType=UserControl}}">
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <Button Style="{StaticResource ServerIconButton}"
+                                Background="{Binding Color, Converter={StaticResource ColorToBrushConverter}}"
+                                Command="{Binding DataContext.SelectServerCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
+                                CommandParameter="{Binding}"
+                                ToolTip="{Binding Name}"
+                                Tag="{Binding}"
+                                Margin="0,0,0,8">
+                            <!-- Re-template to handle active state via Tag comparison -->
+                            <Button.Template>
+                                <ControlTemplate TargetType="Button">
+                                    <Grid>
+                                        <!-- Active indicator bar -->
+                                        <Rectangle x:Name="Indicator"
+                                                   Width="4" Height="0"
+                                                   Fill="White"
+                                                   HorizontalAlignment="Left"
+                                                   VerticalAlignment="Center"
+                                                   RadiusX="2" RadiusY="2"
+                                                   Margin="-12,0,0,0"/>
+
+                                        <!-- Icon circle -->
+                                        <Border x:Name="IconBorder"
+                                                Width="48" Height="48"
+                                                CornerRadius="24"
+                                                Background="{TemplateBinding Background}">
+                                            <TextBlock Text="{Binding Name, Converter={StaticResource FirstCharConverter}}"
+                                                       Foreground="White"
+                                                       FontSize="18"
+                                                       FontWeight="Bold"
+                                                       HorizontalAlignment="Center"
+                                                       VerticalAlignment="Center"/>
+                                        </Border>
+                                    </Grid>
+                                    <ControlTemplate.Triggers>
+                                        <Trigger Property="IsMouseOver" Value="True">
+                                            <Setter TargetName="IconBorder" Property="CornerRadius" Value="12"/>
+                                            <Setter TargetName="Indicator" Property="Height" Value="20"/>
+                                        </Trigger>
+                                    </ControlTemplate.Triggers>
+                                </ControlTemplate>
+                            </Button.Template>
+                        </Button>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+
+            <!-- Add server button -->
+            <Button x:Name="AddButton"
+                    Style="{StaticResource AddServerButton}"
+                    Command="{Binding AddServerCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    ToolTip="Add a Server"
+                    Margin="0,0,0,0"/>
+
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/ServerStripControl.xaml.cs b/Client/OwnCord.Client/Controls/ServerStripControl.xaml.cs
new file mode 100644
index 00000000..4b57f275
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/ServerStripControl.xaml.cs
@@ -0,0 +1,86 @@
+using System.Collections;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class ServerStripControl : UserControl
+{
+    public static readonly DependencyProperty ServersProperty =
+        DependencyProperty.Register(
+            nameof(Servers),
+            typeof(IEnumerable),
+            typeof(ServerStripControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty SelectedServerProperty =
+        DependencyProperty.Register(
+            nameof(SelectedServer),
+            typeof(object),
+            typeof(ServerStripControl),
+            new PropertyMetadata(null, OnSelectedServerChanged));
+
+    public static readonly DependencyProperty SelectServerCommandProperty =
+        DependencyProperty.Register(
+            nameof(SelectServerCommand),
+            typeof(ICommand),
+            typeof(ServerStripControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty AddServerCommandProperty =
+        DependencyProperty.Register(
+            nameof(AddServerCommand),
+            typeof(ICommand),
+            typeof(ServerStripControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty HomeCommandProperty =
+        DependencyProperty.Register(
+            nameof(HomeCommand),
+            typeof(ICommand),
+            typeof(ServerStripControl),
+            new PropertyMetadata(null));
+
+    public ServerStripControl()
+    {
+        InitializeComponent();
+    }
+
+    public IEnumerable? Servers
+    {
+        get => (IEnumerable?)GetValue(ServersProperty);
+        set => SetValue(ServersProperty, value);
+    }
+
+    public object? SelectedServer
+    {
+        get => GetValue(SelectedServerProperty);
+        set => SetValue(SelectedServerProperty, value);
+    }
+
+    public ICommand? SelectServerCommand
+    {
+        get => (ICommand?)GetValue(SelectServerCommandProperty);
+        set => SetValue(SelectServerCommandProperty, value);
+    }
+
+    public ICommand? AddServerCommand
+    {
+        get => (ICommand?)GetValue(AddServerCommandProperty);
+        set => SetValue(AddServerCommandProperty, value);
+    }
+
+    public ICommand? HomeCommand
+    {
+        get => (ICommand?)GetValue(HomeCommandProperty);
+        set => SetValue(HomeCommandProperty, value);
+    }
+
+    private static void OnSelectedServerChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        // Future: update active indicator heights based on which server is selected.
+        // The visual active state can be driven by the ViewModel binding the
+        // SelectedServer property and comparing in a DataTrigger or multi-binding.
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/SettingsOverlayControl.xaml b/Client/OwnCord.Client/Controls/SettingsOverlayControl.xaml
new file mode 100644
index 00000000..29c4703c
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/SettingsOverlayControl.xaml
@@ -0,0 +1,158 @@
+<UserControl x:Class="OwnCord.Client.Controls.SettingsOverlayControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <UserControl.Resources>
+        <!-- Sidebar category header -->
+        <Style x:Key="CategoryHeader" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="11"/>
+            <Setter Property="FontWeight" Value="Bold"/>
+            <Setter Property="Foreground" Value="{StaticResource TextFaint}"/>
+            <Setter Property="Padding" Value="10,16,10,4"/>
+        </Style>
+
+        <!-- Sidebar nav button -->
+        <Style x:Key="SidebarButton" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="HorizontalContentAlignment" Value="Left"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" Background="Transparent" CornerRadius="4" Padding="10,0" Margin="0,1">
+                            <ContentPresenter VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background"
+                                        Value="{StaticResource BgHover}"/>
+                                <Setter Property="Foreground"
+                                        Value="{StaticResource TextNormal}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Logout button (red text) -->
+        <Style x:Key="LogoutButton" TargetType="Button" BasedOn="{StaticResource SidebarButton}">
+            <Setter Property="Foreground" Value="{StaticResource Red}"/>
+        </Style>
+
+        <!-- Close button -->
+        <Style x:Key="CloseButton" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Width" Value="40"/>
+            <Setter Property="Height" Value="40"/>
+            <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" Background="Transparent" CornerRadius="20"
+                                BorderBrush="{StaticResource TextMuted}" BorderThickness="2"
+                                Width="40" Height="40">
+                            <TextBlock Text="X" FontSize="16" FontWeight="Bold"
+                                       HorizontalAlignment="Center" VerticalAlignment="Center"
+                                       Foreground="{TemplateBinding Foreground}"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter Property="Foreground"
+                                        Value="{StaticResource TextNormal}"/>
+                                <Setter TargetName="Bd" Property="BorderBrush"
+                                        Value="{StaticResource TextNormal}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <!-- Full-screen overlay -->
+    <Grid Background="#F0313338">
+
+        <!-- Close button — top-right -->
+        <Button Style="{StaticResource CloseButton}"
+                HorizontalAlignment="Right" VerticalAlignment="Top"
+                Margin="0,16,16,0"
+                Command="{Binding CloseCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                Panel.ZIndex="10"/>
+
+        <DockPanel>
+            <!-- ══ Sidebar ══ -->
+            <Border DockPanel.Dock="Left" Width="218"
+                    Background="{StaticResource BgSecondary}">
+                <ScrollViewer VerticalScrollBarVisibility="Auto">
+                    <StackPanel Margin="8,12,8,12">
+
+                        <!-- User Settings -->
+                        <TextBlock Text="USER SETTINGS" Style="{StaticResource CategoryHeader}"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="My Account"
+                                Click="OnSidebarClick" Tag="My Account"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="Profile"
+                                Click="OnSidebarClick" Tag="Profile"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="Privacy"
+                                Click="OnSidebarClick" Tag="Privacy"/>
+
+                        <!-- Separator -->
+                        <Border Height="1" Background="{StaticResource BorderBrush}" Margin="10,8"/>
+
+                        <!-- App Settings -->
+                        <TextBlock Text="APP SETTINGS" Style="{StaticResource CategoryHeader}"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="Appearance"
+                                Click="OnSidebarClick" Tag="Appearance"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="Notifications"
+                                Click="OnSidebarClick" Tag="Notifications"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="Keybinds"
+                                Click="OnSidebarClick" Tag="Keybinds"/>
+                        <Button Style="{StaticResource SidebarButton}" Content="Language"
+                                Click="OnSidebarClick" Tag="Language"/>
+
+                        <!-- Separator -->
+                        <Border Height="1" Background="{StaticResource BorderBrush}" Margin="10,8"/>
+
+                        <!-- Danger Zone -->
+                        <TextBlock Text="DANGER ZONE" Style="{StaticResource CategoryHeader}"/>
+                        <Button Style="{StaticResource LogoutButton}" Content="Log Out"
+                                Command="{Binding LogoutCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
+
+                    </StackPanel>
+                </ScrollViewer>
+            </Border>
+
+            <!-- ══ Content Area ══ -->
+            <Grid Margin="40,16,60,16">
+                <DockPanel>
+                    <!-- Section header -->
+                    <TextBlock DockPanel.Dock="Top"
+                               Text="{Binding SelectedSection, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                               FontSize="20" FontWeight="Bold"
+                               Foreground="White"
+                               Margin="0,0,0,20"/>
+
+                    <!-- Placeholder content -->
+                    <Border>
+                        <TextBlock Foreground="{StaticResource TextMuted}"
+                                   FontSize="14" VerticalAlignment="Top">
+                            <TextBlock.Style>
+                                <Style TargetType="TextBlock">
+                                    <Setter Property="Text">
+                                        <Setter.Value>
+                                            <Binding Path="SelectedSection"
+                                                     RelativeSource="{RelativeSource AncestorType=UserControl}"
+                                                     StringFormat="Settings for {0} will appear here."/>
+                                        </Setter.Value>
+                                    </Setter>
+                                </Style>
+                            </TextBlock.Style>
+                        </TextBlock>
+                    </Border>
+                </DockPanel>
+            </Grid>
+        </DockPanel>
+    </Grid>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/SettingsOverlayControl.xaml.cs b/Client/OwnCord.Client/Controls/SettingsOverlayControl.xaml.cs
new file mode 100644
index 00000000..99d527b1
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/SettingsOverlayControl.xaml.cs
@@ -0,0 +1,60 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class SettingsOverlayControl : UserControl
+{
+    public static readonly DependencyProperty SelectedSectionProperty =
+        DependencyProperty.Register(
+            nameof(SelectedSection),
+            typeof(string),
+            typeof(SettingsOverlayControl),
+            new PropertyMetadata("My Account"));
+
+    public static readonly DependencyProperty CloseCommandProperty =
+        DependencyProperty.Register(
+            nameof(CloseCommand),
+            typeof(ICommand),
+            typeof(SettingsOverlayControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty LogoutCommandProperty =
+        DependencyProperty.Register(
+            nameof(LogoutCommand),
+            typeof(ICommand),
+            typeof(SettingsOverlayControl),
+            new PropertyMetadata(null));
+
+    public SettingsOverlayControl()
+    {
+        InitializeComponent();
+    }
+
+    public string SelectedSection
+    {
+        get => (string)GetValue(SelectedSectionProperty);
+        set => SetValue(SelectedSectionProperty, value);
+    }
+
+    public ICommand CloseCommand
+    {
+        get => (ICommand)GetValue(CloseCommandProperty);
+        set => SetValue(CloseCommandProperty, value);
+    }
+
+    public ICommand LogoutCommand
+    {
+        get => (ICommand)GetValue(LogoutCommandProperty);
+        set => SetValue(LogoutCommandProperty, value);
+    }
+
+    private void OnSidebarClick(object sender, RoutedEventArgs e)
+    {
+        if (sender is Button button && button.Tag is string section)
+        {
+            SelectedSection = section;
+        }
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/StatusPickerControl.xaml b/Client/OwnCord.Client/Controls/StatusPickerControl.xaml
new file mode 100644
index 00000000..aceecda0
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/StatusPickerControl.xaml
@@ -0,0 +1,79 @@
+<UserControl x:Class="OwnCord.Client.Controls.StatusPickerControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <UserControl.Resources>
+        <Style x:Key="StatusOptionButton" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="8,6" Background="Transparent">
+                            <ContentPresenter/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background"
+                                        Value="{StaticResource BgHover}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Border Background="{StaticResource BgPrimary}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1"
+            CornerRadius="8"
+            Padding="6"
+            MinWidth="160">
+        <Border.Effect>
+            <DropShadowEffect BlurRadius="12" ShadowDepth="4" Opacity="0.4" Color="Black"/>
+        </Border.Effect>
+
+        <StackPanel>
+            <!-- Online -->
+            <Button Style="{StaticResource StatusOptionButton}"
+                    Command="{Binding StatusChangedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    CommandParameter="online">
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                    <Ellipse Width="10" Height="10" Fill="{StaticResource StatusOnline}" Margin="0,0,10,0"/>
+                    <TextBlock Text="Online" FontSize="13" Foreground="{StaticResource TextNormal}"/>
+                </StackPanel>
+            </Button>
+
+            <!-- Idle -->
+            <Button Style="{StaticResource StatusOptionButton}"
+                    Command="{Binding StatusChangedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    CommandParameter="idle">
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                    <Ellipse Width="10" Height="10" Fill="{StaticResource StatusIdle}" Margin="0,0,10,0"/>
+                    <TextBlock Text="Idle" FontSize="13" Foreground="{StaticResource TextNormal}"/>
+                </StackPanel>
+            </Button>
+
+            <!-- Do Not Disturb -->
+            <Button Style="{StaticResource StatusOptionButton}"
+                    Command="{Binding StatusChangedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    CommandParameter="dnd">
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                    <Ellipse Width="10" Height="10" Fill="{StaticResource StatusDnd}" Margin="0,0,10,0"/>
+                    <TextBlock Text="Do Not Disturb" FontSize="13" Foreground="{StaticResource TextNormal}"/>
+                </StackPanel>
+            </Button>
+
+            <!-- Invisible -->
+            <Button Style="{StaticResource StatusOptionButton}"
+                    Command="{Binding StatusChangedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                    CommandParameter="invisible">
+                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                    <Ellipse Width="10" Height="10" Fill="{StaticResource StatusOffline}" Margin="0,0,10,0"/>
+                    <TextBlock Text="Invisible" FontSize="13" Foreground="{StaticResource TextNormal}"/>
+                </StackPanel>
+            </Button>
+        </StackPanel>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/StatusPickerControl.xaml.cs b/Client/OwnCord.Client/Controls/StatusPickerControl.xaml.cs
new file mode 100644
index 00000000..94695435
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/StatusPickerControl.xaml.cs
@@ -0,0 +1,39 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class StatusPickerControl : UserControl
+{
+    public static readonly DependencyProperty SelectedStatusProperty =
+        DependencyProperty.Register(
+            nameof(SelectedStatus),
+            typeof(string),
+            typeof(StatusPickerControl),
+            new PropertyMetadata("online"));
+
+    public static readonly DependencyProperty StatusChangedCommandProperty =
+        DependencyProperty.Register(
+            nameof(StatusChangedCommand),
+            typeof(ICommand),
+            typeof(StatusPickerControl),
+            new PropertyMetadata(null));
+
+    public StatusPickerControl()
+    {
+        InitializeComponent();
+    }
+
+    public string SelectedStatus
+    {
+        get => (string)GetValue(SelectedStatusProperty);
+        set => SetValue(SelectedStatusProperty, value);
+    }
+
+    public ICommand StatusChangedCommand
+    {
+        get => (ICommand)GetValue(StatusChangedCommandProperty);
+        set => SetValue(StatusChangedCommandProperty, value);
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/ToastControl.xaml b/Client/OwnCord.Client/Controls/ToastControl.xaml
new file mode 100644
index 00000000..743db726
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/ToastControl.xaml
@@ -0,0 +1,23 @@
+<UserControl x:Class="OwnCord.Client.Controls.ToastControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Name="Root"
+             Opacity="0"
+             IsHitTestVisible="False">
+
+    <Border Background="{StaticResource BgSecondary}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1"
+            CornerRadius="8"
+            Padding="20,12">
+        <Border.Effect>
+            <DropShadowEffect BlurRadius="16" ShadowDepth="4" Opacity="0.5" Color="Black"/>
+        </Border.Effect>
+
+        <TextBlock Text="{Binding Message, ElementName=Root}"
+                   FontSize="13"
+                   Foreground="{StaticResource TextNormal}"
+                   TextWrapping="Wrap"
+                   MaxWidth="400"/>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/ToastControl.xaml.cs b/Client/OwnCord.Client/Controls/ToastControl.xaml.cs
new file mode 100644
index 00000000..803776de
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/ToastControl.xaml.cs
@@ -0,0 +1,85 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media.Animation;
+using System.Windows.Threading;
+
+namespace OwnCord.Client.Controls;
+
+public partial class ToastControl : UserControl
+{
+    private DispatcherTimer? _autoDismissTimer;
+
+    public static readonly DependencyProperty MessageProperty =
+        DependencyProperty.Register(
+            nameof(Message),
+            typeof(string),
+            typeof(ToastControl),
+            new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty IsOpenProperty =
+        DependencyProperty.Register(
+            nameof(IsOpen),
+            typeof(bool),
+            typeof(ToastControl),
+            new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnIsOpenChanged));
+
+    public ToastControl()
+    {
+        InitializeComponent();
+    }
+
+    public string Message
+    {
+        get => (string)GetValue(MessageProperty);
+        set => SetValue(MessageProperty, value);
+    }
+
+    public bool IsOpen
+    {
+        get => (bool)GetValue(IsOpenProperty);
+        set => SetValue(IsOpenProperty, value);
+    }
+
+    private static void OnIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is ToastControl control)
+            control.HandleIsOpenChanged((bool)e.NewValue);
+    }
+
+    private void HandleIsOpenChanged(bool isOpen)
+    {
+        _autoDismissTimer?.Stop();
+        _autoDismissTimer = null;
+
+        if (isOpen)
+        {
+            // Fade in
+            var fadeIn = new DoubleAnimation(0, 1, TimeSpan.FromMilliseconds(200))
+            {
+                EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut }
+            };
+            BeginAnimation(OpacityProperty, fadeIn);
+
+            // Auto-dismiss after 3 seconds
+            _autoDismissTimer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(3) };
+            _autoDismissTimer.Tick += OnAutoDismiss;
+            _autoDismissTimer.Start();
+        }
+        else
+        {
+            // Fade out
+            var fadeOut = new DoubleAnimation(1, 0, TimeSpan.FromMilliseconds(300))
+            {
+                EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseIn }
+            };
+            BeginAnimation(OpacityProperty, fadeOut);
+        }
+    }
+
+    private void OnAutoDismiss(object? sender, EventArgs e)
+    {
+        _autoDismissTimer?.Stop();
+        _autoDismissTimer = null;
+        IsOpen = false;
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/UserBarControl.xaml b/Client/OwnCord.Client/Controls/UserBarControl.xaml
new file mode 100644
index 00000000..7863cfa8
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/UserBarControl.xaml
@@ -0,0 +1,132 @@
+<UserControl x:Class="OwnCord.Client.Controls.UserBarControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="clr-namespace:OwnCord.Client.Controls">
+
+    <UserControl.Resources>
+        <Style x:Key="UserBarButton" TargetType="Button">
+            <Setter Property="Width" Value="32"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Background="Transparent"
+                                Width="32" Height="32">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="#35373c"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Invisible button style for avatar click area -->
+        <Style x:Key="AvatarButton" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <ContentPresenter/>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Border Height="52" Padding="8,0">
+        <Border.Background>
+            <SolidColorBrush Color="#111214" Opacity="0.6"/>
+        </Border.Background>
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <!-- Avatar with status dot — clickable to toggle status picker -->
+            <Grid Grid.Column="0" Margin="0,0,8,0" VerticalAlignment="Center">
+                <Button Style="{StaticResource AvatarButton}"
+                        Command="{Binding ToggleStatusPickerCommand}"
+                        ToolTip="Change status">
+                    <Grid>
+                        <!-- Avatar circle with initial -->
+                        <Border Width="32" Height="32" CornerRadius="16" Background="#5865f2">
+                            <TextBlock Text="{Binding CurrentUsername, Converter={StaticResource FirstLetter}}"
+                                       Foreground="White" FontWeight="Bold" FontSize="14"
+                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <!-- Status dot overlay -->
+                        <Ellipse Width="12" Height="12" HorizontalAlignment="Right" VerticalAlignment="Bottom"
+                                 Fill="{Binding CurrentUserStatusEnum, Converter={StaticResource StatusToBrush}}"
+                                 Stroke="#111214" StrokeThickness="3"/>
+                    </Grid>
+                </Button>
+
+                <!-- Status picker popup -->
+                <Popup IsOpen="{Binding ShowStatusPicker}"
+                       Placement="Top"
+                       PlacementTarget="{Binding RelativeSource={RelativeSource AncestorType=Grid}}"
+                       StaysOpen="False"
+                       AllowsTransparency="True"
+                       PopupAnimation="Fade"
+                       HorizontalOffset="-4"
+                       VerticalOffset="-4">
+                    <controls:StatusPickerControl
+                        SelectedStatus="{Binding CurrentUserStatus}"
+                        StatusChangedCommand="{Binding ChangeStatusCommand}"/>
+                </Popup>
+            </Grid>
+
+            <!-- Username and status text -->
+            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="0,0,4,0">
+                <TextBlock Text="{Binding CurrentUsername}" Foreground="White" FontSize="13" FontWeight="SemiBold"
+                           TextTrimming="CharacterEllipsis"/>
+                <TextBlock Text="{Binding CurrentUserStatus}" Foreground="#949ba4" FontSize="11"
+                           TextTrimming="CharacterEllipsis"/>
+            </StackPanel>
+
+            <!-- Mic / Deafen / Settings buttons -->
+            <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
+                <Button Command="{Binding ToggleMuteCommand}" Style="{StaticResource UserBarButton}"
+                        ToolTip="Toggle Mute">
+                    <TextBlock FontSize="14" Foreground="{Binding IsMuted, Converter={StaticResource BoolToRedBrush}}">
+                        <TextBlock.Style>
+                            <Style TargetType="TextBlock">
+                                <Setter Property="Text" Value="&#x1F399;"/>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsMuted}" Value="True">
+                                        <Setter Property="Text" Value="&#x1F507;"/>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </TextBlock.Style>
+                    </TextBlock>
+                </Button>
+                <Button Command="{Binding ToggleDeafenCommand}" Style="{StaticResource UserBarButton}"
+                        ToolTip="Toggle Deafen">
+                    <TextBlock FontSize="14" Foreground="{Binding IsDeafened, Converter={StaticResource BoolToRedBrush}}">
+                        <TextBlock.Style>
+                            <Style TargetType="TextBlock">
+                                <Setter Property="Text" Value="&#x1F50A;"/>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsDeafened}" Value="True">
+                                        <Setter Property="Text" Value="&#x1F508;"/>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </TextBlock.Style>
+                    </TextBlock>
+                </Button>
+                <Button Style="{StaticResource UserBarButton}" ToolTip="Settings">
+                    <TextBlock Text="&#x2699;" FontSize="16" Foreground="#b5bac1"/>
+                </Button>
+            </StackPanel>
+        </Grid>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/UserBarControl.xaml.cs b/Client/OwnCord.Client/Controls/UserBarControl.xaml.cs
new file mode 100644
index 00000000..22fe0103
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/UserBarControl.xaml.cs
@@ -0,0 +1,11 @@
+using System.Windows.Controls;
+
+namespace OwnCord.Client.Controls;
+
+public partial class UserBarControl : UserControl
+{
+    public UserBarControl()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/UserPopupControl.xaml b/Client/OwnCord.Client/Controls/UserPopupControl.xaml
new file mode 100644
index 00000000..959582c1
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/UserPopupControl.xaml
@@ -0,0 +1,110 @@
+<UserControl x:Class="OwnCord.Client.Controls.UserPopupControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Width="300">
+
+    <Border Background="{StaticResource BgPrimary}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1"
+            CornerRadius="8">
+        <Border.Effect>
+            <DropShadowEffect BlurRadius="16" ShadowDepth="4" Opacity="0.4" Color="Black"/>
+        </Border.Effect>
+
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="60"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+
+            <!-- Banner -->
+            <Border Grid.Row="0" CornerRadius="8,8,0,0"
+                    Background="{Binding AvatarColor, RelativeSource={RelativeSource AncestorType=UserControl},
+                                 Converter={StaticResource HexColorToBrush}, FallbackValue=#5865f2}"/>
+
+            <!-- Body -->
+            <StackPanel Grid.Row="1" Margin="16,36,16,16">
+
+                <!-- Avatar (overlapping banner) -->
+                <Border Width="64" Height="64" CornerRadius="32"
+                        BorderThickness="4" BorderBrush="{StaticResource BgPrimary}"
+                        HorizontalAlignment="Left"
+                        Margin="0,-64,0,0">
+                    <Border CornerRadius="28"
+                            Background="{Binding AvatarColor, RelativeSource={RelativeSource AncestorType=UserControl},
+                                         Converter={StaticResource HexColorToBrush}, FallbackValue=#5865f2}">
+                        <TextBlock Text="{Binding Username, RelativeSource={RelativeSource AncestorType=UserControl},
+                                          Converter={StaticResource FirstLetter}}"
+                                   Foreground="White" FontWeight="Bold" FontSize="24"
+                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                </Border>
+
+                <!-- Username -->
+                <TextBlock Text="{Binding Username, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                           Foreground="White" FontWeight="Bold" FontSize="18"
+                           Margin="0,8,0,0"/>
+
+                <!-- Role -->
+                <TextBlock Text="{Binding RoleName, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                           FontSize="12" Margin="0,2,0,0"
+                           Foreground="{Binding RoleColor, RelativeSource={RelativeSource AncestorType=UserControl},
+                                        Converter={StaticResource HexColorToBrush}, FallbackValue=#949ba4}"/>
+
+                <!-- Status -->
+                <TextBlock Text="{Binding StatusText, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                           FontSize="12" Foreground="{StaticResource TextMuted}" Margin="0,2,0,0"/>
+
+                <!-- Separator -->
+                <Border Height="1" Background="{StaticResource BorderBrush}" Margin="0,10,0,10"/>
+
+                <!-- Member Since section -->
+                <Border Background="{StaticResource BgSecondary}" CornerRadius="6" Padding="10,8">
+                    <StackPanel>
+                        <TextBlock Text="MEMBER SINCE" FontSize="11" FontWeight="Bold"
+                                   Foreground="{StaticResource TextFaint}"
+                                   Margin="0,0,0,4"/>
+                        <TextBlock Text="{Binding JoinedDate, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                                   FontSize="13" Foreground="{StaticResource TextNormal}"/>
+                    </StackPanel>
+                </Border>
+
+                <!-- Role tags -->
+                <WrapPanel Margin="0,10,0,0" Orientation="Horizontal">
+                    <Border CornerRadius="10" Padding="6,3,8,3"
+                            Background="{StaticResource BgHover}">
+                        <StackPanel Orientation="Horizontal">
+                            <Ellipse Width="8" Height="8" Margin="0,0,5,0"
+                                     Fill="{Binding RoleColor, RelativeSource={RelativeSource AncestorType=UserControl},
+                                            Converter={StaticResource HexColorToBrush}, FallbackValue=#949ba4}"/>
+                            <TextBlock Text="{Binding RoleName, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                                       FontSize="11" Foreground="{StaticResource TextNormal}"/>
+                        </StackPanel>
+                    </Border>
+                </WrapPanel>
+
+                <!-- Message button -->
+                <Button Margin="0,12,0,0" Cursor="Hand"
+                        Command="{Binding MessageCommand, RelativeSource={RelativeSource AncestorType=UserControl}}">
+                    <Button.Template>
+                        <ControlTemplate TargetType="Button">
+                            <Border x:Name="Bd" CornerRadius="4" Padding="0,8"
+                                    Background="{StaticResource Accent}">
+                                <TextBlock Text="Message" Foreground="White" FontSize="13" FontWeight="SemiBold"
+                                           HorizontalAlignment="Center"/>
+                            </Border>
+                            <ControlTemplate.Triggers>
+                                <Trigger Property="IsMouseOver" Value="True">
+                                    <Setter TargetName="Bd" Property="Background" Value="{StaticResource AccentHover}"/>
+                                </Trigger>
+                                <Trigger Property="IsPressed" Value="True">
+                                    <Setter TargetName="Bd" Property="Background" Value="{StaticResource AccentActive}"/>
+                                </Trigger>
+                            </ControlTemplate.Triggers>
+                        </ControlTemplate>
+                    </Button.Template>
+                </Button>
+            </StackPanel>
+        </Grid>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/UserPopupControl.xaml.cs b/Client/OwnCord.Client/Controls/UserPopupControl.xaml.cs
new file mode 100644
index 00000000..6d07934d
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/UserPopupControl.xaml.cs
@@ -0,0 +1,93 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace OwnCord.Client.Controls;
+
+public partial class UserPopupControl : UserControl
+{
+    public static readonly DependencyProperty UsernameProperty =
+        DependencyProperty.Register(nameof(Username), typeof(string), typeof(UserPopupControl),
+            new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty AvatarColorProperty =
+        DependencyProperty.Register(nameof(AvatarColor), typeof(string), typeof(UserPopupControl),
+            new PropertyMetadata("#5865f2"));
+
+    public static readonly DependencyProperty RoleNameProperty =
+        DependencyProperty.Register(nameof(RoleName), typeof(string), typeof(UserPopupControl),
+            new PropertyMetadata("Member"));
+
+    public static readonly DependencyProperty RoleColorProperty =
+        DependencyProperty.Register(nameof(RoleColor), typeof(string), typeof(UserPopupControl),
+            new PropertyMetadata("#949ba4"));
+
+    public static readonly DependencyProperty JoinedDateProperty =
+        DependencyProperty.Register(nameof(JoinedDate), typeof(string), typeof(UserPopupControl),
+            new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty StatusTextProperty =
+        DependencyProperty.Register(nameof(StatusText), typeof(string), typeof(UserPopupControl),
+            new PropertyMetadata("Offline"));
+
+    public static readonly DependencyProperty MessageCommandProperty =
+        DependencyProperty.Register(nameof(MessageCommand), typeof(ICommand), typeof(UserPopupControl),
+            new PropertyMetadata(null));
+
+    public static readonly DependencyProperty CloseCommandProperty =
+        DependencyProperty.Register(nameof(CloseCommand), typeof(ICommand), typeof(UserPopupControl),
+            new PropertyMetadata(null));
+
+    public UserPopupControl()
+    {
+        InitializeComponent();
+    }
+
+    public string Username
+    {
+        get => (string)GetValue(UsernameProperty);
+        set => SetValue(UsernameProperty, value);
+    }
+
+    public string AvatarColor
+    {
+        get => (string)GetValue(AvatarColorProperty);
+        set => SetValue(AvatarColorProperty, value);
+    }
+
+    public string RoleName
+    {
+        get => (string)GetValue(RoleNameProperty);
+        set => SetValue(RoleNameProperty, value);
+    }
+
+    public string RoleColor
+    {
+        get => (string)GetValue(RoleColorProperty);
+        set => SetValue(RoleColorProperty, value);
+    }
+
+    public string JoinedDate
+    {
+        get => (string)GetValue(JoinedDateProperty);
+        set => SetValue(JoinedDateProperty, value);
+    }
+
+    public string StatusText
+    {
+        get => (string)GetValue(StatusTextProperty);
+        set => SetValue(StatusTextProperty, value);
+    }
+
+    public ICommand MessageCommand
+    {
+        get => (ICommand)GetValue(MessageCommandProperty);
+        set => SetValue(MessageCommandProperty, value);
+    }
+
+    public ICommand CloseCommand
+    {
+        get => (ICommand)GetValue(CloseCommandProperty);
+        set => SetValue(CloseCommandProperty, value);
+    }
+}
diff --git a/Client/OwnCord.Client/Controls/VoiceWidgetControl.xaml b/Client/OwnCord.Client/Controls/VoiceWidgetControl.xaml
new file mode 100644
index 00000000..eef4eb06
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/VoiceWidgetControl.xaml
@@ -0,0 +1,128 @@
+<UserControl x:Class="OwnCord.Client.Controls.VoiceWidgetControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Visibility="{Binding IsInVoice, Converter={StaticResource BoolToVisibility}}">
+
+    <UserControl.Resources>
+        <Style x:Key="VoiceControlButton" TargetType="Button">
+            <Setter Property="Width" Value="32"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="Background" Value="#404249"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4"
+                                Background="{TemplateBinding Background}"
+                                Width="32" Height="32">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="#35373c"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <Style x:Key="DisconnectButton" TargetType="Button">
+            <Setter Property="Width" Value="32"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4"
+                                Background="Transparent"
+                                Width="32" Height="32">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="#26f23f43"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
+    <Border Background="#2b2d31" BorderThickness="0,1,0,0" BorderBrush="#3f4147" Padding="8">
+        <StackPanel>
+            <!-- Voice Connected header -->
+            <StackPanel Orientation="Horizontal" Margin="4,4,4,2">
+                <TextBlock Text="Voice Connected" Foreground="#23a55a" FontSize="12" FontWeight="Bold"
+                           VerticalAlignment="Center"/>
+            </StackPanel>
+            <!-- Channel name -->
+            <TextBlock Text="{Binding VoiceChannelName}" Foreground="#949ba4" FontSize="11" Margin="4,0,4,8"/>
+
+            <!-- Control buttons row -->
+            <StackPanel Orientation="Horizontal" Margin="4,0">
+                <!-- Mute button -->
+                <Button Command="{Binding ToggleMuteCommand}" Margin="0,0,4,0"
+                        ToolTip="Toggle Mute">
+                    <Button.Style>
+                        <Style TargetType="Button" BasedOn="{StaticResource VoiceControlButton}">
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding IsMuted}" Value="True">
+                                    <Setter Property="Background" Value="#33f23f43"/>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Button.Style>
+                    <TextBlock FontSize="14" Foreground="{Binding IsMuted, Converter={StaticResource BoolToRedBrush}}">
+                        <TextBlock.Style>
+                            <Style TargetType="TextBlock">
+                                <Setter Property="Text" Value="&#x1F399;"/>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsMuted}" Value="True">
+                                        <Setter Property="Text" Value="&#x1F507;"/>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </TextBlock.Style>
+                    </TextBlock>
+                </Button>
+
+                <!-- Deafen button -->
+                <Button Command="{Binding ToggleDeafenCommand}" Margin="0,0,4,0"
+                        ToolTip="Toggle Deafen">
+                    <Button.Style>
+                        <Style TargetType="Button" BasedOn="{StaticResource VoiceControlButton}">
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding IsDeafened}" Value="True">
+                                    <Setter Property="Background" Value="#33f23f43"/>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Button.Style>
+                    <TextBlock FontSize="14" Foreground="{Binding IsDeafened, Converter={StaticResource BoolToRedBrush}}">
+                        <TextBlock.Style>
+                            <Style TargetType="TextBlock">
+                                <Setter Property="Text" Value="&#x1F50A;"/>
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsDeafened}" Value="True">
+                                        <Setter Property="Text" Value="&#x1F508;"/>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </TextBlock.Style>
+                    </TextBlock>
+                </Button>
+
+                <!-- Disconnect button -->
+                <Button Command="{Binding LeaveVoiceCommand}" Style="{StaticResource DisconnectButton}"
+                        ToolTip="Disconnect">
+                    <TextBlock Text="&#x260E;" FontSize="14" Foreground="#f23f43"/>
+                </Button>
+            </StackPanel>
+        </StackPanel>
+    </Border>
+</UserControl>
diff --git a/Client/OwnCord.Client/Controls/VoiceWidgetControl.xaml.cs b/Client/OwnCord.Client/Controls/VoiceWidgetControl.xaml.cs
new file mode 100644
index 00000000..4b66a50f
--- /dev/null
+++ b/Client/OwnCord.Client/Controls/VoiceWidgetControl.xaml.cs
@@ -0,0 +1,11 @@
+using System.Windows.Controls;
+
+namespace OwnCord.Client.Controls;
+
+public partial class VoiceWidgetControl : UserControl
+{
+    public VoiceWidgetControl()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/Client/OwnCord.Client/Converters/ColorConverters.cs b/Client/OwnCord.Client/Converters/ColorConverters.cs
new file mode 100644
index 00000000..d9c877a8
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/ColorConverters.cs
@@ -0,0 +1,106 @@
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>Converts a hex color string (#rrggbb) to a SolidColorBrush.</summary>
+[ValueConversion(typeof(string), typeof(SolidColorBrush))]
+public sealed class HexColorToBrushConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is string hex && hex.StartsWith('#') && hex.Length >= 7)
+        {
+            try
+            {
+                var color = (Color)ColorConverter.ConvertFromString(hex);
+                return new SolidColorBrush(color);
+            }
+            catch
+            {
+                // Fall through to default
+            }
+        }
+
+        // Default fallback color (muted text)
+        return new SolidColorBrush((Color)ColorConverter.ConvertFromString("#949ba4"));
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
+
+/// <summary>Converts a UserStatus enum to the corresponding status dot color brush.</summary>
+[ValueConversion(typeof(string), typeof(SolidColorBrush))]
+public sealed class StatusToBrushConverter : IValueConverter
+{
+    private static readonly SolidColorBrush Online = new((Color)ColorConverter.ConvertFromString("#23a55a"));
+    private static readonly SolidColorBrush Idle = new((Color)ColorConverter.ConvertFromString("#f0b232"));
+    private static readonly SolidColorBrush Dnd = new((Color)ColorConverter.ConvertFromString("#f23f43"));
+    private static readonly SolidColorBrush Offline = new((Color)ColorConverter.ConvertFromString("#6d6f78"));
+
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        return value switch
+        {
+            Models.UserStatus.Online => Online,
+            Models.UserStatus.Idle => Idle,
+            Models.UserStatus.Dnd => Dnd,
+            _ => Offline
+        };
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
+
+/// <summary>Gets the first letter of a string (for avatar circle initials).</summary>
+[ValueConversion(typeof(string), typeof(string))]
+public sealed class FirstLetterConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
+        => value is string s && s.Length > 0 ? s[0].ToString().ToUpperInvariant() : "?";
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
+
+/// <summary>Converts a bool to a Foreground color (red when true, muted when false).</summary>
+[ValueConversion(typeof(bool), typeof(SolidColorBrush))]
+public sealed class BoolToRedBrushConverter : IValueConverter
+{
+    private static readonly SolidColorBrush Red = new((Color)ColorConverter.ConvertFromString("#f23f43"));
+    private static readonly SolidColorBrush Normal = new((Color)ColorConverter.ConvertFromString("#b5bac1"));
+
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        => value is true ? Red : Normal;
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
+
+/// <summary>Converts a bool speaking state to a green or transparent stroke brush.</summary>
+[ValueConversion(typeof(bool), typeof(SolidColorBrush))]
+public sealed class SpeakingToStrokeBrushConverter : IValueConverter
+{
+    private static readonly SolidColorBrush Speaking = new((Color)ColorConverter.ConvertFromString("#23a55a"));
+    private static readonly SolidColorBrush Silent = new(Colors.Transparent);
+
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        => value is true ? Speaking : Silent;
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
+
+/// <summary>Converts a boolean expand state to an arrow character.</summary>
+[ValueConversion(typeof(bool), typeof(string))]
+public sealed class BoolToArrowConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        => value is true ? "\u25BE" : "\u25B8"; // ▾ or ▸
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/Converters/ColorToBrushConverter.cs b/Client/OwnCord.Client/Converters/ColorToBrushConverter.cs
new file mode 100644
index 00000000..2c9be9fa
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/ColorToBrushConverter.cs
@@ -0,0 +1,33 @@
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>Converts a hex color string like "#5865f2" to a SolidColorBrush.</summary>
+[ValueConversion(typeof(string), typeof(SolidColorBrush))]
+public sealed class ColorToBrushConverter : IValueConverter
+{
+    private static readonly SolidColorBrush Fallback = new(Color.FromRgb(0x58, 0x65, 0xF2));
+
+    public object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is not string hex || hex.Length < 7)
+            return Fallback;
+
+        try
+        {
+            var color = (Color)ColorConverter.ConvertFromString(hex);
+            var brush = new SolidColorBrush(color);
+            brush.Freeze();
+            return brush;
+        }
+        catch
+        {
+            return Fallback;
+        }
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/Converters/FirstCharConverter.cs b/Client/OwnCord.Client/Converters/FirstCharConverter.cs
new file mode 100644
index 00000000..754cfe20
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/FirstCharConverter.cs
@@ -0,0 +1,19 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>Returns the first character of a string, uppercased.</summary>
+[ValueConversion(typeof(string), typeof(string))]
+public sealed class FirstCharConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is not string s || s.Length == 0)
+            return "?";
+        return char.ToUpperInvariant(s[0]).ToString();
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/Converters/HealthStatusToBrushConverter.cs b/Client/OwnCord.Client/Converters/HealthStatusToBrushConverter.cs
new file mode 100644
index 00000000..31232c78
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/HealthStatusToBrushConverter.cs
@@ -0,0 +1,39 @@
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>
+/// Converts a health status string to a SolidColorBrush for the status indicator dot.
+/// "online" = Green, "checking" = Yellow, "offline" = Red, "unknown"/other = Gray.
+/// </summary>
+public sealed class HealthStatusToBrushConverter : IValueConverter
+{
+    private static readonly SolidColorBrush OnlineBrush = new(Color.FromRgb(0x23, 0xa5, 0x5a));
+    private static readonly SolidColorBrush CheckingBrush = new(Color.FromRgb(0xf0, 0xb2, 0x32));
+    private static readonly SolidColorBrush OfflineBrush = new(Color.FromRgb(0xf2, 0x3f, 0x43));
+    private static readonly SolidColorBrush UnknownBrush = new(Color.FromRgb(0x6d, 0x6f, 0x78));
+
+    static HealthStatusToBrushConverter()
+    {
+        OnlineBrush.Freeze();
+        CheckingBrush.Freeze();
+        OfflineBrush.Freeze();
+        UnknownBrush.Freeze();
+    }
+
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        return (value as string) switch
+        {
+            "online" => OnlineBrush,
+            "checking" => CheckingBrush,
+            "offline" => OfflineBrush,
+            _ => UnknownBrush
+        };
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/Converters/HostPortConverter.cs b/Client/OwnCord.Client/Converters/HostPortConverter.cs
new file mode 100644
index 00000000..18c1896f
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/HostPortConverter.cs
@@ -0,0 +1,18 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>Combines Host and Port into a display string. Used as a multi-value converter.</summary>
+public sealed class HostPortConverter : IMultiValueConverter
+{
+    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
+    {
+        var host = values[0] as string ?? "";
+        var port = values.Length > 1 && values[1] is int p ? p : 8443;
+        return port == 8443 ? host : $"{host}:{port}";
+    }
+
+    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/Converters/RelativeTimeConverter.cs b/Client/OwnCord.Client/Converters/RelativeTimeConverter.cs
new file mode 100644
index 00000000..e85e8347
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/RelativeTimeConverter.cs
@@ -0,0 +1,30 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>Converts a DateTime? to a human-readable relative time string.</summary>
+[ValueConversion(typeof(DateTime?), typeof(string))]
+public sealed class RelativeTimeConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is not DateTime dt)
+            return "never";
+
+        var span = DateTime.UtcNow - dt.ToUniversalTime();
+
+        return span.TotalSeconds switch
+        {
+            < 60 => "just now",
+            < 3600 => $"{(int)span.TotalMinutes}m ago",
+            < 86400 => $"{(int)span.TotalHours}h ago",
+            < 172800 => "yesterday",
+            < 604800 => $"{(int)span.TotalDays}d ago",
+            _ => dt.ToLocalTime().ToString("MMM d", culture)
+        };
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/Converters/StringEqualsConverter.cs b/Client/OwnCord.Client/Converters/StringEqualsConverter.cs
new file mode 100644
index 00000000..31038a86
--- /dev/null
+++ b/Client/OwnCord.Client/Converters/StringEqualsConverter.cs
@@ -0,0 +1,19 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace OwnCord.Client.Converters;
+
+/// <summary>
+/// Returns true when the bound string value equals the converter parameter (case-insensitive).
+/// Useful for highlighting the active tab in a tab bar.
+/// </summary>
+[ValueConversion(typeof(string), typeof(bool))]
+public sealed class StringEqualsConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        => value is string s && parameter is string p
+           && string.Equals(s, p, StringComparison.OrdinalIgnoreCase);
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        => throw new NotSupportedException();
+}
diff --git a/Client/OwnCord.Client/MainWindow.xaml.cs b/Client/OwnCord.Client/MainWindow.xaml.cs
index 877d62b5..5f11eabe 100644
--- a/Client/OwnCord.Client/MainWindow.xaml.cs
+++ b/Client/OwnCord.Client/MainWindow.xaml.cs
@@ -22,6 +22,7 @@ public partial class MainWindow : Window
         _mainVm = mainVm;
 
         connectVm.ConnectRequested += OnConnectRequested;
+        connectVm.TotpVerifyRequested += OnTotpVerifyRequested;
         RootFrame.Navigate(new ConnectPage(connectVm));
     }
 
@@ -32,12 +33,20 @@ public partial class MainWindow : Window
 
         try
         {
+            Models.AuthResponse result;
             if (isRegister)
-                await _chat.RegisterAsync(host, username, password, inviteCode ?? "");
+                result = await _chat.RegisterAsync(host, username, password, inviteCode ?? "");
             else
-                await _chat.LoginAsync(host, username, password);
+                result = await _chat.LoginAsync(host, username, password);
+
+            if (result.Requires2FA)
+            {
+                _connectVm.Enter2FAMode(result.PartialToken ?? "");
+                return;
+            }
 
             _connectVm.PersistPasswordIfRequested(host, username, password);
+            _connectVm.MarkProfileConnected(host);
 
             _mainVm.Initialize(_chat);
             RootFrame.Navigate(new MainPage(_mainVm));
@@ -58,6 +67,38 @@ public partial class MainWindow : Window
         }
     }
 
+    private async void OnTotpVerifyRequested(string host, string partialToken, string code)
+    {
+        _connectVm.ErrorMessage = null;
+        _connectVm.IsLoading = true;
+
+        try
+        {
+            var result = await _chat.VerifyTotpAsync(host, partialToken, code);
+
+            _connectVm.PersistPasswordIfRequested(host, _connectVm.Username, _connectVm.Password);
+            _connectVm.MarkProfileConnected(host);
+            _connectVm.IsTotpRequired = false;
+
+            _mainVm.Initialize(_chat);
+            RootFrame.Navigate(new MainPage(_mainVm));
+
+            await _chat.ConnectWebSocketAsync(host, _chat.CurrentToken!);
+        }
+        catch (ApiException ex)
+        {
+            _connectVm.ErrorMessage = ex.Message;
+        }
+        catch (Exception ex)
+        {
+            _connectVm.ErrorMessage = $"Verification failed: {ex.Message}";
+        }
+        finally
+        {
+            _connectVm.IsLoading = false;
+        }
+    }
+
     protected override void OnClosing(System.ComponentModel.CancelEventArgs e)
     {
         base.OnClosing(e);
diff --git a/Client/OwnCord.Client/Models/ApiResponses.cs b/Client/OwnCord.Client/Models/ApiResponses.cs
index 83c8e16a..0be84111 100644
--- a/Client/OwnCord.Client/Models/ApiResponses.cs
+++ b/Client/OwnCord.Client/Models/ApiResponses.cs
@@ -5,7 +5,9 @@ namespace OwnCord.Client.Models;
 /// <summary>REST API response for login and register endpoints.</summary>
 public record AuthResponse(
     [property: JsonPropertyName("token")] string Token,
-    [property: JsonPropertyName("user")] ApiUser User
+    [property: JsonPropertyName("user")] ApiUser? User,
+    [property: JsonPropertyName("requires_2fa")] bool Requires2FA = false,
+    [property: JsonPropertyName("partial_token")] string? PartialToken = null
 );
 
 /// <summary>User shape returned by auth endpoints.</summary>
@@ -49,7 +51,17 @@ public record ApiMessage(
     [property: JsonPropertyName("pinned")] bool Pinned,
     [property: JsonPropertyName("timestamp")] string Timestamp,
     [property: JsonPropertyName("username")] string Username,
-    [property: JsonPropertyName("avatar")] string? Avatar
+    [property: JsonPropertyName("avatar")] string? Avatar,
+    [property: JsonPropertyName("attachments")] IReadOnlyList<ApiAttachment>? Attachments = null
+);
+
+/// <summary>Single attachment from the REST API.</summary>
+public record ApiAttachment(
+    [property: JsonPropertyName("id")] string Id,
+    [property: JsonPropertyName("filename")] string Filename,
+    [property: JsonPropertyName("size")] long Size,
+    [property: JsonPropertyName("mime")] string Mime,
+    [property: JsonPropertyName("url")] string Url
 );
 
 /// <summary>Error response shape from all REST endpoints.</summary>
diff --git a/Client/OwnCord.Client/Models/Channel.cs b/Client/OwnCord.Client/Models/Channel.cs
index ad6c3451..1171d598 100644
--- a/Client/OwnCord.Client/Models/Channel.cs
+++ b/Client/OwnCord.Client/Models/Channel.cs
@@ -9,5 +9,6 @@ public record Channel(
     string? Category,
     int Position,
     int UnreadCount,
-    long? LastMessageId
+    long? LastMessageId,
+    string? Topic = null
 );
diff --git a/Client/OwnCord.Client/Models/ChannelGroup.cs b/Client/OwnCord.Client/Models/ChannelGroup.cs
new file mode 100644
index 00000000..a83c13a7
--- /dev/null
+++ b/Client/OwnCord.Client/Models/ChannelGroup.cs
@@ -0,0 +1,33 @@
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+namespace OwnCord.Client.Models;
+
+/// <summary>
+/// Groups channels by category for the sidebar. Supports collapse/expand.
+/// </summary>
+public sealed class ChannelGroup : INotifyPropertyChanged
+{
+    private bool _isExpanded = true;
+
+    public string? CategoryName { get; init; }
+    public ObservableCollection<ChannelItem> Items { get; } = [];
+
+    public bool IsExpanded
+    {
+        get => _isExpanded;
+        set { if (_isExpanded != value) { _isExpanded = value; OnPropertyChanged(); } }
+    }
+
+    /// <summary>Display name: uppercase category or empty for ungrouped.</summary>
+    public string DisplayName => CategoryName?.ToUpperInvariant() ?? string.Empty;
+
+    /// <summary>True if this group has a category name (shows header).</summary>
+    public bool HasCategory => CategoryName is not null;
+
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    private void OnPropertyChanged([CallerMemberName] string? name = null)
+        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
+}
diff --git a/Client/OwnCord.Client/Models/ChannelItem.cs b/Client/OwnCord.Client/Models/ChannelItem.cs
new file mode 100644
index 00000000..eb1b2dbc
--- /dev/null
+++ b/Client/OwnCord.Client/Models/ChannelItem.cs
@@ -0,0 +1,19 @@
+using System.Collections.ObjectModel;
+
+namespace OwnCord.Client.Models;
+
+/// <summary>
+/// Wraps a Channel with its associated voice users for display in the sidebar.
+/// </summary>
+public sealed class ChannelItem
+{
+    public Channel Channel { get; init; } = null!;
+    public ObservableCollection<VoiceStateInfo> VoiceUsers { get; } = [];
+
+    // Convenience pass-through for binding
+    public long Id => Channel.Id;
+    public string Name => Channel.Name;
+    public ChannelType Type => Channel.Type;
+    public int UnreadCount => Channel.UnreadCount;
+    public string? Topic => Channel.Topic;
+}
diff --git a/Client/OwnCord.Client/Models/MemberGroup.cs b/Client/OwnCord.Client/Models/MemberGroup.cs
new file mode 100644
index 00000000..9202747f
--- /dev/null
+++ b/Client/OwnCord.Client/Models/MemberGroup.cs
@@ -0,0 +1,15 @@
+using System.Collections.ObjectModel;
+
+namespace OwnCord.Client.Models;
+
+/// <summary>
+/// Groups members by their role for the member list sidebar.
+/// </summary>
+public sealed class MemberGroup
+{
+    public string RoleName { get; init; } = string.Empty;
+    public string? RoleColor { get; init; }
+    public int Position { get; init; }
+    public ObservableCollection<User> Members { get; } = [];
+    public int MemberCount => Members.Count;
+}
diff --git a/Client/OwnCord.Client/Models/Message.cs b/Client/OwnCord.Client/Models/Message.cs
index 7eece74f..2ef13f73 100644
--- a/Client/OwnCord.Client/Models/Message.cs
+++ b/Client/OwnCord.Client/Models/Message.cs
@@ -1,5 +1,13 @@
 namespace OwnCord.Client.Models;
 
+public record Attachment(
+    string Id,
+    string Filename,
+    long Size,
+    string Mime,
+    string Url
+);
+
 public record Message(
     long Id,
     long ChannelId,
@@ -9,7 +17,8 @@ public record Message(
     long? ReplyToId,
     string? EditedAt,
     bool Deleted,
-    IReadOnlyList<Reaction> Reactions
+    IReadOnlyList<Reaction> Reactions,
+    IReadOnlyList<Attachment> Attachments
 );
 
 public record Reaction(string Emoji, int Count, bool Me);
diff --git a/Client/OwnCord.Client/Models/MessageDisplayItem.cs b/Client/OwnCord.Client/Models/MessageDisplayItem.cs
new file mode 100644
index 00000000..f37b2a38
--- /dev/null
+++ b/Client/OwnCord.Client/Models/MessageDisplayItem.cs
@@ -0,0 +1,70 @@
+namespace OwnCord.Client.Models;
+
+/// <summary>
+/// Wraps a Message with computed display properties for the UI.
+/// Handles message grouping (consecutive same-author) and day dividers.
+/// </summary>
+public sealed class MessageDisplayItem
+{
+    public Message Message { get; }
+
+    /// <summary>True when this message is from the same author as the previous one
+    /// and within 7 minutes — avatar and author name should be hidden.</summary>
+    public bool IsGrouped { get; }
+
+    /// <summary>True when this message is the first of a new calendar day.</summary>
+    public bool ShowDayDivider { get; }
+
+    /// <summary>Formatted day divider text (e.g. "March 15, 2026").</summary>
+    public string? DayDividerText { get; }
+
+    /// <summary>The message this replies to (if any) — set externally by the ViewModel.</summary>
+    public Message? ReplyToMessage { get; init; }
+
+    // ── Pass-through convenience properties ──
+
+    public long Id => Message.Id;
+    public User Author => Message.Author;
+    public string Content => Message.Content;
+    public DateTime Timestamp => Message.Timestamp;
+    public long? ReplyToId => Message.ReplyToId;
+    public string? EditedAt => Message.EditedAt;
+    public bool Deleted => Message.Deleted;
+    public IReadOnlyList<Reaction> Reactions => Message.Reactions;
+    public IReadOnlyList<Attachment> Attachments => Message.Attachments;
+    public bool IsEdited => EditedAt is not null;
+    public bool HasReactions => Reactions.Count > 0;
+    public bool HasAttachments => Attachments.Count > 0;
+    public bool IsReply => ReplyToId is not null && ReplyToMessage is not null;
+    public bool IsSystemMessage => Message.Author.Username == "System" || Content.StartsWith("[");
+
+    /// <summary>True when the current user authored this message (for showing edit/delete actions).</summary>
+    public bool IsOwnMessage { get; init; }
+
+    public MessageDisplayItem(Message message, Message? previousMessage)
+    {
+        Message = message;
+
+        // Day divider logic
+        if (previousMessage is null ||
+            message.Timestamp.Date != previousMessage.Timestamp.Date)
+        {
+            ShowDayDivider = true;
+            DayDividerText = message.Timestamp.Date == DateTime.Today
+                ? "Today"
+                : message.Timestamp.Date == DateTime.Today.AddDays(-1)
+                    ? "Yesterday"
+                    : message.Timestamp.ToString("MMMM d, yyyy");
+        }
+
+        // Grouping logic: same author, within 7 minutes, no day break, not a reply
+        if (previousMessage is not null &&
+            !ShowDayDivider &&
+            message.Author.Id == previousMessage.Author.Id &&
+            message.ReplyToId is null &&
+            (message.Timestamp - previousMessage.Timestamp).TotalMinutes <= 7)
+        {
+            IsGrouped = true;
+        }
+    }
+}
diff --git a/Client/OwnCord.Client/Models/ServerProfile.cs b/Client/OwnCord.Client/Models/ServerProfile.cs
index a696664c..0ca0a199 100644
--- a/Client/OwnCord.Client/Models/ServerProfile.cs
+++ b/Client/OwnCord.Client/Models/ServerProfile.cs
@@ -1,3 +1,5 @@
+using System.Text.Json.Serialization;
+
 namespace OwnCord.Client.Models;
 
 public record ServerProfile(
@@ -5,9 +7,21 @@ public record ServerProfile(
     string Name,
     string Host,
     string? LastUsername,
-    bool AutoConnect
+    bool AutoConnect,
+    [property: JsonPropertyName("port")] int Port = 8443,
+    [property: JsonPropertyName("color")] string Color = "#5865f2",
+    [property: JsonPropertyName("last_connected")] DateTime? LastConnected = null
 )
 {
-    public static ServerProfile Create(string name, string host, string? lastUsername = null, bool autoConnect = false)
-        => new(Guid.NewGuid().ToString(), name, host, lastUsername, autoConnect);
+    public static ServerProfile Create(
+        string name,
+        string host,
+        string? lastUsername = null,
+        bool autoConnect = false,
+        int port = 8443,
+        string color = "#5865f2")
+        => new(Guid.NewGuid().ToString(), name, host, lastUsername, autoConnect, port, color, null);
+
+    /// <summary>Returns host:port for display, omitting port if it is the default 8443.</summary>
+    public string HostDisplay => Port == 8443 ? Host : $"{Host}:{Port}";
 }
diff --git a/Client/OwnCord.Client/Models/VoiceStateInfo.cs b/Client/OwnCord.Client/Models/VoiceStateInfo.cs
new file mode 100644
index 00000000..1821af6a
--- /dev/null
+++ b/Client/OwnCord.Client/Models/VoiceStateInfo.cs
@@ -0,0 +1,42 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+namespace OwnCord.Client.Models;
+
+/// <summary>
+/// Mutable view-model-friendly class representing a user's voice state.
+/// Implements INotifyPropertyChanged so the UI can bind to Speaking, Muted, etc.
+/// </summary>
+public sealed class VoiceStateInfo : INotifyPropertyChanged
+{
+    private bool _muted;
+    private bool _deafened;
+    private bool _speaking;
+
+    public long UserId { get; init; }
+    public long ChannelId { get; set; }
+    public string Username { get; init; } = string.Empty;
+
+    public bool Muted
+    {
+        get => _muted;
+        set { if (_muted != value) { _muted = value; OnPropertyChanged(); } }
+    }
+
+    public bool Deafened
+    {
+        get => _deafened;
+        set { if (_deafened != value) { _deafened = value; OnPropertyChanged(); } }
+    }
+
+    public bool Speaking
+    {
+        get => _speaking;
+        set { if (_speaking != value) { _speaking = value; OnPropertyChanged(); } }
+    }
+
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    private void OnPropertyChanged([CallerMemberName] string? name = null)
+        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
+}
diff --git a/Client/OwnCord.Client/Models/WsEnvelope.cs b/Client/OwnCord.Client/Models/WsEnvelope.cs
index 121bb4d6..4568ccb5 100644
--- a/Client/OwnCord.Client/Models/WsEnvelope.cs
+++ b/Client/OwnCord.Client/Models/WsEnvelope.cs
@@ -65,7 +65,8 @@ public record ChatMessagePayload(
     [property: JsonPropertyName("user")] WsUser User,
     [property: JsonPropertyName("content")] string Content,
     [property: JsonPropertyName("reply_to")] long? ReplyTo,
-    [property: JsonPropertyName("timestamp")] string Timestamp
+    [property: JsonPropertyName("timestamp")] string Timestamp,
+    [property: JsonPropertyName("attachments")] IReadOnlyList<ApiAttachment>? Attachments = null
 );
 
 public record ChatSendOkPayload(
@@ -122,3 +123,31 @@ public record ChannelEventPayload(
     [property: JsonPropertyName("topic")] string? Topic,
     [property: JsonPropertyName("position")] int Position
 );
+
+// ── Voice payloads ───────────────────────────────────────────────────────────
+
+public record VoiceStatePayload(
+    [property: JsonPropertyName("user_id")] long UserId,
+    [property: JsonPropertyName("channel_id")] long ChannelId,
+    [property: JsonPropertyName("username")] string Username,
+    [property: JsonPropertyName("muted")] bool Muted,
+    [property: JsonPropertyName("deafened")] bool Deafened
+);
+
+public record VoiceLeavePayload(
+    [property: JsonPropertyName("user_id")] long UserId,
+    [property: JsonPropertyName("channel_id")] long ChannelId
+);
+
+public record VoiceConfigPayload(
+    [property: JsonPropertyName("channel_id")] long ChannelId,
+    [property: JsonPropertyName("quality")] string Quality,
+    [property: JsonPropertyName("bitrate")] int Bitrate,
+    [property: JsonPropertyName("mode")] string Mode
+);
+
+public record VoiceSpeakersPayload(
+    [property: JsonPropertyName("channel_id")] long ChannelId,
+    [property: JsonPropertyName("speakers")] IReadOnlyList<long> Speakers,
+    [property: JsonPropertyName("mode")] string Mode
+);
diff --git a/Client/OwnCord.Client/Services/ApiClient.cs b/Client/OwnCord.Client/Services/ApiClient.cs
index fbb1fd1b..ee4c8af8 100644
--- a/Client/OwnCord.Client/Services/ApiClient.cs
+++ b/Client/OwnCord.Client/Services/ApiClient.cs
@@ -108,6 +108,13 @@ public sealed class ApiClient : IApiClient
         return await ReadOrThrowAsync<MessagesResponse>(response, ct);
     }
 
+    public async Task<AuthResponse> VerifyTotpAsync(string host, string partialToken, string code, CancellationToken ct = default)
+    {
+        var body = new { partial_token = partialToken, code };
+        var response = await PostJsonAsync(host, "/api/v1/auth/verify-totp", body, ct);
+        return await ReadOrThrowAsync<AuthResponse>(response, ct);
+    }
+
     public async Task<HealthResponse> HealthCheckAsync(string host, CancellationToken ct = default)
     {
         TofuHostContext.CurrentHost = NormalizeHost(host);
diff --git a/Client/OwnCord.Client/Services/ChatService.cs b/Client/OwnCord.Client/Services/ChatService.cs
index 0d17f4a4..3bbbce40 100644
--- a/Client/OwnCord.Client/Services/ChatService.cs
+++ b/Client/OwnCord.Client/Services/ChatService.cs
@@ -38,6 +38,10 @@ public sealed class ChatService : IChatService
     public event Action<ChannelEventPayload>? ChannelUpdated;
     public event Action<long>? ChannelDeleted;
     public event Action<string>? ConnectionLost;
+    public event Action<VoiceStatePayload>? VoiceStateReceived;
+    public event Action<VoiceLeavePayload>? VoiceLeaveReceived;
+    public event Action<VoiceConfigPayload>? VoiceConfigReceived;
+    public event Action<VoiceSpeakersPayload>? VoiceSpeakersReceived;
 
     public ChatService(IApiClient api, IWebSocketService ws)
     {
@@ -68,6 +72,15 @@ public sealed class ChatService : IChatService
         return result;
     }
 
+    public async Task<AuthResponse> VerifyTotpAsync(string host, string partialToken, string code, CancellationToken ct = default)
+    {
+        var result = await _api.VerifyTotpAsync(host, partialToken, code, ct);
+        _host = ApiClient.NormalizeHost(host);
+        CurrentToken = result.Token;
+        CurrentUser = result.User;
+        return result;
+    }
+
     public async Task LogoutAsync(CancellationToken ct = default)
     {
         _intentionalDisconnect = true;
@@ -139,6 +152,28 @@ public sealed class ChatService : IChatService
         return _ws.SendAsync(envelope, ct);
     }
 
+    public Task EditMessageAsync(long messageId, string content, CancellationToken ct = default)
+    {
+        var envelope = new
+        {
+            type = "chat_edit",
+            id = Guid.NewGuid().ToString(),
+            payload = new { message_id = messageId, content }
+        };
+        return _ws.SendAsync(envelope, ct);
+    }
+
+    public Task DeleteMessageAsync(long messageId, CancellationToken ct = default)
+    {
+        var envelope = new
+        {
+            type = "chat_delete",
+            id = Guid.NewGuid().ToString(),
+            payload = new { message_id = messageId }
+        };
+        return _ws.SendAsync(envelope, ct);
+    }
+
     public Task SendTypingAsync(long channelId, CancellationToken ct = default)
     {
         var envelope = new
@@ -159,6 +194,54 @@ public sealed class ChatService : IChatService
         return _ws.SendAsync(envelope, ct);
     }
 
+    public Task SendStatusChangeAsync(string status, CancellationToken ct = default)
+    {
+        var envelope = new
+        {
+            type = "presence_update",
+            payload = new { status }
+        };
+        return _ws.SendAsync(envelope, ct);
+    }
+
+    // ── Voice outbound actions ─────────────────────────────────────────────
+
+    public Task JoinVoiceAsync(long channelId, CancellationToken ct = default)
+    {
+        var envelope = new
+        {
+            type = "voice_join",
+            payload = new { channel_id = channelId }
+        };
+        return _ws.SendAsync(envelope, ct);
+    }
+
+    public Task LeaveVoiceAsync(CancellationToken ct = default)
+    {
+        var envelope = new { type = "voice_leave" };
+        return _ws.SendAsync(envelope, ct);
+    }
+
+    public Task SendVoiceMuteAsync(bool muted, CancellationToken ct = default)
+    {
+        var envelope = new
+        {
+            type = "voice_mute",
+            payload = new { muted }
+        };
+        return _ws.SendAsync(envelope, ct);
+    }
+
+    public Task SendVoiceDeafenAsync(bool deafened, CancellationToken ct = default)
+    {
+        var envelope = new
+        {
+            type = "voice_deafen",
+            payload = new { deafened }
+        };
+        return _ws.SendAsync(envelope, ct);
+    }
+
     // ── Inbound message dispatch ────────────────────────────────────────────
 
     private void OnMessageReceived(string json)
@@ -217,6 +300,18 @@ public sealed class ChatService : IChatService
                     if (delPayload?.TryGetProperty("id", out var idEl) == true)
                         ChannelDeleted?.Invoke(idEl.GetInt64());
                     break;
+                case "voice_state":
+                    VoiceStateReceived?.Invoke(Deserialize<VoiceStatePayload>(envelope));
+                    break;
+                case "voice_leave":
+                    VoiceLeaveReceived?.Invoke(Deserialize<VoiceLeavePayload>(envelope));
+                    break;
+                case "voice_config":
+                    VoiceConfigReceived?.Invoke(Deserialize<VoiceConfigPayload>(envelope));
+                    break;
+                case "voice_speakers":
+                    VoiceSpeakersReceived?.Invoke(Deserialize<VoiceSpeakersPayload>(envelope));
+                    break;
                 // Unknown types silently ignored — forward compatibility
             }
         }
diff --git a/Client/OwnCord.Client/Services/EmojiData.cs b/Client/OwnCord.Client/Services/EmojiData.cs
new file mode 100644
index 00000000..a9491b5e
--- /dev/null
+++ b/Client/OwnCord.Client/Services/EmojiData.cs
@@ -0,0 +1,16 @@
+namespace OwnCord.Client.Services;
+
+public static class EmojiData
+{
+    public record EmojiCategory(string Name, IReadOnlyList<string> Emojis);
+
+    public static IReadOnlyList<EmojiCategory> Categories { get; } = new[]
+    {
+        new EmojiCategory("Smileys", new[] { "\U0001F600", "\U0001F603", "\U0001F604", "\U0001F601", "\U0001F606", "\U0001F605", "\U0001F923", "\U0001F602", "\U0001F642", "\U0001F60A", "\U0001F607", "\U0001F970", "\U0001F60D", "\U0001F929", "\U0001F618", "\U0001F617", "\U0001F61A", "\U0001F619", "\U0001F972", "\U0001F60B", "\U0001F61B", "\U0001F61C", "\U0001F92A", "\U0001F61D", "\U0001F911", "\U0001F917", "\U0001F92D", "\U0001F92B", "\U0001F914", "\U0001FAE1", "\U0001F910", "\U0001F928", "\U0001F610", "\U0001F611", "\U0001F636", "\U0001FAE5", "\U0001F60F", "\U0001F612", "\U0001F644", "\U0001F62C", "\U0001F925", "\U0001F60C", "\U0001F614", "\U0001F62A", "\U0001F924", "\U0001F634", "\U0001F637", "\U0001F912", "\U0001F915" }),
+        new EmojiCategory("People", new[] { "\U0001F44B", "\U0001F91A", "\U0001F590", "\u270B", "\U0001F596", "\U0001F44C", "\U0001F90C", "\U0001F90F", "\u270C", "\U0001F91E", "\U0001F91F", "\U0001F918", "\U0001F919", "\U0001F448", "\U0001F449", "\U0001F446", "\U0001F595", "\U0001F447", "\u261D", "\U0001F44D", "\U0001F44E", "\u270A", "\U0001F44A", "\U0001F91B", "\U0001F91C", "\U0001F44F", "\U0001F64C", "\U0001F450", "\U0001F932", "\U0001F91D", "\U0001F64F" }),
+        new EmojiCategory("Nature", new[] { "\U0001F436", "\U0001F431", "\U0001F42D", "\U0001F439", "\U0001F430", "\U0001F98A", "\U0001F43B", "\U0001F43C", "\U0001F43B\u200D\u2744", "\U0001F428", "\U0001F42F", "\U0001F981", "\U0001F42E", "\U0001F437", "\U0001F438", "\U0001F435", "\U0001F338", "\U0001F339", "\U0001F33A", "\U0001F33B", "\U0001F33C", "\U0001F337", "\U0001F331", "\U0001F332", "\U0001F333", "\U0001F334", "\U0001F340", "\U0001F341", "\U0001F342", "\U0001F343" }),
+        new EmojiCategory("Food", new[] { "\U0001F34E", "\U0001F350", "\U0001F34A", "\U0001F34B", "\U0001F34C", "\U0001F349", "\U0001F347", "\U0001F353", "\U0001FAD0", "\U0001F348", "\U0001F352", "\U0001F351", "\U0001F96D", "\U0001F34D", "\U0001F965", "\U0001F95D", "\U0001F345", "\U0001F346", "\U0001F951", "\U0001F966", "\U0001F96C", "\U0001F336", "\U0001F33D", "\U0001F955", "\U0001F9C4", "\U0001F9C5", "\U0001F954", "\U0001F360", "\U0001F950", "\U0001F355" }),
+        new EmojiCategory("Objects", new[] { "\u231A", "\U0001F4F1", "\U0001F4BB", "\u2328", "\U0001F5A5", "\U0001F5A8", "\U0001F5B1", "\U0001F4BF", "\U0001F4C0", "\U0001F3AE", "\U0001F579", "\U0001F3A7", "\U0001F3A4", "\U0001F3B5", "\U0001F3B6", "\U0001F3B8", "\U0001F3B9", "\U0001F3BA", "\U0001F3BB", "\U0001F941", "\U0001F4F7", "\U0001F4F8", "\U0001F4F9", "\U0001F3AC", "\U0001F4FA", "\U0001F4FB", "\U0001F514", "\U0001F515", "\U0001F4E3", "\U0001F4A1" }),
+        new EmojiCategory("Symbols", new[] { "\u2764", "\U0001F9E1", "\U0001F49B", "\U0001F49A", "\U0001F499", "\U0001F49C", "\U0001F5A4", "\U0001F90D", "\U0001F90E", "\U0001F494", "\u2763", "\U0001F495", "\U0001F49E", "\U0001F493", "\U0001F497", "\U0001F496", "\U0001F498", "\U0001F49D", "\u2B50", "\U0001F31F", "\U0001F4AB", "\u2728", "\u26A1", "\U0001F525", "\U0001F4A5", "\U0001F389", "\U0001F38A", "\u2705", "\u274C", "\u26A0" })
+    };
+}
diff --git a/Client/OwnCord.Client/Services/IApiClient.cs b/Client/OwnCord.Client/Services/IApiClient.cs
index f487ca90..b5abc63c 100644
--- a/Client/OwnCord.Client/Services/IApiClient.cs
+++ b/Client/OwnCord.Client/Services/IApiClient.cs
@@ -12,4 +12,5 @@ public interface IApiClient
     Task<IReadOnlyList<ApiChannel>> GetChannelsAsync(string host, string token, CancellationToken ct = default);
     Task<MessagesResponse> GetMessagesAsync(string host, string token, long channelId, int limit = 50, long? before = null, CancellationToken ct = default);
     Task<HealthResponse> HealthCheckAsync(string host, CancellationToken ct = default);
+    Task<AuthResponse> VerifyTotpAsync(string host, string partialToken, string code, CancellationToken ct = default);
 }
diff --git a/Client/OwnCord.Client/Services/IChatService.cs b/Client/OwnCord.Client/Services/IChatService.cs
index 48a08d78..44c4d010 100644
--- a/Client/OwnCord.Client/Services/IChatService.cs
+++ b/Client/OwnCord.Client/Services/IChatService.cs
@@ -19,6 +19,7 @@ public interface IChatService
     Task<AuthResponse> LoginAsync(string host, string username, string password, CancellationToken ct = default);
     Task<AuthResponse> RegisterAsync(string host, string username, string password, string inviteCode, CancellationToken ct = default);
     Task LogoutAsync(CancellationToken ct = default);
+    Task<AuthResponse> VerifyTotpAsync(string host, string partialToken, string code, CancellationToken ct = default);
 
     // ── WebSocket lifecycle ─────────────────────────────────────────────────
 
@@ -33,8 +34,18 @@ public interface IChatService
     // ── Outbound actions (sent over WebSocket) ──────────────────────────────
 
     Task SendMessageAsync(long channelId, string content, long? replyTo = null, CancellationToken ct = default);
+    Task EditMessageAsync(long messageId, string content, CancellationToken ct = default);
+    Task DeleteMessageAsync(long messageId, CancellationToken ct = default);
     Task SendTypingAsync(long channelId, CancellationToken ct = default);
     Task SendChannelFocusAsync(long channelId, CancellationToken ct = default);
+    Task SendStatusChangeAsync(string status, CancellationToken ct = default);
+
+    // ── Voice outbound actions ──────────────────────────────────────────────
+
+    Task JoinVoiceAsync(long channelId, CancellationToken ct = default);
+    Task LeaveVoiceAsync(CancellationToken ct = default);
+    Task SendVoiceMuteAsync(bool muted, CancellationToken ct = default);
+    Task SendVoiceDeafenAsync(bool deafened, CancellationToken ct = default);
 
     // ── Events (server → client) ────────────────────────────────────────────
 
@@ -54,4 +65,11 @@ public interface IChatService
     event Action<ChannelEventPayload>? ChannelUpdated;
     event Action<long>? ChannelDeleted;
     event Action<string>? ConnectionLost;
+
+    // ── Voice events ────────────────────────────────────────────────────────
+
+    event Action<VoiceStatePayload>? VoiceStateReceived;
+    event Action<VoiceLeavePayload>? VoiceLeaveReceived;
+    event Action<VoiceConfigPayload>? VoiceConfigReceived;
+    event Action<VoiceSpeakersPayload>? VoiceSpeakersReceived;
 }
diff --git a/Client/OwnCord.Client/Services/MessageContentParser.cs b/Client/OwnCord.Client/Services/MessageContentParser.cs
new file mode 100644
index 00000000..d3c8405b
--- /dev/null
+++ b/Client/OwnCord.Client/Services/MessageContentParser.cs
@@ -0,0 +1,142 @@
+using System.Text.RegularExpressions;
+
+namespace OwnCord.Client.Services;
+
+/// <summary>
+/// Parses message content into segments for rich rendering.
+/// Handles code blocks (```), inline code (`), bold (**), italic (*), and plain text.
+/// </summary>
+public static class MessageContentParser
+{
+    public enum SegmentType { Text, CodeBlock, InlineCode, Bold, Italic }
+
+    public record ContentSegment(SegmentType Type, string Text, string? Language = null);
+
+    // Matches ```language\n...\n``` (multiline)
+    private static readonly Regex CodeBlockRegex = new(
+        @"```(\w*)\n?([\s\S]*?)```",
+        RegexOptions.Compiled);
+
+    // Matches `...` (single backtick inline code, no newlines)
+    private static readonly Regex InlineCodeRegex = new(
+        @"`([^`\n]+)`",
+        RegexOptions.Compiled);
+
+    // Matches **...** (bold)
+    private static readonly Regex BoldRegex = new(
+        @"\*\*(.+?)\*\*",
+        RegexOptions.Compiled);
+
+    // Matches *...* (italic, but not **)
+    private static readonly Regex ItalicRegex = new(
+        @"(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)",
+        RegexOptions.Compiled);
+
+    public static IReadOnlyList<ContentSegment> Parse(string content)
+    {
+        if (string.IsNullOrEmpty(content))
+            return Array.Empty<ContentSegment>();
+
+        var segments = new List<ContentSegment>();
+        ParseCodeBlocks(content, segments);
+        return segments;
+    }
+
+    private static void ParseCodeBlocks(string text, List<ContentSegment> segments)
+    {
+        var lastIndex = 0;
+
+        foreach (Match match in CodeBlockRegex.Matches(text))
+        {
+            if (match.Index > lastIndex)
+            {
+                ParseInlineCode(text[lastIndex..match.Index], segments);
+            }
+
+            var language = match.Groups[1].Value;
+            var code = match.Groups[2].Value;
+            segments.Add(new ContentSegment(
+                SegmentType.CodeBlock,
+                code,
+                string.IsNullOrEmpty(language) ? null : language));
+
+            lastIndex = match.Index + match.Length;
+        }
+
+        if (lastIndex < text.Length)
+        {
+            ParseInlineCode(text[lastIndex..], segments);
+        }
+    }
+
+    private static void ParseInlineCode(string text, List<ContentSegment> segments)
+    {
+        var lastIndex = 0;
+
+        foreach (Match match in InlineCodeRegex.Matches(text))
+        {
+            if (match.Index > lastIndex)
+            {
+                ParseBoldAndItalic(text[lastIndex..match.Index], segments);
+            }
+
+            segments.Add(new ContentSegment(SegmentType.InlineCode, match.Groups[1].Value));
+            lastIndex = match.Index + match.Length;
+        }
+
+        if (lastIndex < text.Length)
+        {
+            ParseBoldAndItalic(text[lastIndex..], segments);
+        }
+    }
+
+    private static void ParseBoldAndItalic(string text, List<ContentSegment> segments)
+    {
+        var lastIndex = 0;
+
+        foreach (Match match in BoldRegex.Matches(text))
+        {
+            if (match.Index > lastIndex)
+            {
+                ParseItalic(text[lastIndex..match.Index], segments);
+            }
+
+            segments.Add(new ContentSegment(SegmentType.Bold, match.Groups[1].Value));
+            lastIndex = match.Index + match.Length;
+        }
+
+        if (lastIndex < text.Length)
+        {
+            ParseItalic(text[lastIndex..], segments);
+        }
+    }
+
+    private static void ParseItalic(string text, List<ContentSegment> segments)
+    {
+        var lastIndex = 0;
+
+        foreach (Match match in ItalicRegex.Matches(text))
+        {
+            if (match.Index > lastIndex)
+            {
+                AddTextSegment(text[lastIndex..match.Index], segments);
+            }
+
+            segments.Add(new ContentSegment(SegmentType.Italic, match.Groups[1].Value));
+            lastIndex = match.Index + match.Length;
+        }
+
+        if (lastIndex < text.Length)
+        {
+            AddTextSegment(text[lastIndex..], segments);
+        }
+    }
+
+    private static void AddTextSegment(string text, List<ContentSegment> segments)
+    {
+        if (!string.IsNullOrEmpty(text))
+        {
+            segments.Add(new ContentSegment(SegmentType.Text, text));
+        }
+    }
+}
diff --git a/Client/OwnCord.Client/Services/ToastService.cs b/Client/OwnCord.Client/Services/ToastService.cs
new file mode 100644
index 00000000..f39b5fc0
--- /dev/null
+++ b/Client/OwnCord.Client/Services/ToastService.cs
@@ -0,0 +1,22 @@
+namespace OwnCord.Client.Services;
+
+public sealed class ToastService
+{
+    public string? CurrentMessage { get; private set; }
+    public bool IsVisible { get; private set; }
+
+    public event Action? ToastChanged;
+
+    public void Show(string message)
+    {
+        CurrentMessage = message;
+        IsVisible = true;
+        ToastChanged?.Invoke();
+    }
+
+    public void Hide()
+    {
+        IsVisible = false;
+        ToastChanged?.Invoke();
+    }
+}
diff --git a/Client/OwnCord.Client/Themes/Colors.xaml b/Client/OwnCord.Client/Themes/Colors.xaml
new file mode 100644
index 00000000..ef34b759
--- /dev/null
+++ b/Client/OwnCord.Client/Themes/Colors.xaml
@@ -0,0 +1,71 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- ═══ Background ═══ -->
+    <Color x:Key="BgTertiaryColor">#1e1f22</Color>
+    <Color x:Key="BgSecondaryColor">#2b2d31</Color>
+    <Color x:Key="BgPrimaryColor">#313338</Color>
+    <Color x:Key="BgInputColor">#383a40</Color>
+    <Color x:Key="BgHoverColor">#35373c</Color>
+    <Color x:Key="BgActiveColor">#404249</Color>
+    <Color x:Key="BgOverlayColor">#B3000000</Color>
+
+    <SolidColorBrush x:Key="BgTertiary" Color="{StaticResource BgTertiaryColor}"/>
+    <SolidColorBrush x:Key="BgSecondary" Color="{StaticResource BgSecondaryColor}"/>
+    <SolidColorBrush x:Key="BgPrimary" Color="{StaticResource BgPrimaryColor}"/>
+    <SolidColorBrush x:Key="BgInput" Color="{StaticResource BgInputColor}"/>
+    <SolidColorBrush x:Key="BgHover" Color="{StaticResource BgHoverColor}"/>
+    <SolidColorBrush x:Key="BgActive" Color="{StaticResource BgActiveColor}"/>
+    <SolidColorBrush x:Key="BgOverlay" Color="{StaticResource BgOverlayColor}"/>
+
+    <!-- ═══ Accent ═══ -->
+    <Color x:Key="AccentColor">#5865f2</Color>
+    <Color x:Key="AccentHoverColor">#4752c4</Color>
+    <Color x:Key="AccentActiveColor">#3c45a5</Color>
+
+    <SolidColorBrush x:Key="Accent" Color="{StaticResource AccentColor}"/>
+    <SolidColorBrush x:Key="AccentHover" Color="{StaticResource AccentHoverColor}"/>
+    <SolidColorBrush x:Key="AccentActive" Color="{StaticResource AccentActiveColor}"/>
+
+    <!-- ═══ Text ═══ -->
+    <Color x:Key="TextNormalColor">#dbdee1</Color>
+    <Color x:Key="TextMutedColor">#949ba4</Color>
+    <Color x:Key="TextFaintColor">#80848e</Color>
+    <Color x:Key="TextMicroColor">#6d6f78</Color>
+    <Color x:Key="TextLinkColor">#00a8fc</Color>
+
+    <SolidColorBrush x:Key="TextNormal" Color="{StaticResource TextNormalColor}"/>
+    <SolidColorBrush x:Key="TextMuted" Color="{StaticResource TextMutedColor}"/>
+    <SolidColorBrush x:Key="TextFaint" Color="{StaticResource TextFaintColor}"/>
+    <SolidColorBrush x:Key="TextMicro" Color="{StaticResource TextMicroColor}"/>
+    <SolidColorBrush x:Key="TextLink" Color="{StaticResource TextLinkColor}"/>
+
+    <!-- ═══ Semantic ═══ -->
+    <Color x:Key="GreenColor">#23a55a</Color>
+    <Color x:Key="YellowColor">#f0b232</Color>
+    <Color x:Key="RedColor">#f23f43</Color>
+
+    <SolidColorBrush x:Key="Green" Color="{StaticResource GreenColor}"/>
+    <SolidColorBrush x:Key="Yellow" Color="{StaticResource YellowColor}"/>
+    <SolidColorBrush x:Key="Red" Color="{StaticResource RedColor}"/>
+
+    <!-- ═══ Border ═══ -->
+    <Color x:Key="BorderColor">#3f4147</Color>
+    <Color x:Key="BorderStrongColor">#4e5058</Color>
+
+    <SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}"/>
+    <SolidColorBrush x:Key="BorderStrong" Color="{StaticResource BorderStrongColor}"/>
+
+    <!-- ═══ Role Colors ═══ -->
+    <SolidColorBrush x:Key="RoleOwner" Color="#e74c3c"/>
+    <SolidColorBrush x:Key="RoleAdmin" Color="#f39c12"/>
+    <SolidColorBrush x:Key="RoleMod" Color="#2ecc71"/>
+    <SolidColorBrush x:Key="RoleMember" Color="#949ba4"/>
+
+    <!-- ═══ Status ═══ -->
+    <SolidColorBrush x:Key="StatusOnline" Color="{StaticResource GreenColor}"/>
+    <SolidColorBrush x:Key="StatusIdle" Color="{StaticResource YellowColor}"/>
+    <SolidColorBrush x:Key="StatusDnd" Color="{StaticResource RedColor}"/>
+    <SolidColorBrush x:Key="StatusOffline" Color="#6d6f78"/>
+
+</ResourceDictionary>
diff --git a/Client/OwnCord.Client/Themes/Controls.xaml b/Client/OwnCord.Client/Themes/Controls.xaml
new file mode 100644
index 00000000..8ef8a2c4
--- /dev/null
+++ b/Client/OwnCord.Client/Themes/Controls.xaml
@@ -0,0 +1,285 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- ═══ TextBox ═══ -->
+    <Style x:Key="ModernTextBox" TargetType="TextBox">
+        <Setter Property="Background" Value="{StaticResource BgTertiary}"/>
+        <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="Padding" Value="12,10"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="CaretBrush" Value="{StaticResource TextNormal}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="TextBox">
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="4">
+                        <ScrollViewer x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsFocused" Value="True">
+                            <Setter Property="BorderBrush" Value="{StaticResource Accent}"/>
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="BorderBrush" Value="{StaticResource BorderStrong}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ PasswordBox ═══ -->
+    <Style x:Key="ModernPasswordBox" TargetType="PasswordBox">
+        <Setter Property="Background" Value="{StaticResource BgTertiary}"/>
+        <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="Padding" Value="12,10"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="CaretBrush" Value="{StaticResource TextNormal}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="PasswordBox">
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="4">
+                        <ScrollViewer x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsFocused" Value="True">
+                            <Setter Property="BorderBrush" Value="{StaticResource Accent}"/>
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="BorderBrush" Value="{StaticResource BorderStrong}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Primary Button ═══ -->
+    <Style x:Key="PrimaryButton" TargetType="Button">
+        <Setter Property="Background" Value="{StaticResource Accent}"/>
+        <Setter Property="Foreground" Value="White"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontWeight" Value="SemiBold"/>
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            CornerRadius="4" Padding="16,12">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource AccentHover}"/>
+                        </Trigger>
+                        <Trigger Property="IsPressed" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource AccentActive}"/>
+                        </Trigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource BorderStrong}"/>
+                            <Setter Property="Foreground" Value="{StaticResource TextFaint}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Ghost / Secondary Button ═══ -->
+    <Style x:Key="GhostButton" TargetType="Button">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="#b5bac1"/>
+        <Setter Property="FontSize" Value="13"/>
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            CornerRadius="4" Padding="10,6">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgSecondary}"/>
+                            <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+                        </Trigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="Foreground" Value="{StaticResource BorderStrong}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Danger Button ═══ -->
+    <Style x:Key="DangerButton" TargetType="Button">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="{StaticResource TextFaint}"/>
+        <Setter Property="FontSize" Value="12"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            CornerRadius="4" Padding="6,4">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="#da373c"/>
+                            <Setter Property="Foreground" Value="White"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Edit Button ═══ -->
+    <Style x:Key="EditButton" TargetType="Button">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="{StaticResource TextFaint}"/>
+        <Setter Property="FontSize" Value="12"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            CornerRadius="4" Padding="6,4">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgActive}"/>
+                            <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Link Button ═══ -->
+    <Style x:Key="LinkButton" TargetType="Button">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="{StaticResource TextLink}"/>
+        <Setter Property="FontSize" Value="13"/>
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <TextBlock x:Name="Tb" Text="{TemplateBinding Content}"
+                               Foreground="{TemplateBinding Foreground}"/>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Tb" Property="TextDecorations" Value="Underline"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Modern CheckBox ═══ -->
+    <Style x:Key="ModernCheckBox" TargetType="CheckBox">
+        <Setter Property="Foreground" Value="#b5bac1"/>
+        <Setter Property="FontSize" Value="13"/>
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="CheckBox">
+                    <StackPanel Orientation="Horizontal">
+                        <Border x:Name="CheckBorder" Width="18" Height="18"
+                                CornerRadius="4" BorderThickness="2"
+                                BorderBrush="{StaticResource BorderStrong}" Background="Transparent"
+                                VerticalAlignment="Center" Margin="0,0,8,0">
+                            <TextBlock x:Name="CheckMark" Text="&#x2713;"
+                                       FontSize="12" FontWeight="Bold"
+                                       Foreground="White" HorizontalAlignment="Center"
+                                       VerticalAlignment="Center" Visibility="Collapsed"/>
+                        </Border>
+                        <ContentPresenter VerticalAlignment="Center"/>
+                    </StackPanel>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsChecked" Value="True">
+                            <Setter TargetName="CheckBorder" Property="Background" Value="{StaticResource Accent}"/>
+                            <Setter TargetName="CheckBorder" Property="BorderBrush" Value="{StaticResource Accent}"/>
+                            <Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="CheckBorder" Property="BorderBrush" Value="{StaticResource Accent}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Small Icon Button ═══ -->
+    <Style x:Key="SmallIconButton" TargetType="Button">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="{StaticResource TextFaint}"/>
+        <Setter Property="FontSize" Value="13"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            CornerRadius="4" Padding="8,5">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgActive}"/>
+                            <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!-- ═══ Header Tool Button (chat header icons) ═══ -->
+    <Style x:Key="HeaderToolButton" TargetType="Button">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+        <Setter Property="FontSize" Value="16"/>
+        <Setter Property="Width" Value="32"/>
+        <Setter Property="Height" Value="32"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" Background="{TemplateBinding Background}"
+                            CornerRadius="4">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                            <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
diff --git a/Client/OwnCord.Client/Themes/Typography.xaml b/Client/OwnCord.Client/Themes/Typography.xaml
new file mode 100644
index 00000000..deeb6830
--- /dev/null
+++ b/Client/OwnCord.Client/Themes/Typography.xaml
@@ -0,0 +1,50 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- ═══ Font Families ═══ -->
+    <FontFamily x:Key="FontDisplay">Segoe UI Variable Display, Segoe UI, Segoe UI Symbol</FontFamily>
+    <FontFamily x:Key="FontBody">Segoe UI Variable Text, Segoe UI, Segoe UI Symbol</FontFamily>
+    <FontFamily x:Key="FontMono">Cascadia Code, Consolas, Courier New</FontFamily>
+
+    <!-- ═══ Text Styles ═══ -->
+    <Style x:Key="HeadingLarge" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FontDisplay}"/>
+        <Setter Property="FontSize" Value="20"/>
+        <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+    </Style>
+
+    <Style x:Key="HeadingMedium" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FontDisplay}"/>
+        <Setter Property="FontSize" Value="15"/>
+        <Setter Property="FontWeight" Value="SemiBold"/>
+        <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+    </Style>
+
+    <Style x:Key="BodyNormal" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+    </Style>
+
+    <Style x:Key="BodySmall" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="FontSize" Value="13"/>
+        <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+    </Style>
+
+    <!-- Note: WPF has no TextTransform — use CharacterCasing on TextBox or uppercase text in code -->
+    <Style x:Key="Caption" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+        <Setter Property="FontSize" Value="11"/>
+        <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
+    </Style>
+
+    <Style x:Key="MonoText" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FontMono}"/>
+        <Setter Property="FontSize" Value="13"/>
+        <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+    </Style>
+
+</ResourceDictionary>
diff --git a/Client/OwnCord.Client/ViewModels/ConnectViewModel.cs b/Client/OwnCord.Client/ViewModels/ConnectViewModel.cs
index 6c44a4cc..038e5f23 100644
--- a/Client/OwnCord.Client/ViewModels/ConnectViewModel.cs
+++ b/Client/OwnCord.Client/ViewModels/ConnectViewModel.cs
@@ -1,5 +1,8 @@
 using System.Collections.ObjectModel;
+using System.IO;
+using System.Text.Json;
 using System.Windows.Input;
+using Microsoft.Win32;
 using OwnCord.Client.Models;
 using OwnCord.Client.Services;
 
@@ -9,8 +12,11 @@ public sealed class ConnectViewModel : ViewModelBase
 {
     private readonly IProfileService _profiles;
     private readonly ICredentialService _credentials;
+    private readonly IApiClient _api;
+    private readonly Dictionary<string, string> _healthStatuses = new();
 
     private string _host = string.Empty;
+    private int _port = 8443;
     private string _username = string.Empty;
     private string _password = string.Empty;
     private string _inviteCode = string.Empty;
@@ -19,19 +25,32 @@ public sealed class ConnectViewModel : ViewModelBase
     private string? _errorMessage;
     private bool _savePassword;
     private ServerProfile? _selectedProfile;
+    private bool _isTotpRequired;
+    private string _partialToken = string.Empty;
+    private string _totpCode = string.Empty;
 
-    public ConnectViewModel(IProfileService profiles, ICredentialService credentials)
+    public ConnectViewModel(IProfileService profiles, ICredentialService credentials, IApiClient api)
     {
         _profiles = profiles;
         _credentials = credentials;
+        _api = api;
         ConnectCommand = new RelayCommand(OnConnect, CanConnect);
         SaveProfileCommand = new RelayCommand(OnSaveProfile, CanSaveProfile);
         DeleteProfileCommand = new RelayCommand(OnDeleteProfile, () => SelectedProfile is not null);
+        AddProfileCommand = new RelayCommand(OnAddProfile);
+        EditProfileCommand = new RelayCommand<ServerProfile>(OnEditProfile);
+        VerifyTotpCommand = new RelayCommand(OnVerifyTotp, CanVerifyTotp);
+        ImportProfilesCommand = new RelayCommand(OnImportProfiles);
+        ExportProfilesCommand = new RelayCommand(OnExportProfiles, () => Profiles.Count > 0);
+        CancelTotpCommand = new RelayCommand(OnCancelTotp);
+        RefreshHealthCommand = new RelayCommand(OnRefreshHealth, () => Profiles.Count > 0);
         Profiles = new ObservableCollection<ServerProfile>(profiles.LoadProfiles());
         Profiles.CollectionChanged += (_, _) =>
         {
             OnPropertyChanged(nameof(HasProfiles));
             OnPropertyChanged(nameof(HasNoProfiles));
+            ((RelayCommand)ExportProfilesCommand).RaiseCanExecuteChanged();
+            ((RelayCommand)RefreshHealthCommand).RaiseCanExecuteChanged();
         };
     }
 
@@ -48,6 +67,16 @@ public sealed class ConnectViewModel : ViewModelBase
         }
     }
 
+    public int Port
+    {
+        get => _port;
+        set
+        {
+            if (SetField(ref _port, value))
+                RaiseCanExecuteChanged();
+        }
+    }
+
     public string Username
     {
         get => _username;
@@ -102,6 +131,28 @@ public sealed class ConnectViewModel : ViewModelBase
         set => SetField(ref _savePassword, value);
     }
 
+    public bool IsTotpRequired
+    {
+        get => _isTotpRequired;
+        set => SetField(ref _isTotpRequired, value);
+    }
+
+    public string PartialToken
+    {
+        get => _partialToken;
+        set => SetField(ref _partialToken, value);
+    }
+
+    public string TotpCode
+    {
+        get => _totpCode;
+        set
+        {
+            if (SetField(ref _totpCode, value))
+                ((RelayCommand)VerifyTotpCommand).RaiseCanExecuteChanged();
+        }
+    }
+
     public ServerProfile? SelectedProfile
     {
         get => _selectedProfile;
@@ -110,9 +161,10 @@ public sealed class ConnectViewModel : ViewModelBase
             if (SetField(ref _selectedProfile, value) && value is not null)
             {
                 Host = value.Host;
+                Port = value.Port;
                 Username = value.LastUsername ?? string.Empty;
 
-                var saved = _credentials.LoadPassword(value.Host, value.LastUsername ?? "");
+                var saved = _credentials.LoadPassword(value.HostDisplay, value.LastUsername ?? "");
                 if (saved is not null)
                 {
                     Password = saved;
@@ -138,24 +190,109 @@ public sealed class ConnectViewModel : ViewModelBase
     public ICommand ConnectCommand { get; }
     public ICommand SaveProfileCommand { get; }
     public ICommand DeleteProfileCommand { get; }
+    public ICommand AddProfileCommand { get; }
+    public ICommand EditProfileCommand { get; }
+    public ICommand VerifyTotpCommand { get; }
+    public ICommand ImportProfilesCommand { get; }
+    public ICommand ExportProfilesCommand { get; }
+    public ICommand CancelTotpCommand { get; }
+    public ICommand RefreshHealthCommand { get; }
+
+    /// <summary>Gets the health status string for a given profile ID.</summary>
+    public string GetHealthStatus(string profileId)
+        => _healthStatuses.TryGetValue(profileId, out var s) ? s : "unknown";
+
+    /// <summary>Pings every saved server's health endpoint in parallel and updates statuses.</summary>
+    public async Task RefreshHealthAsync()
+    {
+        if (Profiles.Count == 0) return;
+
+        var tasks = Profiles.Select(async profile =>
+        {
+            _healthStatuses[profile.Id] = "checking";
+            OnPropertyChanged(nameof(Profiles));
+
+            try
+            {
+                using var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
+                var health = await _api.HealthCheckAsync(profile.HostDisplay, cts.Token);
+                _healthStatuses[profile.Id] = health.Status == "ok" ? "online" : "offline";
+            }
+            catch
+            {
+                _healthStatuses[profile.Id] = "offline";
+            }
+        });
+        await Task.WhenAll(tasks);
+        OnPropertyChanged(nameof(Profiles));
+        HealthStatusChanged?.Invoke();
+    }
+
+    /// <summary>Raised when any health status changes so the view can refresh bindings.</summary>
+    public event Action? HealthStatusChanged;
 
     /// <summary>Args: host, username, password, inviteCode?, isRegister</summary>
     public event Action<string, string, string, string?, bool>? ConnectRequested;
 
+    /// <summary>Args: host, partialToken, totpCode</summary>
+    public event Action<string, string, string>? TotpVerifyRequested;
+
+    /// <summary>Raised to open the add/edit server profile dialog. Arg: profile to edit (null = add new).</summary>
+    public event Action<ServerProfile?>? EditProfileRequested;
+
+    /// <summary>
+    /// Called when login returns requires_2fa. Sets up the TOTP entry UI state.
+    /// </summary>
+    public void Enter2FAMode(string partialToken)
+    {
+        PartialToken = partialToken;
+        IsTotpRequired = true;
+        TotpCode = string.Empty;
+        ErrorMessage = null;
+    }
+
+    /// <summary>Applies a saved or new profile from the dialog.</summary>
+    public void ApplyProfileFromDialog(ServerProfile profile, bool isNew)
+    {
+        if (isNew)
+        {
+            var updated = _profiles.AddProfile([.. Profiles], profile);
+            _profiles.SaveProfiles(updated);
+            Profiles.Add(profile);
+        }
+        else
+        {
+            var index = -1;
+            for (var i = 0; i < Profiles.Count; i++)
+            {
+                if (Profiles[i].Id == profile.Id) { index = i; break; }
+            }
+            if (index >= 0)
+            {
+                Profiles[index] = profile;
+                var updated = _profiles.UpdateProfile([.. Profiles], profile);
+                _profiles.SaveProfiles(updated);
+            }
+        }
+    }
+
     private bool CanConnect() =>
         !_isLoading &&
         !string.IsNullOrWhiteSpace(Host) &&
         !string.IsNullOrWhiteSpace(Username);
 
-    private void OnConnect() =>
-        ConnectRequested?.Invoke(Host, Username, Password, IsRegisterMode ? InviteCode : null, IsRegisterMode);
+    private void OnConnect()
+    {
+        var hostWithPort = Port == 8443 ? Host : $"{Host}:{Port}";
+        ConnectRequested?.Invoke(hostWithPort, Username, Password, IsRegisterMode ? InviteCode : null, IsRegisterMode);
+    }
 
     private bool CanSaveProfile() =>
         !string.IsNullOrWhiteSpace(Host) && !string.IsNullOrWhiteSpace(Username);
 
     private void OnSaveProfile()
     {
-        var profile = ServerProfile.Create(Host, Host, Username);
+        var profile = ServerProfile.Create(Host, Host, Username, port: Port);
         var updated = _profiles.AddProfile([.. Profiles], profile);
         _profiles.SaveProfiles(updated);
         Profiles.Add(profile);
@@ -170,6 +307,88 @@ public sealed class ConnectViewModel : ViewModelBase
         SelectedProfile = null;
     }
 
+    private void OnAddProfile() => EditProfileRequested?.Invoke(null);
+
+    private void OnEditProfile(ServerProfile? profile)
+    {
+        if (profile is not null)
+            EditProfileRequested?.Invoke(profile);
+    }
+
+    private bool CanVerifyTotp() =>
+        !_isLoading && _totpCode.Length == 6;
+
+    private void OnVerifyTotp()
+    {
+        var hostWithPort = Port == 8443 ? Host : $"{Host}:{Port}";
+        TotpVerifyRequested?.Invoke(hostWithPort, PartialToken, TotpCode);
+    }
+
+    private void OnCancelTotp()
+    {
+        IsTotpRequired = false;
+        PartialToken = string.Empty;
+        TotpCode = string.Empty;
+        ErrorMessage = null;
+    }
+
+    private void OnImportProfiles()
+    {
+        var dlg = new OpenFileDialog
+        {
+            Filter = "JSON files (*.json)|*.json",
+            Title = "Import Server Profiles"
+        };
+        if (dlg.ShowDialog() != true) return;
+
+        try
+        {
+            var json = File.ReadAllText(dlg.FileName);
+            var imported = JsonSerializer.Deserialize<List<ServerProfile>>(json);
+            if (imported is null || imported.Count == 0) return;
+
+            var current = Profiles.ToList();
+            var existingHosts = new HashSet<string>(current.Select(p => p.HostDisplay), StringComparer.OrdinalIgnoreCase);
+
+            foreach (var profile in imported)
+            {
+                if (!existingHosts.Contains(profile.HostDisplay))
+                {
+                    current.Add(profile);
+                    Profiles.Add(profile);
+                    existingHosts.Add(profile.HostDisplay);
+                }
+            }
+
+            _profiles.SaveProfiles(current);
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Import failed: {ex.Message}";
+        }
+    }
+
+    private void OnExportProfiles()
+    {
+        var dlg = new SaveFileDialog
+        {
+            Filter = "JSON files (*.json)|*.json",
+            Title = "Export Server Profiles",
+            FileName = "owncord-profiles.json"
+        };
+        if (dlg.ShowDialog() != true) return;
+
+        try
+        {
+            var json = JsonSerializer.Serialize(Profiles.ToList(), new JsonSerializerOptions { WriteIndented = true });
+            File.WriteAllText(dlg.FileName, json);
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"Export failed: {ex.Message}";
+        }
+    }
+
     /// <summary>Persist or remove the saved password based on the checkbox state.</summary>
     public void PersistPasswordIfRequested(string host, string username, string password)
     {
@@ -179,6 +398,27 @@ public sealed class ConnectViewModel : ViewModelBase
             _credentials.DeletePassword(host, username);
     }
 
+    /// <summary>Updates the LastConnected timestamp on the matching profile.</summary>
+    public void MarkProfileConnected(string host)
+    {
+        for (var i = 0; i < Profiles.Count; i++)
+        {
+            if (string.Equals(Profiles[i].HostDisplay, host, StringComparison.OrdinalIgnoreCase) ||
+                string.Equals(Profiles[i].Host, host, StringComparison.OrdinalIgnoreCase))
+            {
+                var updated = Profiles[i] with { LastConnected = DateTime.UtcNow, LastUsername = Username };
+                Profiles[i] = updated;
+                _profiles.SaveProfiles([.. Profiles]);
+                break;
+            }
+        }
+    }
+
+    private async void OnRefreshHealth()
+    {
+        await RefreshHealthAsync();
+    }
+
     private void RaiseCanExecuteChanged()
     {
         ((RelayCommand)ConnectCommand).RaiseCanExecuteChanged();
diff --git a/Client/OwnCord.Client/ViewModels/MainViewModel.cs b/Client/OwnCord.Client/ViewModels/MainViewModel.cs
index 12762d94..8c7fdc8f 100644
--- a/Client/OwnCord.Client/ViewModels/MainViewModel.cs
+++ b/Client/OwnCord.Client/ViewModels/MainViewModel.cs
@@ -15,13 +15,65 @@ public sealed class MainViewModel : ViewModelBase
     private bool _isTyping;
     private string? _connectionStatus;
     private Timer? _typingTimer;
+    private bool _isMemberListVisible = true;
+    private bool _isInVoice;
+    private string? _voiceChannelName;
+    private long _voiceChannelId;
+    private bool _isMuted;
+    private bool _isDeafened;
+    private Message? _replyingToMessage;
+    private long? _editingMessageId;
+    private ObservableCollection<ServerProfile> _serverProfiles = [];
+    private ServerProfile? _activeServer;
+    private bool _showStatusPicker;
+    private bool _showSettings;
+    private bool _showEmojiPicker;
+    private string _toastMessage = string.Empty;
+    private bool _showToast;
+    private User? _popupUser;
+    private bool _showUserPopup;
+    private double _userPopupX;
+    private double _userPopupY;
+    private bool _isHomeView;
+    private string _selectedFriendsTab = "online";
+    private string _friendSearchText = string.Empty;
 
     public MainViewModel()
     {
         Channels = [];
         Members = [];
         Messages = [];
+        DisplayMessages = [];
+        Roles = [];
+        ChannelGroups = [];
+        MemberGroups = [];
+        VoiceStates = [];
+
         SendMessageCommand = new RelayCommand(OnSendMessage, () => !string.IsNullOrWhiteSpace(MessageInput) && SelectedChannel is not null);
+        ToggleMemberListCommand = new RelayCommand(() => IsMemberListVisible = !IsMemberListVisible);
+        JoinVoiceCommand = new RelayCommand<Channel>(OnJoinVoice);
+        LeaveVoiceCommand = new RelayCommand(OnLeaveVoice);
+        ToggleMuteCommand = new RelayCommand(OnToggleMute);
+        ToggleDeafenCommand = new RelayCommand(OnToggleDeafen);
+        ToggleCategoryCommand = new RelayCommand<ChannelGroup>(OnToggleCategory);
+        SelectChannelCommand = new RelayCommand<object>(OnSelectChannel);
+        StartReplyCommand = new RelayCommand<Message>(OnStartReply);
+        CancelReplyCommand = new RelayCommand(OnCancelReply);
+        DeleteMessageCommand = new RelayCommand<Message>(OnDeleteMessage);
+        StartEditCommand = new RelayCommand<Message>(OnStartEdit);
+        SelectServerCommand = new RelayCommand<ServerProfile>(p => { ActiveServer = p; IsHomeView = false; });
+        AddServerCommand = new RelayCommand(() => { /* placeholder for future dialog */ });
+        ToggleStatusPickerCommand = new RelayCommand(() => ShowStatusPicker = !ShowStatusPicker);
+        ChangeStatusCommand = new RelayCommand<string>(OnChangeStatus);
+        OpenSettingsCommand = new RelayCommand(() => ShowSettings = true);
+        CloseSettingsCommand = new RelayCommand(() => ShowSettings = false);
+        ToggleEmojiPickerCommand = new RelayCommand(() => ShowEmojiPicker = !ShowEmojiPicker);
+        InsertEmojiCommand = new RelayCommand<string>(OnInsertEmoji);
+        ShowUserPopupCommand = new RelayCommand<object>(OnShowUserPopup);
+        CloseUserPopupCommand = new RelayCommand(OnCloseUserPopup);
+        HomeCommand = new RelayCommand(OnHome);
+        SelectFriendsTabCommand = new RelayCommand<string>(OnSelectFriendsTab);
+        MessageFriendCommand = new RelayCommand<object>(OnMessageFriend);
     }
 
     /// <summary>Wire up ChatService events. Called once after login succeeds.</summary>
@@ -40,6 +92,9 @@ public sealed class MainViewModel : ViewModelBase
         chat.ChannelUpdated += p => RunOnUI(() => OnChannelUpdated(p));
         chat.ChannelDeleted += id => RunOnUI(() => OnChannelDeleted(id));
         chat.ConnectionLost += r => RunOnUI(() => OnConnectionLost(r));
+        chat.VoiceStateReceived += p => RunOnUI(() => OnVoiceState(p));
+        chat.VoiceLeaveReceived += p => RunOnUI(() => OnVoiceLeave(p));
+        chat.VoiceSpeakersReceived += p => RunOnUI(() => OnVoiceSpeakers(p));
     }
 
     private static void RunOnUI(Action action)
@@ -50,6 +105,8 @@ public sealed class MainViewModel : ViewModelBase
             action();
     }
 
+    // ── Connection status ────────────────────────────────────────────────────
+
     public string? ConnectionStatus
     {
         get => _connectionStatus;
@@ -62,9 +119,18 @@ public sealed class MainViewModel : ViewModelBase
 
     public bool HasConnectionIssue => _connectionStatus is not null;
 
+    // ── Collections ──────────────────────────────────────────────────────────
+
     public ObservableCollection<Channel> Channels { get; }
     public ObservableCollection<User> Members { get; }
     public ObservableCollection<Message> Messages { get; }
+    public ObservableCollection<MessageDisplayItem> DisplayMessages { get; }
+    public ObservableCollection<WsRole> Roles { get; }
+    public ObservableCollection<ChannelGroup> ChannelGroups { get; }
+    public ObservableCollection<MemberGroup> MemberGroups { get; }
+    public ObservableCollection<VoiceStateInfo> VoiceStates { get; }
+
+    // ── Selected channel ─────────────────────────────────────────────────────
 
     public Channel? SelectedChannel
     {
@@ -73,10 +139,19 @@ public sealed class MainViewModel : ViewModelBase
         {
             if (SetField(ref _selectedChannel, value))
             {
+                OnPropertyChanged(nameof(SelectedChannelTopic));
                 Messages.Clear();
+                DisplayMessages.Clear();
                 ((RelayCommand)SendMessageCommand).RaiseCanExecuteChanged();
                 if (value is not null)
                 {
+                    // Voice channels join voice instead of loading messages
+                    if (value.Type == ChannelType.Voice)
+                    {
+                        _ = _chat?.JoinVoiceAsync(value.Id);
+                        return;
+                    }
+
                     _ = _chat?.SendChannelFocusAsync(value.Id);
                     _ = LoadMessagesForChannelAsync(value.Id);
                 }
@@ -84,6 +159,10 @@ public sealed class MainViewModel : ViewModelBase
         }
     }
 
+    public string? SelectedChannelTopic => _selectedChannel?.Topic;
+
+    // ── Message input ────────────────────────────────────────────────────────
+
     public string MessageInput
     {
         get => _messageInput;
@@ -102,23 +181,265 @@ public sealed class MainViewModel : ViewModelBase
 
     public string? TypingText { get; private set; }
 
+    // ── Member list visibility ───────────────────────────────────────────────
+
+    public bool IsMemberListVisible
+    {
+        get => _isMemberListVisible;
+        set => SetField(ref _isMemberListVisible, value);
+    }
+
+    // ── Voice state (local user) ─────────────────────────────────────────────
+
+    public bool IsInVoice
+    {
+        get => _isInVoice;
+        set => SetField(ref _isInVoice, value);
+    }
+
+    public string? VoiceChannelName
+    {
+        get => _voiceChannelName;
+        set => SetField(ref _voiceChannelName, value);
+    }
+
+    public bool IsMuted
+    {
+        get => _isMuted;
+        set => SetField(ref _isMuted, value);
+    }
+
+    public bool IsDeafened
+    {
+        get => _isDeafened;
+        set => SetField(ref _isDeafened, value);
+    }
+
+    // ── Current user info (for user bar) ─────────────────────────────────────
+
+    public string CurrentUsername => _chat?.CurrentUser?.Username ?? "Unknown";
+    public string CurrentUserStatus => _chat?.CurrentUser?.Status ?? "offline";
+
+    public UserStatus CurrentUserStatusEnum => CurrentUserStatus switch
+    {
+        "online" => UserStatus.Online,
+        "idle" => UserStatus.Idle,
+        "dnd" => UserStatus.Dnd,
+        _ => UserStatus.Offline
+    };
+
+    // ── Home / Friends view ────────────────────────────────────────────────
+
+    public bool IsHomeView
+    {
+        get => _isHomeView;
+        set => SetField(ref _isHomeView, value);
+    }
+
+    public string SelectedFriendsTab
+    {
+        get => _selectedFriendsTab;
+        set => SetField(ref _selectedFriendsTab, value);
+    }
+
+    public string FriendSearchText
+    {
+        get => _friendSearchText;
+        set => SetField(ref _friendSearchText, value);
+    }
+
+    // ── Settings overlay ──────────────────────────────────────────────────
+
+    public bool ShowSettings
+    {
+        get => _showSettings;
+        set => SetField(ref _showSettings, value);
+    }
+
+    // ── Status picker ─────────────────────────────────────────────────────
+
+    public bool ShowStatusPicker
+    {
+        get => _showStatusPicker;
+        set => SetField(ref _showStatusPicker, value);
+    }
+
+    // ── Emoji picker ──────────────────────────────────────────────────────
+
+    public bool ShowEmojiPicker
+    {
+        get => _showEmojiPicker;
+        set => SetField(ref _showEmojiPicker, value);
+    }
+
+    // ── Toast notification ──────────────────────────────────────────────────
+
+    public string ToastMessage
+    {
+        get => _toastMessage;
+        set => SetField(ref _toastMessage, value);
+    }
+
+    public bool ShowToast
+    {
+        get => _showToast;
+        set => SetField(ref _showToast, value);
+    }
+
+    public void ShowToastMessage(string message)
+    {
+        ToastMessage = message;
+        ShowToast = true;
+    }
+
+    // ── Commands ─────────────────────────────────────────────────────────────
+
     public ICommand SendMessageCommand { get; }
+    public ICommand ToggleMemberListCommand { get; }
+    public ICommand JoinVoiceCommand { get; }
+    public ICommand LeaveVoiceCommand { get; }
+    public ICommand ToggleMuteCommand { get; }
+    public ICommand ToggleDeafenCommand { get; }
+    public ICommand ToggleCategoryCommand { get; }
+    public ICommand SelectChannelCommand { get; }
+    public ICommand StartReplyCommand { get; }
+    public ICommand CancelReplyCommand { get; }
+    public ICommand DeleteMessageCommand { get; }
+    public ICommand StartEditCommand { get; }
+    public ICommand SelectServerCommand { get; }
+    public ICommand AddServerCommand { get; }
+    public ICommand ToggleStatusPickerCommand { get; }
+    public ICommand ChangeStatusCommand { get; }
+    public ICommand OpenSettingsCommand { get; }
+    public ICommand CloseSettingsCommand { get; }
+    public ICommand ToggleEmojiPickerCommand { get; }
+    public ICommand InsertEmojiCommand { get; }
+    public ICommand ShowUserPopupCommand { get; }
+    public ICommand CloseUserPopupCommand { get; }
+    public ICommand HomeCommand { get; }
+    public ICommand SelectFriendsTabCommand { get; }
+    public ICommand MessageFriendCommand { get; }
+
+    // ── User popup state ────────────────────────────────────────────────────
+
+    public User? PopupUser
+    {
+        get => _popupUser;
+        set => SetField(ref _popupUser, value);
+    }
+
+    public bool ShowUserPopup
+    {
+        get => _showUserPopup;
+        set => SetField(ref _showUserPopup, value);
+    }
+
+    public double UserPopupX
+    {
+        get => _userPopupX;
+        set => SetField(ref _userPopupX, value);
+    }
+
+    public double UserPopupY
+    {
+        get => _userPopupY;
+        set => SetField(ref _userPopupY, value);
+    }
+
+    /// <summary>Resolved role name for the popup user.</summary>
+    public string PopupUserRoleName
+    {
+        get
+        {
+            if (_popupUser is null) return "Member";
+            var role = Roles.FirstOrDefault(r => r.Id == _popupUser.RoleId);
+            return role?.Name ?? "Member";
+        }
+    }
+
+    /// <summary>Resolved role color for the popup user.</summary>
+    public string PopupUserRoleColor
+    {
+        get
+        {
+            if (_popupUser is null) return "#949ba4";
+            var role = Roles.FirstOrDefault(r => r.Id == _popupUser.RoleId);
+            return role?.Color ?? "#949ba4";
+        }
+    }
+
+    /// <summary>Status text for the popup user.</summary>
+    public string PopupUserStatusText => _popupUser?.Status switch
+    {
+        UserStatus.Online => "Online",
+        UserStatus.Idle => "Idle",
+        UserStatus.Dnd => "Do Not Disturb",
+        _ => "Offline"
+    };
+
+    // ── Reply state ───────────────────────────────────────────────────────
+
+    public Message? ReplyingToMessage
+    {
+        get => _replyingToMessage;
+        set
+        {
+            if (SetField(ref _replyingToMessage, value))
+                OnPropertyChanged(nameof(IsReplying));
+        }
+    }
+
+    public bool IsReplying => _replyingToMessage is not null;
+
+    // ── Edit state ────────────────────────────────────────────────────────
+
+    public long? EditingMessageId
+    {
+        get => _editingMessageId;
+        set => SetField(ref _editingMessageId, value);
+    }
+
+    // ── Server strip ──────────────────────────────────────────────────────────
+
+    public ObservableCollection<ServerProfile> ServerProfiles
+    {
+        get => _serverProfiles;
+        set => SetField(ref _serverProfiles, value);
+    }
+
+    public ServerProfile? ActiveServer
+    {
+        get => _activeServer;
+        set => SetField(ref _activeServer, value);
+    }
+
+    // ── Public helpers ───────────────────────────────────────────────────────
+
+    public void LoadServerProfiles(IReadOnlyList<ServerProfile> profiles)
+    {
+        ServerProfiles = new ObservableCollection<ServerProfile>(profiles);
+        if (ActiveServer is null && ServerProfiles.Count > 0)
+            ActiveServer = ServerProfiles[0];
+    }
 
     public void LoadChannels(IEnumerable<Channel> channels)
     {
         Channels.Clear();
         foreach (var ch in channels) Channels.Add(ch);
+        RebuildChannelGroups();
     }
 
     public void LoadMembers(IEnumerable<User> members)
     {
         Members.Clear();
         foreach (var m in members) Members.Add(m);
+        RebuildMemberGroups();
     }
 
     public void AddMessage(Message message)
     {
         Messages.Add(message);
+        AppendDisplayMessage(message);
     }
 
     public void UpdateUnreadCount(long channelId, int count)
@@ -127,6 +448,7 @@ public sealed class MainViewModel : ViewModelBase
         if (idx < 0) return;
         var updated = Channels[idx] with { UnreadCount = count };
         Channels[idx] = updated;
+        RebuildChannelGroups();
     }
 
     public void ShowTyping(string username)
@@ -143,15 +465,265 @@ public sealed class MainViewModel : ViewModelBase
         OnPropertyChanged(nameof(TypingText));
     }
 
+    /// <summary>Get voice users for a specific channel.</summary>
+    public IEnumerable<VoiceStateInfo> GetVoiceUsersForChannel(long channelId)
+        => VoiceStates.Where(vs => vs.ChannelId == channelId);
+
+    // ── Command handlers ─────────────────────────────────────────────────────
+
+    private void OnInsertEmoji(string? emoji)
+    {
+        if (string.IsNullOrEmpty(emoji)) return;
+        MessageInput += emoji;
+        ShowEmojiPicker = false;
+    }
+
+    private void OnChangeStatus(string? status)
+    {
+        if (string.IsNullOrWhiteSpace(status)) return;
+        ShowStatusPicker = false;
+        _ = _chat?.SendStatusChangeAsync(status);
+        OnPropertyChanged(nameof(CurrentUserStatus));
+        OnPropertyChanged(nameof(CurrentUserStatusEnum));
+    }
+
     private void OnSendMessage()
     {
         if (_chat is null || SelectedChannel is null || string.IsNullOrWhiteSpace(MessageInput)) return;
         var channelId = SelectedChannel.Id;
         var content = MessageInput;
         MessageInput = string.Empty;
-        _ = _chat.SendMessageAsync(channelId, content);
+
+        if (EditingMessageId is { } editId)
+        {
+            EditingMessageId = null;
+            _ = _chat.EditMessageAsync(editId, content);
+        }
+        else
+        {
+            var replyTo = ReplyingToMessage?.Id;
+            ReplyingToMessage = null;
+            _ = _chat.SendMessageAsync(channelId, content, replyTo);
+        }
     }
 
+    private void OnSelectChannel(object? param)
+    {
+        var channel = param switch
+        {
+            Channel ch => ch,
+            ChannelItem ci => ci.Channel,
+            _ => null
+        };
+        if (channel is null) return;
+        SelectedChannel = channel;
+    }
+
+    private void OnJoinVoice(Channel? channel)
+    {
+        if (_chat is null || channel is null || channel.Type != ChannelType.Voice) return;
+        _ = _chat.JoinVoiceAsync(channel.Id);
+    }
+
+    private void OnLeaveVoice()
+    {
+        if (_chat is null) return;
+        _ = _chat.LeaveVoiceAsync();
+        IsInVoice = false;
+        VoiceChannelName = null;
+        IsMuted = false;
+        IsDeafened = false;
+    }
+
+    private void OnToggleMute()
+    {
+        if (_chat is null || !IsInVoice) return;
+        IsMuted = !IsMuted;
+        _ = _chat.SendVoiceMuteAsync(IsMuted);
+    }
+
+    private void OnToggleDeafen()
+    {
+        if (_chat is null || !IsInVoice) return;
+        IsDeafened = !IsDeafened;
+        if (IsDeafened) IsMuted = true;
+        _ = _chat.SendVoiceDeafenAsync(IsDeafened);
+    }
+
+    private static void OnToggleCategory(ChannelGroup? group)
+    {
+        if (group is null) return;
+        group.IsExpanded = !group.IsExpanded;
+    }
+
+    private void OnStartReply(Message? message)
+    {
+        if (message is null) return;
+        ReplyingToMessage = message;
+    }
+
+    private void OnCancelReply()
+    {
+        ReplyingToMessage = null;
+    }
+
+    private void OnDeleteMessage(Message? message)
+    {
+        if (_chat is null || message is null) return;
+        _ = _chat.DeleteMessageAsync(message.Id);
+    }
+
+    private void OnStartEdit(Message? message)
+    {
+        if (message is null) return;
+        EditingMessageId = message.Id;
+        MessageInput = message.Content;
+    }
+
+    private void OnShowUserPopup(object? param)
+    {
+        var user = param switch
+        {
+            User u => u,
+            MessageDisplayItem di => di.Author,
+            Message m => m.Author,
+            _ => null
+        };
+        if (user is null) return;
+
+        PopupUser = user;
+        ShowUserPopup = true;
+        OnPropertyChanged(nameof(PopupUserRoleName));
+        OnPropertyChanged(nameof(PopupUserRoleColor));
+        OnPropertyChanged(nameof(PopupUserStatusText));
+    }
+
+    private void OnCloseUserPopup()
+    {
+        ShowUserPopup = false;
+        PopupUser = null;
+    }
+
+    private void OnHome()
+    {
+        IsHomeView = true;
+    }
+
+    private void OnSelectFriendsTab(string? tab)
+    {
+        if (string.IsNullOrWhiteSpace(tab)) return;
+        SelectedFriendsTab = tab;
+    }
+
+    private void OnMessageFriend(object? param)
+    {
+        // Placeholder: in the future, open or create a DM conversation with the friend
+    }
+
+    // ── Message display items ──────────────────────────────────────────────────
+
+    private void RebuildDisplayMessages()
+    {
+        DisplayMessages.Clear();
+        Message? prev = null;
+        foreach (var msg in Messages)
+        {
+            var item = new MessageDisplayItem(msg, prev)
+            {
+                ReplyToMessage = msg.ReplyToId is not null
+                    ? Messages.FirstOrDefault(m => m.Id == msg.ReplyToId)
+                    : null,
+                IsOwnMessage = _chat?.CurrentUser is { } u && msg.Author.Id == u.Id
+            };
+            DisplayMessages.Add(item);
+            prev = msg;
+        }
+    }
+
+    private void AppendDisplayMessage(Message message)
+    {
+        var prev = Messages.Count > 1 ? Messages[^2] : null;
+        var item = new MessageDisplayItem(message, prev)
+        {
+            ReplyToMessage = message.ReplyToId is not null
+                ? Messages.FirstOrDefault(m => m.Id == message.ReplyToId)
+                : null,
+            IsOwnMessage = _chat?.CurrentUser is { } u && message.Author.Id == u.Id
+        };
+        DisplayMessages.Add(item);
+    }
+
+    // ── Channel grouping ─────────────────────────────────────────────────────
+
+    private void RebuildChannelGroups()
+    {
+        // Preserve expanded state across rebuilds
+        var expandedState = ChannelGroups.ToDictionary(g => g.CategoryName ?? "", g => g.IsExpanded);
+
+        ChannelGroups.Clear();
+
+        var grouped = Channels
+            .OrderBy(c => c.Position)
+            .GroupBy(c => c.Category);
+
+        foreach (var g in grouped.OrderBy(g => g.Key is null ? 0 : 1))
+        {
+            var group = new ChannelGroup { CategoryName = g.Key };
+
+            // Restore expanded state
+            if (expandedState.TryGetValue(g.Key ?? "", out var wasExpanded))
+                group.IsExpanded = wasExpanded;
+
+            foreach (var ch in g)
+            {
+                var item = new ChannelItem { Channel = ch };
+
+                // Populate voice users for voice channels
+                if (ch.Type == ChannelType.Voice)
+                {
+                    foreach (var vs in VoiceStates.Where(vs => vs.ChannelId == ch.Id))
+                        item.VoiceUsers.Add(vs);
+                }
+
+                group.Items.Add(item);
+            }
+
+            ChannelGroups.Add(group);
+        }
+    }
+
+    // ── Member grouping by role ──────────────────────────────────────────────
+
+    private void RebuildMemberGroups()
+    {
+        MemberGroups.Clear();
+
+        var roleMap = Roles.ToDictionary(r => r.Id);
+
+        var grouped = Members
+            .GroupBy(m => m.RoleId)
+            .Select(g =>
+            {
+                roleMap.TryGetValue(g.Key, out var role);
+                return new { Role = role, Members = g.ToList() };
+            })
+            .OrderBy(g => g.Role?.Position ?? int.MaxValue);
+
+        foreach (var g in grouped)
+        {
+            var mg = new MemberGroup
+            {
+                RoleName = g.Role?.Name ?? "Members",
+                RoleColor = g.Role?.Color,
+                Position = g.Role?.Position ?? int.MaxValue
+            };
+            foreach (var m in g.Members) mg.Members.Add(m);
+            MemberGroups.Add(mg);
+        }
+    }
+
+    // ── Message loading ──────────────────────────────────────────────────────
+
     private async Task LoadMessagesForChannelAsync(long channelId)
     {
         if (_chat is null) return;
@@ -159,8 +731,12 @@ public sealed class MainViewModel : ViewModelBase
         {
             var response = await _chat.GetMessagesAsync(channelId);
             Messages.Clear();
+            DisplayMessages.Clear();
             foreach (var msg in response.Messages)
             {
+                var attachments = msg.Attachments?
+                    .Select(a => new Attachment(a.Id, a.Filename, a.Size, a.Mime, a.Url))
+                    .ToList() as IReadOnlyList<Attachment> ?? Array.Empty<Attachment>();
                 Messages.Add(new Message(
                     msg.Id,
                     msg.ChannelId,
@@ -170,9 +746,11 @@ public sealed class MainViewModel : ViewModelBase
                     msg.ReplyTo,
                     msg.EditedAt,
                     msg.Deleted,
-                    []
+                    [],
+                    attachments
                 ));
             }
+            RebuildDisplayMessages();
         }
         catch
         {
@@ -185,6 +763,12 @@ public sealed class MainViewModel : ViewModelBase
     private void OnReady(ReadyPayload payload)
     {
         ConnectionStatus = null;
+
+        // Store roles
+        Roles.Clear();
+        foreach (var r in payload.Roles) Roles.Add(r);
+
+        // Load channels
         Channels.Clear();
         foreach (var ch in payload.Channels)
         {
@@ -194,9 +778,11 @@ public sealed class MainViewModel : ViewModelBase
                 "announcement" => ChannelType.Announcement,
                 _ => ChannelType.Text
             };
-            Channels.Add(new Channel(ch.Id, ch.Name, type, ch.Category, ch.Position, 0, null));
+            Channels.Add(new Channel(ch.Id, ch.Name, type, ch.Category, ch.Position, 0, null, ch.Topic));
         }
+        RebuildChannelGroups();
 
+        // Load members
         Members.Clear();
         foreach (var m in payload.Members)
         {
@@ -209,8 +795,36 @@ public sealed class MainViewModel : ViewModelBase
             };
             Members.Add(new User(m.Id, m.Username, m.Avatar, m.RoleId, status));
         }
+        RebuildMemberGroups();
 
-        if (Channels.Count > 0)
+        // Load voice states
+        VoiceStates.Clear();
+        foreach (var vs in payload.VoiceStates)
+        {
+            VoiceStates.Add(new VoiceStateInfo
+            {
+                UserId = vs.UserId,
+                ChannelId = vs.ChannelId,
+                Username = vs.Username,
+                Muted = vs.Muted,
+                Deafened = vs.Deafened,
+                Speaking = vs.Speaking
+            });
+        }
+
+        // Rebuild channel groups now that voice states are loaded
+        RebuildChannelGroups();
+
+        // Notify user bar
+        OnPropertyChanged(nameof(CurrentUsername));
+        OnPropertyChanged(nameof(CurrentUserStatus));
+        OnPropertyChanged(nameof(CurrentUserStatusEnum));
+
+        // Select first text channel
+        var firstText = Channels.FirstOrDefault(c => c.Type == ChannelType.Text);
+        if (firstText is not null)
+            SelectedChannel = firstText;
+        else if (Channels.Count > 0)
             SelectedChannel = Channels[0];
     }
 
@@ -218,6 +832,9 @@ public sealed class MainViewModel : ViewModelBase
     {
         if (SelectedChannel is not null && payload.ChannelId == SelectedChannel.Id)
         {
+            var attachments = payload.Attachments?
+                .Select(a => new Attachment(a.Id, a.Filename, a.Size, a.Mime, a.Url))
+                .ToList() as IReadOnlyList<Attachment> ?? Array.Empty<Attachment>();
             var msg = new Message(
                 payload.Id,
                 payload.ChannelId,
@@ -227,13 +844,13 @@ public sealed class MainViewModel : ViewModelBase
                 payload.ReplyTo,
                 null,
                 false,
-                []
+                [],
+                attachments
             );
             Messages.Add(msg);
         }
         else
         {
-            // Increment unread for non-active channel
             UpdateUnreadCount(payload.ChannelId, GetUnreadCount(payload.ChannelId) + 1);
         }
     }
@@ -250,7 +867,6 @@ public sealed class MainViewModel : ViewModelBase
 
     private void OnPresence(PresencePayload payload)
     {
-        // Update member status in the member list
         var idx = Members.ToList().FindIndex(m => m.Id == payload.UserId);
         if (idx < 0) return;
         var status = payload.Status switch
@@ -261,6 +877,7 @@ public sealed class MainViewModel : ViewModelBase
             _ => UserStatus.Offline
         };
         Members[idx] = Members[idx] with { Status = status };
+        RebuildMemberGroups();
     }
 
     private void OnChatEdited(ChatEditedPayload payload)
@@ -268,6 +885,7 @@ public sealed class MainViewModel : ViewModelBase
         var idx = Messages.ToList().FindIndex(m => m.Id == payload.MessageId);
         if (idx < 0) return;
         Messages[idx] = Messages[idx] with { Content = payload.Content, EditedAt = payload.EditedAt };
+        RebuildDisplayMessages();
     }
 
     private void OnChatDeleted(ChatDeletedPayload payload)
@@ -275,11 +893,11 @@ public sealed class MainViewModel : ViewModelBase
         var idx = Messages.ToList().FindIndex(m => m.Id == payload.MessageId);
         if (idx < 0) return;
         Messages[idx] = Messages[idx] with { Deleted = true, Content = "[deleted]" };
+        RebuildDisplayMessages();
     }
 
     private void OnMemberJoined(WsMember payload)
     {
-        // Don't add duplicates
         if (Members.Any(m => m.Id == payload.Id))
             return;
 
@@ -291,6 +909,7 @@ public sealed class MainViewModel : ViewModelBase
             _ => UserStatus.Offline
         };
         Members.Add(new User(payload.Id, payload.Username, payload.Avatar, payload.RoleId, status));
+        RebuildMemberGroups();
     }
 
     private void OnChannelCreated(ChannelEventPayload payload)
@@ -302,7 +921,8 @@ public sealed class MainViewModel : ViewModelBase
             "announcement" => ChannelType.Announcement,
             _ => ChannelType.Text
         };
-        Channels.Add(new Channel(payload.Id, payload.Name, type, payload.Category, payload.Position, 0, null));
+        Channels.Add(new Channel(payload.Id, payload.Name, type, payload.Category, payload.Position, 0, null, payload.Topic));
+        RebuildChannelGroups();
     }
 
     private void OnChannelUpdated(ChannelEventPayload payload)
@@ -315,7 +935,10 @@ public sealed class MainViewModel : ViewModelBase
             "announcement" => ChannelType.Announcement,
             _ => ChannelType.Text
         };
-        Channels[idx] = new Channel(payload.Id, payload.Name, type, payload.Category, payload.Position, Channels[idx].UnreadCount, Channels[idx].LastMessageId);
+        Channels[idx] = new Channel(payload.Id, payload.Name, type, payload.Category, payload.Position, Channels[idx].UnreadCount, Channels[idx].LastMessageId, payload.Topic);
+        RebuildChannelGroups();
+        if (SelectedChannel?.Id == payload.Id)
+            OnPropertyChanged(nameof(SelectedChannelTopic));
     }
 
     private void OnChannelDeleted(long channelId)
@@ -324,6 +947,7 @@ public sealed class MainViewModel : ViewModelBase
         if (ch is not null)
         {
             Channels.Remove(ch);
+            RebuildChannelGroups();
             if (SelectedChannel?.Id == channelId)
                 SelectedChannel = Channels.FirstOrDefault();
         }
@@ -331,7 +955,72 @@ public sealed class MainViewModel : ViewModelBase
 
     private void OnConnectionLost(string reason)
     {
-        ConnectionStatus = "Disconnected — reconnecting...";
+        ConnectionStatus = "Disconnected \u2014 reconnecting...";
+    }
+
+    // ── Voice event handlers ─────────────────────────────────────────────────
+
+    private void OnVoiceState(VoiceStatePayload payload)
+    {
+        // Update or add voice state
+        var existing = VoiceStates.FirstOrDefault(vs => vs.UserId == payload.UserId);
+        if (existing is not null)
+        {
+            existing.ChannelId = payload.ChannelId;
+            existing.Muted = payload.Muted;
+            existing.Deafened = payload.Deafened;
+        }
+        else
+        {
+            VoiceStates.Add(new VoiceStateInfo
+            {
+                UserId = payload.UserId,
+                ChannelId = payload.ChannelId,
+                Username = payload.Username,
+                Muted = payload.Muted,
+                Deafened = payload.Deafened
+            });
+        }
+
+        // If this is the local user, update voice widget state
+        if (_chat?.CurrentUser is not null && payload.UserId == _chat.CurrentUser.Id)
+        {
+            IsInVoice = true;
+            _voiceChannelId = payload.ChannelId;
+            VoiceChannelName = Channels.FirstOrDefault(c => c.Id == payload.ChannelId)?.Name ?? "Voice";
+            IsMuted = payload.Muted;
+            IsDeafened = payload.Deafened;
+        }
+
+        RebuildChannelGroups();
+    }
+
+    private void OnVoiceLeave(VoiceLeavePayload payload)
+    {
+        var existing = VoiceStates.FirstOrDefault(vs => vs.UserId == payload.UserId);
+        if (existing is not null)
+            VoiceStates.Remove(existing);
+
+        // If this is the local user, clear voice widget
+        if (_chat?.CurrentUser is not null && payload.UserId == _chat.CurrentUser.Id)
+        {
+            IsInVoice = false;
+            VoiceChannelName = null;
+            _voiceChannelId = 0;
+            IsMuted = false;
+            IsDeafened = false;
+        }
+
+        RebuildChannelGroups();
+    }
+
+    private void OnVoiceSpeakers(VoiceSpeakersPayload payload)
+    {
+        var speakerSet = new HashSet<long>(payload.Speakers);
+        foreach (var vs in VoiceStates.Where(vs => vs.ChannelId == payload.ChannelId))
+        {
+            vs.Speaking = speakerSet.Contains(vs.UserId);
+        }
     }
 
     private int GetUnreadCount(long channelId)
diff --git a/Client/OwnCord.Client/Views/ConnectPage.xaml b/Client/OwnCord.Client/Views/ConnectPage.xaml
index 3a5f4043..8ae55d17 100644
--- a/Client/OwnCord.Client/Views/ConnectPage.xaml
+++ b/Client/OwnCord.Client/Views/ConnectPage.xaml
@@ -4,201 +4,32 @@
       Title="Connect">
 
     <Page.Resources>
-        <!-- Styled TextBox -->
-        <Style x:Key="ModernTextBox" TargetType="TextBox">
-            <Setter Property="Background" Value="#1e1f22"/>
-            <Setter Property="Foreground" Value="#dbdee1"/>
-            <Setter Property="BorderBrush" Value="#3f4147"/>
+        <!-- TOTP digit TextBox (ConnectPage-specific) -->
+        <Style x:Key="TotpDigitBox" TargetType="TextBox">
+            <Setter Property="Background" Value="{StaticResource BgTertiary}"/>
+            <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+            <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
             <Setter Property="BorderThickness" Value="1"/>
-            <Setter Property="Padding" Value="12,10"/>
-            <Setter Property="FontSize" Value="14"/>
-            <Setter Property="CaretBrush" Value="#dbdee1"/>
+            <Setter Property="FontSize" Value="24"/>
+            <Setter Property="FontWeight" Value="Bold"/>
+            <Setter Property="Width" Value="44"/>
+            <Setter Property="Height" Value="52"/>
+            <Setter Property="MaxLength" Value="1"/>
+            <Setter Property="TextAlignment" Value="Center"/>
+            <Setter Property="CaretBrush" Value="{StaticResource TextNormal}"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="TextBox">
                         <Border Background="{TemplateBinding Background}"
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="4">
-                            <ScrollViewer x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}"/>
+                                CornerRadius="8">
+                            <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center"
+                                          HorizontalAlignment="Center"/>
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsFocused" Value="True">
-                                <Setter Property="BorderBrush" Value="#5865f2"/>
-                            </Trigger>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter Property="BorderBrush" Value="#4e5058"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Styled PasswordBox -->
-        <Style x:Key="ModernPasswordBox" TargetType="PasswordBox">
-            <Setter Property="Background" Value="#1e1f22"/>
-            <Setter Property="Foreground" Value="#dbdee1"/>
-            <Setter Property="BorderBrush" Value="#3f4147"/>
-            <Setter Property="BorderThickness" Value="1"/>
-            <Setter Property="Padding" Value="12,10"/>
-            <Setter Property="FontSize" Value="14"/>
-            <Setter Property="CaretBrush" Value="#dbdee1"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="PasswordBox">
-                        <Border Background="{TemplateBinding Background}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="4">
-                            <ScrollViewer x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}"/>
-                        </Border>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsFocused" Value="True">
-                                <Setter Property="BorderBrush" Value="#5865f2"/>
-                            </Trigger>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter Property="BorderBrush" Value="#4e5058"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Primary Button -->
-        <Style x:Key="PrimaryButton" TargetType="Button">
-            <Setter Property="Background" Value="#5865f2"/>
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontSize" Value="14"/>
-            <Setter Property="FontWeight" Value="SemiBold"/>
-            <Setter Property="Cursor" Value="Hand"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <Border x:Name="Bd" Background="{TemplateBinding Background}"
-                                CornerRadius="4" Padding="16,12">
-                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                        </Border>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter TargetName="Bd" Property="Background" Value="#4752c4"/>
-                            </Trigger>
-                            <Trigger Property="IsPressed" Value="True">
-                                <Setter TargetName="Bd" Property="Background" Value="#3c45a5"/>
-                            </Trigger>
-                            <Trigger Property="IsEnabled" Value="False">
-                                <Setter TargetName="Bd" Property="Background" Value="#4e5058"/>
-                                <Setter Property="Foreground" Value="#80848e"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Ghost / secondary Button -->
-        <Style x:Key="GhostButton" TargetType="Button">
-            <Setter Property="Background" Value="Transparent"/>
-            <Setter Property="Foreground" Value="#b5bac1"/>
-            <Setter Property="FontSize" Value="13"/>
-            <Setter Property="Cursor" Value="Hand"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <Border x:Name="Bd" Background="{TemplateBinding Background}"
-                                CornerRadius="4" Padding="10,6">
-                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                        </Border>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter TargetName="Bd" Property="Background" Value="#2b2d31"/>
-                                <Setter Property="Foreground" Value="#dbdee1"/>
-                            </Trigger>
-                            <Trigger Property="IsEnabled" Value="False">
-                                <Setter Property="Foreground" Value="#4e5058"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Danger Button (for delete) -->
-        <Style x:Key="DangerButton" TargetType="Button">
-            <Setter Property="Background" Value="Transparent"/>
-            <Setter Property="Foreground" Value="#80848e"/>
-            <Setter Property="FontSize" Value="12"/>
-            <Setter Property="Cursor" Value="Hand"/>
-            <Setter Property="ToolTip" Value="Delete this server"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <Border x:Name="Bd" Background="{TemplateBinding Background}"
-                                CornerRadius="4" Padding="6,4">
-                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                        </Border>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter TargetName="Bd" Property="Background" Value="#da373c"/>
-                                <Setter Property="Foreground" Value="White"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Modern CheckBox -->
-        <Style x:Key="ModernCheckBox" TargetType="CheckBox">
-            <Setter Property="Foreground" Value="#b5bac1"/>
-            <Setter Property="FontSize" Value="13"/>
-            <Setter Property="Cursor" Value="Hand"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="CheckBox">
-                        <StackPanel Orientation="Horizontal">
-                            <Border x:Name="CheckBorder" Width="18" Height="18"
-                                    CornerRadius="4" BorderThickness="2"
-                                    BorderBrush="#4e5058" Background="Transparent"
-                                    VerticalAlignment="Center" Margin="0,0,8,0">
-                                <TextBlock x:Name="CheckMark" Text="&#x2713;"
-                                           FontSize="12" FontWeight="Bold"
-                                           Foreground="White" HorizontalAlignment="Center"
-                                           VerticalAlignment="Center" Visibility="Collapsed"/>
-                            </Border>
-                            <ContentPresenter VerticalAlignment="Center"/>
-                        </StackPanel>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsChecked" Value="True">
-                                <Setter TargetName="CheckBorder" Property="Background" Value="#5865f2"/>
-                                <Setter TargetName="CheckBorder" Property="BorderBrush" Value="#5865f2"/>
-                                <Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
-                            </Trigger>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter TargetName="CheckBorder" Property="BorderBrush" Value="#5865f2"/>
-                            </Trigger>
-                        </ControlTemplate.Triggers>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-
-        <!-- Link-style button -->
-        <Style x:Key="LinkButton" TargetType="Button">
-            <Setter Property="Background" Value="Transparent"/>
-            <Setter Property="Foreground" Value="#00a8fc"/>
-            <Setter Property="FontSize" Value="13"/>
-            <Setter Property="Cursor" Value="Hand"/>
-            <Setter Property="Padding" Value="0"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="Button">
-                        <TextBlock x:Name="Tb" Text="{TemplateBinding Content}"
-                                   Foreground="{TemplateBinding Foreground}"/>
-                        <ControlTemplate.Triggers>
-                            <Trigger Property="IsMouseOver" Value="True">
-                                <Setter TargetName="Tb" Property="TextDecorations" Value="Underline"/>
+                                <Setter Property="BorderBrush" Value="{StaticResource Accent}"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
@@ -207,15 +38,38 @@
         </Style>
     </Page.Resources>
 
-    <Grid Background="#313338">
+    <Grid Background="{StaticResource BgPrimary}">
         <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="320"/>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
 
-        <!-- ═══ Left panel: Saved servers ═══ -->
-        <Border Grid.Column="0" Background="#2b2d31" Margin="0" Padding="0">
+        <!-- Settings gear (top-right) -->
+        <Button Grid.ColumnSpan="3" HorizontalAlignment="Right" VerticalAlignment="Top"
+                Margin="0,16,16,0" Width="36" Height="36" Cursor="Hand" ToolTip="Settings"
+                Panel.ZIndex="10">
+            <Button.Template>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="Bd" CornerRadius="8" Background="Transparent"
+                            Width="36" Height="36">
+                        <TextBlock Text="&#x2699;" FontSize="20" Foreground="#80848e"
+                                   HorizontalAlignment="Center" VerticalAlignment="Center"
+                                   x:Name="Icon"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="Bd" Property="Background" Value="#35373c"/>
+                            <Setter TargetName="Icon" Property="Foreground" Value="#dbdee1"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Button.Template>
+        </Button>
+
+        <!-- Left panel: Saved servers -->
+        <Border Grid.Column="0" Background="#2b2d31" Padding="0"
+                BorderThickness="0,0,1,0" BorderBrush="#1e1f22">
             <Grid>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto"/>
@@ -225,10 +79,20 @@
 
                 <!-- Header -->
                 <Border Grid.Row="0" Padding="20,20,20,12" BorderBrush="#3f4147" BorderThickness="0,0,0,1">
-                    <StackPanel>
+                    <Grid>
                         <TextBlock Text="YOUR SERVERS" FontSize="11" FontWeight="Bold"
-                                   Foreground="#80848e"/>
-                    </StackPanel>
+                                   Foreground="#80848e" VerticalAlignment="Center"/>
+                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
+                            <Button Content="&#x21bb;" FontSize="14" FontWeight="Bold"
+                                    Style="{StaticResource GhostButton}"
+                                    Command="{Binding RefreshHealthCommand}"
+                                    ToolTip="Refresh server health" Margin="0,0,4,0"/>
+                            <Button Content="+" FontSize="16" FontWeight="Bold"
+                                    Style="{StaticResource GhostButton}"
+                                    Command="{Binding AddProfileCommand}"
+                                    ToolTip="Add server"/>
+                        </StackPanel>
+                    </Grid>
                 </Border>
 
                 <!-- Server list -->
@@ -252,39 +116,64 @@
                                                     <ColumnDefinition Width="Auto"/>
                                                 </Grid.ColumnDefinitions>
 
-                                                <!-- Server icon circle -->
-                                                <Border Grid.Column="0" Width="36" Height="36"
-                                                        CornerRadius="18" Background="#5865f2"
-                                                        Margin="0,0,12,0">
-                                                    <TextBlock Text="S" FontSize="15" FontWeight="Bold"
-                                                               Foreground="White"
-                                                               HorizontalAlignment="Center"
-                                                               VerticalAlignment="Center"/>
-                                                </Border>
+                                                <!-- Server icon circle with profile color and first letter -->
+                                                <Grid Grid.Column="0" Width="36" Height="36" Margin="0,0,12,0">
+                                                    <Border Width="36" Height="36"
+                                                            CornerRadius="18"
+                                                            Background="{Binding Color, Converter={StaticResource ColorToBrush}}">
+                                                        <Grid>
+                                                            <TextBlock Text="{Binding Name, Converter={StaticResource FirstChar}}"
+                                                                       FontSize="15" FontWeight="Bold"
+                                                                       Foreground="White"
+                                                                       HorizontalAlignment="Center"
+                                                                       VerticalAlignment="Center"/>
+                                                            <!-- Auto-connect indicator -->
+                                                            <TextBlock Text="&#x26A1;" FontSize="10"
+                                                                       HorizontalAlignment="Right"
+                                                                       VerticalAlignment="Bottom"
+                                                                       Margin="0,0,-2,0"
+                                                                       Visibility="{Binding AutoConnect, Converter={StaticResource BoolToVisibility}}"/>
+                                                        </Grid>
+                                                    </Border>
+                                                    <!-- Health status dot -->
+                                                    <Ellipse x:Name="HealthDot" Width="10" Height="10"
+                                                             HorizontalAlignment="Right" VerticalAlignment="Bottom"
+                                                             Margin="0,0,-1,-1"
+                                                             Stroke="#2b2d31" StrokeThickness="2"/>
+                                                </Grid>
 
-                                                <!-- Server name + host -->
+                                                <!-- Server name + host:port + last connected -->
                                                 <StackPanel Grid.Column="1" VerticalAlignment="Center">
                                                     <TextBlock Text="{Binding Name}" FontSize="14"
                                                                FontWeight="SemiBold" Foreground="#dbdee1"
                                                                TextTrimming="CharacterEllipsis"/>
-                                                    <TextBlock Text="{Binding LastUsername}" FontSize="12"
-                                                               Foreground="#80848e" Margin="0,2,0,0"
+                                                    <TextBlock Text="{Binding HostDisplay}" FontSize="12"
+                                                               Foreground="#949ba4" Margin="0,1,0,0"
                                                                TextTrimming="CharacterEllipsis"/>
+                                                    <TextBlock Text="{Binding LastConnected, Converter={StaticResource RelativeTime}}"
+                                                               FontSize="11" Foreground="#6d6f78"
+                                                               Margin="0,1,0,0"/>
                                                 </StackPanel>
 
-                                                <!-- Delete button -->
-                                                <Button Grid.Column="2" Content="X"
-                                                        Style="{StaticResource DangerButton}"
-                                                        VerticalAlignment="Center"
-                                                        x:Name="DeleteBtn" Visibility="Collapsed"
-                                                        Click="DeleteProfile_Click"
-                                                        Tag="{Binding}"/>
+                                                <!-- Edit + Delete buttons -->
+                                                <StackPanel Grid.Column="2" Orientation="Horizontal"
+                                                            VerticalAlignment="Center"
+                                                            x:Name="ActionButtons" Visibility="Collapsed">
+                                                    <Button Content="&#x270E;"
+                                                            Style="{StaticResource EditButton}"
+                                                            Click="EditProfile_Click"
+                                                            Tag="{Binding}"/>
+                                                    <Button Content="X"
+                                                            Style="{StaticResource DangerButton}"
+                                                            Click="DeleteProfile_Click"
+                                                            Tag="{Binding}" Margin="4,0,0,0"/>
+                                                </StackPanel>
                                             </Grid>
                                         </Border>
                                         <ControlTemplate.Triggers>
                                             <Trigger Property="IsMouseOver" Value="True">
                                                 <Setter TargetName="Bd" Property="Background" Value="#35373c"/>
-                                                <Setter TargetName="DeleteBtn" Property="Visibility" Value="Visible"/>
+                                                <Setter TargetName="ActionButtons" Property="Visibility" Value="Visible"/>
                                             </Trigger>
                                             <Trigger Property="IsSelected" Value="True">
                                                 <Setter TargetName="Bd" Property="Background" Value="#404249"/>
@@ -294,7 +183,7 @@
                                                     <Condition Property="IsSelected" Value="True"/>
                                                     <Condition Property="IsMouseOver" Value="True"/>
                                                 </MultiTrigger.Conditions>
-                                                <Setter TargetName="DeleteBtn" Property="Visibility" Value="Visible"/>
+                                                <Setter TargetName="ActionButtons" Property="Visibility" Value="Visible"/>
                                             </MultiTrigger>
                                         </ControlTemplate.Triggers>
                                     </ControlTemplate>
@@ -309,117 +198,220 @@
                             Visibility="{Binding HasNoProfiles, Converter={StaticResource BoolToVisibility}}">
                     <TextBlock Text="No saved servers" FontSize="14" Foreground="#4e5058"
                                HorizontalAlignment="Center"/>
-                    <TextBlock Text="Connect to a server and save it" FontSize="12"
+                    <TextBlock Text="Add a server to get started" FontSize="12"
                                Foreground="#3f4147" HorizontalAlignment="Center" Margin="0,4,0,0"/>
                 </StackPanel>
 
-                <!-- Save current as profile -->
+                <!-- Footer: Save current + Import/Export -->
                 <Border Grid.Row="2" Padding="12" BorderBrush="#3f4147" BorderThickness="0,1,0,0">
-                    <Button Content="+ Save Current Server"
-                            Style="{StaticResource GhostButton}"
-                            Command="{Binding SaveProfileCommand}"
-                            HorizontalAlignment="Stretch"/>
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                        </Grid.RowDefinitions>
+
+                        <Button Grid.Row="0" Content="+ Save Current Server"
+                                Style="{StaticResource GhostButton}"
+                                Command="{Binding SaveProfileCommand}"
+                                HorizontalAlignment="Stretch"/>
+
+                        <StackPanel Grid.Row="1" Orientation="Horizontal"
+                                    HorizontalAlignment="Center" Margin="0,6,0,0">
+                            <Button Content="Import" Style="{StaticResource SmallIconButton}"
+                                    Command="{Binding ImportProfilesCommand}"
+                                    ToolTip="Import profiles from JSON" Margin="0,0,4,0"/>
+                            <Button Content="Export" Style="{StaticResource SmallIconButton}"
+                                    Command="{Binding ExportProfilesCommand}"
+                                    ToolTip="Export profiles to JSON"/>
+                        </StackPanel>
+                    </Grid>
                 </Border>
             </Grid>
         </Border>
 
-        <!-- Divider line -->
-        <Rectangle Grid.Column="1" Width="1" Fill="#1e1f22"/>
+        <!-- (divider handled by left panel border) -->
 
-        <!-- ═══ Right panel: Login form ═══ -->
+        <!-- Right panel: Login form / TOTP -->
         <ScrollViewer Grid.Column="2" VerticalScrollBarVisibility="Auto">
             <Border VerticalAlignment="Center" HorizontalAlignment="Center"
                     Width="340" Padding="0,40">
-                <StackPanel>
-                    <!-- Logo / Title -->
-                    <TextBlock Text="OwnCord" FontSize="28" FontWeight="Bold"
-                               Foreground="White" HorizontalAlignment="Center"/>
-                    <TextBlock Text="Welcome back!" FontSize="14"
-                               Foreground="#b5bac1" HorizontalAlignment="Center"
-                               Margin="0,4,0,32"
-                               Visibility="{Binding IsRegisterMode, Converter={StaticResource InverseBoolToVisibility}}"/>
-                    <TextBlock Text="Create an account" FontSize="14"
-                               Foreground="#b5bac1" HorizontalAlignment="Center"
-                               Margin="0,4,0,32"
-                               Visibility="{Binding IsRegisterMode, Converter={StaticResource BoolToVisibility}}"/>
+                <Grid>
+                    <!-- Login/Register form (hidden during 2FA) -->
+                    <StackPanel Visibility="{Binding IsTotpRequired, Converter={StaticResource InverseBoolToVisibility}}">
+                        <!-- Logo / Title -->
+                        <TextBlock Text="OwnCord" FontSize="28" FontWeight="Bold"
+                                   Foreground="White" HorizontalAlignment="Center"/>
+                        <TextBlock Text="Welcome back!" FontSize="14"
+                                   Foreground="#b5bac1" HorizontalAlignment="Center"
+                                   Margin="0,4,0,32"
+                                   Visibility="{Binding IsRegisterMode, Converter={StaticResource InverseBoolToVisibility}}"/>
+                        <TextBlock Text="Create an account" FontSize="14"
+                                   Foreground="#b5bac1" HorizontalAlignment="Center"
+                                   Margin="0,4,0,32"
+                                   Visibility="{Binding IsRegisterMode, Converter={StaticResource BoolToVisibility}}"/>
 
-                    <!-- Error message -->
-                    <Border Visibility="{Binding ErrorMessage, Converter={StaticResource NullToVisibility}}"
-                            Background="#2d1214" CornerRadius="4" Padding="12,10" Margin="0,0,0,16">
-                        <TextBlock Text="{Binding ErrorMessage}" Foreground="#f38688"
-                                   TextWrapping="Wrap" FontSize="13"/>
-                    </Border>
+                        <!-- Error message -->
+                        <Border Visibility="{Binding ErrorMessage, Converter={StaticResource NullToVisibility}}"
+                                Background="#2d1214" CornerRadius="4" Padding="12,10" Margin="0,0,0,16">
+                            <TextBlock Text="{Binding ErrorMessage}" Foreground="#f38688"
+                                       TextWrapping="Wrap" FontSize="13"/>
+                        </Border>
 
-                    <!-- Server Address -->
-                    <TextBlock Text="SERVER ADDRESS" FontSize="11" FontWeight="Bold"
-                               Foreground="#b5bac1" Margin="0,0,0,6"/>
-                    <TextBox Text="{Binding Host, UpdateSourceTrigger=PropertyChanged}"
-                             Style="{StaticResource ModernTextBox}" Margin="0,0,0,16"/>
+                        <!-- Host + Port row -->
+                        <Grid Margin="0,0,0,16">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="8"/>
+                                <ColumnDefinition Width="100"/>
+                            </Grid.ColumnDefinitions>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                            </Grid.RowDefinitions>
 
-                    <!-- Username -->
-                    <TextBlock Text="USERNAME" FontSize="11" FontWeight="Bold"
-                               Foreground="#b5bac1" Margin="0,0,0,6"/>
-                    <TextBox Text="{Binding Username, UpdateSourceTrigger=PropertyChanged}"
-                             Style="{StaticResource ModernTextBox}" Margin="0,0,0,16"/>
+                            <TextBlock Grid.Column="0" Grid.Row="0" Text="SERVER ADDRESS"
+                                       FontSize="11" FontWeight="Bold"
+                                       Foreground="#b5bac1" Margin="0,0,0,6"/>
+                            <TextBox Grid.Column="0" Grid.Row="1"
+                                     Text="{Binding Host, UpdateSourceTrigger=PropertyChanged}"
+                                     Style="{StaticResource ModernTextBox}"/>
 
-                    <!-- Password -->
-                    <TextBlock Text="PASSWORD" FontSize="11" FontWeight="Bold"
-                               Foreground="#b5bac1" Margin="0,0,0,6"/>
-                    <PasswordBox x:Name="PasswordBox"
-                                 Style="{StaticResource ModernPasswordBox}" Margin="0,0,0,10"/>
+                            <TextBlock Grid.Column="2" Grid.Row="0" Text="PORT"
+                                       FontSize="11" FontWeight="Bold"
+                                       Foreground="#b5bac1" Margin="0,0,0,6"/>
+                            <TextBox Grid.Column="2" Grid.Row="1" x:Name="PortBox"
+                                     Text="{Binding Port, UpdateSourceTrigger=PropertyChanged}"
+                                     Style="{StaticResource ModernTextBox}"/>
+                        </Grid>
 
-                    <!-- Save password -->
-                    <CheckBox Content="Remember my password" Style="{StaticResource ModernCheckBox}"
-                              IsChecked="{Binding SavePassword}" Margin="0,0,0,16"/>
-
-                    <!-- Invite code (register mode only) -->
-                    <StackPanel Visibility="{Binding IsRegisterMode, Converter={StaticResource BoolToVisibility}}"
-                                Margin="0,0,0,16">
-                        <TextBlock Text="INVITE CODE" FontSize="11" FontWeight="Bold"
+                        <!-- Username -->
+                        <TextBlock Text="USERNAME" FontSize="11" FontWeight="Bold"
                                    Foreground="#b5bac1" Margin="0,0,0,6"/>
-                        <TextBox Text="{Binding InviteCode, UpdateSourceTrigger=PropertyChanged}"
-                                 Style="{StaticResource ModernTextBox}"/>
+                        <TextBox Text="{Binding Username, UpdateSourceTrigger=PropertyChanged}"
+                                 Style="{StaticResource ModernTextBox}" Margin="0,0,0,16"/>
+
+                        <!-- Password -->
+                        <TextBlock Text="PASSWORD" FontSize="11" FontWeight="Bold"
+                                   Foreground="#b5bac1" Margin="0,0,0,6"/>
+                        <PasswordBox x:Name="PasswordBox"
+                                     Style="{StaticResource ModernPasswordBox}" Margin="0,0,0,10"/>
+
+                        <!-- Save password -->
+                        <CheckBox Content="Remember my password" Style="{StaticResource ModernCheckBox}"
+                                  IsChecked="{Binding SavePassword}" Margin="0,0,0,16"/>
+
+                        <!-- Invite code (register mode only) -->
+                        <StackPanel Visibility="{Binding IsRegisterMode, Converter={StaticResource BoolToVisibility}}"
+                                    Margin="0,0,0,16">
+                            <TextBlock Text="INVITE CODE" FontSize="11" FontWeight="Bold"
+                                       Foreground="#b5bac1" Margin="0,0,0,6"/>
+                            <TextBox Text="{Binding InviteCode, UpdateSourceTrigger=PropertyChanged}"
+                                     Style="{StaticResource ModernTextBox}"/>
+                        </StackPanel>
+
+                        <!-- Connect button -->
+                        <Button Style="{StaticResource PrimaryButton}"
+                                HorizontalAlignment="Stretch" Margin="0,0,0,8"
+                                Click="ConnectButton_Click">
+                            <Button.Content>
+                                <TextBlock>
+                                    <TextBlock.Style>
+                                        <Style TargetType="TextBlock">
+                                            <Setter Property="Text" Value="Log In"/>
+                                            <Style.Triggers>
+                                                <DataTrigger Binding="{Binding IsRegisterMode}" Value="True">
+                                                    <Setter Property="Text" Value="Register"/>
+                                                </DataTrigger>
+                                                <DataTrigger Binding="{Binding IsLoading}" Value="True">
+                                                    <Setter Property="Text" Value="Connecting..."/>
+                                                </DataTrigger>
+                                            </Style.Triggers>
+                                        </Style>
+                                    </TextBlock.Style>
+                                </TextBlock>
+                            </Button.Content>
+                        </Button>
+
+                        <!-- Switch to Register -->
+                        <StackPanel Orientation="Horizontal" Margin="0,8,0,0"
+                                    Visibility="{Binding IsRegisterMode, Converter={StaticResource InverseBoolToVisibility}}">
+                            <TextBlock Text="Need an account? " FontSize="13" Foreground="#80848e"/>
+                            <Button Content="Register" Style="{StaticResource LinkButton}"
+                                    Click="SwitchToRegister_Click"/>
+                        </StackPanel>
+
+                        <!-- Switch to Login -->
+                        <StackPanel Orientation="Horizontal" Margin="0,8,0,0"
+                                    Visibility="{Binding IsRegisterMode, Converter={StaticResource BoolToVisibility}}">
+                            <TextBlock Text="Already have an account? " FontSize="13" Foreground="#80848e"/>
+                            <Button Content="Log In" Style="{StaticResource LinkButton}"
+                                    Click="SwitchToLogin_Click"/>
+                        </StackPanel>
                     </StackPanel>
 
-                    <!-- Connect button -->
-                    <Button Style="{StaticResource PrimaryButton}"
-                            HorizontalAlignment="Stretch" Margin="0,0,0,8"
-                            Click="ConnectButton_Click">
-                        <Button.Content>
-                            <TextBlock>
-                                <TextBlock.Style>
-                                    <Style TargetType="TextBlock">
-                                        <Setter Property="Text" Value="Log In"/>
-                                        <Style.Triggers>
-                                            <DataTrigger Binding="{Binding IsRegisterMode}" Value="True">
-                                                <Setter Property="Text" Value="Register"/>
-                                            </DataTrigger>
-                                            <DataTrigger Binding="{Binding IsLoading}" Value="True">
-                                                <Setter Property="Text" Value="Connecting..."/>
-                                            </DataTrigger>
-                                        </Style.Triggers>
-                                    </Style>
-                                </TextBlock.Style>
-                            </TextBlock>
-                        </Button.Content>
-                    </Button>
+                    <!-- 2FA TOTP entry (visible only during 2FA) -->
+                    <StackPanel Visibility="{Binding IsTotpRequired, Converter={StaticResource BoolToVisibility}}">
+                        <TextBlock Text="Two-Factor Authentication" FontSize="22" FontWeight="Bold"
+                                   Foreground="White" HorizontalAlignment="Center"/>
+                        <TextBlock Text="Enter the 6-digit code from your authenticator app"
+                                   FontSize="13" Foreground="#949ba4" HorizontalAlignment="Center"
+                                   TextWrapping="Wrap" TextAlignment="Center" Margin="0,8,0,28"/>
 
-                    <!-- Switch to Register -->
-                    <StackPanel Orientation="Horizontal" Margin="0,8,0,0"
-                                Visibility="{Binding IsRegisterMode, Converter={StaticResource InverseBoolToVisibility}}">
-                        <TextBlock Text="Need an account? " FontSize="13" Foreground="#80848e"/>
-                        <Button Content="Register" Style="{StaticResource LinkButton}"
-                                Click="SwitchToRegister_Click"/>
-                    </StackPanel>
+                        <!-- Error message -->
+                        <Border Visibility="{Binding ErrorMessage, Converter={StaticResource NullToVisibility}}"
+                                Background="#2d1214" CornerRadius="4" Padding="12,10" Margin="0,0,0,16">
+                            <TextBlock Text="{Binding ErrorMessage}" Foreground="#f38688"
+                                       TextWrapping="Wrap" FontSize="13"/>
+                        </Border>
 
-                    <!-- Switch to Login -->
-                    <StackPanel Orientation="Horizontal" Margin="0,8,0,0"
-                                Visibility="{Binding IsRegisterMode, Converter={StaticResource BoolToVisibility}}">
-                        <TextBlock Text="Already have an account? " FontSize="13" Foreground="#80848e"/>
-                        <Button Content="Log In" Style="{StaticResource LinkButton}"
-                                Click="SwitchToLogin_Click"/>
+                        <!-- 6 digit boxes -->
+                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,24">
+                            <TextBox x:Name="Totp1" Style="{StaticResource TotpDigitBox}" Margin="0,0,6,0"
+                                     TextChanged="TotpDigit_TextChanged" PreviewKeyDown="TotpDigit_KeyDown"
+                                     PreviewTextInput="TotpDigit_PreviewTextInput"/>
+                            <TextBox x:Name="Totp2" Style="{StaticResource TotpDigitBox}" Margin="0,0,6,0"
+                                     TextChanged="TotpDigit_TextChanged" PreviewKeyDown="TotpDigit_KeyDown"
+                                     PreviewTextInput="TotpDigit_PreviewTextInput"/>
+                            <TextBox x:Name="Totp3" Style="{StaticResource TotpDigitBox}" Margin="0,0,6,0"
+                                     TextChanged="TotpDigit_TextChanged" PreviewKeyDown="TotpDigit_KeyDown"
+                                     PreviewTextInput="TotpDigit_PreviewTextInput"/>
+                            <TextBox x:Name="Totp4" Style="{StaticResource TotpDigitBox}" Margin="0,0,6,0"
+                                     TextChanged="TotpDigit_TextChanged" PreviewKeyDown="TotpDigit_KeyDown"
+                                     PreviewTextInput="TotpDigit_PreviewTextInput"/>
+                            <TextBox x:Name="Totp5" Style="{StaticResource TotpDigitBox}" Margin="0,0,6,0"
+                                     TextChanged="TotpDigit_TextChanged" PreviewKeyDown="TotpDigit_KeyDown"
+                                     PreviewTextInput="TotpDigit_PreviewTextInput"/>
+                            <TextBox x:Name="Totp6" Style="{StaticResource TotpDigitBox}"
+                                     TextChanged="TotpDigit_TextChanged" PreviewKeyDown="TotpDigit_KeyDown"
+                                     PreviewTextInput="TotpDigit_PreviewTextInput"/>
+                        </StackPanel>
+
+                        <!-- Verify button -->
+                        <Button Style="{StaticResource PrimaryButton}"
+                                HorizontalAlignment="Stretch" Margin="0,0,0,8"
+                                Click="VerifyTotp_Click">
+                            <Button.Content>
+                                <TextBlock>
+                                    <TextBlock.Style>
+                                        <Style TargetType="TextBlock">
+                                            <Setter Property="Text" Value="Verify"/>
+                                            <Style.Triggers>
+                                                <DataTrigger Binding="{Binding IsLoading}" Value="True">
+                                                    <Setter Property="Text" Value="Verifying..."/>
+                                                </DataTrigger>
+                                            </Style.Triggers>
+                                        </Style>
+                                    </TextBlock.Style>
+                                </TextBlock>
+                            </Button.Content>
+                        </Button>
+
+                        <!-- Back button -->
+                        <Button Content="Back to login" Style="{StaticResource LinkButton}"
+                                HorizontalAlignment="Center" Margin="0,8,0,0"
+                                Command="{Binding CancelTotpCommand}"/>
                     </StackPanel>
-                </StackPanel>
+                </Grid>
             </Border>
         </ScrollViewer>
     </Grid>
diff --git a/Client/OwnCord.Client/Views/ConnectPage.xaml.cs b/Client/OwnCord.Client/Views/ConnectPage.xaml.cs
index fecc8998..1ed93ce9 100644
--- a/Client/OwnCord.Client/Views/ConnectPage.xaml.cs
+++ b/Client/OwnCord.Client/Views/ConnectPage.xaml.cs
@@ -1,5 +1,8 @@
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Shapes;
 using OwnCord.Client.Models;
 using OwnCord.Client.ViewModels;
 
@@ -8,6 +11,20 @@ namespace OwnCord.Client.Views;
 public partial class ConnectPage : Page
 {
     private readonly ConnectViewModel _vm;
+    private readonly TextBox[] _totpBoxes;
+
+    private static readonly SolidColorBrush OnlineBrush = new(Color.FromRgb(0x23, 0xa5, 0x5a));
+    private static readonly SolidColorBrush CheckingBrush = new(Color.FromRgb(0xf0, 0xb2, 0x32));
+    private static readonly SolidColorBrush OfflineBrush = new(Color.FromRgb(0xf2, 0x3f, 0x43));
+    private static readonly SolidColorBrush UnknownBrush = new(Color.FromRgb(0x6d, 0x6f, 0x78));
+
+    static ConnectPage()
+    {
+        OnlineBrush.Freeze();
+        CheckingBrush.Freeze();
+        OfflineBrush.Freeze();
+        UnknownBrush.Freeze();
+    }
 
     public ConnectPage(ConnectViewModel vm)
     {
@@ -15,7 +32,64 @@ public partial class ConnectPage : Page
         _vm = vm;
         DataContext = vm;
 
+        _totpBoxes = [Totp1, Totp2, Totp3, Totp4, Totp5, Totp6];
+
         vm.PasswordLoaded += pwd => PasswordBox.Password = pwd ?? string.Empty;
+        vm.EditProfileRequested += OnEditProfileRequested;
+        vm.HealthStatusChanged += RefreshHealthDots;
+
+        Loaded += OnPageLoaded;
+    }
+
+    private async void OnPageLoaded(object sender, RoutedEventArgs e)
+    {
+        if (_vm.Profiles.Count > 0)
+        {
+            await _vm.RefreshHealthAsync();
+        }
+    }
+
+    private void RefreshHealthDots()
+    {
+        Dispatcher.InvokeAsync(() =>
+        {
+            for (var i = 0; i < ProfileList.Items.Count; i++)
+            {
+                if (ProfileList.ItemContainerGenerator.ContainerFromIndex(i) is not ListBoxItem container)
+                    continue;
+
+                var profile = ProfileList.Items[i] as ServerProfile;
+                if (profile is null) continue;
+
+                var dot = FindVisualChild<Ellipse>(container, "HealthDot");
+                if (dot is null) continue;
+
+                var status = _vm.GetHealthStatus(profile.Id);
+                dot.Fill = status switch
+                {
+                    "online" => OnlineBrush,
+                    "checking" => CheckingBrush,
+                    "offline" => OfflineBrush,
+                    _ => UnknownBrush
+                };
+            }
+        });
+    }
+
+    private static T? FindVisualChild<T>(DependencyObject parent, string name) where T : FrameworkElement
+    {
+        var count = VisualTreeHelper.GetChildrenCount(parent);
+        for (var i = 0; i < count; i++)
+        {
+            var child = VisualTreeHelper.GetChild(parent, i);
+            if (child is T typed && typed.Name == name)
+                return typed;
+
+            var found = FindVisualChild<T>(child, name);
+            if (found is not null)
+                return found;
+        }
+        return null;
     }
 
     private void ConnectButton_Click(object sender, RoutedEventArgs e)
@@ -33,9 +107,83 @@ public partial class ConnectPage : Page
         }
     }
 
+    private void EditProfile_Click(object sender, RoutedEventArgs e)
+    {
+        if (sender is Button btn && btn.Tag is ServerProfile profile)
+        {
+            _vm.EditProfileCommand.Execute(profile);
+        }
+    }
+
     private void SwitchToRegister_Click(object sender, RoutedEventArgs e)
         => _vm.IsRegisterMode = true;
 
     private void SwitchToLogin_Click(object sender, RoutedEventArgs e)
         => _vm.IsRegisterMode = false;
+
+    private void OnEditProfileRequested(ServerProfile? existing)
+    {
+        var dialog = new ServerProfileDialog(existing)
+        {
+            Owner = Window.GetWindow(this)
+        };
+
+        if (dialog.ShowDialog() == true && dialog.ResultProfile is not null)
+        {
+            _vm.ApplyProfileFromDialog(dialog.ResultProfile, dialog.IsNewProfile);
+        }
+    }
+
+    // ── TOTP digit box handlers ──────────────────────────────────────────
+
+    private void TotpDigit_PreviewTextInput(object sender, TextCompositionEventArgs e)
+    {
+        // Only allow digits
+        e.Handled = !char.IsDigit(e.Text, 0);
+    }
+
+    private void TotpDigit_TextChanged(object sender, TextChangedEventArgs e)
+    {
+        if (sender is not TextBox current) return;
+
+        // Auto-advance to next box
+        if (current.Text.Length == 1)
+        {
+            var index = Array.IndexOf(_totpBoxes, current);
+            if (index >= 0 && index < _totpBoxes.Length - 1)
+            {
+                _totpBoxes[index + 1].Focus();
+            }
+        }
+
+        // Sync the combined code to the VM
+        SyncTotpCode();
+    }
+
+    private void TotpDigit_KeyDown(object sender, KeyEventArgs e)
+    {
+        if (sender is not TextBox current) return;
+
+        if (e.Key == Key.Back && current.Text.Length == 0)
+        {
+            var index = Array.IndexOf(_totpBoxes, current);
+            if (index > 0)
+            {
+                _totpBoxes[index - 1].Focus();
+                _totpBoxes[index - 1].SelectAll();
+            }
+        }
+    }
+
+    private void SyncTotpCode()
+    {
+        var code = string.Concat(_totpBoxes.Select(b => b.Text));
+        _vm.TotpCode = code;
+    }
+
+    private void VerifyTotp_Click(object sender, RoutedEventArgs e)
+    {
+        SyncTotpCode();
+        _vm.VerifyTotpCommand.Execute(null);
+    }
 }
diff --git a/Client/OwnCord.Client/Views/MainPage.xaml b/Client/OwnCord.Client/Views/MainPage.xaml
index 15938dbb..ff56d608 100644
--- a/Client/OwnCord.Client/Views/MainPage.xaml
+++ b/Client/OwnCord.Client/Views/MainPage.xaml
@@ -1,7 +1,119 @@
 <Page x:Class="OwnCord.Client.Views.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="clr-namespace:OwnCord.Client.Controls"
+      xmlns:models="clr-namespace:OwnCord.Client.Models"
       Title="OwnCord">
+
+    <Page.Resources>
+        <!-- Channel item button -->
+        <Style x:Key="ChannelButton" TargetType="Button">
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Padding="6,6,8,6" Background="Transparent">
+                            <ContentPresenter/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Message hover container -->
+        <Style x:Key="MessageBorder" TargetType="Border">
+            <Setter Property="Background" Value="Transparent"/>
+            <Style.Triggers>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="Background" Value="#04000000"/>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <!-- Reaction chip button -->
+        <Style x:Key="ReactionChip" TargetType="Button">
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="8" Padding="4,2,6,2"
+                                Background="#265865f2" BorderThickness="1" BorderBrush="#4D5865f2">
+                            <ContentPresenter/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="#4D5865f2"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Input area button (attach, emoji, send) -->
+        <Style x:Key="InputButton" TargetType="Button">
+            <Setter Property="Width" Value="36"/>
+            <Setter Property="Height" Value="36"/>
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Background="Transparent"
+                                Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgSecondary}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <!-- Chat textbox style -->
+        <Style x:Key="ChatTextBox" TargetType="TextBox">
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
+            <Setter Property="CaretBrush" Value="{StaticResource TextNormal}"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="FontSize" Value="14"/>
+            <Setter Property="FontFamily" Value="{StaticResource FontBody}"/>
+            <Setter Property="VerticalAlignment" Value="Center"/>
+            <Setter Property="Padding" Value="4,8"/>
+            <Setter Property="AcceptsReturn" Value="False"/>
+        </Style>
+
+        <!-- Header tool button -->
+        <Style x:Key="HeaderToolButton" TargetType="Button">
+            <Setter Property="Width" Value="28"/>
+            <Setter Property="Height" Value="28"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Border x:Name="Bd" CornerRadius="4" Background="Transparent"
+                                Width="28" Height="28">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Page.Resources>
+
     <Grid Background="#313338">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
@@ -16,144 +128,647 @@
         </Border>
 
         <Grid Grid.Row="1">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="200"/>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="180"/>
-        </Grid.ColumnDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="72"/>
+                <ColumnDefinition Width="240"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
 
-        <!-- Channel sidebar -->
-        <Grid Grid.Column="0" Background="#2b2d31">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="48"/>
-                <RowDefinition Height="*"/>
-            </Grid.RowDefinitions>
-            <Border Grid.Row="0" Background="#1e1f22" BorderThickness="0,0,0,1" BorderBrush="#1e1f22">
-                <TextBlock Text="OwnCord" Foreground="White" FontWeight="SemiBold"
-                           VerticalAlignment="Center" Margin="16,0"/>
-            </Border>
-            <ListBox Grid.Row="1" ItemsSource="{Binding Channels}"
-                     SelectedItem="{Binding SelectedChannel}"
-                     Background="Transparent" BorderThickness="0">
-                <ListBox.ItemTemplate>
-                    <DataTemplate>
-                        <StackPanel Orientation="Horizontal" Margin="8,2">
-                            <TextBlock Text="# " Foreground="#6d6f78" FontSize="14"/>
-                            <TextBlock Text="{Binding Name}" Foreground="#949ba4" FontSize="14"/>
-                            <Border Visibility="{Binding UnreadCount, Converter={StaticResource IntToVisibility}}"
-                                    Background="#5865f2" CornerRadius="8" Margin="8,0,0,0" Padding="6,1">
-                                <TextBlock Text="{Binding UnreadCount}" Foreground="White" FontSize="10"/>
-                            </Border>
-                        </StackPanel>
-                    </DataTemplate>
-                </ListBox.ItemTemplate>
-            </ListBox>
-        </Grid>
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <!-- Server strip (leftmost)                                        -->
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <controls:ServerStripControl Grid.Column="0"
+                Servers="{Binding ServerProfiles}"
+                SelectedServer="{Binding ActiveServer}"
+                SelectServerCommand="{Binding SelectServerCommand}"
+                AddServerCommand="{Binding AddServerCommand}"
+                HomeCommand="{Binding HomeCommand}"/>
 
-        <!-- Message area -->
-        <Grid Grid.Column="1">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="48"/>
-                <RowDefinition Height="*"/>
-                <RowDefinition Height="Auto"/>
-                <RowDefinition Height="72"/>
-            </Grid.RowDefinitions>
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <!-- DM sidebar (shown in Home view)                                -->
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <controls:DmSidebarControl Grid.Column="1"
+                DirectMessages="{Binding Members}"
+                FriendsCommand="{Binding HomeCommand}"
+                Visibility="{Binding IsHomeView, Converter={StaticResource BoolToVisibility}}"/>
 
-            <!-- Channel header -->
-            <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22">
-                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="16,0">
-                    <TextBlock Text="# " Foreground="#6d6f78" FontWeight="SemiBold"/>
-                    <TextBlock Text="{Binding SelectedChannel.Name}" Foreground="White" FontWeight="SemiBold"/>
-                </StackPanel>
-            </Border>
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <!-- Channel sidebar (shown in Server view)                         -->
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <Grid Grid.Column="1" Background="#2b2d31"
+                  Visibility="{Binding IsHomeView, Converter={StaticResource InverseBoolToVisibility}}">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="48"/>
+                    <RowDefinition Height="*"/>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
 
-            <!-- Messages -->
-            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
-                <ItemsControl ItemsSource="{Binding Messages}" Padding="16">
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <StackPanel Orientation="Horizontal" Margin="0,4">
-                                <!-- Avatar circle -->
-                                <Ellipse Width="36" Height="36" Margin="0,0,12,0" Fill="#5865f2"/>
+                <!-- Server name header -->
+                <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22" Cursor="Hand">
+                    <Grid Margin="16,0">
+                        <TextBlock Text="OwnCord" Foreground="White" FontWeight="Bold" FontSize="15"
+                                   VerticalAlignment="Center"/>
+                    </Grid>
+                </Border>
+
+                <!-- Channel list with categories -->
+                <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+                    <ItemsControl ItemsSource="{Binding ChannelGroups}" Margin="0,8,0,0">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate DataType="{x:Type models:ChannelGroup}">
                                 <StackPanel>
-                                    <StackPanel Orientation="Horizontal">
-                                        <TextBlock Text="{Binding Author.Username}"
-                                                   Foreground="White" FontWeight="SemiBold" Margin="0,0,8,0"/>
-                                        <TextBlock Text="{Binding Timestamp, StringFormat={}{0:HH:mm}}"
-                                                   Foreground="#6d6f78" FontSize="11" VerticalAlignment="Bottom"/>
-                                    </StackPanel>
-                                    <TextBlock Text="{Binding Content}" Foreground="#dbdee1"
-                                               TextWrapping="Wrap" MaxWidth="600"/>
+                                    <!-- Category header (hidden for ungrouped) -->
+                                    <Button Visibility="{Binding HasCategory, Converter={StaticResource BoolToVisibility}}"
+                                            Command="{Binding DataContext.ToggleCategoryCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                            CommandParameter="{Binding}"
+                                            Background="Transparent" BorderThickness="0" Cursor="Hand"
+                                            HorizontalContentAlignment="Left" Padding="0" Margin="0,16,0,4">
+                                        <Button.Template>
+                                            <ControlTemplate TargetType="Button">
+                                                <ContentPresenter/>
+                                            </ControlTemplate>
+                                        </Button.Template>
+                                        <StackPanel Orientation="Horizontal" Margin="8,0,8,0">
+                                            <TextBlock Text="{Binding IsExpanded, Converter={StaticResource BoolToArrow}}"
+                                                       Foreground="#80848e" FontSize="8" Margin="8,0,4,0"
+                                                       VerticalAlignment="Center"/>
+                                            <TextBlock Text="{Binding DisplayName}" Foreground="#80848e"
+                                                       FontSize="11" FontWeight="Bold"
+                                                       VerticalAlignment="Center"/>
+                                        </StackPanel>
+                                    </Button>
+
+                                    <!-- Channel items in this group -->
+                                    <ItemsControl ItemsSource="{Binding Items}"
+                                                  Visibility="{Binding IsExpanded, Converter={StaticResource BoolToVisibility}}">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate DataType="{x:Type models:ChannelItem}">
+                                                <StackPanel>
+                                                    <!-- Channel row (clickable) -->
+                                                    <Button Command="{Binding DataContext.SelectChannelCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                                            CommandParameter="{Binding}"
+                                                            Style="{StaticResource ChannelButton}"
+                                                            HorizontalContentAlignment="Stretch" Padding="0" Margin="4,1,4,0">
+                                                        <Grid>
+                                                            <Grid.ColumnDefinitions>
+                                                                <ColumnDefinition Width="Auto"/>
+                                                                <ColumnDefinition Width="*"/>
+                                                                <ColumnDefinition Width="Auto"/>
+                                                            </Grid.ColumnDefinitions>
+
+                                                            <!-- Channel type icon -->
+                                                            <TextBlock Grid.Column="0" Margin="2,0,6,0"
+                                                                       VerticalAlignment="Center" FontSize="16" Width="20" TextAlignment="Center">
+                                                                <TextBlock.Style>
+                                                                    <Style TargetType="TextBlock">
+                                                                        <Setter Property="Text" Value="#"/>
+                                                                        <Setter Property="Foreground" Value="#6d6f78"/>
+                                                                        <Setter Property="Opacity" Value="0.6"/>
+                                                                        <Style.Triggers>
+                                                                            <DataTrigger Binding="{Binding Type}" Value="Voice">
+                                                                                <Setter Property="Text" Value="&#x1F50A;"/>
+                                                                            </DataTrigger>
+                                                                            <DataTrigger Binding="{Binding Type}" Value="Announcement">
+                                                                                <Setter Property="Text" Value="&#x1F4E2;"/>
+                                                                            </DataTrigger>
+                                                                        </Style.Triggers>
+                                                                    </Style>
+                                                                </TextBlock.Style>
+                                                            </TextBlock>
+
+                                                            <!-- Channel name -->
+                                                            <TextBlock Grid.Column="1" Text="{Binding Name}"
+                                                                       FontSize="14" VerticalAlignment="Center"
+                                                                       TextTrimming="CharacterEllipsis">
+                                                                <TextBlock.Style>
+                                                                    <Style TargetType="TextBlock">
+                                                                        <Setter Property="Foreground" Value="#949ba4"/>
+                                                                        <Style.Triggers>
+                                                                            <DataTrigger Binding="{Binding UnreadCount, Converter={StaticResource IntToVisibility}}" Value="Visible">
+                                                                                <Setter Property="Foreground" Value="White"/>
+                                                                                <Setter Property="FontWeight" Value="SemiBold"/>
+                                                                            </DataTrigger>
+                                                                        </Style.Triggers>
+                                                                    </Style>
+                                                                </TextBlock.Style>
+                                                            </TextBlock>
+
+                                                            <!-- Unread badge -->
+                                                            <Border Grid.Column="2"
+                                                                    Visibility="{Binding UnreadCount, Converter={StaticResource IntToVisibility}}"
+                                                                    Background="#5865f2" CornerRadius="9"
+                                                                    Margin="4,0,0,0" Padding="6,1"
+                                                                    MinWidth="18" Height="18"
+                                                                    VerticalAlignment="Center">
+                                                                <TextBlock Text="{Binding UnreadCount}" Foreground="White" FontSize="10"
+                                                                           FontWeight="Bold" HorizontalAlignment="Center"/>
+                                                            </Border>
+                                                        </Grid>
+                                                    </Button>
+
+                                                    <!-- Voice users (shown under voice channels) -->
+                                                    <ItemsControl ItemsSource="{Binding VoiceUsers}">
+                                                        <ItemsControl.ItemTemplate>
+                                                            <DataTemplate DataType="{x:Type models:VoiceStateInfo}">
+                                                                <Border Margin="0,1" Padding="3,3,8,3" CornerRadius="4"
+                                                                        Cursor="Hand">
+                                                                    <Border.Style>
+                                                                        <Style TargetType="Border">
+                                                                            <Setter Property="Background" Value="Transparent"/>
+                                                                            <Style.Triggers>
+                                                                                <Trigger Property="IsMouseOver" Value="True">
+                                                                                    <Setter Property="Background" Value="#35373c"/>
+                                                                                </Trigger>
+                                                                            </Style.Triggers>
+                                                                        </Style>
+                                                                    </Border.Style>
+                                                                    <StackPanel Orientation="Horizontal" Margin="36,0,0,0">
+                                                                        <!-- Avatar with speaking ring -->
+                                                                        <Grid Width="20" Height="20" Margin="0,0,8,0">
+                                                                            <Ellipse Width="20" Height="20" Fill="#5865f2"
+                                                                                     Stroke="{Binding Speaking, Converter={StaticResource SpeakingToStroke}}"
+                                                                                     StrokeThickness="2"/>
+                                                                            <TextBlock Text="{Binding Username, Converter={StaticResource FirstLetter}}"
+                                                                                       Foreground="White" FontSize="8" FontWeight="Bold"
+                                                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                                                        </Grid>
+                                                                        <TextBlock Text="{Binding Username}" Foreground="#949ba4" FontSize="13"
+                                                                                   VerticalAlignment="Center"/>
+                                                                        <!-- Muted icon -->
+                                                                        <TextBlock Text="&#x1F507;" FontSize="10" Margin="4,0,0,0"
+                                                                                   Foreground="#f23f43" VerticalAlignment="Center"
+                                                                                   Visibility="{Binding Muted, Converter={StaticResource BoolToVisibility}}"/>
+                                                                    </StackPanel>
+                                                                </Border>
+                                                            </DataTemplate>
+                                                        </ItemsControl.ItemTemplate>
+                                                    </ItemsControl>
+                                                </StackPanel>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
                                 </StackPanel>
-                            </StackPanel>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-            </ScrollViewer>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </ScrollViewer>
 
-            <!-- Typing indicator -->
-            <TextBlock Grid.Row="2"
-                       Text="{Binding TypingText}"
-                       Visibility="{Binding IsTyping, Converter={StaticResource BoolToVisibility}}"
-                       Foreground="#b5bac1" FontSize="12" Margin="16,2" FontStyle="Italic"/>
+                <!-- Voice widget (shown when in voice) -->
+                <controls:VoiceWidgetControl Grid.Row="2"/>
 
-            <!-- Message input -->
-            <Border Grid.Row="3" Background="#383a40" CornerRadius="8" Margin="16,0,16,16" Padding="12,8">
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <TextBox Grid.Column="0"
-                             Text="{Binding MessageInput, UpdateSourceTrigger=PropertyChanged}"
-                             Background="Transparent" BorderThickness="0"
-                             Foreground="White" VerticalAlignment="Center"
-                             AcceptsReturn="False"/>
-                    <Button Grid.Column="1" Content="Send"
-                            Command="{Binding SendMessageCommand}"
-                            Background="#5865f2" Foreground="White"
-                            Margin="8,0,0,0"/>
-                </Grid>
-            </Border>
-        </Grid>
+                <!-- User bar -->
+                <controls:UserBarControl Grid.Row="3"/>
+            </Grid>
 
-        <!-- Member list -->
-        <Grid Grid.Column="2" Background="#2b2d31">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="48"/>
-                <RowDefinition Height="*"/>
-            </Grid.RowDefinitions>
-            <TextBlock Grid.Row="0" Text="Members" Foreground="#b5bac1" FontWeight="SemiBold"
-                       VerticalAlignment="Center" Margin="16,0"/>
-            <ListBox Grid.Row="1" ItemsSource="{Binding Members}"
-                     Background="Transparent" BorderThickness="0">
-                <ListBox.ItemTemplate>
-                    <DataTemplate>
-                        <StackPanel Orientation="Horizontal" Margin="8,3">
-                            <Ellipse Width="8" Height="8" Margin="0,0,8,0">
-                                <Ellipse.Style>
-                                    <Style TargetType="Ellipse">
-                                        <Setter Property="Fill" Value="#6d6f78"/>
-                                        <Style.Triggers>
-                                            <DataTrigger Binding="{Binding Status}" Value="Online">
-                                                <Setter Property="Fill" Value="#23a55a"/>
-                                            </DataTrigger>
-                                            <DataTrigger Binding="{Binding Status}" Value="Idle">
-                                                <Setter Property="Fill" Value="#f0b232"/>
-                                            </DataTrigger>
-                                            <DataTrigger Binding="{Binding Status}" Value="Dnd">
-                                                <Setter Property="Fill" Value="#f23f43"/>
-                                            </DataTrigger>
-                                        </Style.Triggers>
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <!-- Friends view (shown in Home view)                              -->
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <controls:FriendsViewControl Grid.Column="2"
+                SelectedTab="{Binding SelectedFriendsTab}"
+                Friends="{Binding Members}"
+                FriendSearchText="{Binding FriendSearchText, Mode=TwoWay}"
+                SelectTabCommand="{Binding SelectFriendsTabCommand}"
+                MessageFriendCommand="{Binding MessageFriendCommand}"
+                Visibility="{Binding IsHomeView, Converter={StaticResource BoolToVisibility}}"/>
+
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <!-- Chat area (shown in Server view)                               -->
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <Grid Grid.Column="2"
+                  Visibility="{Binding IsHomeView, Converter={StaticResource InverseBoolToVisibility}}">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="48"/>
+                    <RowDefinition Height="*"/>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+
+                <!-- Chat header -->
+                <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22">
+                    <Grid Margin="16,0">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                        </Grid.ColumnDefinitions>
+
+                        <!-- # icon -->
+                        <TextBlock Grid.Column="0" Text="#" Foreground="#6d6f78" FontWeight="SemiBold"
+                                   FontSize="22" VerticalAlignment="Center" Margin="0,0,6,0"/>
+
+                        <!-- Channel name -->
+                        <TextBlock Grid.Column="1" Text="{Binding SelectedChannel.Name}" Foreground="White"
+                                   FontWeight="Bold" FontSize="15" VerticalAlignment="Center"/>
+
+                        <!-- Vertical divider -->
+                        <Border Grid.Column="2" Width="1" Height="24" Background="#3f4147" Margin="12,0"
+                                Visibility="{Binding SelectedChannelTopic, Converter={StaticResource NullToVisibility}}"/>
+
+                        <!-- Topic text -->
+                        <TextBlock Grid.Column="3" Text="{Binding SelectedChannelTopic}" Foreground="#949ba4"
+                                   FontSize="13" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
+                                   MaxWidth="400"
+                                   Visibility="{Binding SelectedChannelTopic, Converter={StaticResource NullToVisibility}}"/>
+
+                        <!-- Spacer is column 4 -->
+
+                        <!-- Search input -->
+                        <Border Grid.Column="5" CornerRadius="4" Background="#1e1f22" Padding="8,4" Margin="4,0"
+                                VerticalAlignment="Center">
+                            <TextBox Text="" Background="Transparent" BorderThickness="0"
+                                     Foreground="#dbdee1" FontSize="12" Width="140"
+                                     CaretBrush="#dbdee1">
+                                <TextBox.Style>
+                                    <Style TargetType="TextBox">
+                                        <Setter Property="Tag" Value="Search"/>
                                     </Style>
-                                </Ellipse.Style>
-                            </Ellipse>
-                            <TextBlock Text="{Binding Username}" Foreground="#949ba4" FontSize="13"/>
-                        </StackPanel>
-                    </DataTemplate>
-                </ListBox.ItemTemplate>
-            </ListBox>
-        </Grid>
+                                </TextBox.Style>
+                            </TextBox>
+                        </Border>
+
+                        <!-- Pinned button -->
+                        <Button Grid.Column="6" Style="{StaticResource HeaderToolButton}"
+                                VerticalAlignment="Center" Margin="4,0" ToolTip="Pinned Messages">
+                            <TextBlock Text="&#x1F4CC;" FontSize="16" Foreground="#b5bac1"/>
+                        </Button>
+
+                        <!-- Member list toggle -->
+                        <Button Grid.Column="7" Command="{Binding ToggleMemberListCommand}"
+                                Style="{StaticResource HeaderToolButton}"
+                                VerticalAlignment="Center" Margin="4,0" ToolTip="Toggle Member List">
+                            <TextBlock Text="&#x1F465;" FontSize="16" Foreground="#b5bac1"/>
+                        </Button>
+                    </Grid>
+                </Border>
+
+                <!-- Messages area with grouping and day dividers -->
+                <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto"
+                              x:Name="MessagesScrollViewer">
+                    <ItemsControl ItemsSource="{Binding DisplayMessages}" Padding="0,16,0,16">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate DataType="{x:Type models:MessageDisplayItem}">
+                                <StackPanel>
+                                    <!-- Day divider -->
+                                    <Grid Visibility="{Binding ShowDayDivider, Converter={StaticResource BoolToVisibility}}"
+                                          Margin="16,8,16,16">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="*"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                            <ColumnDefinition Width="*"/>
+                                        </Grid.ColumnDefinitions>
+                                        <Border Grid.Column="0" Height="1" Background="#3f4147" VerticalAlignment="Center"/>
+                                        <TextBlock Grid.Column="1" Text="{Binding DayDividerText}"
+                                                   FontSize="11" FontWeight="Bold" Foreground="#949ba4"
+                                                   Margin="8,0"/>
+                                        <Border Grid.Column="2" Height="1" Background="#3f4147" VerticalAlignment="Center"/>
+                                    </Grid>
+
+                                    <!-- System message (compact single-line) -->
+                                    <StackPanel Orientation="Horizontal" Margin="16,4"
+                                                Visibility="{Binding IsSystemMessage, Converter={StaticResource BoolToVisibility}}">
+                                        <TextBlock Text="&#x2192;" Foreground="{StaticResource Green}" FontSize="16"
+                                                   VerticalAlignment="Center" Margin="0,0,8,0"/>
+                                        <TextBlock FontSize="13" Foreground="{StaticResource TextMuted}" VerticalAlignment="Center">
+                                            <Run Text="{Binding Content, Mode=OneWay}"/>
+                                        </TextBlock>
+                                        <TextBlock Text="{Binding Timestamp, StringFormat={}{0:HH:mm}}"
+                                                   FontSize="11" Foreground="{StaticResource TextFaint}"
+                                                   VerticalAlignment="Center" Margin="8,0,0,0"/>
+                                    </StackPanel>
+
+                                    <!-- Message content -->
+                                    <Border x:Name="MsgBorder" Padding="0,2" MinHeight="28" Style="{StaticResource MessageBorder}"
+                                            Visibility="{Binding IsSystemMessage, Converter={StaticResource InverseBoolToVisibility}}">
+                                        <Grid>
+                                            <!-- Reply reference bar (shown if this is a reply) -->
+                                            <Grid.RowDefinitions>
+                                                <RowDefinition Height="Auto"/>
+                                                <RowDefinition Height="Auto"/>
+                                            </Grid.RowDefinitions>
+
+                                            <!-- Floating actions bar (shown on hover) -->
+                                            <controls:MessageActionsBar
+                                                Grid.Row="0" Grid.RowSpan="2"
+                                                HorizontalAlignment="Right" VerticalAlignment="Top"
+                                                Margin="0,-14,16,0"
+                                                IsOwnMessage="{Binding IsOwnMessage}"
+                                                CommandParameter="{Binding Message}"
+                                                ReplyCommand="{Binding DataContext.StartReplyCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                                EditCommand="{Binding DataContext.StartEditCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                                DeleteCommand="{Binding DataContext.DeleteMessageCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                                Visibility="{Binding IsMouseOver, ElementName=MsgBorder, Converter={StaticResource BoolToVisibility}}"
+                                                Panel.ZIndex="10"/>
+
+                                            <!-- Reply reference -->
+                                            <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="72,4,48,4"
+                                                        Visibility="{Binding IsReply, Converter={StaticResource BoolToVisibility}}">
+                                                <!-- Reply connector line -->
+                                                <Border Width="24" Height="12" Margin="-36,0,6,0"
+                                                        BorderThickness="2,2,0,0" BorderBrush="#6d6f78"
+                                                        CornerRadius="6,0,0,0" VerticalAlignment="Center"/>
+                                                <TextBlock Foreground="#949ba4" FontSize="12" VerticalAlignment="Center">
+                                                    <Run Text="{Binding ReplyToMessage.Author.Username, Mode=OneWay, FallbackValue=''}"
+                                                         FontWeight="SemiBold" Foreground="#dbdee1"/>
+                                                    <Run Text=" "/>
+                                                    <Run Text="{Binding ReplyToMessage.Content, Mode=OneWay, FallbackValue=''}"/>
+                                                </TextBlock>
+                                            </StackPanel>
+
+                                            <!-- Main message row -->
+                                            <Grid Grid.Row="1" Margin="16,0,48,0">
+                                                <Grid.ColumnDefinitions>
+                                                    <ColumnDefinition Width="56"/>
+                                                    <ColumnDefinition Width="*"/>
+                                                </Grid.ColumnDefinitions>
+
+                                                <!-- Avatar (hidden for grouped messages) — clickable for user popup -->
+                                                <Button Grid.Column="0"
+                                                        Command="{Binding DataContext.ShowUserPopupCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                                        CommandParameter="{Binding}"
+                                                        Cursor="Hand"
+                                                        VerticalAlignment="Top" Margin="0,2,0,0"
+                                                        Visibility="{Binding IsGrouped, Converter={StaticResource InverseBoolToVisibility}}">
+                                                    <Button.Template>
+                                                        <ControlTemplate TargetType="Button">
+                                                            <Border Width="40" Height="40" CornerRadius="20" Background="#5865f2">
+                                                                <TextBlock Text="{Binding Author.Username, Converter={StaticResource FirstLetter}}"
+                                                                           Foreground="White" FontWeight="Bold" FontSize="16"
+                                                                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                                            </Border>
+                                                        </ControlTemplate>
+                                                    </Button.Template>
+                                                </Button>
+
+                                                <!-- Hover time (shown for grouped messages on hover) -->
+                                                <TextBlock Grid.Column="0" Text="{Binding Timestamp, StringFormat={}{0:HH:mm}}"
+                                                           FontSize="10" Foreground="#6d6f78"
+                                                           HorizontalAlignment="Center" VerticalAlignment="Top"
+                                                           Margin="0,4,0,0"
+                                                           Visibility="{Binding IsGrouped, Converter={StaticResource BoolToVisibility}}"
+                                                           Opacity="0">
+                                                    <TextBlock.Style>
+                                                        <Style TargetType="TextBlock">
+                                                            <Style.Triggers>
+                                                                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
+                                                                    <Setter Property="Opacity" Value="1"/>
+                                                                </DataTrigger>
+                                                            </Style.Triggers>
+                                                        </Style>
+                                                    </TextBlock.Style>
+                                                </TextBlock>
+
+                                                <!-- Message content column -->
+                                                <StackPanel Grid.Column="1">
+                                                    <!-- Author + timestamp header (hidden for grouped) -->
+                                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,2"
+                                                                Visibility="{Binding IsGrouped, Converter={StaticResource InverseBoolToVisibility}}">
+                                                        <TextBlock Text="{Binding Author.Username}"
+                                                                   Foreground="White" FontWeight="SemiBold"
+                                                                   FontSize="14" Cursor="Hand" Margin="0,0,8,0"/>
+                                                        <TextBlock Text="{Binding Timestamp, StringFormat={}{0:HH:mm}}"
+                                                                   Foreground="#6d6f78" FontSize="11"
+                                                                   VerticalAlignment="Bottom" Margin="0,0,0,1"/>
+                                                    </StackPanel>
+
+                                                    <!-- Message text -->
+                                                    <TextBlock TextWrapping="Wrap" MaxWidth="700"
+                                                               HorizontalAlignment="Left"
+                                                               LineHeight="20">
+                                                        <TextBlock.Style>
+                                                            <Style TargetType="TextBlock">
+                                                                <Setter Property="Foreground" Value="#dbdee1"/>
+                                                                <Style.Triggers>
+                                                                    <DataTrigger Binding="{Binding Deleted}" Value="True">
+                                                                        <Setter Property="Foreground" Value="#6d6f78"/>
+                                                                        <Setter Property="FontStyle" Value="Italic"/>
+                                                                    </DataTrigger>
+                                                                </Style.Triggers>
+                                                            </Style>
+                                                        </TextBlock.Style>
+                                                        <Run Text="{Binding Content, Mode=OneWay}"/>
+                                                        <!-- Edited tag -->
+                                                        <Run Text=" (edited)" FontSize="10" Foreground="#6d6f78"
+                                                             BaselineAlignment="Baseline">
+                                                            <Run.Style>
+                                                                <Style TargetType="Run">
+                                                                    <Style.Triggers>
+                                                                        <DataTrigger Binding="{Binding IsEdited}" Value="False">
+                                                                            <Setter Property="Text" Value=""/>
+                                                                        </DataTrigger>
+                                                                    </Style.Triggers>
+                                                                </Style>
+                                                            </Run.Style>
+                                                        </Run>
+                                                    </TextBlock>
+
+                                                    <!-- Attachments -->
+                                                    <ItemsControl ItemsSource="{Binding Attachments}" Margin="0,4,0,0"
+                                                                  Visibility="{Binding HasAttachments, Converter={StaticResource BoolToVisibility}}">
+                                                        <ItemsControl.ItemTemplate>
+                                                            <DataTemplate>
+                                                                <controls:AttachmentControl
+                                                                    Filename="{Binding Filename}"
+                                                                    FileSize="{Binding Size}"
+                                                                    MimeType="{Binding Mime}"
+                                                                    FileUrl="{Binding Url}"
+                                                                    Margin="0,2"/>
+                                                            </DataTemplate>
+                                                        </ItemsControl.ItemTemplate>
+                                                    </ItemsControl>
+
+                                                    <!-- Reactions -->
+                                                    <ItemsControl ItemsSource="{Binding Reactions}" Margin="0,4,0,0"
+                                                                  Visibility="{Binding HasReactions, Converter={StaticResource BoolToVisibility}}">
+                                                        <ItemsControl.ItemsPanel>
+                                                            <ItemsPanelTemplate>
+                                                                <WrapPanel Orientation="Horizontal"/>
+                                                            </ItemsPanelTemplate>
+                                                        </ItemsControl.ItemsPanel>
+                                                        <ItemsControl.ItemTemplate>
+                                                            <DataTemplate DataType="{x:Type models:Reaction}">
+                                                                <Button Style="{StaticResource ReactionChip}" Margin="0,0,4,0">
+                                                                    <StackPanel Orientation="Horizontal">
+                                                                        <TextBlock Text="{Binding Emoji}" FontSize="14" Margin="0,0,4,0"/>
+                                                                        <TextBlock Text="{Binding Count}" FontSize="12" Foreground="#dbdee1"/>
+                                                                    </StackPanel>
+                                                                </Button>
+                                                            </DataTemplate>
+                                                        </ItemsControl.ItemTemplate>
+                                                    </ItemsControl>
+                                                </StackPanel>
+                                            </Grid>
+                                        </Grid>
+                                    </Border>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </ScrollViewer>
+
+                <!-- Typing indicator -->
+                <Border Grid.Row="2" Height="24" Padding="16,0"
+                        Visibility="{Binding IsTyping, Converter={StaticResource BoolToVisibility}}">
+                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                        <TextBlock Text="{Binding TypingText}" Foreground="#b5bac1" FontSize="12" FontStyle="Italic"/>
+                    </StackPanel>
+                </Border>
+
+                <!-- Message input area -->
+                <Border Grid.Row="3" Margin="16,0,16,20">
+                    <StackPanel>
+                        <!-- Reply compose bar (shown when replying) -->
+                        <controls:ReplyComposeBar
+                            Username="{Binding ReplyingToMessage.Author.Username}"
+                            CancelCommand="{Binding CancelReplyCommand}"
+                            Visibility="{Binding IsReplying, Converter={StaticResource BoolToVisibility}}"/>
+
+                    <Border Background="#383a40" CornerRadius="8">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+
+                            <!-- Attach file button -->
+                            <Button Grid.Column="0" Style="{StaticResource InputButton}" ToolTip="Attach File">
+                                <TextBlock Text="&#x1F4CE;" FontSize="18" Foreground="#949ba4"/>
+                            </Button>
+
+                            <!-- Message text input -->
+                            <TextBox Grid.Column="1"
+                                     Text="{Binding MessageInput, UpdateSourceTrigger=PropertyChanged}"
+                                     Style="{StaticResource ChatTextBox}"/>
+
+                            <!-- Emoji button -->
+                            <Button Grid.Column="2" Style="{StaticResource InputButton}" ToolTip="Emoji">
+                                <TextBlock Text="&#x1F642;" FontSize="18" Foreground="#949ba4"/>
+                            </Button>
+
+                            <!-- Send button -->
+                            <Button Grid.Column="3" Style="{StaticResource InputButton}"
+                                    Command="{Binding SendMessageCommand}" ToolTip="Send">
+                                <TextBlock Text="&#x27A4;" FontSize="18" Foreground="#5865f2"/>
+                            </Button>
+                        </Grid>
+                    </Border>
+                    </StackPanel>
+                </Border>
+            </Grid>
+
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <!-- Member list (toggleable)                                       -->
+            <!-- ═══════════════════════════════════════════════════════════════ -->
+            <Grid Grid.Column="3" Width="240" Background="#2b2d31"
+                  Visibility="{Binding IsMemberListVisible, Converter={StaticResource BoolToVisibility}}">
+                <ScrollViewer VerticalScrollBarVisibility="Auto" Margin="0,8,0,0">
+                    <ItemsControl ItemsSource="{Binding MemberGroups}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate DataType="{x:Type models:MemberGroup}">
+                                <StackPanel Margin="0,0,0,4">
+                                    <!-- Role group header -->
+                                    <TextBlock Margin="16,16,16,4" FontSize="11" FontWeight="Bold"
+                                               Foreground="{Binding RoleColor, Converter={StaticResource HexColorToBrush}, FallbackValue=#949ba4}">
+                                        <TextBlock.Text>
+                                            <MultiBinding StringFormat="{}{0} — {1}">
+                                                <Binding Path="RoleName"/>
+                                                <Binding Path="MemberCount"/>
+                                            </MultiBinding>
+                                        </TextBlock.Text>
+                                    </TextBlock>
+
+                                    <!-- Members in this role group -->
+                                    <ItemsControl ItemsSource="{Binding Members}">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate DataType="{x:Type models:User}">
+                                                <Button Command="{Binding DataContext.ShowUserPopupCommand, RelativeSource={RelativeSource AncestorType=Page}}"
+                                                        CommandParameter="{Binding}"
+                                                        Cursor="Hand" Margin="8,1">
+                                                    <Button.Template>
+                                                        <ControlTemplate TargetType="Button">
+                                                            <Border x:Name="Bd" CornerRadius="4" Padding="4,4" Background="Transparent">
+                                                                <ContentPresenter/>
+                                                            </Border>
+                                                            <ControlTemplate.Triggers>
+                                                                <Trigger Property="IsMouseOver" Value="True">
+                                                                    <Setter TargetName="Bd" Property="Background" Value="#35373c"/>
+                                                                </Trigger>
+                                                            </ControlTemplate.Triggers>
+                                                        </ControlTemplate>
+                                                    </Button.Template>
+                                                    <StackPanel Orientation="Horizontal">
+                                                        <!-- Avatar with status dot -->
+                                                        <Grid Width="32" Height="32" Margin="0,0,8,0">
+                                                            <Border Width="32" Height="32" CornerRadius="16" Background="#5865f2">
+                                                                <TextBlock Text="{Binding Username, Converter={StaticResource FirstLetter}}"
+                                                                           Foreground="White" FontWeight="Bold" FontSize="12"
+                                                                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                                            </Border>
+                                                            <Ellipse Width="12" Height="12"
+                                                                     HorizontalAlignment="Right" VerticalAlignment="Bottom"
+                                                                     Fill="{Binding Status, Converter={StaticResource StatusToBrush}}"
+                                                                     Stroke="#2b2d31" StrokeThickness="3"/>
+                                                        </Grid>
+                                                        <!-- Username -->
+                                                        <TextBlock Text="{Binding Username}" FontSize="14"
+                                                                   FontWeight="Medium"
+                                                                   VerticalAlignment="Center"
+                                                                   TextTrimming="CharacterEllipsis">
+                                                            <TextBlock.Foreground>
+                                                                <Binding Path="DataContext.RoleColor"
+                                                                         RelativeSource="{RelativeSource AncestorType=StackPanel, AncestorLevel=2}"
+                                                                         Converter="{StaticResource HexColorToBrush}"
+                                                                         FallbackValue="#949ba4"/>
+                                                            </TextBlock.Foreground>
+                                                        </TextBlock>
+                                                    </StackPanel>
+                                                </Button>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </ScrollViewer>
+            </Grid>
         </Grid>
+
+        <!-- User popup overlay -->
+        <Popup x:Name="UserPopup"
+               IsOpen="{Binding ShowUserPopup}"
+               Placement="MousePoint"
+               StaysOpen="False"
+               AllowsTransparency="True"
+               PopupAnimation="Fade"
+               HorizontalOffset="8"
+               VerticalOffset="8">
+            <controls:UserPopupControl
+                Username="{Binding PopupUser.Username}"
+                AvatarColor="#5865f2"
+                RoleName="{Binding PopupUserRoleName}"
+                RoleColor="{Binding PopupUserRoleColor}"
+                StatusText="{Binding PopupUserStatusText}"
+                JoinedDate="Unknown"
+                CloseCommand="{Binding CloseUserPopupCommand}"/>
+        </Popup>
+
+        <!-- Toast notification overlay -->
+        <controls:ToastControl
+            Grid.Row="1"
+            Message="{Binding ToastMessage}"
+            IsOpen="{Binding ShowToast, Mode=TwoWay}"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Bottom"
+            Margin="0,0,0,24"
+            Panel.ZIndex="100"/>
     </Grid>
 </Page>
diff --git a/Client/OwnCord.Client/Views/ServerProfileDialog.xaml b/Client/OwnCord.Client/Views/ServerProfileDialog.xaml
new file mode 100644
index 00000000..a0c8fe86
--- /dev/null
+++ b/Client/OwnCord.Client/Views/ServerProfileDialog.xaml
@@ -0,0 +1,186 @@
+<Window x:Class="OwnCord.Client.Views.ServerProfileDialog"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        Title="Server Profile"
+        Width="420" SizeToContent="Height"
+        WindowStartupLocation="CenterOwner"
+        ResizeMode="NoResize"
+        Background="#313338"
+        WindowStyle="None"
+        AllowsTransparency="True">
+
+    <Window.Resources>
+        <!-- Reuse the same styles from the main theme -->
+        <Style x:Key="DialogTextBox" TargetType="TextBox">
+            <Setter Property="Background" Value="#1e1f22"/>
+            <Setter Property="Foreground" Value="#dbdee1"/>
+            <Setter Property="BorderBrush" Value="#3f4147"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="Padding" Value="12,10"/>
+            <Setter Property="FontSize" Value="14"/>
+            <Setter Property="CaretBrush" Value="#dbdee1"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="TextBox">
+                        <Border Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                CornerRadius="4">
+                            <ScrollViewer x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}"/>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsFocused" Value="True">
+                                <Setter Property="BorderBrush" Value="#5865f2"/>
+                            </Trigger>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter Property="BorderBrush" Value="#4e5058"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+
+        <Style x:Key="DialogCheckBox" TargetType="CheckBox">
+            <Setter Property="Foreground" Value="#b5bac1"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="CheckBox">
+                        <StackPanel Orientation="Horizontal">
+                            <Border x:Name="CheckBorder" Width="18" Height="18"
+                                    CornerRadius="4" BorderThickness="2"
+                                    BorderBrush="#4e5058" Background="Transparent"
+                                    VerticalAlignment="Center" Margin="0,0,8,0">
+                                <TextBlock x:Name="CheckMark" Text="&#x2713;"
+                                           FontSize="12" FontWeight="Bold"
+                                           Foreground="White" HorizontalAlignment="Center"
+                                           VerticalAlignment="Center" Visibility="Collapsed"/>
+                            </Border>
+                            <ContentPresenter VerticalAlignment="Center"/>
+                        </StackPanel>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsChecked" Value="True">
+                                <Setter TargetName="CheckBorder" Property="Background" Value="#5865f2"/>
+                                <Setter TargetName="CheckBorder" Property="BorderBrush" Value="#5865f2"/>
+                                <Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
+                            </Trigger>
+                            <Trigger Property="IsMouseOver" Value="True">
+                                <Setter TargetName="CheckBorder" Property="BorderBrush" Value="#5865f2"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Window.Resources>
+
+    <Border BorderBrush="#3f4147" BorderThickness="1" CornerRadius="8" Background="#313338">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+
+            <!-- Title bar -->
+            <Border Grid.Row="0" Padding="20,16" BorderBrush="#3f4147" BorderThickness="0,0,0,1"
+                    MouseLeftButtonDown="TitleBar_MouseDown">
+                <Grid>
+                    <TextBlock x:Name="TitleText" Text="Add Server" FontSize="16" FontWeight="SemiBold"
+                               Foreground="#dbdee1"/>
+                    <Button Content="&#x2715;" HorizontalAlignment="Right" VerticalAlignment="Center"
+                            FontSize="14" Foreground="#80848e" Background="Transparent"
+                            BorderThickness="0" Cursor="Hand" Click="Cancel_Click"
+                            Padding="4,2"/>
+                </Grid>
+            </Border>
+
+            <!-- Form -->
+            <StackPanel Grid.Row="1" Margin="20,16">
+                <!-- Name -->
+                <TextBlock Text="SERVER NAME" FontSize="11" FontWeight="Bold"
+                           Foreground="#b5bac1" Margin="0,0,0,6"/>
+                <TextBox x:Name="NameBox" Style="{StaticResource DialogTextBox}" Margin="0,0,0,16"/>
+
+                <!-- Host + Port row -->
+                <Grid Margin="0,0,0,16">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="8"/>
+                        <ColumnDefinition Width="100"/>
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+
+                    <TextBlock Grid.Column="0" Grid.Row="0" Text="HOST" FontSize="11" FontWeight="Bold"
+                               Foreground="#b5bac1" Margin="0,0,0,6"/>
+                    <TextBox Grid.Column="0" Grid.Row="1" x:Name="HostBox"
+                             Style="{StaticResource DialogTextBox}"/>
+
+                    <TextBlock Grid.Column="2" Grid.Row="0" Text="PORT" FontSize="11" FontWeight="Bold"
+                               Foreground="#b5bac1" Margin="0,0,0,6"/>
+                    <TextBox Grid.Column="2" Grid.Row="1" x:Name="PortBox" Text="8443"
+                             Style="{StaticResource DialogTextBox}"/>
+                </Grid>
+
+                <!-- Color -->
+                <TextBlock Text="COLOR" FontSize="11" FontWeight="Bold"
+                           Foreground="#b5bac1" Margin="0,0,0,8"/>
+                <StackPanel Orientation="Horizontal" Margin="0,0,0,16">
+                    <Border x:Name="Color1" Width="32" Height="32" CornerRadius="16" Background="#5865f2"
+                            Margin="0,0,8,0" Cursor="Hand" MouseLeftButtonDown="ColorPick_Click"
+                            BorderThickness="2" BorderBrush="Transparent" Tag="#5865f2"/>
+                    <Border x:Name="Color2" Width="32" Height="32" CornerRadius="16" Background="#23a55a"
+                            Margin="0,0,8,0" Cursor="Hand" MouseLeftButtonDown="ColorPick_Click"
+                            BorderThickness="2" BorderBrush="Transparent" Tag="#23a55a"/>
+                    <Border x:Name="Color3" Width="32" Height="32" CornerRadius="16" Background="#f0b232"
+                            Margin="0,0,8,0" Cursor="Hand" MouseLeftButtonDown="ColorPick_Click"
+                            BorderThickness="2" BorderBrush="Transparent" Tag="#f0b232"/>
+                    <Border x:Name="Color4" Width="32" Height="32" CornerRadius="16" Background="#f23f43"
+                            Margin="0,0,8,0" Cursor="Hand" MouseLeftButtonDown="ColorPick_Click"
+                            BorderThickness="2" BorderBrush="Transparent" Tag="#f23f43"/>
+                    <Border x:Name="Color5" Width="32" Height="32" CornerRadius="16" Background="#eb459e"
+                            Margin="0,0,8,0" Cursor="Hand" MouseLeftButtonDown="ColorPick_Click"
+                            BorderThickness="2" BorderBrush="Transparent" Tag="#eb459e"/>
+                    <Border x:Name="Color6" Width="32" Height="32" CornerRadius="16" Background="#00a8fc"
+                            Margin="0,0,0,0" Cursor="Hand" MouseLeftButtonDown="ColorPick_Click"
+                            BorderThickness="2" BorderBrush="Transparent" Tag="#00a8fc"/>
+                </StackPanel>
+
+                <!-- Auto-connect -->
+                <CheckBox x:Name="AutoConnectBox" Content="Auto-connect on startup"
+                          Style="{StaticResource DialogCheckBox}"/>
+            </StackPanel>
+
+            <!-- Footer buttons -->
+            <Border Grid.Row="2" Padding="20,12" Background="#2b2d31">
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Button Content="Cancel" Click="Cancel_Click" Cursor="Hand"
+                            Background="Transparent" Foreground="#b5bac1" FontSize="14"
+                            BorderThickness="0" Padding="16,10" Margin="0,0,8,0"/>
+                    <Button x:Name="SaveButton" Content="Save" Click="Save_Click" Cursor="Hand"
+                            Foreground="White" FontSize="14" FontWeight="SemiBold"
+                            Padding="16,10" BorderThickness="0">
+                        <Button.Template>
+                            <ControlTemplate TargetType="Button">
+                                <Border x:Name="Bd" Background="#5865f2" CornerRadius="4"
+                                        Padding="{TemplateBinding Padding}">
+                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                </Border>
+                                <ControlTemplate.Triggers>
+                                    <Trigger Property="IsMouseOver" Value="True">
+                                        <Setter TargetName="Bd" Property="Background" Value="#4752c4"/>
+                                    </Trigger>
+                                </ControlTemplate.Triggers>
+                            </ControlTemplate>
+                        </Button.Template>
+                    </Button>
+                </StackPanel>
+            </Border>
+        </Grid>
+    </Border>
+</Window>
diff --git a/Client/OwnCord.Client/Views/ServerProfileDialog.xaml.cs b/Client/OwnCord.Client/Views/ServerProfileDialog.xaml.cs
new file mode 100644
index 00000000..2a6a2e8c
--- /dev/null
+++ b/Client/OwnCord.Client/Views/ServerProfileDialog.xaml.cs
@@ -0,0 +1,90 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using OwnCord.Client.Models;
+
+namespace OwnCord.Client.Views;
+
+public partial class ServerProfileDialog : Window
+{
+    private readonly ServerProfile? _existing;
+    private string _selectedColor = "#5865f2";
+    private readonly Border[] _colorBorders;
+
+    /// <summary>The resulting profile after Save, or null if cancelled.</summary>
+    public ServerProfile? ResultProfile { get; private set; }
+
+    /// <summary>True when a new profile was created, false when an existing one was edited.</summary>
+    public bool IsNewProfile => _existing is null;
+
+    public ServerProfileDialog(ServerProfile? existing = null)
+    {
+        InitializeComponent();
+        _existing = existing;
+        _colorBorders = [Color1, Color2, Color3, Color4, Color5, Color6];
+
+        if (existing is not null)
+        {
+            TitleText.Text = "Edit Server";
+            NameBox.Text = existing.Name;
+            HostBox.Text = existing.Host;
+            PortBox.Text = existing.Port.ToString();
+            AutoConnectBox.IsChecked = existing.AutoConnect;
+            _selectedColor = existing.Color;
+        }
+
+        UpdateColorSelection();
+    }
+
+    private void UpdateColorSelection()
+    {
+        foreach (var border in _colorBorders)
+        {
+            var tag = border.Tag as string ?? "";
+            border.BorderBrush = string.Equals(tag, _selectedColor, StringComparison.OrdinalIgnoreCase)
+                ? System.Windows.Media.Brushes.White
+                : System.Windows.Media.Brushes.Transparent;
+        }
+    }
+
+    private void ColorPick_Click(object sender, MouseButtonEventArgs e)
+    {
+        if (sender is Border border && border.Tag is string color)
+        {
+            _selectedColor = color;
+            UpdateColorSelection();
+        }
+    }
+
+    private void Save_Click(object sender, RoutedEventArgs e)
+    {
+        var name = NameBox.Text.Trim();
+        var host = HostBox.Text.Trim();
+        if (string.IsNullOrWhiteSpace(name) || string.IsNullOrWhiteSpace(host))
+            return;
+
+        if (!int.TryParse(PortBox.Text.Trim(), out var port) || port < 1 || port > 65535)
+            port = 8443;
+
+        var autoConnect = AutoConnectBox.IsChecked == true;
+
+        ResultProfile = _existing is not null
+            ? _existing with { Name = name, Host = host, Port = port, Color = _selectedColor, AutoConnect = autoConnect }
+            : ServerProfile.Create(name, host, port: port, color: _selectedColor, autoConnect: autoConnect);
+
+        DialogResult = true;
+        Close();
+    }
+
+    private void Cancel_Click(object sender, RoutedEventArgs e)
+    {
+        DialogResult = false;
+        Close();
+    }
+
+    private void TitleBar_MouseDown(object sender, MouseButtonEventArgs e)
+    {
+        if (e.ChangedButton == MouseButton.Left)
+            DragMove();
+    }
+}
diff --git a/Client/login-mockup.html b/Client/login-mockup.html
new file mode 100644
index 00000000..a26c4dbe
--- /dev/null
+++ b/Client/login-mockup.html
@@ -0,0 +1,1967 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OwnCord — Connect</title>
+<style>
+  /* ═══════════════════════════════════════════
+     DESIGN TOKENS  (mirrors WPF palette + ui-mockup.html)
+     ═══════════════════════════════════════════ */
+  :root {
+    --bg-tertiary:   #1e1f22;
+    --bg-secondary:  #2b2d31;
+    --bg-primary:    #313338;
+    --bg-input:      #1e1f22;
+    --bg-hover:      #35373c;
+    --bg-active:     #404249;
+    --bg-overlay:    rgba(0,0,0,.7);
+    --accent:        #5865f2;
+    --accent-hover:  #4752c4;
+    --accent-active: #3c45a5;
+    --accent-glow:   rgba(88,101,242,.25);
+    --text-normal:   #dbdee1;
+    --text-muted:    #949ba4;
+    --text-faint:    #80848e;
+    --text-micro:    #6d6f78;
+    --text-link:     #00a8fc;
+    --green:         #23a55a;
+    --green-hover:   #1a8f4b;
+    --yellow:        #f0b232;
+    --red:           #f23f43;
+    --red-bg:        #2d1214;
+    --border:        #3f4147;
+    --border-strong: #4e5058;
+    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
+    --font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
+    --font-mono:    "Cascadia Code", "Consolas", monospace;
+    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; overflow: hidden; }
+  body {
+    font-family: var(--font-body); font-size: 14px;
+    color: var(--text-normal); background: var(--bg-primary);
+    -webkit-font-smoothing: antialiased;
+  }
+  button { font-family: inherit; border: none; cursor: pointer; outline: none; }
+  input, select, textarea { font-family: inherit; border: none; outline: none; }
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }
+
+  /* ═══ Page layout ═══ */
+  .connect-page {
+    display: flex; height: 100vh; position: relative; overflow: hidden;
+  }
+
+  /* ═══ Animated background ═══ */
+  .connect-page::before {
+    content: ''; position: absolute; inset: 0;
+    background:
+      radial-gradient(ellipse 600px 400px at 15% 80%, rgba(88,101,242,.08) 0%, transparent 70%),
+      radial-gradient(ellipse 500px 350px at 85% 20%, rgba(88,101,242,.06) 0%, transparent 70%),
+      radial-gradient(ellipse 300px 300px at 50% 50%, rgba(35,165,90,.04) 0%, transparent 70%);
+    pointer-events: none; z-index: 0;
+    animation: bgShift 20s ease-in-out infinite alternate;
+  }
+  @keyframes bgShift {
+    0%   { opacity: 1; transform: scale(1); }
+    50%  { opacity: .7; transform: scale(1.05); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+
+  /* ═══ Settings gear (top-right) ═══ */
+  .settings-gear {
+    position: absolute; top: 16px; right: 16px; z-index: 10;
+    width: 36px; height: 36px; border-radius: var(--radius-md);
+    background: transparent; color: var(--text-faint);
+    display: flex; align-items: center; justify-content: center;
+    transition: all .2s;
+  }
+  .settings-gear:hover { background: var(--bg-hover); color: var(--text-normal); transform: rotate(30deg); }
+  .settings-gear svg { width: 20px; height: 20px; }
+
+  /* ═══════════════════════════════════════════
+     LEFT PANEL — Saved Server Profiles
+     ═══════════════════════════════════════════ */
+  .server-panel {
+    width: 320px; background: var(--bg-secondary);
+    display: flex; flex-direction: column; flex-shrink: 0;
+    z-index: 1; position: relative;
+    border-right: 1px solid var(--bg-tertiary);
+  }
+  .server-panel-header {
+    padding: 16px 20px 12px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .server-panel-header h2 {
+    font-size: 11px; font-weight: 700; color: var(--text-faint);
+    letter-spacing: .05em; text-transform: uppercase;
+  }
+  .header-actions { display: flex; gap: 4px; }
+  .header-btn {
+    width: 28px; height: 28px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-faint);
+    display: flex; align-items: center; justify-content: center;
+    transition: all .15s; font-size: 14px;
+  }
+  .header-btn:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .header-btn svg { width: 14px; height: 14px; }
+
+  /* Server list */
+  .server-list { flex: 1; overflow-y: auto; padding: 8px; }
+  .server-item {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 12px; border-radius: 6px;
+    cursor: pointer; transition: background .15s;
+    position: relative;
+  }
+  .server-item:hover { background: var(--bg-hover); }
+  .server-item.active { background: var(--bg-active); }
+  .server-item .srv-icon {
+    width: 40px; height: 40px; border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 16px; color: white;
+    flex-shrink: 0; transition: border-radius .2s;
+    position: relative;
+  }
+  .server-item:hover .srv-icon,
+  .server-item.active .srv-icon { border-radius: 10px; }
+  .server-item .srv-info { flex: 1; min-width: 0; }
+  .server-item .srv-name {
+    font-size: 14px; font-weight: 600; color: var(--text-normal);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .server-item .srv-meta {
+    display: flex; align-items: center; gap: 6px; margin-top: 2px;
+  }
+  .server-item .srv-host {
+    font-size: 12px; color: var(--text-faint);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .server-item .srv-last {
+    font-size: 10px; color: var(--text-micro);
+    white-space: nowrap;
+  }
+
+  /* Status dot on icon */
+  .srv-status-dot {
+    width: 10px; height: 10px; border-radius: 50%;
+    position: absolute; bottom: -1px; right: -1px;
+    border: 2.5px solid var(--bg-secondary);
+  }
+  .server-item:hover .srv-status-dot { border-color: var(--bg-hover); }
+  .server-item.active .srv-status-dot { border-color: var(--bg-active); }
+  .srv-status-dot.online { background: var(--green); }
+  .srv-status-dot.slow { background: var(--yellow); }
+  .srv-status-dot.offline { background: var(--red); }
+  .srv-status-dot.unknown { background: var(--text-micro); }
+  .srv-status-dot.checking {
+    background: var(--text-micro);
+    animation: pulse 1s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%,100% { opacity: 1; }
+    50%     { opacity: .3; }
+  }
+
+  /* Latency badge */
+  .srv-latency {
+    font-size: 10px; color: var(--text-micro); font-family: var(--font-mono);
+    white-space: nowrap;
+  }
+  .srv-latency.good { color: var(--green); }
+  .srv-latency.warn { color: var(--yellow); }
+  .srv-latency.bad { color: var(--red); }
+
+  /* Action buttons on server item */
+  .srv-actions {
+    display: flex; gap: 2px; opacity: 0; transition: opacity .15s; flex-shrink: 0;
+  }
+  .server-item:hover .srv-actions { opacity: 1; }
+  .srv-btn {
+    width: 26px; height: 26px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-faint);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; transition: all .15s;
+  }
+  .srv-btn:hover { background: var(--bg-active); color: var(--text-normal); }
+  .srv-btn.danger:hover { background: var(--red); color: white; }
+
+  /* Auto-connect indicator */
+  .srv-auto { font-size: 10px; color: var(--accent); margin-left: 4px; }
+
+  /* Empty state */
+  .server-empty {
+    flex: 1; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 8px;
+    padding: 40px;
+  }
+  .server-empty-icon {
+    width: 64px; height: 64px; border-radius: 16px;
+    background: var(--bg-hover); display: flex;
+    align-items: center; justify-content: center;
+    margin-bottom: 8px;
+  }
+  .server-empty-icon svg { width: 28px; height: 28px; color: var(--text-micro); }
+  .server-empty h3 { font-size: 16px; color: var(--text-faint); font-weight: 600; }
+  .server-empty p { font-size: 13px; color: var(--text-micro); text-align: center; line-height: 1.5; }
+
+  /* Footer */
+  .server-panel-footer {
+    padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
+    display: flex; gap: 6px;
+  }
+  .btn-add-server {
+    flex: 1; padding: 8px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    font-size: 13px; transition: all .15s;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+  }
+  .btn-add-server:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .btn-footer-icon {
+    width: 32px; height: 32px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-faint);
+    display: flex; align-items: center; justify-content: center;
+    transition: all .15s; flex-shrink: 0;
+  }
+  .btn-footer-icon:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .btn-footer-icon svg { width: 16px; height: 16px; }
+
+  /* Protocol tip */
+  .protocol-tip {
+    padding: 6px 20px 10px; font-size: 11px; color: var(--text-micro);
+    text-align: center; line-height: 1.4;
+  }
+  .protocol-tip code {
+    font-family: var(--font-mono); font-size: 10px;
+    background: var(--bg-hover); padding: 1px 4px; border-radius: 2px;
+    color: var(--text-faint);
+  }
+
+  /* ═══════════════════════════════════════════
+     RIGHT PANEL — Login / Register / 2FA form
+     ═══════════════════════════════════════════ */
+  .form-panel {
+    flex: 1; display: flex; align-items: center; justify-content: center;
+    z-index: 1; position: relative; padding: 40px;
+  }
+  .form-container {
+    width: 100%; max-width: 400px;
+    animation: formSlideIn .5s cubic-bezier(.16,1,.3,1);
+  }
+  @keyframes formSlideIn {
+    from { opacity: 0; transform: translateY(16px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  /* Logo */
+  .form-logo { text-align: center; margin-bottom: 28px; }
+  .form-logo-mark {
+    width: 56px; height: 56px; border-radius: 16px;
+    background: var(--accent); display: inline-flex;
+    align-items: center; justify-content: center;
+    margin-bottom: 12px;
+    box-shadow: 0 8px 32px var(--accent-glow);
+  }
+  .form-logo-mark svg { width: 32px; height: 32px; }
+  .form-logo h1 {
+    font-family: var(--font-display);
+    font-size: 28px; font-weight: 700; color: white;
+    letter-spacing: -.01em;
+  }
+  .form-logo p { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
+
+  /* Banners */
+  .error-banner {
+    background: var(--red-bg); border-radius: var(--radius-sm);
+    padding: 12px 14px; margin-bottom: 16px;
+    display: none; align-items: flex-start; gap: 8px;
+    animation: shakeX .4s ease-in-out;
+  }
+  .error-banner.visible { display: flex; }
+  .error-banner-icon { color: #f38688; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
+  .error-banner-text { color: #f38688; font-size: 13px; line-height: 1.4; }
+  @keyframes shakeX {
+    0%,100% { transform: translateX(0); }
+    20%     { transform: translateX(-6px); }
+    40%     { transform: translateX(5px); }
+    60%     { transform: translateX(-4px); }
+    80%     { transform: translateX(2px); }
+  }
+  .success-banner {
+    background: rgba(35,165,90,.12); border-radius: var(--radius-sm);
+    padding: 12px 14px; margin-bottom: 16px;
+    display: none; align-items: center; gap: 8px;
+  }
+  .success-banner.visible { display: flex; }
+  .success-banner-icon { color: var(--green); font-size: 16px; flex-shrink: 0; }
+  .success-banner-text { color: var(--green); font-size: 13px; }
+
+  /* Form fields */
+  .form-group { margin-bottom: 16px; }
+  .form-row { display: flex; gap: 12px; }
+  .form-row .form-group { flex: 1; }
+  .form-row .form-group.port-field { flex: 0 0 100px; }
+  .form-label {
+    display: block; font-size: 11px; font-weight: 700;
+    color: var(--text-muted); letter-spacing: .02em;
+    text-transform: uppercase; margin-bottom: 6px;
+  }
+  .form-label .required { color: var(--red); margin-left: 2px; }
+  .form-input {
+    width: 100%; padding: 10px 12px;
+    background: var(--bg-input); color: var(--text-normal);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    font-size: 14px; transition: border-color .2s;
+  }
+  .form-input::placeholder { color: var(--text-micro); }
+  .form-input:hover { border-color: var(--border-strong); }
+  .form-input:focus { border-color: var(--accent); }
+  .form-input.error { border-color: var(--red); }
+
+  /* Password field */
+  .password-wrapper { position: relative; }
+  .password-wrapper .form-input { padding-right: 40px; }
+  .password-toggle {
+    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
+    background: transparent; color: var(--text-faint); padding: 4px;
+    border-radius: var(--radius-sm); font-size: 16px; transition: color .15s;
+  }
+  .password-toggle:hover { color: var(--text-normal); }
+
+  /* Checkbox */
+  .form-checkbox {
+    display: flex; align-items: center; gap: 8px;
+    cursor: pointer; margin-bottom: 16px; user-select: none;
+  }
+  .form-checkbox input { display: none; }
+  .checkbox-box {
+    width: 18px; height: 18px; border-radius: var(--radius-sm);
+    border: 2px solid var(--border-strong); background: transparent;
+    display: flex; align-items: center; justify-content: center;
+    transition: all .15s; flex-shrink: 0;
+  }
+  .checkbox-box svg { opacity: 0; transition: opacity .15s; }
+  .form-checkbox:hover .checkbox-box { border-color: var(--accent); }
+  .form-checkbox input:checked + .checkbox-box {
+    background: var(--accent); border-color: var(--accent);
+  }
+  .form-checkbox input:checked + .checkbox-box svg { opacity: 1; }
+  .checkbox-label { font-size: 13px; color: var(--text-muted); }
+
+  /* Primary button */
+  .btn-primary {
+    width: 100%; padding: 12px; border-radius: var(--radius-sm);
+    background: var(--accent); color: white;
+    font-size: 14px; font-weight: 600;
+    transition: background .15s; position: relative; overflow: hidden;
+  }
+  .btn-primary:hover { background: var(--accent-hover); }
+  .btn-primary:active { background: var(--accent-active); }
+  .btn-primary:disabled { background: var(--border-strong); color: var(--text-faint); cursor: not-allowed; }
+  .btn-primary.loading { pointer-events: none; }
+  .btn-primary.loading .btn-text { opacity: 0; }
+  .btn-primary .btn-spinner {
+    position: absolute; inset: 0;
+    display: none; align-items: center; justify-content: center;
+  }
+  .btn-primary.loading .btn-spinner { display: flex; }
+  .spinner {
+    width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3);
+    border-top-color: white; border-radius: 50%;
+    animation: spin .6s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* Mode switch */
+  .form-switch { margin-top: 12px; font-size: 13px; color: var(--text-faint); }
+  .form-switch a { color: var(--text-link); cursor: pointer; text-decoration: none; }
+  .form-switch a:hover { text-decoration: underline; }
+
+  /* ═══ 2FA / TOTP ═══ */
+  .totp-icon {
+    width: 64px; height: 64px; border-radius: 50%;
+    background: var(--accent); display: flex;
+    align-items: center; justify-content: center;
+    margin: 0 auto 20px; box-shadow: 0 8px 32px var(--accent-glow);
+  }
+  .totp-icon svg { width: 32px; height: 32px; color: white; }
+  .totp-title { text-align: center; font-size: 22px; font-weight: 700; color: white; margin-bottom: 6px; }
+  .totp-subtitle { text-align: center; font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
+  .totp-inputs {
+    display: flex; gap: 8px; justify-content: center; margin-bottom: 24px;
+  }
+  .totp-digit {
+    width: 48px; height: 56px; border-radius: var(--radius-md);
+    background: var(--bg-input); border: 2px solid var(--border);
+    color: white; font-size: 24px; font-weight: 700;
+    text-align: center; transition: border-color .2s;
+    font-family: var(--font-mono);
+  }
+  .totp-digit:focus { border-color: var(--accent); }
+  .totp-digit.filled { border-color: var(--accent); }
+  .totp-back {
+    display: block; text-align: center; margin-top: 16px;
+    font-size: 13px; color: var(--text-faint); cursor: pointer;
+  }
+  .totp-back:hover { color: var(--text-link); }
+  .totp-backup-link {
+    display: block; text-align: center; margin-top: 8px;
+    font-size: 12px; color: var(--text-micro); cursor: pointer;
+  }
+  .totp-backup-link:hover { color: var(--text-link); text-decoration: underline; }
+
+  /* ═══════════════════════════════════════════
+     MODALS (shared)
+     ═══════════════════════════════════════════ */
+  .modal-overlay {
+    position: fixed; inset: 0; background: var(--bg-overlay);
+    display: none; align-items: center; justify-content: center;
+    z-index: 100;
+  }
+  .modal-overlay.visible { display: flex; }
+  .modal {
+    background: var(--bg-primary); border-radius: var(--radius-md);
+    width: 440px; max-height: 80vh; overflow-y: auto;
+    box-shadow: 0 8px 48px rgba(0,0,0,.5);
+    animation: modalSlideIn .3s cubic-bezier(.16,1,.3,1);
+  }
+  @keyframes modalSlideIn {
+    from { opacity: 0; transform: translateY(24px) scale(.96); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
+  }
+  .modal-header {
+    padding: 20px 24px 0; display: flex;
+    align-items: center; justify-content: space-between;
+  }
+  .modal-header h3 { font-size: 18px; font-weight: 700; color: white; }
+  .modal-close {
+    background: transparent; color: var(--text-faint);
+    font-size: 20px; padding: 4px; border-radius: var(--radius-sm);
+    transition: color .15s;
+  }
+  .modal-close:hover { color: var(--text-normal); }
+  .modal-body { padding: 20px 24px; }
+  .modal-footer {
+    padding: 16px 24px; background: var(--bg-secondary);
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+    display: flex; justify-content: flex-end; gap: 8px;
+  }
+  .btn-cancel {
+    padding: 8px 16px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    font-size: 13px; transition: all .15s;
+  }
+  .btn-cancel:hover { color: var(--text-normal); text-decoration: underline; }
+  .btn-modal-save {
+    padding: 8px 20px; border-radius: var(--radius-sm);
+    background: var(--accent); color: white;
+    font-size: 13px; font-weight: 600; transition: background .15s;
+  }
+  .btn-modal-save:hover { background: var(--accent-hover); }
+  .modal-danger-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
+  .modal-danger-text strong { color: white; }
+  .btn-danger {
+    padding: 8px 20px; border-radius: var(--radius-sm);
+    background: var(--red); color: white;
+    font-size: 13px; font-weight: 600; transition: background .15s;
+  }
+  .btn-danger:hover { background: #d83135; }
+
+  /* ═══════════════════════════════════════════
+     CERTIFICATE TRUST DIALOG
+     ═══════════════════════════════════════════ */
+  .cert-warning {
+    width: 64px; height: 64px; border-radius: 50%;
+    background: rgba(240,178,50,.12); display: flex;
+    align-items: center; justify-content: center;
+    margin: 0 auto 16px;
+  }
+  .cert-warning svg { width: 32px; height: 32px; color: var(--yellow); }
+  .cert-title { text-align: center; font-size: 18px; font-weight: 700; color: white; margin-bottom: 8px; }
+  .cert-desc { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
+  .cert-details {
+    background: var(--bg-tertiary); border-radius: var(--radius-sm);
+    padding: 14px 16px; margin-bottom: 16px; font-size: 12px;
+  }
+  .cert-row {
+    display: flex; padding: 4px 0;
+  }
+  .cert-label { color: var(--text-faint); width: 90px; flex-shrink: 0; }
+  .cert-value { color: var(--text-normal); font-family: var(--font-mono); font-size: 11px; word-break: break-all; }
+  .cert-fingerprint { color: var(--yellow); }
+  .cert-actions {
+    display: flex; gap: 8px; justify-content: center; margin-top: 8px;
+  }
+  .btn-ghost {
+    padding: 8px 16px; border-radius: var(--radius-sm);
+    background: var(--bg-hover); color: var(--text-muted);
+    font-size: 13px; transition: all .15s;
+  }
+  .btn-ghost:hover { background: var(--bg-active); color: var(--text-normal); }
+
+  /* ═══════════════════════════════════════════
+     SETTINGS OVERLAY (full-screen, like Discord)
+     ═══════════════════════════════════════════ */
+  .settings-overlay {
+    position: fixed; inset: 0; background: var(--bg-primary);
+    display: none; z-index: 300; animation: settingsFadeIn .2s;
+  }
+  .settings-overlay.visible { display: flex; }
+  @keyframes settingsFadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .settings-layout {
+    display: flex; width: 100%; height: 100%;
+  }
+  .settings-nav {
+    width: 220px; background: var(--bg-secondary);
+    padding: 60px 8px 20px; overflow-y: auto; flex-shrink: 0;
+    display: flex; flex-direction: column;
+  }
+  .settings-nav-title {
+    font-size: 11px; font-weight: 700; color: var(--text-faint);
+    letter-spacing: .05em; text-transform: uppercase;
+    padding: 8px 12px 4px; margin-top: 8px;
+  }
+  .settings-nav-title:first-child { margin-top: 0; }
+  .settings-nav-item {
+    padding: 8px 12px; border-radius: var(--radius-sm);
+    font-size: 14px; color: var(--text-muted);
+    cursor: pointer; transition: all .15s;
+    display: flex; align-items: center; gap: 8px;
+    background: transparent; text-align: left; width: 100%;
+  }
+  .settings-nav-item:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .settings-nav-item.active { background: var(--bg-active); color: white; }
+  .settings-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
+  .settings-nav-sep {
+    height: 1px; background: var(--border); margin: 4px 12px;
+  }
+  .settings-content {
+    flex: 1; padding: 60px 40px 40px; overflow-y: auto; max-width: 740px;
+  }
+  .settings-close {
+    position: absolute; top: 16px; right: 16px;
+    width: 36px; height: 36px; border-radius: 50%;
+    border: 2px solid var(--border-strong); background: transparent;
+    color: var(--text-faint); display: flex;
+    align-items: center; justify-content: center;
+    font-size: 18px; transition: all .15s; z-index: 310;
+  }
+  .settings-close:hover { border-color: var(--text-normal); color: var(--text-normal); }
+  .settings-section-title {
+    font-size: 18px; font-weight: 700; color: white; margin-bottom: 20px;
+  }
+
+  /* Settings form elements */
+  .setting-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 0; border-bottom: 1px solid var(--border);
+  }
+  .setting-row:last-child { border-bottom: none; }
+  .setting-info { flex: 1; }
+  .setting-label { font-size: 14px; color: var(--text-normal); margin-bottom: 2px; }
+  .setting-desc { font-size: 12px; color: var(--text-faint); }
+  .setting-control { flex-shrink: 0; margin-left: 16px; }
+
+  /* Toggle switch */
+  .toggle {
+    width: 40px; height: 22px; border-radius: 11px;
+    background: var(--border-strong); cursor: pointer;
+    position: relative; transition: background .2s;
+  }
+  .toggle.on { background: var(--green); }
+  .toggle::after {
+    content: ''; position: absolute;
+    width: 16px; height: 16px; border-radius: 50%;
+    background: white; top: 3px; left: 3px;
+    transition: transform .2s;
+  }
+  .toggle.on::after { transform: translateX(18px); }
+
+  /* Select dropdown */
+  .setting-select {
+    padding: 6px 28px 6px 10px; border-radius: var(--radius-sm);
+    background: var(--bg-input); color: var(--text-normal);
+    border: 1px solid var(--border); font-size: 13px;
+    appearance: none; cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2380848e' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 8px center;
+    min-width: 180px;
+  }
+  .setting-select:hover { border-color: var(--border-strong); }
+  .setting-select:focus { border-color: var(--accent); }
+
+  /* Slider */
+  .setting-slider {
+    width: 160px; height: 6px; border-radius: 3px;
+    background: var(--border); appearance: none; cursor: pointer;
+  }
+  .setting-slider::-webkit-slider-thumb {
+    appearance: none; width: 16px; height: 16px;
+    border-radius: 50%; background: white;
+    box-shadow: 0 1px 4px rgba(0,0,0,.3);
+  }
+
+  /* VU meter mockup */
+  .vu-meter {
+    height: 6px; border-radius: 3px; background: var(--border);
+    overflow: hidden; margin-top: 8px;
+  }
+  .vu-meter-fill {
+    height: 100%; border-radius: 3px; background: var(--green);
+    transition: width .1s;
+  }
+
+  /* Keybind capture */
+  .keybind-btn {
+    padding: 6px 14px; border-radius: var(--radius-sm);
+    background: var(--bg-input); border: 1px solid var(--border);
+    color: var(--text-normal); font-size: 13px;
+    font-family: var(--font-mono); cursor: pointer;
+    transition: border-color .2s; min-width: 100px; text-align: center;
+  }
+  .keybind-btn:hover { border-color: var(--border-strong); }
+  .keybind-btn.listening {
+    border-color: var(--accent); color: var(--accent);
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  /* Mic test */
+  .mic-test-btn {
+    padding: 8px 16px; border-radius: var(--radius-sm);
+    background: var(--accent); color: white; font-size: 13px;
+    font-weight: 600; transition: background .15s;
+  }
+  .mic-test-btn:hover { background: var(--accent-hover); }
+  .mic-test-btn.active { background: var(--red); }
+  .mic-test-btn.active:hover { background: #d83135; }
+
+  /* About section */
+  .about-logo { text-align: center; margin-bottom: 24px; }
+  .about-version {
+    text-align: center; font-size: 13px; color: var(--text-faint); margin-top: 8px;
+  }
+  .about-links {
+    display: flex; gap: 16px; justify-content: center; margin-top: 16px;
+  }
+  .about-link {
+    font-size: 13px; color: var(--text-link); cursor: pointer;
+    background: transparent; padding: 0;
+  }
+  .about-link:hover { text-decoration: underline; }
+
+  /* ═══════════════════════════════════════════
+     CONNECTION STATUS BAR
+     ═══════════════════════════════════════════ */
+  .status-bar {
+    position: absolute; bottom: 0; left: 0; right: 0;
+    height: 4px; z-index: 50; overflow: hidden; display: none;
+  }
+  .status-bar.visible { display: block; }
+  .status-bar-fill {
+    height: 100%; background: var(--accent);
+    width: 0; box-shadow: 0 0 12px var(--accent-glow);
+  }
+  .status-bar.indeterminate .status-bar-fill {
+    width: 30%; animation: indeterminate 1.2s ease-in-out infinite;
+  }
+  @keyframes indeterminate {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(440%); }
+  }
+
+  /* ═══════════════════════════════════════════
+     CONNECTED OVERLAY
+     ═══════════════════════════════════════════ */
+  .connected-overlay {
+    position: fixed; inset: 0; background: var(--bg-primary);
+    display: none; align-items: center; justify-content: center;
+    flex-direction: column; gap: 12px; z-index: 200;
+  }
+  .connected-overlay.visible { display: flex; }
+  .connected-icon-wrap {
+    position: relative; margin-bottom: 4px;
+  }
+  .connected-srv-icon {
+    width: 72px; height: 72px; border-radius: 20px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 28px; font-weight: 700; color: white;
+    animation: checkPop .4s cubic-bezier(.16,1,.3,1);
+  }
+  .connected-check-badge {
+    position: absolute; bottom: -4px; right: -4px;
+    width: 28px; height: 28px; border-radius: 50%;
+    background: var(--green); display: flex;
+    align-items: center; justify-content: center;
+    border: 3px solid var(--bg-primary);
+    animation: checkPop .5s cubic-bezier(.16,1,.3,1) .1s both;
+  }
+  .connected-check-badge svg { width: 14px; height: 14px; color: white; }
+  @keyframes checkPop {
+    from { transform: scale(0); opacity: 0; }
+    to   { transform: scale(1); opacity: 1; }
+  }
+  .connected-text { font-size: 20px; font-weight: 700; color: white; }
+  .connected-user { font-size: 14px; color: var(--text-muted); }
+  .connected-motd {
+    font-size: 13px; color: var(--text-faint); text-align: center;
+    max-width: 340px; line-height: 1.5; margin-top: 4px;
+    font-style: italic;
+  }
+  .connected-loader {
+    margin-top: 12px; display: flex; align-items: center; gap: 8px;
+    color: var(--text-micro); font-size: 12px;
+  }
+  .connected-loader .spinner { width: 14px; height: 14px; border-width: 1.5px; }
+
+  /* ═══ Responsive ═══ */
+  @media (max-width: 700px) {
+    .server-panel { width: 260px; }
+    .form-container { max-width: 340px; }
+  }
+</style>
+</head>
+<body>
+
+<!-- ═══════════════════════════════════════════════════════
+     CONNECT PAGE
+     data-wpf-component="ConnectPage"
+     data-wpf-notes="Page hosted in MainWindow Frame. Split layout:
+       left=ServerProfileListControl, right=LoginFormControl.
+       ViewModel: ConnectViewModel with Profiles ObservableCollection,
+       SelectedProfile, IsRegisterMode, IsTotpRequired, IsLoading, ErrorMessage.
+       Navigation: on successful connect, navigate to MainPage.
+       Settings gear opens SettingsDialog window (pre-connection settings).
+       Handles chatserver:// URI from command-line args."
+     ═══════════════════════════════════════════════════════ -->
+<div class="connect-page" data-wpf-component="ConnectPage">
+
+  <!-- Settings gear -->
+  <button class="settings-gear" onclick="openSettings()" title="Settings"
+          data-wpf-component="SettingsButton"
+          data-wpf-notes="Button that opens SettingsDialog window. Allows configuring
+            audio devices, keybinds, appearance, and network settings before connecting.">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+    </svg>
+  </button>
+
+  <!-- ═══ Left: Server Profiles ═══ -->
+  <div class="server-panel"
+       data-wpf-component="ServerProfileListControl"
+       data-wpf-notes="ListBox bound to Profiles ObservableCollection<ServerProfile>.
+         SelectedItem bound to SelectedProfile. ItemTemplate renders icon with status dot,
+         name, host:port, last-connected timestamp, latency badge.
+         Edit/Delete buttons in DataTrigger on IsMouseOver.
+         ServerProfile model: { Id, Name, Host, Port, LastUsername, Color,
+           SavedPassword (DPAPI), AutoConnect, DefaultUsername, Notes, LastConnected }.
+         Health check: on load, pings each server's /api/health endpoint in parallel
+         with 3s timeout. Updates status dot and latency badge.
+         Footer: Add Server + Import/Export buttons.">
+
+    <div class="server-panel-header">
+      <h2>Your Servers</h2>
+      <div class="header-actions">
+        <button class="header-btn" onclick="refreshAllHealth()" title="Check server status">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="server-list" id="serverList"><!-- Rendered by JS --></div>
+
+    <div class="protocol-tip"
+         data-wpf-component="ProtocolTip"
+         data-wpf-notes="TextBlock. chatserver:// URI handler registered by installer in
+           HKCR\\chatserver\\shell\\open\\command. App.xaml.cs OnStartup parses args.">
+      Tip: Share <code>chatserver://host:port/invite/CODE</code> links to invite friends
+    </div>
+
+    <div class="server-panel-footer">
+      <button class="btn-add-server" onclick="openAddServerModal()">
+        <span>+</span> Add Server
+      </button>
+      <button class="btn-footer-icon" onclick="importProfiles()" title="Import profiles"
+              data-wpf-component="ImportButton"
+              data-wpf-notes="OpenFileDialog for .json profile file. Deserializes
+                List<ServerProfile>, merges by host+port, persists via IProfileService.">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+      </button>
+      <button class="btn-footer-icon" onclick="exportProfiles()" title="Export profiles"
+              data-wpf-component="ExportButton"
+              data-wpf-notes="SaveFileDialog for .json. Serializes current profiles list.">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- ═══ Right: Login / Register / 2FA ═══ -->
+  <div class="form-panel"
+       data-wpf-component="LoginFormControl"
+       data-wpf-notes="ContentControl with DataTemplateSelector choosing between:
+         LoginTemplate (mode='login'|'register'), TotpTemplate (mode='totp'),
+         BackupCodeTemplate (mode='backup'). Bound to ConnectViewModel.
+         2FA flow: login returns {requires_2fa:true, partial_token:'...'} →
+         switch to TotpTemplate → POST /api/auth/verify-totp with partial_token + code.">
+    <div class="form-container" id="formContainer"><!-- Rendered by JS --></div>
+  </div>
+
+  <!-- Status bar -->
+  <div class="status-bar" id="statusBar">
+    <div class="status-bar-fill" id="statusBarFill"></div>
+  </div>
+</div>
+
+<!-- ═══ Server Add/Edit Modal ═══ -->
+<div class="modal-overlay" id="serverModal"
+     data-wpf-component="ServerProfileDialog"
+     data-wpf-notes="Window or ContentDialog. Bound to EditingProfile.
+       Fields: Name, Host, Port, Color, DefaultUsername, AutoConnect, Notes.
+       OK saves to Profiles collection and persists via IServerProfileService.">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="modalTitle">Add Server</h3>
+      <button class="modal-close" onclick="closeModal()">&times;</button>
+    </div>
+    <div class="modal-body" id="modalBody"><!-- Rendered by JS --></div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeModal()">Cancel</button>
+      <button class="btn-modal-save" id="modalSaveBtn" onclick="saveServerProfile()">Save</button>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ Delete Confirm Modal ═══ -->
+<div class="modal-overlay" id="deleteModal">
+  <div class="modal" style="width:380px">
+    <div class="modal-header">
+      <h3>Delete Server</h3>
+      <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
+    </div>
+    <div class="modal-body">
+      <p class="modal-danger-text" id="deleteText"></p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeDeleteModal()">Cancel</button>
+      <button class="btn-danger" onclick="confirmDelete()">Delete</button>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ Certificate Trust Dialog ═══ -->
+<div class="modal-overlay" id="certModal"
+     data-wpf-component="CertificateTrustDialog"
+     data-wpf-notes="Window shown from HttpClientHandler.ServerCertificateCustomValidationCallback.
+       Displays cert Subject, Issuer, SHA-256 fingerprint, validity dates.
+       Trust: saves fingerprint to trusted_certs.json (TOFU pattern).
+       Connect Once: allows this connection only.
+       Cancel: aborts connection.">
+  <div class="modal" style="width:480px">
+    <div class="modal-body" id="certBody"><!-- Rendered by JS --></div>
+  </div>
+</div>
+
+<!-- ═══ Connected Overlay ═══ -->
+<div class="connected-overlay" id="connectedOverlay"
+     data-wpf-component="ConnectedTransition"
+     data-wpf-notes="Overlay shown after successful auth_ok WebSocket response.
+       Displays server icon, server name, 'Logged in as username', MOTD.
+       Auto-transitions to MainPage after 2s delay.">
+  <div class="connected-icon-wrap">
+    <div class="connected-srv-icon" id="connectedSrvIcon" style="background:var(--accent)">O</div>
+    <div class="connected-check-badge">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12"/>
+      </svg>
+    </div>
+  </div>
+  <div class="connected-text" id="connectedText">Connected!</div>
+  <div class="connected-user" id="connectedUser">Logged in as LordJebus</div>
+  <div class="connected-motd" id="connectedMotd"></div>
+  <div class="connected-loader">
+    <div class="spinner"></div>
+    <span>Loading server data...</span>
+  </div>
+</div>
+
+<!-- ═══ Settings Overlay ═══ -->
+<div class="settings-overlay" id="settingsOverlay"
+     data-wpf-component="SettingsDialog"
+     data-wpf-notes="Window with tabbed left navigation. Bound to SettingsViewModel.
+       Audio: NAudio CoreAudioApi MMDeviceEnumerator for device lists.
+       Keybinds: SetWindowsHookEx for key capture.
+       Settings persisted to settings.json in app data directory.
+       Pre-connection: accessible before connecting to any server.">
+  <button class="settings-close" onclick="closeSettings()" title="Close (Esc)">&times;</button>
+  <div class="settings-layout">
+    <nav class="settings-nav" id="settingsNav"><!-- Rendered by JS --></nav>
+    <div class="settings-content" id="settingsContent"><!-- Rendered by JS --></div>
+  </div>
+</div>
+
+<script>
+/* ═══════════════════════════════════════════
+   CONSTANTS
+   ═══════════════════════════════════════════ */
+const ACCENT_COLORS = ['#5865f2','#57f287','#fee75c','#eb459e','#ed4245','#f47b67','#e67e22','#9b59b6','#1abc9c'];
+const CHECK_SVG = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 6 5 9 10 3"/></svg>';
+
+/* ═══════════════════════════════════════════
+   MOCK DATA
+   ═══════════════════════════════════════════ */
+const SAVED_SERVERS = [
+  { id: 1, name: 'Home Server',  host: '192.168.1.100',    port: 8443, lastUser: 'LordJebus', color: '#5865f2', savedPass: true,  autoConnect: true,  defaultUser: 'LordJebus', notes: 'Main server at home', lastConnected: '2 hours ago' },
+  { id: 2, name: 'Dev Team',     host: 'dev.owncord.local', port: 8443, lastUser: 'LordJebus', color: '#57f287', savedPass: false, autoConnect: false, defaultUser: 'LordJebus', notes: '',                    lastConnected: 'Yesterday' },
+  { id: 3, name: 'Gaming Squad', host: '10.0.0.50',        port: 9443, lastUser: 'LordJebus', color: '#eb459e', savedPass: true,  autoConnect: false, defaultUser: 'LordJebus', notes: 'Port forwarded on router', lastConnected: '3 days ago' },
+];
+
+/* Simulated health results */
+const HEALTH_RESULTS = {
+  1: { status: 'online', latency: 12 },
+  2: { status: 'online', latency: 45 },
+  3: { status: 'offline', latency: null },
+};
+
+/* ═══════════════════════════════════════════
+   STATE
+   ═══════════════════════════════════════════ */
+const state = {
+  servers: SAVED_SERVERS.map(s => ({...s})),
+  health: {...HEALTH_RESULTS},
+  selectedId: 1,
+  mode: 'login',         // 'login' | 'register' | 'totp' | 'backup'
+  loading: false,
+  error: null,
+  success: null,
+  showPassword: false,
+  savePassword: true,
+
+  // Form fields
+  host: '192.168.1.100',
+  port: '8443',
+  username: 'LordJebus',
+  password: '',
+  inviteCode: '',
+  totpCode: ['','','','','',''],
+  backupCode: '',
+
+  // Modal state
+  editingServer: null,
+  deleteTarget: null,
+  modalName: '',
+  modalHost: '',
+  modalPort: '8443',
+  modalColor: '#5865f2',
+  modalDefaultUser: '',
+  modalAutoConnect: false,
+  modalNotes: '',
+
+  // Settings
+  settingsOpen: false,
+  settingsTab: 'audio',
+  micTesting: false,
+  vuLevel: 0,
+  listeningKeybind: null,
+
+  // Settings values
+  inputDevice: 'Default - Microphone (Realtek)',
+  outputDevice: 'Default - Speakers (Realtek)',
+  inputVolume: 80,
+  outputVolume: 100,
+  voiceMode: 'voice',     // 'voice' | 'ptt'
+  pttKey: 'V',
+  noiseSuppression: true,
+  muteKey: 'M',
+  deafenKey: 'D',
+  uiScale: 100,
+  compactMode: false,
+  connTimeout: 10,
+  autoReconnect: true,
+};
+
+/* ═══════════════════════════════════════════
+   SVG HELPERS
+   ═══════════════════════════════════════════ */
+const SVG = {
+  edit: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+  trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
+};
+
+/* ═══════════════════════════════════════════
+   RENDER: Server List
+   ═══════════════════════════════════════════ */
+function renderServerList() {
+  const list = document.getElementById('serverList');
+
+  if (state.servers.length === 0) {
+    list.innerHTML = `
+      <div class="server-empty">
+        <div class="server-empty-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
+            <circle cx="6" cy="6" r="1"/><circle cx="6" cy="18" r="1"/>
+          </svg>
+        </div>
+        <h3>No saved servers</h3>
+        <p>Add a server to get started, or use a <code>chatserver://</code> invite link</p>
+      </div>`;
+    return;
+  }
+
+  list.innerHTML = state.servers.map(s => {
+    const h = state.health[s.id] || { status: 'unknown', latency: null };
+    const statusClass = h.status === 'checking' ? 'checking' : h.status;
+    let latencyHtml = '';
+    if (h.latency !== null) {
+      const cls = h.latency < 100 ? 'good' : h.latency < 300 ? 'warn' : 'bad';
+      latencyHtml = `<span class="srv-latency ${cls}">${h.latency}ms</span>`;
+    }
+    return `
+    <div class="server-item ${s.id === state.selectedId ? 'active' : ''}"
+         onclick="selectServer(${s.id})">
+      <div class="srv-icon" style="background:${s.color}">
+        ${s.name.charAt(0).toUpperCase()}
+        <div class="srv-status-dot ${statusClass}"></div>
+      </div>
+      <div class="srv-info">
+        <div class="srv-name">${esc(s.name)}${s.autoConnect ? '<span class="srv-auto" title="Auto-connect on startup">AUTO</span>' : ''}</div>
+        <div class="srv-meta">
+          <span class="srv-host">${esc(s.host)}:${s.port}</span>
+          ${latencyHtml}
+        </div>
+        ${s.lastConnected ? `<div class="srv-last">${esc(s.lastConnected)}</div>` : ''}
+      </div>
+      <div class="srv-actions">
+        <button class="srv-btn" onclick="event.stopPropagation(); openEditServerModal(${s.id})" title="Edit">${SVG.edit}</button>
+        <button class="srv-btn danger" onclick="event.stopPropagation(); openDeleteModal(${s.id})" title="Delete">${SVG.trash}</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+/* ═══════════════════════════════════════════
+   RENDER: Login / Register / 2FA Form
+   ═══════════════════════════════════════════ */
+function renderForm() {
+  const c = document.getElementById('formContainer');
+  if (state.mode === 'totp') return renderTotpForm(c);
+  if (state.mode === 'backup') return renderBackupForm(c);
+
+  const isLogin = state.mode === 'login';
+  c.innerHTML = `
+    <div class="form-logo">
+      <div class="form-logo-mark">
+        <svg viewBox="0 0 24 24" fill="white">
+          <path d="M12 2L4 5.5v5c0 5.25 3.4 10.15 8 11.5 4.6-1.35 8-6.25 8-11.5v-5L12 2zm0 3l1.5 3h3.2l-2.6 1.9 1 3.1L12 11.1 8.9 13l1-3.1L7.3 8h3.2L12 5z"/>
+        </svg>
+      </div>
+      <h1>OwnCord</h1>
+      <p>${isLogin ? 'Welcome back!' : 'Create an account'}</p>
+    </div>
+
+    <div class="error-banner ${state.error ? 'visible' : ''}">
+      <span class="error-banner-icon">&#9888;</span>
+      <span class="error-banner-text">${state.error || ''}</span>
+    </div>
+    <div class="success-banner ${state.success ? 'visible' : ''}">
+      <span class="success-banner-icon">&#10003;</span>
+      <span class="success-banner-text">${state.success || ''}</span>
+    </div>
+
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label">Server Address <span class="required">*</span></label>
+        <input class="form-input" type="text" id="hostInput"
+               value="${esc(state.host)}" placeholder="192.168.1.100 or my.server.com"
+               oninput="state.host=this.value; clearError()">
+      </div>
+      <div class="form-group port-field">
+        <label class="form-label">Port</label>
+        <input class="form-input" type="text" id="portInput"
+               value="${esc(state.port)}" placeholder="8443"
+               oninput="state.port=this.value; clearError()">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label">Username <span class="required">*</span></label>
+      <input class="form-input" type="text" id="usernameInput"
+             value="${esc(state.username)}" placeholder="Enter your username"
+             oninput="state.username=this.value; clearError()">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label">Password <span class="required">*</span></label>
+      <div class="password-wrapper">
+        <input class="form-input" type="${state.showPassword ? 'text' : 'password'}" id="passwordInput"
+               value="${esc(state.password)}" placeholder="Enter your password"
+               oninput="state.password=this.value; clearError()"
+               onkeydown="if(event.key==='Enter')connect()">
+        <button class="password-toggle" onclick="togglePasswordVisibility()"
+                title="${state.showPassword ? 'Hide' : 'Show'} password">
+          ${state.showPassword ? '&#128065;' : '&#128064;'}
+        </button>
+      </div>
+    </div>
+
+    ${!isLogin ? `
+    <div class="form-group">
+      <label class="form-label">Invite Code <span class="required">*</span></label>
+      <input class="form-input" type="text" id="inviteInput"
+             value="${esc(state.inviteCode)}" placeholder="Enter your invite code"
+             oninput="state.inviteCode=this.value; clearError()">
+    </div>` : ''}
+
+    <label class="form-checkbox" onclick="toggleSavePassword()">
+      <input type="checkbox" ${state.savePassword ? 'checked' : ''}>
+      <div class="checkbox-box">${CHECK_SVG}</div>
+      <span class="checkbox-label">Remember my password</span>
+    </label>
+
+    <button class="btn-primary ${state.loading ? 'loading' : ''}" onclick="connect()" ${state.loading ? 'disabled' : ''}>
+      <span class="btn-text">${isLogin ? 'Log In' : 'Register'}</span>
+      <div class="btn-spinner"><div class="spinner"></div></div>
+    </button>
+
+    <div class="form-switch">
+      ${isLogin
+        ? `Need an account? <a onclick="switchMode('register')">Register</a>`
+        : `Already have an account? <a onclick="switchMode('login')">Log In</a>`}
+    </div>
+  `;
+}
+
+function renderTotpForm(c) {
+  c.innerHTML = `
+    <div class="totp-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+    </div>
+    <div class="totp-title">Two-Factor Authentication</div>
+    <div class="totp-subtitle">Enter the 6-digit code from your authenticator app</div>
+
+    <div class="error-banner ${state.error ? 'visible' : ''}">
+      <span class="error-banner-icon">&#9888;</span>
+      <span class="error-banner-text">${state.error || ''}</span>
+    </div>
+
+    <div class="totp-inputs">
+      ${[0,1,2,3,4,5].map(i => `
+        <input class="totp-digit ${state.totpCode[i] ? 'filled' : ''}" type="text" maxlength="1"
+               id="totp${i}" value="${state.totpCode[i]}"
+               oninput="handleTotpInput(${i}, this)"
+               onkeydown="handleTotpKeydown(${i}, event)"
+               onpaste="${i === 0 ? 'handleTotpPaste(event)' : ''}"
+               autocomplete="off">
+      `).join('')}
+    </div>
+
+    <button class="btn-primary ${state.loading ? 'loading' : ''}" onclick="verifyTotp()" ${state.loading ? 'disabled' : ''}>
+      <span class="btn-text">Verify</span>
+      <div class="btn-spinner"><div class="spinner"></div></div>
+    </button>
+
+    <a class="totp-backup-link" onclick="switchMode('backup')">Use a backup code instead</a>
+    <a class="totp-back" onclick="switchMode('login')">Back to login</a>
+  `;
+  // Focus first empty digit
+  setTimeout(() => {
+    const firstEmpty = state.totpCode.findIndex(d => !d);
+    const el = document.getElementById('totp' + (firstEmpty >= 0 ? firstEmpty : 5));
+    if (el) el.focus();
+  }, 100);
+}
+
+function renderBackupForm(c) {
+  c.innerHTML = `
+    <div class="totp-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+      </svg>
+    </div>
+    <div class="totp-title">Backup Code</div>
+    <div class="totp-subtitle">Enter one of your 8-digit backup codes</div>
+
+    <div class="error-banner ${state.error ? 'visible' : ''}">
+      <span class="error-banner-icon">&#9888;</span>
+      <span class="error-banner-text">${state.error || ''}</span>
+    </div>
+
+    <div class="form-group" style="margin-bottom:24px">
+      <input class="form-input" type="text" id="backupInput" style="text-align:center;font-family:var(--font-mono);font-size:18px;letter-spacing:4px"
+             value="${esc(state.backupCode)}" placeholder="XXXX-XXXX"
+             oninput="state.backupCode=this.value; clearError()"
+             onkeydown="if(event.key==='Enter')verifyBackup()"
+             maxlength="9" autocomplete="off">
+    </div>
+
+    <button class="btn-primary ${state.loading ? 'loading' : ''}" onclick="verifyBackup()" ${state.loading ? 'disabled' : ''}>
+      <span class="btn-text">Verify</span>
+      <div class="btn-spinner"><div class="spinner"></div></div>
+    </button>
+
+    <a class="totp-back" onclick="switchMode('totp')" style="margin-top:16px">Use authenticator app instead</a>
+    <a class="totp-back" onclick="switchMode('login')">Back to login</a>
+  `;
+  setTimeout(() => { const el = document.getElementById('backupInput'); if (el) el.focus(); }, 100);
+}
+
+/* ═══════════════════════════════════════════
+   RENDER: Settings
+   ═══════════════════════════════════════════ */
+const SETTINGS_TABS = [
+  { section: 'App Settings' },
+  { id: 'audio',      label: 'Audio',      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>' },
+  { id: 'appearance', label: 'Appearance',  icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>' },
+  { id: 'keybinds',   label: 'Keybinds',   icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h.01M12 12h.01M16 12h.01M7 16h10"/></svg>' },
+  { id: 'network',    label: 'Network',    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>' },
+  { sep: true },
+  { id: 'about',      label: 'About',      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>' },
+];
+
+function renderSettingsNav() {
+  const nav = document.getElementById('settingsNav');
+  nav.innerHTML = SETTINGS_TABS.map(t => {
+    if (t.section) return `<div class="settings-nav-title">${t.section}</div>`;
+    if (t.sep) return `<div class="settings-nav-sep"></div>`;
+    return `<button class="settings-nav-item ${state.settingsTab === t.id ? 'active' : ''}"
+                    onclick="switchSettingsTab('${t.id}')">
+              ${t.icon}<span>${t.label}</span>
+            </button>`;
+  }).join('');
+}
+
+function renderSettingsContent() {
+  const c = document.getElementById('settingsContent');
+  const tab = state.settingsTab;
+
+  if (tab === 'audio') {
+    c.innerHTML = `
+      <div class="settings-section-title"
+           data-wpf-component="AudioSettingsTab"
+           data-wpf-notes="Bound to SettingsViewModel audio properties.
+             Device dropdowns populated by NAudio MMDeviceEnumerator.
+             Volume sliders bound to InputVolume/OutputVolume (0-100).
+             VoiceMode: RadioButtons for VoiceActivity vs PushToTalk.
+             Mic test: starts NAudio WaveIn recording and displays RMS level.">
+        Audio Settings
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Input Device</div>
+          <div class="setting-desc">Microphone used for voice chat</div>
+        </div>
+        <div class="setting-control">
+          <select class="setting-select" onchange="state.inputDevice=this.value">
+            <option ${state.inputDevice.includes('Realtek') ? 'selected' : ''}>Default - Microphone (Realtek)</option>
+            <option>Microphone (Blue Yeti)</option>
+            <option>Headset Microphone (USB)</option>
+          </select>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Input Volume</div>
+        </div>
+        <div class="setting-control">
+          <input type="range" class="setting-slider" min="0" max="100" value="${state.inputVolume}"
+                 oninput="state.inputVolume=this.value">
+          <span style="font-size:12px;color:var(--text-faint);margin-left:8px">${state.inputVolume}%</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Output Device</div>
+          <div class="setting-desc">Speakers or headphones for audio playback</div>
+        </div>
+        <div class="setting-control">
+          <select class="setting-select" onchange="state.outputDevice=this.value">
+            <option ${state.outputDevice.includes('Realtek') ? 'selected' : ''}>Default - Speakers (Realtek)</option>
+            <option>Headphones (HyperX Cloud)</option>
+            <option>Speakers (USB DAC)</option>
+          </select>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Output Volume</div>
+        </div>
+        <div class="setting-control">
+          <input type="range" class="setting-slider" min="0" max="100" value="${state.outputVolume}"
+                 oninput="state.outputVolume=this.value">
+          <span style="font-size:12px;color:var(--text-faint);margin-left:8px">${state.outputVolume}%</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Voice Mode</div>
+          <div class="setting-desc">Voice Activity detects when you speak. Push-to-Talk requires holding a key.</div>
+        </div>
+        <div class="setting-control">
+          <select class="setting-select" onchange="state.voiceMode=this.value" style="min-width:140px">
+            <option value="voice" ${state.voiceMode==='voice'?'selected':''}>Voice Activity</option>
+            <option value="ptt" ${state.voiceMode==='ptt'?'selected':''}>Push to Talk</option>
+          </select>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Noise Suppression</div>
+          <div class="setting-desc">Reduce background noise from your microphone</div>
+        </div>
+        <div class="setting-control">
+          <div class="toggle ${state.noiseSuppression?'on':''}" onclick="state.noiseSuppression=!state.noiseSuppression; renderSettingsContent()"></div>
+        </div>
+      </div>
+      <div class="setting-row" style="flex-direction:column;align-items:stretch">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
+          <div class="setting-label">Microphone Test</div>
+          <button class="mic-test-btn ${state.micTesting?'active':''}" onclick="toggleMicTest()">
+            ${state.micTesting ? 'Stop Test' : 'Test Mic'}
+          </button>
+        </div>
+        <div class="vu-meter"><div class="vu-meter-fill" id="vuFill" style="width:${state.vuLevel}%"></div></div>
+      </div>
+    `;
+  } else if (tab === 'appearance') {
+    c.innerHTML = `
+      <div class="settings-section-title"
+           data-wpf-component="AppearanceSettingsTab"
+           data-wpf-notes="Bound to SettingsViewModel. Theme: dark only for now.
+             UIScale: Slider 75-150, applies LayoutTransform ScaleTransform to root.
+             CompactMode: toggles compact message display DataTemplate.">
+        Appearance
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Theme</div>
+          <div class="setting-desc">Currently dark mode only</div>
+        </div>
+        <div class="setting-control">
+          <select class="setting-select" style="min-width:120px" disabled>
+            <option selected>Dark</option>
+            <option>Light (coming soon)</option>
+          </select>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">UI Scale</div>
+          <div class="setting-desc">Adjust the size of UI elements (${state.uiScale}%)</div>
+        </div>
+        <div class="setting-control">
+          <input type="range" class="setting-slider" min="75" max="150" step="5" value="${state.uiScale}"
+                 oninput="state.uiScale=parseInt(this.value); renderSettingsContent()">
+          <span style="font-size:12px;color:var(--text-faint);margin-left:8px">${state.uiScale}%</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Compact Mode</div>
+          <div class="setting-desc">Reduce spacing between messages</div>
+        </div>
+        <div class="setting-control">
+          <div class="toggle ${state.compactMode?'on':''}" onclick="state.compactMode=!state.compactMode; renderSettingsContent()"></div>
+        </div>
+      </div>
+    `;
+  } else if (tab === 'keybinds') {
+    c.innerHTML = `
+      <div class="settings-section-title"
+           data-wpf-component="KeybindsSettingsTab"
+           data-wpf-notes="Each keybind: Button that enters 'listening' state on click.
+             Uses SetWindowsHookEx (low-level keyboard hook) to capture the next
+             keypress. Stores key name in settings. ESC cancels listening.">
+        Keybinds
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Push to Talk</div>
+          <div class="setting-desc">Hold this key to transmit voice</div>
+        </div>
+        <div class="setting-control">
+          <button class="keybind-btn ${state.listeningKeybind==='ptt'?'listening':''}"
+                  onclick="startListeningKeybind('ptt')">
+            ${state.listeningKeybind==='ptt' ? 'Press a key...' : state.pttKey}
+          </button>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Toggle Mute</div>
+          <div class="setting-desc">Mute or unmute your microphone</div>
+        </div>
+        <div class="setting-control">
+          <button class="keybind-btn ${state.listeningKeybind==='mute'?'listening':''}"
+                  onclick="startListeningKeybind('mute')">
+            ${state.listeningKeybind==='mute' ? 'Press a key...' : 'Ctrl+' + state.muteKey}
+          </button>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Toggle Deafen</div>
+          <div class="setting-desc">Deafen or undeafen audio output</div>
+        </div>
+        <div class="setting-control">
+          <button class="keybind-btn ${state.listeningKeybind==='deafen'?'listening':''}"
+                  onclick="startListeningKeybind('deafen')">
+            ${state.listeningKeybind==='deafen' ? 'Press a key...' : 'Ctrl+' + state.deafenKey}
+          </button>
+        </div>
+      </div>
+    `;
+  } else if (tab === 'network') {
+    c.innerHTML = `
+      <div class="settings-section-title"
+           data-wpf-component="NetworkSettingsTab"
+           data-wpf-notes="ConnTimeout: Slider 5-30s, used by HttpClient.Timeout and
+             WebSocket connect timeout. AutoReconnect: bool, if true reconnects on
+             disconnect with exponential backoff (1s, 2s, 4s, max 30s).">
+        Network
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Connection Timeout</div>
+          <div class="setting-desc">How long to wait before giving up (${state.connTimeout}s)</div>
+        </div>
+        <div class="setting-control">
+          <input type="range" class="setting-slider" min="5" max="30" step="1" value="${state.connTimeout}"
+                 oninput="state.connTimeout=parseInt(this.value); renderSettingsContent()">
+          <span style="font-size:12px;color:var(--text-faint);margin-left:8px">${state.connTimeout}s</span>
+        </div>
+      </div>
+      <div class="setting-row">
+        <div class="setting-info">
+          <div class="setting-label">Auto-Reconnect</div>
+          <div class="setting-desc">Automatically reconnect if disconnected</div>
+        </div>
+        <div class="setting-control">
+          <div class="toggle ${state.autoReconnect?'on':''}" onclick="state.autoReconnect=!state.autoReconnect; renderSettingsContent()"></div>
+        </div>
+      </div>
+    `;
+  } else if (tab === 'about') {
+    c.innerHTML = `
+      <div class="settings-section-title">About OwnCord</div>
+      <div class="about-logo">
+        <div class="form-logo-mark" style="margin:0 auto 12px">
+          <svg viewBox="0 0 24 24" fill="white">
+            <path d="M12 2L4 5.5v5c0 5.25 3.4 10.15 8 11.5 4.6-1.35 8-6.25 8-11.5v-5L12 2zm0 3l1.5 3h3.2l-2.6 1.9 1 3.1L12 11.1 8.9 13l1-3.1L7.3 8h3.2L12 5z"/>
+          </svg>
+        </div>
+        <div style="font-size:22px;font-weight:700;color:white">OwnCord</div>
+        <div class="about-version">Version 1.0.0-dev</div>
+      </div>
+      <div class="about-links">
+        <button class="about-link">Documentation</button>
+        <button class="about-link">Source Code</button>
+        <button class="about-link">Report Bug</button>
+      </div>
+      <div style="text-align:center;margin-top:24px;font-size:12px;color:var(--text-micro)">
+        Self-hosted chat platform<br>No data leaves your network
+      </div>
+    `;
+  }
+}
+
+/* ═══════════════════════════════════════════
+   RENDER ALL
+   ═══════════════════════════════════════════ */
+function renderAll() {
+  renderServerList();
+  renderForm();
+}
+
+/* ═══════════════════════════════════════════
+   ACTIONS: Server Selection & Connection
+   ═══════════════════════════════════════════ */
+function selectServer(id) {
+  const srv = state.servers.find(s => s.id === id);
+  if (!srv) return;
+  state.selectedId = id;
+  state.host = srv.host;
+  state.port = String(srv.port);
+  state.username = srv.defaultUser || srv.lastUser;
+  state.password = srv.savedPass ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : '';
+  state.savePassword = srv.savedPass;
+  state.mode = 'login';
+  clearError();
+  renderAll();
+}
+
+function switchMode(mode) {
+  state.mode = mode;
+  state.error = null;
+  state.success = null;
+  state.totpCode = ['','','','','',''];
+  state.backupCode = '';
+  renderForm();
+}
+
+function togglePasswordVisibility() {
+  state.showPassword = !state.showPassword;
+  renderForm();
+  const input = document.getElementById('passwordInput');
+  if (input) { input.focus(); input.setSelectionRange(input.value.length, input.value.length); }
+}
+
+function toggleSavePassword() { state.savePassword = !state.savePassword; }
+
+function clearError() {
+  state.error = null;
+  state.success = null;
+}
+
+function connect() {
+  if (!state.host.trim()) return showError('Server address is required.');
+  if (!state.username.trim()) return showError('Username is required.');
+  if (!state.password.trim()) return showError('Password is required.');
+  if (state.mode === 'register' && !state.inviteCode.trim()) return showError('Invite code is required for registration.');
+
+  state.loading = true;
+  state.error = null;
+  renderForm();
+  showStatusBar();
+
+  setTimeout(() => {
+    state.loading = false;
+    hideStatusBar();
+
+    const roll = Math.random();
+    if (roll < 0.10) {
+      // Simulate certificate trust needed
+      showCertDialog();
+      renderForm();
+    } else if (roll < 0.20) {
+      showError('Connection refused. Is the server running?');
+      renderForm();
+    } else if (roll < 0.30 && state.mode === 'login') {
+      // Simulate 2FA required
+      state.mode = 'totp';
+      state.totpCode = ['','','','','',''];
+      renderForm();
+    } else if (roll < 0.35) {
+      showError('Invalid username or password.');
+      renderForm();
+    } else {
+      showConnected();
+    }
+  }, 1500 + Math.random() * 1000);
+}
+
+function showError(msg) {
+  state.error = msg;
+  state.success = null;
+  renderForm();
+}
+
+function showStatusBar() {
+  document.getElementById('statusBar').classList.add('visible', 'indeterminate');
+}
+function hideStatusBar() {
+  document.getElementById('statusBar').classList.remove('visible', 'indeterminate');
+}
+
+/* ═══ 2FA ═══ */
+function handleTotpInput(i, el) {
+  const val = el.value.replace(/\D/g, '');
+  el.value = val;
+  state.totpCode[i] = val;
+  if (val && i < 5) {
+    document.getElementById('totp' + (i + 1)).focus();
+  }
+  // Auto-submit when all 6 filled
+  if (state.totpCode.every(d => d)) {
+    setTimeout(verifyTotp, 200);
+  }
+}
+
+function handleTotpKeydown(i, e) {
+  if (e.key === 'Backspace' && !state.totpCode[i] && i > 0) {
+    state.totpCode[i - 1] = '';
+    document.getElementById('totp' + (i - 1)).focus();
+  }
+}
+
+function handleTotpPaste(e) {
+  e.preventDefault();
+  const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, 6);
+  for (let i = 0; i < 6; i++) {
+    state.totpCode[i] = text[i] || '';
+  }
+  renderForm();
+  if (text.length === 6) setTimeout(verifyTotp, 200);
+}
+
+function verifyTotp() {
+  const code = state.totpCode.join('');
+  if (code.length < 6) return showError('Please enter all 6 digits.');
+  state.loading = true;
+  renderForm();
+  showStatusBar();
+  setTimeout(() => {
+    state.loading = false;
+    hideStatusBar();
+    if (Math.random() < 0.2) {
+      showError('Invalid code. Please try again.');
+      state.totpCode = ['','','','','',''];
+      renderForm();
+    } else {
+      showConnected();
+    }
+  }, 1000);
+}
+
+function verifyBackup() {
+  if (!state.backupCode.trim()) return showError('Please enter a backup code.');
+  state.loading = true;
+  renderForm();
+  showStatusBar();
+  setTimeout(() => {
+    state.loading = false;
+    hideStatusBar();
+    showConnected();
+  }, 1000);
+}
+
+/* ═══ Certificate Trust ═══ */
+function showCertDialog() {
+  const body = document.getElementById('certBody');
+  body.innerHTML = `
+    <div class="cert-warning">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+        <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
+      </svg>
+    </div>
+    <div class="cert-title">Untrusted Certificate</div>
+    <div class="cert-desc">The server at <strong>${esc(state.host)}:${esc(state.port)}</strong> presented a certificate that is not trusted by your system.</div>
+    <div class="cert-details">
+      <div class="cert-row"><span class="cert-label">Subject</span><span class="cert-value">CN=${esc(state.host)}</span></div>
+      <div class="cert-row"><span class="cert-label">Issuer</span><span class="cert-value">CN=OwnCord Self-Signed CA</span></div>
+      <div class="cert-row"><span class="cert-label">Valid</span><span class="cert-value">2026-01-01 to 2027-01-01</span></div>
+      <div class="cert-row"><span class="cert-label">SHA-256</span><span class="cert-value cert-fingerprint">A3:4B:7C:D2:E5:F8:9A:1B:3C:D4:E6:F7:08:19:2A:3B:4C:5D:6E:7F:80:91:A2:B3:C4:D5:E6:F7:08:19:2A:3B</span></div>
+    </div>
+    <label class="form-checkbox" onclick="event.stopPropagation()">
+      <input type="checkbox" checked>
+      <div class="checkbox-box">${CHECK_SVG}</div>
+      <span class="checkbox-label">Always trust certificates from this server</span>
+    </label>
+    <div class="cert-actions">
+      <button class="btn-primary" style="width:auto;padding:10px 24px" onclick="trustCert()">Trust This Certificate</button>
+      <button class="btn-ghost" onclick="trustOnce()">Connect Once</button>
+      <button class="btn-cancel" onclick="closeCertDialog()">Cancel</button>
+    </div>
+  `;
+  document.getElementById('certModal').classList.add('visible');
+}
+
+function trustCert() { closeCertDialog(); showConnected(); }
+function trustOnce() { closeCertDialog(); showConnected(); }
+function closeCertDialog() { document.getElementById('certModal').classList.remove('visible'); }
+
+/* ═══ Connected Overlay ═══ */
+function showConnected() {
+  const srv = state.servers.find(s => s.id === state.selectedId);
+  const overlay = document.getElementById('connectedOverlay');
+  const srvIcon = document.getElementById('connectedSrvIcon');
+
+  if (srv) {
+    srvIcon.style.background = srv.color;
+    srvIcon.textContent = srv.name.charAt(0).toUpperCase();
+    document.getElementById('connectedText').textContent = srv.name;
+  } else {
+    srvIcon.style.background = 'var(--accent)';
+    srvIcon.textContent = state.host.charAt(0).toUpperCase();
+    document.getElementById('connectedText').textContent = state.host;
+  }
+  document.getElementById('connectedUser').textContent = 'Logged in as ' + state.username;
+  document.getElementById('connectedMotd').textContent = 'Welcome! This server is running OwnCord v1.0.0.';
+
+  overlay.classList.add('visible');
+
+  setTimeout(() => {
+    overlay.classList.remove('visible');
+    state.success = 'Connected successfully! (In real app, navigates to MainPage)';
+    state.mode = 'login';
+    renderForm();
+  }, 2500);
+}
+
+/* ═══ Server Profile Management ═══ */
+function openAddServerModal() {
+  state.editingServer = null;
+  state.modalName = '';
+  state.modalHost = '';
+  state.modalPort = '8443';
+  state.modalColor = ACCENT_COLORS[Math.floor(Math.random() * ACCENT_COLORS.length)];
+  state.modalDefaultUser = '';
+  state.modalAutoConnect = false;
+  state.modalNotes = '';
+  showModal('Add Server');
+}
+
+function openEditServerModal(id) {
+  const srv = state.servers.find(s => s.id === id);
+  if (!srv) return;
+  state.editingServer = srv;
+  state.modalName = srv.name;
+  state.modalHost = srv.host;
+  state.modalPort = String(srv.port);
+  state.modalColor = srv.color;
+  state.modalDefaultUser = srv.defaultUser || '';
+  state.modalAutoConnect = srv.autoConnect || false;
+  state.modalNotes = srv.notes || '';
+  showModal('Edit Server');
+}
+
+function showModal(title) {
+  document.getElementById('modalTitle').textContent = title;
+  document.getElementById('modalSaveBtn').textContent = state.editingServer ? 'Save Changes' : 'Add Server';
+
+  document.getElementById('modalBody').innerHTML = `
+    <div class="form-group">
+      <label class="form-label">Server Name <span class="required">*</span></label>
+      <input class="form-input" type="text" id="modalNameInput"
+             value="${esc(state.modalName)}" placeholder="e.g. My Home Server"
+             oninput="state.modalName=this.value">
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label">Host Address <span class="required">*</span></label>
+        <input class="form-input" type="text" id="modalHostInput"
+               value="${esc(state.modalHost)}" placeholder="192.168.1.100 or my.server.com"
+               oninput="state.modalHost=this.value">
+      </div>
+      <div class="form-group port-field">
+        <label class="form-label">Port</label>
+        <input class="form-input" type="text" id="modalPortInput"
+               value="${esc(state.modalPort)}" placeholder="8443"
+               oninput="state.modalPort=this.value">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Default Username</label>
+      <input class="form-input" type="text" id="modalUserInput"
+             value="${esc(state.modalDefaultUser)}" placeholder="Pre-fills username on select"
+             oninput="state.modalDefaultUser=this.value">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Notes</label>
+      <input class="form-input" type="text" id="modalNotesInput"
+             value="${esc(state.modalNotes)}" placeholder="Optional notes for your reference"
+             oninput="state.modalNotes=this.value">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Icon Color</label>
+      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px">
+        ${ACCENT_COLORS.map(c => `
+          <div onclick="state.modalColor='${c}'; showModal('${title}')"
+               style="width:32px;height:32px;border-radius:8px;background:${c};cursor:pointer;
+                      border:2px solid ${c === state.modalColor ? 'white' : 'transparent'};
+                      transition:border-color .15s" title="${c}"></div>
+        `).join('')}
+      </div>
+    </div>
+    <label class="form-checkbox" onclick="state.modalAutoConnect=!state.modalAutoConnect" style="margin-top:8px;margin-bottom:0">
+      <input type="checkbox" ${state.modalAutoConnect ? 'checked' : ''}>
+      <div class="checkbox-box">${CHECK_SVG}</div>
+      <span class="checkbox-label">Auto-connect on startup</span>
+    </label>
+  `;
+
+  document.getElementById('serverModal').classList.add('visible');
+}
+
+function closeModal() { document.getElementById('serverModal').classList.remove('visible'); }
+
+function saveServerProfile() {
+  if (!state.modalName.trim() || !state.modalHost.trim()) return;
+
+  if (state.editingServer) {
+    const srv = state.servers.find(s => s.id === state.editingServer.id);
+    if (srv) {
+      srv.name = state.modalName.trim();
+      srv.host = state.modalHost.trim();
+      srv.port = parseInt(state.modalPort) || 8443;
+      srv.color = state.modalColor;
+      srv.defaultUser = state.modalDefaultUser.trim();
+      srv.autoConnect = state.modalAutoConnect;
+      srv.notes = state.modalNotes.trim();
+    }
+  } else {
+    const newId = Math.max(0, ...state.servers.map(s => s.id)) + 1;
+    state.servers.push({
+      id: newId,
+      name: state.modalName.trim(),
+      host: state.modalHost.trim(),
+      port: parseInt(state.modalPort) || 8443,
+      lastUser: '',
+      color: state.modalColor,
+      savedPass: false,
+      autoConnect: state.modalAutoConnect,
+      defaultUser: state.modalDefaultUser.trim(),
+      notes: state.modalNotes.trim(),
+      lastConnected: null,
+    });
+    state.health[newId] = { status: 'unknown', latency: null };
+  }
+
+  closeModal();
+  renderAll();
+}
+
+function openDeleteModal(id) {
+  const srv = state.servers.find(s => s.id === id);
+  if (!srv) return;
+  state.deleteTarget = id;
+  document.getElementById('deleteText').innerHTML =
+    `Are you sure you want to delete <strong>${esc(srv.name)}</strong>? This will remove the saved server profile and any stored credentials.`;
+  document.getElementById('deleteModal').classList.add('visible');
+}
+
+function closeDeleteModal() {
+  document.getElementById('deleteModal').classList.remove('visible');
+  state.deleteTarget = null;
+}
+
+function confirmDelete() {
+  if (state.deleteTarget === null) return;
+  state.servers = state.servers.filter(s => s.id !== state.deleteTarget);
+  delete state.health[state.deleteTarget];
+  if (state.selectedId === state.deleteTarget) {
+    state.selectedId = state.servers.length > 0 ? state.servers[0].id : null;
+    if (state.selectedId) {
+      const s = state.servers[0];
+      state.host = s.host;
+      state.port = String(s.port);
+      state.username = s.defaultUser || s.lastUser;
+    } else {
+      state.host = ''; state.port = '8443'; state.username = '';
+    }
+  }
+  closeDeleteModal();
+  renderAll();
+}
+
+/* ═══ Health Check ═══ */
+function refreshAllHealth() {
+  state.servers.forEach(s => {
+    state.health[s.id] = { status: 'checking', latency: null };
+  });
+  renderServerList();
+
+  // Simulate staggered health check results
+  state.servers.forEach((s, i) => {
+    setTimeout(() => {
+      const roll = Math.random();
+      if (roll < 0.6) {
+        const lat = Math.floor(5 + Math.random() * 80);
+        state.health[s.id] = { status: lat < 200 ? 'online' : 'slow', latency: lat };
+      } else if (roll < 0.8) {
+        state.health[s.id] = { status: 'slow', latency: Math.floor(200 + Math.random() * 300) };
+      } else {
+        state.health[s.id] = { status: 'offline', latency: null };
+      }
+      renderServerList();
+    }, 500 + i * 400 + Math.random() * 500);
+  });
+}
+
+/* ═══ Import/Export ═══ */
+function importProfiles() {
+  state.success = 'Import dialog would open here (OpenFileDialog for .json)';
+  renderForm();
+}
+function exportProfiles() {
+  state.success = `Exported ${state.servers.length} server profiles (SaveFileDialog for .json)`;
+  renderForm();
+}
+
+/* ═══ Settings ═══ */
+function openSettings() {
+  state.settingsOpen = true;
+  document.getElementById('settingsOverlay').classList.add('visible');
+  renderSettingsNav();
+  renderSettingsContent();
+}
+
+function closeSettings() {
+  state.settingsOpen = false;
+  state.micTesting = false;
+  state.listeningKeybind = null;
+  document.getElementById('settingsOverlay').classList.remove('visible');
+}
+
+function switchSettingsTab(tab) {
+  state.settingsTab = tab;
+  state.listeningKeybind = null;
+  renderSettingsNav();
+  renderSettingsContent();
+}
+
+function toggleMicTest() {
+  state.micTesting = !state.micTesting;
+  renderSettingsContent();
+  if (state.micTesting) animateVu();
+}
+
+function animateVu() {
+  if (!state.micTesting) { state.vuLevel = 0; return; }
+  state.vuLevel = Math.floor(Math.random() * 60 + (Math.random() > 0.7 ? 30 : 5));
+  const fill = document.getElementById('vuFill');
+  if (fill) fill.style.width = state.vuLevel + '%';
+  requestAnimationFrame(() => setTimeout(animateVu, 80));
+}
+
+function startListeningKeybind(which) {
+  state.listeningKeybind = which;
+  renderSettingsContent();
+}
+
+/* ═══ Keyboard ═══ */
+document.addEventListener('keydown', (e) => {
+  // Keybind capture in settings
+  if (state.listeningKeybind && state.settingsOpen) {
+    e.preventDefault();
+    if (e.key === 'Escape') { state.listeningKeybind = null; renderSettingsContent(); return; }
+    const keyName = e.key.length === 1 ? e.key.toUpperCase() : e.key;
+    if (state.listeningKeybind === 'ptt') state.pttKey = keyName;
+    else if (state.listeningKeybind === 'mute') state.muteKey = keyName;
+    else if (state.listeningKeybind === 'deafen') state.deafenKey = keyName;
+    state.listeningKeybind = null;
+    renderSettingsContent();
+    return;
+  }
+
+  if (e.key === 'Escape') {
+    if (state.settingsOpen) return closeSettings();
+    if (document.getElementById('certModal').classList.contains('visible')) return closeCertDialog();
+    if (document.getElementById('deleteModal').classList.contains('visible')) return closeDeleteModal();
+    if (document.getElementById('serverModal').classList.contains('visible')) return closeModal();
+  }
+});
+
+/* ═══ Utility ═══ */
+function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+/* ═══ Init ═══ */
+renderAll();
+</script>
+</body>
+</html>
diff --git a/Client/ui-mockup.html b/Client/ui-mockup.html
new file mode 100644
index 00000000..51ee925f
--- /dev/null
+++ b/Client/ui-mockup.html
@@ -0,0 +1,2247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OwnCord — Interactive Prototype</title>
+<style>
+  /* ═══════════════════════════════════════════
+     DESIGN TOKENS  (mirrors WPF palette)
+     ═══════════════════════════════════════════ */
+  :root {
+    --bg-tertiary:   #1e1f22;
+    --bg-secondary:  #2b2d31;
+    --bg-primary:    #313338;
+    --bg-input:      #383a40;
+    --bg-hover:      #35373c;
+    --bg-active:     #404249;
+    --bg-overlay:    rgba(0,0,0,.7);
+    --accent:        #5865f2;
+    --accent-hover:  #4752c4;
+    --accent-active: #3c45a5;
+    --text-normal:   #dbdee1;
+    --text-muted:    #949ba4;
+    --text-faint:    #80848e;
+    --text-micro:    #6d6f78;
+    --text-link:     #00a8fc;
+    --green:         #23a55a;
+    --yellow:        #f0b232;
+    --red:           #f23f43;
+    --border:        #3f4147;
+    --border-strong: #4e5058;
+    --role-owner:    #e74c3c;
+    --role-admin:    #f39c12;
+    --role-mod:      #2ecc71;
+    --role-member:   #949ba4;
+    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
+    --font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
+    --font-mono:    "Cascadia Code", "Consolas", monospace;
+    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
+    --radius-pill: 24px; --radius-circle: 50%;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; overflow: hidden; }
+  body {
+    font-family: var(--font-body); font-size: 14px;
+    color: var(--text-normal); background: var(--bg-tertiary);
+    -webkit-font-smoothing: antialiased;
+  }
+  button { font-family: inherit; border: none; cursor: pointer; outline: none; }
+  input, textarea, select { font-family: inherit; border: none; outline: none; }
+  ::-webkit-scrollbar { width: 8px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }
+
+  /* ═══ Layout ═══ */
+  .app { display: flex; height: 100vh; }
+
+  /* ── Server Strip ── */
+  .server-strip {
+    width: 72px; background: var(--bg-tertiary);
+    display: flex; flex-direction: column; align-items: center;
+    padding: 12px 0; gap: 8px; flex-shrink: 0; overflow-y: auto;
+  }
+  .server-strip::-webkit-scrollbar { width: 4px; }
+  .server-icon {
+    width: 48px; height: 48px; border-radius: var(--radius-pill);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 18px; color: white;
+    cursor: pointer; transition: all .2s ease;
+    position: relative; flex-shrink: 0;
+  }
+  .server-icon:hover, .server-icon.active { border-radius: var(--radius-lg); }
+  .server-icon::before {
+    content: ''; position: absolute; left: -16px;
+    width: 4px; border-radius: 0 4px 4px 0;
+    background: white; transition: all .2s;
+    height: 0; opacity: 0;
+  }
+  .server-icon:hover::before { height: 20px; opacity: 1; }
+  .server-icon.active::before { height: 36px; opacity: 1; }
+  .server-icon .badge {
+    position: absolute; bottom: -2px; right: -2px;
+    background: var(--red); color: white;
+    font-size: 10px; font-weight: 700;
+    min-width: 18px; height: 18px; border-radius: 9px;
+    display: flex; align-items: center; justify-content: center;
+    padding: 0 4px; border: 3px solid var(--bg-tertiary);
+  }
+  .server-icon .badge:empty { display: none; }
+  .server-separator { width: 32px; height: 2px; background: var(--border); border-radius: 1px; flex-shrink: 0; }
+  .server-icon.add { background: transparent; color: var(--green); border: 2px dashed var(--border-strong); font-size: 24px; }
+  .server-icon.add:hover { border-color: var(--green); background: rgba(35,165,90,.1); }
+
+  /* ── Channel Sidebar ── */
+  .channel-sidebar {
+    width: 240px; background: var(--bg-secondary);
+    display: flex; flex-direction: column; flex-shrink: 0;
+  }
+  .channel-sidebar-header {
+    height: 48px; padding: 0 16px;
+    display: flex; align-items: center; justify-content: space-between;
+    border-bottom: 1px solid var(--bg-tertiary); cursor: pointer; flex-shrink: 0;
+  }
+  .channel-sidebar-header h2 { font-size: 15px; font-weight: 700; color: white; }
+  .channel-list { flex: 1; overflow-y: auto; padding: 8px 0; }
+
+  .category {
+    padding: 16px 8px 4px 16px;
+    display: flex; align-items: center; gap: 4px;
+    cursor: pointer; user-select: none;
+  }
+  .category-arrow {
+    font-size: 8px; color: var(--text-muted);
+    transition: transform .2s; display: inline-block;
+  }
+  .category.collapsed .category-arrow { transform: rotate(-90deg); }
+  .category-name {
+    font-size: 11px; font-weight: 700;
+    color: var(--text-faint); letter-spacing: .5px; text-transform: uppercase;
+  }
+  .category-channels { overflow: hidden; transition: max-height .2s; }
+  .category.collapsed + .category-channels { max-height: 0 !important; overflow: hidden; }
+
+  .channel-item {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 8px; margin: 1px 8px;
+    border-radius: var(--radius-sm); cursor: pointer;
+    color: var(--text-muted); transition: all .1s;
+  }
+  .channel-item:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .channel-item.active { background: var(--bg-active); color: white; }
+  .channel-item .ch-icon { font-size: 18px; opacity: .6; flex-shrink: 0; width: 20px; text-align: center; }
+  .channel-item.active .ch-icon { opacity: 1; }
+  .channel-item .ch-name { font-size: 14px; flex: 1; }
+  .channel-item .unread-badge {
+    background: var(--accent); color: white;
+    font-size: 10px; font-weight: 700;
+    min-width: 18px; height: 18px; border-radius: 9px;
+    display: flex; align-items: center; justify-content: center; padding: 0 4px;
+  }
+  .channel-item .unread-badge:empty { display: none; }
+  .channel-item.unread .ch-name { color: white; font-weight: 600; }
+
+  /* Voice users nested in sidebar */
+  .voice-users-list { padding: 2px 0 4px 36px; }
+  .voice-user-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 3px 8px; border-radius: var(--radius-sm);
+    cursor: pointer; font-size: 13px; color: var(--text-muted);
+  }
+  .voice-user-item:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .voice-user-item .vu-avatar {
+    width: 20px; height: 20px; border-radius: var(--radius-circle);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 9px; font-weight: 700; color: white; flex-shrink: 0;
+  }
+  .voice-user-item.speaking .vu-avatar { box-shadow: 0 0 0 2px var(--green); }
+  .voice-user-item .vu-muted { color: var(--red); font-size: 12px; margin-left: auto; }
+
+  /* Voice widget (above user bar, when connected) */
+  .voice-widget {
+    background: var(--bg-secondary); border-top: 1px solid var(--border);
+    padding: 8px; flex-shrink: 0; display: none;
+  }
+  .voice-widget.visible { display: block; }
+  .vw-header { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; }
+  .vw-connected { color: var(--green); font-weight: 700; }
+  .vw-channel { color: var(--text-muted); }
+  .vw-controls { display: flex; gap: 4px; padding: 4px 4px 0; }
+  .vw-controls button {
+    flex: 1; height: 32px; border-radius: var(--radius-sm);
+    background: var(--bg-active); color: var(--text-muted);
+    font-size: 14px; transition: all .1s;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .vw-controls button:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .vw-controls button.active-ctrl { background: rgba(242,63,67,.2); color: var(--red); }
+  .vw-controls button.disconnect { background: transparent; color: var(--red); }
+  .vw-controls button.disconnect:hover { background: rgba(242,63,67,.15); }
+
+  /* User bar */
+  .user-bar {
+    height: 52px; background: rgba(17,18,20,.6);
+    display: flex; align-items: center;
+    padding: 0 8px; gap: 8px; flex-shrink: 0;
+  }
+  .user-bar .ub-avatar {
+    width: 32px; height: 32px; border-radius: var(--radius-circle);
+    flex-shrink: 0; position: relative;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 14px; color: white; cursor: pointer;
+  }
+  .user-bar .status-dot {
+    position: absolute; bottom: -1px; right: -1px;
+    width: 12px; height: 12px; border-radius: var(--radius-circle);
+    border: 3px solid rgba(17,18,20,.6);
+  }
+  .user-bar .ub-info { flex: 1; min-width: 0; }
+  .user-bar .ub-name { font-size: 13px; font-weight: 600; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .user-bar .ub-status { font-size: 11px; color: var(--text-muted); }
+  .user-bar .ub-controls { display: flex; gap: 2px; }
+  .user-bar .ub-controls button {
+    width: 32px; height: 32px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; transition: all .1s;
+  }
+  .user-bar .ub-controls button:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .user-bar .ub-controls button.active-ctrl { color: var(--red); }
+
+  /* Status picker popup */
+  .status-picker {
+    position: absolute; bottom: 60px; left: 8px;
+    background: var(--bg-primary); border: 1px solid var(--border);
+    border-radius: var(--radius-md); padding: 6px;
+    box-shadow: 0 8px 24px rgba(0,0,0,.5);
+    z-index: 100; display: none; min-width: 160px;
+  }
+  .status-picker.open { display: block; }
+  .status-option {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 10px; border-radius: var(--radius-sm);
+    cursor: pointer; font-size: 13px; color: var(--text-normal);
+    background: transparent; width: 100%; text-align: left;
+  }
+  .status-option:hover { background: var(--bg-hover); }
+  .status-option .so-dot {
+    width: 10px; height: 10px; border-radius: var(--radius-circle); flex-shrink: 0;
+  }
+
+  /* ── Chat Area ── */
+  .chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-primary); }
+
+  .chat-header {
+    height: 48px; padding: 0 16px;
+    display: flex; align-items: center; gap: 12px;
+    border-bottom: 1px solid var(--bg-tertiary); flex-shrink: 0;
+  }
+  .chat-header .ch-hash { color: var(--text-micro); font-size: 22px; font-weight: 600; }
+  .chat-header .ch-name { font-size: 15px; font-weight: 700; color: white; }
+  .chat-header .ch-divider { width: 1px; height: 24px; background: var(--border); }
+  .chat-header .ch-topic { font-size: 13px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .chat-header .ch-tools { display: flex; gap: 4px; flex-shrink: 0; }
+  .chat-header .ch-tools button {
+    width: 28px; height: 28px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    font-size: 16px; transition: all .1s;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .chat-header .ch-tools button:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .chat-header .ch-tools button.active { color: white; }
+  .chat-header .search-input {
+    width: 160px; height: 28px; border-radius: var(--radius-sm);
+    background: var(--bg-tertiary); color: var(--text-muted); font-size: 12px;
+    padding: 0 8px; transition: width .3s;
+  }
+  .chat-header .search-input::placeholder { color: var(--text-micro); }
+  .chat-header .search-input:focus { width: 240px; color: var(--text-normal); }
+
+  /* Messages */
+  .messages-container { flex: 1; overflow-y: auto; padding: 16px 0; }
+  .msg-day-divider {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 16px 16px; margin-bottom: 8px;
+  }
+  .msg-day-divider .line { flex: 1; height: 1px; background: var(--border); }
+  .msg-day-divider .date { font-size: 11px; font-weight: 700; color: var(--text-muted); }
+
+  .message {
+    padding: 2px 48px 2px 72px; position: relative;
+    min-height: 28px;
+  }
+  .message:hover { background: rgba(0,0,0,.06); }
+  .message.grouped { min-height: 20px; }
+  .message .msg-avatar {
+    position: absolute; left: 16px; top: 4px;
+    width: 40px; height: 40px; border-radius: var(--radius-circle);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 16px; color: white;
+    cursor: pointer;
+  }
+  .message.grouped .msg-avatar { display: none; }
+  .message .msg-hover-time {
+    position: absolute; left: 16px; top: 4px;
+    width: 40px; text-align: center;
+    font-size: 10px; color: var(--text-micro);
+    display: none;
+  }
+  .message.grouped:hover .msg-hover-time { display: block; }
+  .message .msg-header { display: flex; align-items: baseline; gap: 8px; }
+  .message.grouped .msg-header { display: none; }
+  .message .msg-author { font-weight: 600; cursor: pointer; }
+  .message .msg-author:hover { text-decoration: underline; }
+  .message .msg-time { font-size: 11px; color: var(--text-micro); }
+  .message .msg-edited { font-size: 10px; color: var(--text-micro); }
+  .message .msg-text { line-height: 1.45; word-break: break-word; }
+  .message .msg-text code {
+    font-family: var(--font-mono); background: var(--bg-tertiary);
+    padding: 2px 5px; border-radius: 3px; font-size: 13px;
+  }
+
+  /* Reply */
+  .msg-reply-ref {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 12px; color: var(--text-muted);
+    margin-bottom: 4px; margin-left: -36px; padding-left: 36px;
+    position: relative; cursor: pointer;
+  }
+  .msg-reply-ref::before {
+    content: ''; position: absolute; left: 20px; top: 50%;
+    width: 24px; height: 12px;
+    border-left: 2px solid var(--text-micro);
+    border-top: 2px solid var(--text-micro);
+    border-radius: 6px 0 0 0;
+  }
+  .msg-reply-ref .rr-author { color: var(--text-normal); font-weight: 600; }
+  .msg-reply-ref .rr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .msg-reply-ref:hover .rr-text { color: var(--text-normal); }
+
+  /* Reactions */
+  .msg-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
+  .reaction-chip {
+    display: flex; align-items: center; gap: 4px;
+    padding: 2px 8px; border-radius: var(--radius-md);
+    background: rgba(88,101,242,.15); border: 1px solid rgba(88,101,242,.3);
+    font-size: 14px; cursor: pointer; transition: all .1s;
+  }
+  .reaction-chip:hover { background: rgba(88,101,242,.3); }
+  .reaction-chip.me { border-color: var(--accent); }
+  .reaction-chip .rc-count { font-size: 12px; color: var(--text-normal); }
+  .reaction-chip.add-reaction {
+    background: transparent; border: 1px dashed var(--border);
+    color: var(--text-micro); font-size: 14px; padding: 2px 6px;
+  }
+  .reaction-chip.add-reaction:hover { border-color: var(--text-muted); color: var(--text-muted); }
+
+  /* Code block */
+  .msg-codeblock {
+    background: var(--bg-tertiary); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: 12px; margin-top: 4px;
+    font-family: var(--font-mono); font-size: 13px;
+    line-height: 1.5; overflow-x: auto; white-space: pre;
+  }
+
+  /* Image attachment */
+  .msg-image {
+    margin-top: 4px; max-width: 400px; border-radius: var(--radius-md);
+    overflow: hidden; cursor: pointer;
+  }
+  .msg-image .placeholder-img {
+    width: 100%; height: 200px;
+    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
+    display: flex; align-items: center; justify-content: center;
+    color: var(--text-micro); font-size: 12px;
+  }
+
+  /* File attachment */
+  .msg-file {
+    margin-top: 4px; border: 1px solid var(--border);
+    border-radius: var(--radius-md); overflow: hidden; max-width: 400px;
+  }
+  .msg-file-inner {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px; background: var(--bg-secondary);
+  }
+  .msg-file-icon {
+    width: 36px; height: 36px; border-radius: var(--radius-sm);
+    background: var(--accent); color: white;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; font-weight: 700; flex-shrink: 0;
+  }
+  .msg-file-name { font-size: 13px; color: var(--text-link); cursor: pointer; }
+  .msg-file-name:hover { text-decoration: underline; }
+  .msg-file-size { font-size: 11px; color: var(--text-muted); }
+
+  /* System message */
+  .system-msg {
+    display: flex; align-items: center; gap: 8px;
+    padding: 4px 16px; margin-top: 4px;
+  }
+  .system-msg .sm-icon { color: var(--green); font-size: 16px; }
+  .system-msg .sm-text { font-size: 13px; color: var(--text-muted); }
+  .system-msg .sm-text strong { color: var(--text-normal); }
+  .system-msg .sm-time { font-size: 11px; color: var(--text-micro); margin-left: auto; }
+
+  /* Message hover actions */
+  .msg-actions-bar {
+    position: absolute; top: -14px; right: 16px;
+    display: flex; gap: 2px;
+    background: var(--bg-secondary); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: 2px;
+    opacity: 0; transition: opacity .1s;
+    box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 5;
+  }
+  .message:hover .msg-actions-bar { opacity: 1; }
+  .msg-actions-bar button {
+    width: 28px; height: 28px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    font-size: 14px; transition: all .1s;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .msg-actions-bar button:hover { background: var(--bg-hover); color: var(--text-normal); }
+
+  /* Reply compose bar */
+  .reply-bar {
+    display: none; padding: 8px 16px 0;
+    flex-shrink: 0;
+  }
+  .reply-bar.visible { display: flex; align-items: center; gap: 8px; }
+  .reply-bar-inner {
+    flex: 1; background: var(--bg-input);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    padding: 8px 12px; font-size: 13px; color: var(--text-muted);
+    display: flex; align-items: center; gap: 8px;
+  }
+  .reply-bar-inner strong { color: var(--text-normal); }
+  .reply-bar .reply-close {
+    width: 24px; height: 24px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted); font-size: 16px;
+    display: flex; align-items: center; justify-content: center;
+    margin-left: auto;
+  }
+  .reply-bar .reply-close:hover { color: var(--text-normal); }
+
+  /* Typing indicator */
+  .typing-bar {
+    height: 24px; padding: 0 16px;
+    display: flex; align-items: center; gap: 8px;
+    font-size: 12px; color: var(--text-muted); flex-shrink: 0;
+  }
+  .typing-bar:empty { height: 0; }
+  .typing-dots { display: inline-flex; gap: 3px; }
+  .typing-dots span {
+    width: 4px; height: 4px; border-radius: 50%;
+    background: var(--text-muted); animation: typingAnim 1.4s infinite;
+  }
+  .typing-dots span:nth-child(2) { animation-delay: .2s; }
+  .typing-dots span:nth-child(3) { animation-delay: .4s; }
+  @keyframes typingAnim {
+    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
+    30% { opacity: 1; transform: translateY(-3px); }
+  }
+
+  /* Message input */
+  .message-input-wrap { padding: 0 16px 20px; flex-shrink: 0; }
+  .message-input-wrap.reply-active { padding-top: 0; }
+  .message-input-box {
+    background: var(--bg-input); border-radius: var(--radius-md);
+    display: flex; align-items: flex-end; padding: 4px;
+  }
+  .message-input-box.reply-mode { border-radius: 0 0 var(--radius-md) var(--radius-md); }
+  .input-btn {
+    width: 36px; height: 36px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    font-size: 18px; transition: all .1s; flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .input-btn:hover { color: var(--text-normal); }
+  .msg-textarea {
+    flex: 1; background: transparent; color: var(--text-normal);
+    font-size: 14px; resize: none; padding: 8px 4px;
+    min-height: 36px; max-height: 200px; line-height: 1.4;
+  }
+  .msg-textarea::placeholder { color: var(--text-micro); }
+
+  /* ── Member List ── */
+  .member-list {
+    width: 240px; background: var(--bg-secondary);
+    flex-shrink: 0; overflow-y: auto; padding: 8px 0;
+    transition: width .2s;
+  }
+  .member-list.hidden { width: 0; padding: 0; overflow: hidden; }
+  .member-role-group {
+    padding: 16px 16px 4px;
+    font-size: 11px; font-weight: 700;
+    color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px;
+  }
+  .member-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 4px 8px; margin: 1px 8px;
+    border-radius: var(--radius-sm); cursor: pointer; transition: background .1s;
+  }
+  .member-item:hover { background: var(--bg-hover); }
+  .member-item .mi-avatar {
+    width: 32px; height: 32px; border-radius: var(--radius-circle);
+    flex-shrink: 0; position: relative;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 13px; color: white;
+  }
+  .member-item .mi-status {
+    position: absolute; bottom: -1px; right: -1px;
+    width: 12px; height: 12px; border-radius: var(--radius-circle);
+    border: 3px solid var(--bg-secondary);
+  }
+  .member-item .mi-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .member-item.offline { opacity: .4; }
+
+  /* ── User profile popup ── */
+  .user-popup {
+    position: fixed; z-index: 200;
+    background: var(--bg-primary); border: 1px solid var(--border);
+    border-radius: var(--radius-md); width: 300px;
+    box-shadow: 0 8px 32px rgba(0,0,0,.6);
+    display: none; overflow: hidden;
+  }
+  .user-popup.open { display: block; }
+  .up-banner { height: 60px; }
+  .up-body { padding: 36px 16px 16px; position: relative; }
+  .up-avatar {
+    width: 64px; height: 64px; border-radius: var(--radius-circle);
+    position: absolute; top: -32px; left: 16px;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 24px; color: white;
+    border: 4px solid var(--bg-primary);
+  }
+  .up-name { font-size: 18px; font-weight: 700; color: white; }
+  .up-role { font-size: 12px; margin-top: 2px; }
+  .up-section { margin-top: 12px; background: var(--bg-secondary); border-radius: var(--radius-md); padding: 12px; }
+  .up-section-title { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
+  .up-section-text { font-size: 13px; color: var(--text-normal); }
+  .up-roles { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
+  .up-role-tag {
+    display: flex; align-items: center; gap: 4px;
+    padding: 2px 8px; border-radius: var(--radius-pill);
+    background: var(--bg-hover); font-size: 11px; color: var(--text-normal);
+  }
+  .up-role-dot { width: 8px; height: 8px; border-radius: 50%; }
+
+  /* ── Emoji Picker ── */
+  .emoji-picker {
+    position: fixed; z-index: 200;
+    background: var(--bg-primary); border: 1px solid var(--border);
+    border-radius: var(--radius-md); width: 320px;
+    box-shadow: 0 8px 32px rgba(0,0,0,.6);
+    display: none; overflow: hidden;
+  }
+  .emoji-picker.open { display: block; }
+  .ep-header {
+    padding: 12px; border-bottom: 1px solid var(--border);
+  }
+  .ep-search {
+    width: 100%; background: var(--bg-tertiary);
+    border: none; border-radius: var(--radius-sm);
+    padding: 8px 10px; color: var(--text-normal); font-size: 13px;
+  }
+  .ep-search::placeholder { color: var(--text-micro); }
+  .ep-category-label {
+    padding: 8px 12px 4px; font-size: 11px; font-weight: 700;
+    color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px;
+  }
+  .ep-grid {
+    display: grid; grid-template-columns: repeat(8, 1fr);
+    gap: 2px; padding: 4px 8px 8px;
+  }
+  .ep-emoji {
+    width: 100%; aspect-ratio: 1;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 22px; cursor: pointer; border-radius: var(--radius-sm);
+    background: transparent; transition: background .1s;
+  }
+  .ep-emoji:hover { background: var(--bg-hover); }
+
+  /* ── Settings Overlay ── */
+  .settings-overlay {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    background: var(--bg-primary); z-index: 500;
+    display: none;
+  }
+  .settings-overlay.open { display: flex; }
+  .settings-sidebar {
+    width: 220px; background: var(--bg-secondary);
+    padding: 48px 8px 16px; overflow-y: auto; flex-shrink: 0;
+  }
+  .settings-cat {
+    padding: 8px 12px 4px; font-size: 11px; font-weight: 700;
+    color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px;
+  }
+  .settings-nav-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 12px; margin: 1px 0;
+    border-radius: var(--radius-sm); cursor: pointer;
+    font-size: 14px; color: var(--text-muted);
+    transition: all .1s; background: transparent; width: 100%; text-align: left;
+  }
+  .settings-nav-item:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .settings-nav-item.active { background: var(--bg-active); color: white; }
+  .settings-sep { height: 1px; background: var(--border); margin: 8px 12px; }
+  .settings-nav-item.danger { color: var(--red); }
+  .settings-nav-item.danger:hover { background: rgba(242,63,67,.1); }
+
+  .settings-content {
+    flex: 1; overflow-y: auto; padding: 48px 40px; max-width: 720px;
+  }
+  .settings-content h1 { font-size: 20px; font-weight: 700; color: white; margin-bottom: 24px; }
+  .settings-content h3 {
+    font-size: 11px; font-weight: 700;
+    color: var(--text-faint); text-transform: uppercase;
+    letter-spacing: .5px; margin: 24px 0 8px;
+  }
+  .settings-close-btn {
+    position: absolute; top: 16px; right: 24px;
+    width: 36px; height: 36px; border-radius: var(--radius-circle);
+    background: transparent; border: 2px solid var(--border-strong);
+    color: var(--text-muted); font-size: 18px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: all .15s; z-index: 10;
+  }
+  .settings-close-btn:hover { border-color: var(--text-normal); color: var(--text-normal); }
+
+  /* Settings panes */
+  .settings-pane { display: none; }
+  .settings-pane.active { display: block; }
+  .setting-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 0; border-bottom: 1px solid var(--border);
+  }
+  .setting-row:last-child { border-bottom: none; }
+  .setting-label { font-size: 14px; color: var(--text-normal); }
+  .setting-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
+  .toggle {
+    width: 40px; height: 24px; border-radius: 12px;
+    background: var(--text-faint); cursor: pointer;
+    position: relative; transition: background .2s; flex-shrink: 0;
+  }
+  .toggle.on { background: var(--green); }
+  .toggle::after {
+    content: ''; position: absolute;
+    width: 18px; height: 18px; border-radius: 50%;
+    background: white; top: 3px; left: 3px; transition: transform .2s;
+  }
+  .toggle.on::after { transform: translateX(16px); }
+  .settings-select {
+    background: var(--bg-tertiary); color: var(--text-normal);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: 8px 12px; font-size: 14px; width: 200px; cursor: pointer;
+  }
+  .slider-row { display: flex; align-items: center; gap: 12px; }
+  .settings-slider {
+    flex: 1; -webkit-appearance: none; appearance: none;
+    height: 6px; border-radius: 3px;
+    background: var(--bg-tertiary); outline: none;
+  }
+  .settings-slider::-webkit-slider-thumb {
+    -webkit-appearance: none; width: 16px; height: 16px;
+    border-radius: 50%; background: var(--accent); cursor: pointer;
+  }
+  .slider-val { font-size: 13px; color: var(--text-muted); min-width: 40px; text-align: right; }
+  .account-card {
+    background: var(--bg-secondary); border-radius: var(--radius-md);
+    padding: 16px; display: flex; align-items: center; gap: 16px;
+  }
+  .ac-avatar {
+    width: 64px; height: 64px; border-radius: var(--radius-circle);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 24px; color: white; flex-shrink: 0;
+  }
+  .ac-name { font-size: 18px; font-weight: 700; color: white; }
+  .ac-id { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+  .ac-btn {
+    padding: 8px 16px; border-radius: var(--radius-sm);
+    background: var(--accent); color: white;
+    font-size: 13px; font-weight: 600; transition: background .15s; margin-left: auto;
+  }
+  .ac-btn:hover { background: var(--accent-hover); }
+  .theme-options { display: flex; gap: 12px; margin-top: 8px; }
+  .theme-opt {
+    width: 80px; height: 56px; border-radius: var(--radius-md);
+    cursor: pointer; border: 2px solid transparent;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; font-weight: 600; transition: all .15s;
+  }
+  .theme-opt:hover { border-color: var(--border-strong); }
+  .theme-opt.active { border-color: var(--accent); }
+  .theme-opt.dark { background: #313338; color: white; }
+  .theme-opt.light { background: #f2f3f5; color: #313338; }
+  .theme-opt.midnight { background: #0d0d0d; color: #b5bac1; }
+  .keybind-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 0; border-bottom: 1px solid var(--border);
+  }
+  .kbd {
+    background: var(--bg-tertiary); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: 4px 8px;
+    font-family: var(--font-mono); font-size: 12px; color: var(--text-normal);
+  }
+
+  /* ═══ Animations ═══ */
+  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+  @keyframes slideIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
+  .user-popup.open, .emoji-picker.open { animation: slideIn .15s ease; }
+  .settings-overlay.open { animation: fadeIn .2s ease; }
+
+  /* Toast notification */
+  .toast {
+    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+    background: var(--bg-secondary); border: 1px solid var(--border);
+    border-radius: var(--radius-md); padding: 12px 20px;
+    font-size: 13px; color: var(--text-normal);
+    box-shadow: 0 8px 24px rgba(0,0,0,.5);
+    z-index: 9999; opacity: 0; transition: opacity .3s;
+    pointer-events: none;
+  }
+  .toast.show { opacity: 1; }
+
+  /* ═══ Friends / DM View ═══ */
+  .dm-sidebar-header {
+    padding: 8px; flex-shrink: 0;
+  }
+  .dm-search {
+    width: 100%; background: var(--bg-tertiary);
+    border: none; border-radius: var(--radius-sm);
+    padding: 8px 10px; color: var(--text-normal); font-size: 13px;
+  }
+  .dm-search::placeholder { color: var(--text-micro); }
+
+  .dm-nav-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px; margin: 1px 8px;
+    border-radius: var(--radius-sm); cursor: pointer;
+    color: var(--text-muted); transition: all .1s; font-size: 14px;
+  }
+  .dm-nav-item:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .dm-nav-item.active { background: var(--bg-active); color: white; }
+  .dm-nav-item .dm-nav-icon { font-size: 18px; width: 20px; text-align: center; }
+
+  .dm-section-label {
+    padding: 16px 16px 4px;
+    font-size: 11px; font-weight: 700;
+    color: var(--text-faint); letter-spacing: .5px; text-transform: uppercase;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .dm-section-label .dm-add {
+    width: 18px; height: 18px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-muted);
+    font-size: 16px; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: color .1s;
+  }
+  .dm-section-label .dm-add:hover { color: var(--text-normal); }
+
+  .dm-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 6px 8px; margin: 1px 8px;
+    border-radius: var(--radius-sm); cursor: pointer;
+    color: var(--text-muted); transition: all .1s;
+  }
+  .dm-item:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .dm-item.active { background: var(--bg-active); color: white; }
+  .dm-item .dm-avatar {
+    width: 32px; height: 32px; border-radius: var(--radius-circle);
+    flex-shrink: 0; position: relative;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 13px; color: white;
+  }
+  .dm-item .dm-avatar .dm-status {
+    position: absolute; bottom: -1px; right: -1px;
+    width: 12px; height: 12px; border-radius: var(--radius-circle);
+    border: 3px solid var(--bg-secondary);
+  }
+  .dm-item.active .dm-avatar .dm-status { border-color: var(--bg-active); }
+  .dm-item .dm-name { font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .dm-item .dm-close {
+    width: 20px; height: 20px; border-radius: var(--radius-sm);
+    background: transparent; color: var(--text-micro);
+    font-size: 14px; display: none; align-items: center; justify-content: center;
+    cursor: pointer;
+  }
+  .dm-item:hover .dm-close { display: flex; }
+  .dm-item .dm-close:hover { color: var(--text-normal); }
+  .dm-item .dm-unread {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: white; flex-shrink: 0;
+  }
+
+  /* Friends list (main area when Home > Friends is active) */
+  .friends-view {
+    flex: 1; display: flex; flex-direction: column;
+    background: var(--bg-primary);
+  }
+  .friends-header {
+    height: 48px; padding: 0 16px;
+    display: flex; align-items: center; gap: 16px;
+    border-bottom: 1px solid var(--bg-tertiary); flex-shrink: 0;
+  }
+  .friends-header .fh-title {
+    font-size: 15px; font-weight: 700; color: white;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .friends-header .fh-title .fh-icon { font-size: 20px; }
+  .friends-header .fh-divider { width: 1px; height: 24px; background: var(--border); }
+  .friends-tab {
+    padding: 4px 10px; border-radius: var(--radius-sm);
+    font-size: 13px; font-weight: 500; color: var(--text-muted);
+    cursor: pointer; transition: all .1s; background: transparent;
+  }
+  .friends-tab:hover { background: var(--bg-hover); color: var(--text-normal); }
+  .friends-tab.active { background: var(--bg-active); color: white; }
+  .friends-tab.add-friend {
+    background: var(--green); color: white; font-weight: 600;
+  }
+  .friends-tab.add-friend:hover { background: #1e8e4c; }
+
+  .friends-list { flex: 1; overflow-y: auto; padding: 8px 16px; }
+  .friends-search-bar {
+    padding: 8px 0 16px;
+  }
+  .friends-search {
+    width: 100%; background: var(--bg-tertiary);
+    border: none; border-radius: var(--radius-sm);
+    padding: 10px 12px; color: var(--text-normal); font-size: 13px;
+  }
+  .friends-search::placeholder { color: var(--text-micro); }
+  .friends-count {
+    font-size: 11px; font-weight: 700;
+    color: var(--text-faint); text-transform: uppercase;
+    letter-spacing: .5px; padding: 8px 0;
+  }
+
+  .friend-item {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 8px;
+    border-top: 1px solid var(--border);
+    cursor: pointer; transition: background .1s;
+    border-radius: var(--radius-sm);
+  }
+  .friend-item:hover { background: var(--bg-hover); }
+  .friend-item .fi-avatar {
+    width: 40px; height: 40px; border-radius: var(--radius-circle);
+    flex-shrink: 0; position: relative;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 16px; color: white;
+  }
+  .friend-item .fi-status-dot {
+    position: absolute; bottom: 0; right: 0;
+    width: 14px; height: 14px; border-radius: var(--radius-circle);
+    border: 3px solid var(--bg-primary);
+  }
+  .friend-item:hover .fi-status-dot { border-color: var(--bg-hover); }
+  .friend-item .fi-info { flex: 1; }
+  .friend-item .fi-name { font-size: 14px; font-weight: 600; color: white; }
+  .friend-item .fi-status-text { font-size: 12px; color: var(--text-muted); }
+  .friend-item .fi-actions {
+    display: flex; gap: 6px; opacity: 0; transition: opacity .1s;
+  }
+  .friend-item:hover .fi-actions { opacity: 1; }
+  .fi-action-btn {
+    width: 36px; height: 36px; border-radius: var(--radius-circle);
+    background: var(--bg-secondary); color: var(--text-muted);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; transition: all .1s; cursor: pointer; border: none;
+  }
+  .fi-action-btn:hover { background: var(--bg-active); color: var(--text-normal); }
+
+  /* Add friend form */
+  .add-friend-form {
+    padding: 24px;
+  }
+  .add-friend-form h2 {
+    font-size: 16px; font-weight: 700; color: white; margin-bottom: 4px;
+  }
+  .add-friend-form p {
+    font-size: 13px; color: var(--text-muted); margin-bottom: 16px;
+  }
+  .add-friend-input-row {
+    display: flex; gap: 8px;
+  }
+  .add-friend-input {
+    flex: 1; background: var(--bg-tertiary);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: 12px; color: var(--text-normal); font-size: 14px;
+  }
+  .add-friend-input:focus { border-color: var(--accent); }
+  .add-friend-input::placeholder { color: var(--text-micro); }
+  .add-friend-submit {
+    padding: 12px 20px; border-radius: var(--radius-sm);
+    background: var(--accent); color: white;
+    font-size: 14px; font-weight: 600; transition: background .15s;
+    white-space: nowrap;
+  }
+  .add-friend-submit:hover { background: var(--accent-hover); }
+
+  /* DM chat header (slightly different from channel header) */
+  .dm-chat-header {
+    height: 48px; padding: 0 16px;
+    display: flex; align-items: center; gap: 10px;
+    border-bottom: 1px solid var(--bg-tertiary); flex-shrink: 0;
+  }
+  .dm-chat-header .dch-avatar {
+    width: 24px; height: 24px; border-radius: var(--radius-circle);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 10px; color: white;
+  }
+  .dm-chat-header .dch-name { font-size: 15px; font-weight: 700; color: white; }
+  .dm-chat-header .dch-status { font-size: 12px; color: var(--text-muted); }
+
+  /* DM profile sidebar (replaces member list in DM view) */
+  .dm-profile {
+    width: 340px; background: var(--bg-secondary);
+    flex-shrink: 0; overflow-y: auto;
+    transition: width .2s;
+  }
+  .dm-profile.hidden { width: 0; overflow: hidden; }
+  .dm-profile-banner { height: 120px; }
+  .dm-profile-body { padding: 48px 16px 16px; position: relative; }
+  .dm-profile-avatar {
+    width: 80px; height: 80px; border-radius: var(--radius-circle);
+    position: absolute; top: -40px; left: 16px;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 28px; color: white;
+    border: 6px solid var(--bg-secondary);
+  }
+  .dm-profile-name { font-size: 20px; font-weight: 700; color: white; }
+  .dm-profile-role { font-size: 12px; margin-top: 2px; }
+  .dm-profile-section {
+    margin-top: 16px; background: var(--bg-primary);
+    border-radius: var(--radius-md); padding: 12px;
+  }
+  .dm-profile-section-title {
+    font-size: 11px; font-weight: 700; color: var(--text-faint);
+    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
+  }
+  .dm-profile-section-text { font-size: 13px; color: var(--text-normal); line-height: 1.5; }
+  .dm-profile-mutual {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 0;
+  }
+  .dm-profile-mutual .dpm-avatar {
+    width: 24px; height: 24px; border-radius: var(--radius-circle);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 9px; color: white; flex-shrink: 0;
+  }
+  .dm-profile-mutual .dpm-name { font-size: 13px; color: var(--text-muted); }
+</style>
+</head>
+<body>
+
+<div class="app" id="app">
+  <!-- Server Strip -->
+  <div class="server-strip" id="serverStrip"></div>
+
+  <!-- Channel Sidebar -->
+  <div class="channel-sidebar" id="channelSidebar">
+    <div class="channel-sidebar-header" id="sidebarHeader"><h2 id="serverName"></h2></div>
+    <div class="channel-list" id="channelList"></div>
+    <div class="voice-widget" id="voiceWidget">
+      <div class="vw-header">
+        <span class="vw-connected">Voice Connected</span>
+        <span class="vw-channel" id="vwChannel"></span>
+      </div>
+      <div class="vw-controls">
+        <button id="vwMute" title="Mute" onclick="toggleMute()">&#127908;</button>
+        <button id="vwDeafen" title="Deafen" onclick="toggleDeafen()">&#127911;</button>
+        <button class="disconnect" title="Disconnect" onclick="leaveVoice()">&#9746;</button>
+      </div>
+    </div>
+    <div class="user-bar" id="userBar">
+      <div class="ub-avatar" id="ubAvatar" onclick="toggleStatusPicker()">
+        <div class="status-dot" id="ubStatusDot"></div>
+      </div>
+      <div class="ub-info">
+        <div class="ub-name" id="ubName"></div>
+        <div class="ub-status" id="ubStatus"></div>
+      </div>
+      <div class="ub-controls">
+        <button id="ubMuteBtn" title="Mute" onclick="toggleMute()">&#127908;</button>
+        <button id="ubDeafenBtn" title="Deafen" onclick="toggleDeafen()">&#127911;</button>
+        <button title="Settings" onclick="openSettings()">&#9881;</button>
+      </div>
+    </div>
+    <div class="status-picker" id="statusPicker"></div>
+  </div>
+
+  <!-- Chat Area -->
+  <div class="chat-area" id="chatArea">
+    <div class="chat-header">
+      <span class="ch-hash">#</span>
+      <span class="ch-name" id="chatChannelName"></span>
+      <span class="ch-divider"></span>
+      <span class="ch-topic" id="chatChannelTopic"></span>
+      <div class="ch-tools">
+        <input class="search-input" type="text" placeholder="Search...">
+        <button title="Pinned">&#128204;</button>
+        <button id="toggleMembersBtn" title="Member List" onclick="toggleMembers()">&#128101;</button>
+      </div>
+    </div>
+    <div class="messages-container" id="messagesContainer"></div>
+    <div class="typing-bar" id="typingBar"></div>
+    <div class="reply-bar" id="replyBar">
+      <div class="reply-bar-inner">
+        Replying to <strong id="replyToName"></strong>
+        <button class="reply-close" onclick="cancelReply()">&#10005;</button>
+      </div>
+    </div>
+    <div class="message-input-wrap" id="inputWrap">
+      <div class="message-input-box" id="inputBox">
+        <button class="input-btn" title="Attach File">&#128206;</button>
+        <textarea class="msg-textarea" id="msgInput" rows="1" placeholder=""></textarea>
+        <button class="input-btn" title="Emoji" onclick="toggleEmojiPicker(event)">&#128578;</button>
+        <button class="input-btn" title="Send" style="color:var(--accent);" onclick="sendMessage()">&#10148;</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Member List (server channels) -->
+  <div class="member-list" id="memberList"></div>
+
+  <!-- Friends View (Home > Friends tab) -->
+  <div class="friends-view" id="friendsView" style="display:none;"></div>
+
+  <!-- DM Profile sidebar (replaces member list in DM view) -->
+  <div class="dm-profile hidden" id="dmProfile"></div>
+</div>
+
+<!-- User Profile Popup -->
+<div class="user-popup" id="userPopup">
+  <div class="up-banner" id="upBanner"></div>
+  <div class="up-body">
+    <div class="up-avatar" id="upAvatar"></div>
+    <div class="up-name" id="upName"></div>
+    <div class="up-role" id="upRole"></div>
+    <div class="up-section">
+      <div class="up-section-title">Member Since</div>
+      <div class="up-section-text" id="upJoined"></div>
+    </div>
+    <div class="up-roles" id="upRoles"></div>
+    <button class="ac-btn" style="width:100%;margin-top:12px;text-align:center;" id="upMessageBtn" onclick="dmFromPopup()">Message</button>
+  </div>
+</div>
+
+<!-- Emoji Picker -->
+<div class="emoji-picker" id="emojiPicker">
+  <div class="ep-header">
+    <input class="ep-search" id="emojiSearch" type="text" placeholder="Search emoji..." oninput="filterEmoji()">
+  </div>
+  <div id="emojiGrid"></div>
+</div>
+
+<!-- Settings Overlay -->
+<div class="settings-overlay" id="settingsOverlay">
+  <button class="settings-close-btn" onclick="closeSettings()">&#10005;</button>
+  <div class="settings-sidebar" id="settingsSidebar"></div>
+  <div class="settings-content" id="settingsContent"></div>
+</div>
+
+<!-- Toast -->
+<div class="toast" id="toast"></div>
+
+<script>
+// ═══════════════════════════════════════════
+// MOCK DATA — simulates server "ready" payload
+// ═══════════════════════════════════════════
+
+const SELF = { id: 0, username: 'YourName', avatar: '#5865f2', status: 'online', role: 'admin' };
+
+const SERVERS = [
+  {
+    id: 's0', name: 'OwnCord', icon: 'O', color: '#5865f2', isHome: true,
+    channels: [
+      { cat: 'Text Channels', items: [
+        { id: 'c1', name: 'general', type: 'text', topic: 'Welcome to OwnCord! Be nice.', unread: 0 },
+        { id: 'c2', name: 'announcements', type: 'text', topic: 'Important updates', unread: 5 },
+        { id: 'c3', name: 'memes', type: 'text', topic: 'Only the dankest', unread: 0 },
+        { id: 'c4', name: 'dev-talk', type: 'text', topic: 'Code discussion', unread: 0 },
+      ]},
+      { cat: 'Voice Channels', items: [
+        { id: 'v1', name: 'Lounge', type: 'voice' },
+        { id: 'v2', name: 'Gaming', type: 'voice' },
+      ]},
+    ],
+    members: [
+      { id: 1, username: 'ServerOwner', avatar: '#e74c3c', role: 'owner', roleColor: '#e74c3c', status: 'online' },
+      { id: 2, username: 'alex', avatar: '#5865f2', role: 'admin', roleColor: '#f39c12', status: 'online' },
+      { id: 3, username: 'jordan', avatar: '#2ecc71', role: 'moderator', roleColor: '#2ecc71', status: 'idle' },
+      { id: 4, username: 'maya', avatar: '#e67e22', role: 'member', roleColor: '#949ba4', status: 'online' },
+      { id: 5, username: 'ryan', avatar: '#1abc9c', role: 'member', roleColor: '#949ba4', status: 'dnd' },
+      { id: 6, username: 'taylor', avatar: '#6d6f78', role: 'member', roleColor: '#949ba4', status: 'offline' },
+    ],
+    voiceStates: [
+      { channelId: 'v1', userId: 2, muted: false, speaking: true },
+      { channelId: 'v1', userId: 3, muted: true, speaking: false },
+    ],
+  },
+  {
+    id: 's1', name: 'Gaming Crew', icon: 'G', color: '#e74c3c',
+    channels: [
+      { cat: 'Chat', items: [
+        { id: 'gc1', name: 'lobby', type: 'text', topic: 'Find a squad', unread: 3 },
+        { id: 'gc2', name: 'clips', type: 'text', topic: 'Post your highlights', unread: 0 },
+      ]},
+      { cat: 'Voice', items: [
+        { id: 'gv1', name: 'Squad 1', type: 'voice' },
+        { id: 'gv2', name: 'Squad 2', type: 'voice' },
+      ]},
+    ],
+    members: [
+      { id: 10, username: 'FragMaster', avatar: '#e74c3c', role: 'owner', roleColor: '#e74c3c', status: 'online' },
+      { id: 11, username: 'NoScope420', avatar: '#f39c12', role: 'member', roleColor: '#949ba4', status: 'online' },
+      { id: 12, username: 'CampQueen', avatar: '#9b59b6', role: 'member', roleColor: '#949ba4', status: 'idle' },
+    ],
+    voiceStates: [],
+  },
+  {
+    id: 's2', name: 'Dev Team', icon: 'D', color: '#2ecc71',
+    channels: [
+      { cat: 'Engineering', items: [
+        { id: 'dc1', name: 'backend', type: 'text', topic: 'Go, APIs, DB', unread: 0 },
+        { id: 'dc2', name: 'frontend', type: 'text', topic: 'WPF, XAML, UI', unread: 2 },
+        { id: 'dc3', name: 'ci-cd', type: 'text', topic: 'Builds and deploys', unread: 0 },
+      ]},
+      { cat: 'Voice', items: [
+        { id: 'dv1', name: 'Standup', type: 'voice' },
+      ]},
+    ],
+    members: [
+      { id: 20, username: 'TechLead', avatar: '#2ecc71', role: 'owner', roleColor: '#e74c3c', status: 'online' },
+      { id: 21, username: 'BackendBob', avatar: '#3498db', role: 'admin', roleColor: '#f39c12', status: 'online' },
+    ],
+    voiceStates: [],
+  },
+];
+
+// Messages per channel
+const MESSAGES = {
+  c1: [
+    { id: 'm1', userId: 1, text: 'Hey everyone! Just pushed a server update. Voice quality should be much better now.', time: '10:15 AM', reactions: [{emoji:'👍',count:3,me:true},{emoji:'🎉',count:2,me:false}] },
+    { id: 'm2', userId: 2, text: 'Awesome! Noticed the latency drop right away. What changed?', time: '10:18 AM', replyTo: 'm1' },
+    { id: 'm3', userId: 1, text: 'Switched from full forwarding to top-N speaker selection. Here\'s the gist:', time: '10:20 AM', code: '// SFU only forwards top 3 speakers\nfunc (s *SFU) selectSpeakers(room *Room) []Peer {\n    speakers := room.RankedBySpeakLevel()\n    return speakers[:min(3, len(speakers))]\n}', reactions: [{emoji:'🔥',count:1,me:false}] },
+    { id: 'm4', userId: 1, text: 'Bitrate stays at 64kbps Opus but we\'re only forwarding relevant streams now', time: '10:20 AM', grouped: true },
+    { id: 'm5', userId: 3, text: 'Here\'s the benchmark results from last night:', time: '10:25 AM', edited: true, file: { name: 'benchmark-results-2026-03.pdf', size: '2.4 MB' } },
+    { id: 'm6', userId: 4, text: 'Check out this setup 😍', time: '10:30 AM', image: true, reactions: [{emoji:'😍',count:4,me:true},{emoji:'👍',count:2,me:false},{emoji:'🏆',count:1,me:false}] },
+    { id: 'm7', userId: 0, text: '', time: '10:32 AM', system: true, systemText: '<strong>newuser</strong> just joined the server. Welcome!' },
+  ],
+  c2: [
+    { id: 'a1', userId: 1, text: '📢 Server will be going down for maintenance tonight at 11 PM EST.', time: '9:00 AM' },
+    { id: 'a2', userId: 1, text: '📢 New voice optimization is live! Try it out in any voice channel.', time: '10:00 AM', reactions: [{emoji:'🎉',count:5,me:true}] },
+  ],
+  c3: [
+    { id: 'me1', userId: 4, text: 'When the code compiles on the first try 🎉', time: '9:30 AM', reactions: [{emoji:'😂',count:3,me:false}] },
+    { id: 'me2', userId: 5, text: 'Impossible. That never happens.', time: '9:31 AM' },
+  ],
+  c4: [
+    { id: 'd1', userId: 2, text: 'Anyone looked at the new Pion v4 API?', time: '8:00 AM' },
+    { id: 'd2', userId: 3, text: 'Yeah, the `MediaEngine` config is much cleaner now.', time: '8:05 AM' },
+    { id: 'd3', userId: 1, text: 'I updated our SFU to use it. Check the PR.', time: '8:10 AM' },
+  ],
+  gc1: [
+    { id: 'g1', userId: 10, text: 'Who\'s up for ranked tonight?', time: '7:00 PM' },
+    { id: 'g2', userId: 11, text: 'I\'m in! Let me finish this match first.', time: '7:02 PM' },
+    { id: 'g3', userId: 12, text: 'Count me in after dinner', time: '7:05 PM' },
+  ],
+  gc2: [
+    { id: 'gc2m1', userId: 11, text: 'Check this headshot 🎯', time: '6:00 PM', image: true },
+  ],
+  dc1: [
+    { id: 'b1', userId: 20, text: 'Sprint planning at 10 AM tomorrow. Please update your tickets.', time: '3:00 PM' },
+    { id: 'b2', userId: 21, text: 'Working on the voice state migration. Should be done by EOD.', time: '3:15 PM' },
+  ],
+  dc2: [
+    { id: 'f1', userId: 20, text: 'The new channel sidebar design looks great!', time: '2:00 PM' },
+    { id: 'f2', userId: 21, text: 'Thanks! Need to add the voice user indicators still.', time: '2:05 PM' },
+  ],
+  dc3: [
+    { id: 'ci1', userId: 20, text: 'Build pipeline updated. Now runs tests in parallel.', time: '1:00 PM' },
+  ],
+};
+
+const EMOJI_DATA = {
+  'Smileys': ['😀','😂','😍','🤣','😎','🤔','😢','😡','🥳','😴','🤯','🥺','😏','🙃','😬','🤗','😇','🤩','😤','🫠'],
+  'Gestures': ['👍','👎','👏','🙌','🤝','✌️','🤞','🫡','💪','🫶','👋','🤙','👊','🖐️','☝️','👆'],
+  'Objects': ['🔥','❤️','⭐','💯','🎉','🏆','💡','🎯','🚀','💎','🎮','🎵','📌','🔗','⚡','🛠️'],
+  'Nature': ['🌈','🌊','🌸','🍕','🍺','☕','🌙','⛈️','🐱','🐶','🦊','🐸','🌿','🍀'],
+};
+
+// ═══ Friends & DM Data ═══
+
+const FRIENDS = [
+  { id: 101, username: 'alex', avatar: '#5865f2', status: 'online', about: 'Full-stack dev. Always coding something.', mutualServers: ['OwnCord','Dev Team'] },
+  { id: 102, username: 'jordan', avatar: '#2ecc71', status: 'idle', about: 'Gaming enthusiast and moderator.', mutualServers: ['OwnCord'] },
+  { id: 103, username: 'maya', avatar: '#e67e22', status: 'online', about: 'UI/UX designer. Coffee addict ☕', mutualServers: ['OwnCord'] },
+  { id: 104, username: 'ryan', avatar: '#1abc9c', status: 'dnd', about: 'Backend engineer. Do not disturb = actually coding.', mutualServers: ['OwnCord'] },
+  { id: 105, username: 'taylor', avatar: '#6d6f78', status: 'offline', about: 'Casual gamer. Will be back soon.', mutualServers: ['OwnCord'] },
+  { id: 106, username: 'FragMaster', avatar: '#e74c3c', status: 'online', about: 'Competitive FPS player. Always down for a match.', mutualServers: ['Gaming Crew'] },
+  { id: 107, username: 'TechLead', avatar: '#2ecc71', status: 'online', about: 'Engineering manager. Ask me about Go.', mutualServers: ['Dev Team'] },
+];
+
+// DM conversations — open DMs in sidebar
+const DM_CONVERSATIONS = [
+  { friendId: 101, unread: 2, lastMsg: 'Check out the new SFU code!' },
+  { friendId: 103, unread: 0, lastMsg: 'The mockup looks great 👍' },
+  { friendId: 106, unread: 1, lastMsg: 'Ranked tonight?' },
+];
+
+// DM messages keyed by friend id
+const DM_MESSAGES = {
+  101: [
+    { id: 'dm1', userId: 101, text: 'Hey, did you see the voice optimization PR?', time: '9:00 AM' },
+    { id: 'dm2', userId: 0, text: 'Yeah! The speaker detection is really clean.', time: '9:05 AM' },
+    { id: 'dm3', userId: 101, text: 'Thanks! Spent a while on the ring buffer averaging.', time: '9:06 AM' },
+    { id: 'dm4', userId: 101, text: 'Check out the new SFU code!', time: '9:10 AM', grouped: true },
+  ],
+  103: [
+    { id: 'dm5', userId: 0, text: 'What do you think of the channel sidebar design?', time: '2:00 PM' },
+    { id: 'dm6', userId: 103, text: 'I love it! The voice users inline is a nice touch.', time: '2:05 PM' },
+    { id: 'dm7', userId: 103, text: 'The mockup looks great 👍', time: '2:06 PM', grouped: true },
+  ],
+  106: [
+    { id: 'dm8', userId: 106, text: 'You free tonight for some ranked?', time: '6:30 PM' },
+    { id: 'dm9', userId: 0, text: 'Maybe after 9, finishing some work first.', time: '6:35 PM' },
+    { id: 'dm10', userId: 106, text: 'Ranked tonight?', time: '7:00 PM' },
+  ],
+};
+
+const PENDING_REQUESTS = [
+  { id: 108, username: 'NewPlayer42', avatar: '#9b59b6', status: 'online', incoming: true },
+];
+
+// ═══════════════════════════════════════════
+// STATE
+// ═══════════════════════════════════════════
+
+let state = {
+  activeServer: 's0',
+  activeChannel: 'c1',
+  isMuted: false,
+  isDeafened: false,
+  voiceChannel: null,
+  memberListVisible: true,
+  replyingTo: null,
+  selfStatus: 'online',
+  emojiPickerOpen: false,
+  statusPickerOpen: false,
+  settingsOpen: false,
+  settingsPage: 'account',
+  // DM/Friends state
+  homeView: 'friends',      // 'friends' or 'dm'
+  friendsTab: 'online',     // 'online','all','pending','add'
+  activeDmFriend: null,      // friend id when in a DM conversation
+  dmProfileVisible: true,
+};
+
+// ═══════════════════════════════════════════
+// RENDER FUNCTIONS
+// ═══════════════════════════════════════════
+
+function getServer() { return SERVERS.find(s => s.id === state.activeServer); }
+function getChannel() {
+  const srv = getServer();
+  for (const cat of srv.channels) for (const ch of cat.items) if (ch.id === state.activeChannel) return ch;
+  return null;
+}
+function getMember(userId, srv) {
+  if (userId === 0) return SELF;
+  // Check friends list first (for DMs)
+  const friend = FRIENDS.find(f => f.id === userId);
+  if (friend) return friend;
+  srv = srv || getServer();
+  return srv.members.find(m => m.id === userId) || SELF;
+}
+function isHomeServer() { return state.activeServer === 'home'; }
+function getFriend(id) { return FRIENDS.find(f => f.id === id); }
+function statusColor(s) { return {online:'var(--green)',idle:'var(--yellow)',dnd:'var(--red)',offline:'var(--text-micro)'}[s]||'var(--text-micro)'; }
+function statusLabel(s) { return {online:'Online',idle:'Idle',dnd:'Do Not Disturb',offline:'Offline'}[s]||'Online'; }
+
+function renderServerStrip() {
+  const el = document.getElementById('serverStrip');
+  const totalDmUnread = DM_CONVERSATIONS.reduce((s,d) => s + (d.unread||0), 0);
+  let html = '';
+  // Home icon (Friends/DMs)
+  html += `<div class="server-icon ${state.activeServer==='home'?'active':''}" style="background:${state.activeServer==='home'?'var(--accent)':'var(--bg-primary)'};color:${state.activeServer==='home'?'white':'var(--accent)'};font-size:24px;" onclick="switchServer('home')" title="Direct Messages">O<span class="badge">${totalDmUnread||''}</span></div>`;
+  html += '<div class="server-separator"></div>';
+  // Servers
+  SERVERS.forEach(s => {
+    const totalUnread = s.channels.reduce((sum,cat) => sum + cat.items.reduce((s2,ch) => s2 + (ch.unread||0), 0), 0);
+    html += `<div class="server-icon ${s.id===state.activeServer?'active':''}" style="background:${s.color};" onclick="switchServer('${s.id}')" title="${s.name}">${s.icon}<span class="badge">${totalUnread||''}</span></div>`;
+  });
+  html += '<div class="server-separator"></div>';
+  html += '<div class="server-icon add" onclick="showToast(\'Add server dialog would open here\')" title="Add Server">+</div>';
+  el.innerHTML = html;
+}
+
+function renderChannelSidebar() {
+  if (isHomeServer()) { renderHomeSidebar(); return; }
+  const srv = getServer();
+  document.getElementById('serverName').textContent = srv.name;
+  const el = document.getElementById('channelList');
+  let html = '';
+  srv.channels.forEach(cat => {
+    html += `<div class="category" onclick="this.classList.toggle('collapsed')"><span class="category-arrow">▼</span><span class="category-name">${cat.cat}</span></div>`;
+    html += '<div class="category-channels">';
+    cat.items.forEach(ch => {
+      const isActive = ch.id === state.activeChannel;
+      const isUnread = ch.unread > 0;
+      const icon = ch.type === 'voice' ? '🔊' : '#';
+      const iconStyle = ch.type === 'voice' ? 'font-size:14px;' : 'font-size:18px;';
+      html += `<div class="channel-item ${isActive?'active':''} ${isUnread?'unread':''}" onclick="${ch.type==='text'?`switchChannel('${ch.id}')`:`joinVoice('${ch.id}')`}">`;
+      html += `<span class="ch-icon" style="${iconStyle}">${icon}</span>`;
+      html += `<span class="ch-name">${ch.name}</span>`;
+      if (isUnread) html += `<span class="unread-badge">${ch.unread}</span>`;
+      html += '</div>';
+      // Voice users
+      if (ch.type === 'voice') {
+        const voiceUsers = srv.voiceStates.filter(vs => vs.channelId === ch.id);
+        if (state.voiceChannel === ch.id) voiceUsers.push({ channelId: ch.id, userId: 0, muted: state.isMuted, speaking: false });
+        if (voiceUsers.length > 0) {
+          html += '<div class="voice-users-list">';
+          voiceUsers.forEach(vs => {
+            const m = getMember(vs.userId);
+            html += `<div class="voice-user-item ${vs.speaking?'speaking':''}" onclick="showUserPopup(event, ${vs.userId})">`;
+            html += `<div class="vu-avatar" style="background:${m.avatar};">${m.username[0]}</div>`;
+            html += `<span>${m.username}</span>`;
+            if (vs.muted) html += '<span class="vu-muted">🔇</span>';
+            html += '</div>';
+          });
+          html += '</div>';
+        }
+      }
+    });
+    html += '</div>';
+  });
+  el.innerHTML = html;
+
+  // Voice widget
+  const vw = document.getElementById('voiceWidget');
+  if (state.voiceChannel) {
+    vw.classList.add('visible');
+    const vCh = srv.channels.flatMap(c => c.items).find(c => c.id === state.voiceChannel);
+    document.getElementById('vwChannel').textContent = '/ ' + (vCh ? vCh.name : '');
+    document.getElementById('vwMute').classList.toggle('active-ctrl', state.isMuted);
+    document.getElementById('vwDeafen').classList.toggle('active-ctrl', state.isDeafened);
+  } else {
+    vw.classList.remove('visible');
+  }
+
+  // User bar
+  document.getElementById('ubAvatar').style.background = SELF.avatar;
+  document.getElementById('ubAvatar').innerHTML = SELF.username[0] + `<div class="status-dot" style="background:${statusColor(state.selfStatus)};"></div>`;
+  document.getElementById('ubName').textContent = SELF.username;
+  document.getElementById('ubStatus').textContent = statusLabel(state.selfStatus);
+  document.getElementById('ubMuteBtn').classList.toggle('active-ctrl', state.isMuted);
+  document.getElementById('ubDeafenBtn').classList.toggle('active-ctrl', state.isDeafened);
+}
+
+function renderHomeSidebar() {
+  document.getElementById('serverName').textContent = 'Direct Messages';
+  const el = document.getElementById('channelList');
+  let html = '';
+  // Search
+  html += '<div class="dm-sidebar-header"><input class="dm-search" type="text" placeholder="Find or start a conversation"></div>';
+  // Nav items
+  html += `<div class="dm-nav-item ${!state.activeDmFriend?'active':''}" onclick="showFriends()"><span class="dm-nav-icon">👥</span>Friends</div>`;
+  // DM section label
+  html += '<div class="dm-section-label">Direct Messages<button class="dm-add" title="New DM" onclick="showToast(\'New DM dialog\')">+</button></div>';
+  // DM conversations
+  DM_CONVERSATIONS.forEach(dm => {
+    const f = getFriend(dm.friendId);
+    if (!f) return;
+    const isActive = state.activeDmFriend === dm.friendId;
+    html += `<div class="dm-item ${isActive?'active':''}" onclick="openDm(${dm.friendId})">`;
+    html += `<div class="dm-avatar" style="background:${f.avatar};">${f.username[0]}<div class="dm-status" style="background:${statusColor(f.status)};"></div></div>`;
+    html += `<span class="dm-name">${f.username}</span>`;
+    if (dm.unread > 0) html += '<div class="dm-unread"></div>';
+    html += `<button class="dm-close" onclick="event.stopPropagation();closeDm(${dm.friendId})">×</button>`;
+    html += '</div>';
+  });
+  el.innerHTML = html;
+  // Hide voice widget when on Home
+  document.getElementById('voiceWidget').classList.remove('visible');
+  // User bar still renders normally
+  document.getElementById('ubAvatar').style.background = SELF.avatar;
+  document.getElementById('ubAvatar').innerHTML = SELF.username[0] + `<div class="status-dot" style="background:${statusColor(state.selfStatus)};"></div>`;
+  document.getElementById('ubName').textContent = SELF.username;
+  document.getElementById('ubStatus').textContent = statusLabel(state.selfStatus);
+  document.getElementById('ubMuteBtn').classList.toggle('active-ctrl', state.isMuted);
+  document.getElementById('ubDeafenBtn').classList.toggle('active-ctrl', state.isDeafened);
+}
+
+function renderMessages() {
+  if (isHomeServer() && state.activeDmFriend) { renderDmMessages(); return; }
+  if (isHomeServer()) { renderFriendsView(); return; }
+  const ch = getChannel();
+  document.getElementById('chatChannelName').textContent = ch ? ch.name : '';
+  document.getElementById('chatChannelTopic').textContent = ch ? (ch.topic||'') : '';
+  document.getElementById('msgInput').placeholder = ch ? `Message #${ch.name}` : '';
+
+  const msgs = MESSAGES[state.activeChannel] || [];
+  const srv = getServer();
+  const container = document.getElementById('messagesContainer');
+  let html = '<div class="msg-day-divider"><div class="line"></div><span class="date">March 15, 2026</span><div class="line"></div></div>';
+
+  msgs.forEach((msg, i) => {
+    if (msg.system) {
+      html += `<div class="system-msg"><span class="sm-icon">→</span><span class="sm-text">${msg.systemText}</span><span class="sm-time">Today at ${msg.time}</span></div>`;
+      return;
+    }
+    const m = getMember(msg.userId, srv);
+    const isGrouped = msg.grouped;
+
+    // Reply reference
+    if (msg.replyTo) {
+      const orig = msgs.find(x => x.id === msg.replyTo);
+      if (orig) {
+        const origUser = getMember(orig.userId, srv);
+        html += `<div class="msg-reply-ref" style="margin-left:36px;"><span class="rr-author" style="color:${origUser.roleColor||'var(--text-normal)'};">${origUser.username}</span><span class="rr-text">${orig.text.substring(0,60)}${orig.text.length>60?'...':''}</span></div>`;
+      }
+    }
+
+    html += `<div class="message ${isGrouped?'grouped':''}" data-msg-id="${msg.id}">`;
+    if (!isGrouped) {
+      html += `<div class="msg-avatar" style="background:${m.avatar};" onclick="showUserPopup(event, ${msg.userId})">${m.username[0]}</div>`;
+      html += '<div class="msg-header">';
+      html += `<span class="msg-author" style="color:${m.roleColor||'var(--text-normal)'};" onclick="showUserPopup(event, ${msg.userId})">${m.username}</span>`;
+      html += `<span class="msg-time">Today at ${msg.time}</span>`;
+      if (msg.edited) html += '<span class="msg-edited">(edited)</span>';
+      html += '</div>';
+    } else {
+      html += `<span class="msg-hover-time">${msg.time.replace(/ (AM|PM)/,'')}</span>`;
+    }
+    if (msg.text) html += `<div class="msg-text">${escapeHtml(msg.text)}</div>`;
+    if (msg.code) html += `<div class="msg-codeblock">${escapeHtml(msg.code)}</div>`;
+    if (msg.file) {
+      html += `<div class="msg-file"><div class="msg-file-inner"><div class="msg-file-icon">📄</div><div><div class="msg-file-name">${msg.file.name}</div><div class="msg-file-size">${msg.file.size}</div></div></div></div>`;
+    }
+    if (msg.image) {
+      html += '<div class="msg-image"><div class="placeholder-img">[image preview]</div></div>';
+    }
+    if (msg.reactions && msg.reactions.length) {
+      html += '<div class="msg-reactions">';
+      msg.reactions.forEach(r => {
+        html += `<div class="reaction-chip ${r.me?'me':''}" onclick="toggleReaction('${msg.id}','${r.emoji}')">${r.emoji}<span class="rc-count">${r.count}</span></div>`;
+      });
+      html += `<div class="reaction-chip add-reaction" onclick="showEmojiForReaction(event,'${msg.id}')">+</div>`;
+      html += '</div>';
+    }
+    // Hover actions
+    html += '<div class="msg-actions-bar">';
+    html += `<button title="React" onclick="showEmojiForReaction(event,'${msg.id}')">😊</button>`;
+    html += `<button title="Reply" onclick="startReply('${msg.id}')">↩</button>`;
+    if (msg.userId === 0) html += '<button title="Edit">✎</button>';
+    html += '<button title="More">⋯</button>';
+    html += '</div>';
+    html += '</div>';
+  });
+
+  container.innerHTML = html;
+  container.scrollTop = container.scrollHeight;
+}
+
+function renderMemberList() {
+  const srv = getServer();
+  const el = document.getElementById('memberList');
+  if (!state.memberListVisible) { el.classList.add('hidden'); return; }
+  el.classList.remove('hidden');
+
+  const roleOrder = ['owner','admin','moderator','member'];
+  const roleLabels = { owner:'Owner', admin:'Admin', moderator:'Moderator', member:'Members' };
+  let html = '';
+  roleOrder.forEach(role => {
+    const group = srv.members.filter(m => m.role === role);
+    if (!group.length) return;
+    const online = group.filter(m => m.status !== 'offline');
+    const offline = group.filter(m => m.status === 'offline');
+    html += `<div class="member-role-group">${roleLabels[role]} — ${group.length}</div>`;
+    [...online, ...offline].forEach(m => {
+      html += `<div class="member-item ${m.status==='offline'?'offline':''}" onclick="showUserPopup(event, ${m.id})">`;
+      html += `<div class="mi-avatar" style="background:${m.avatar};">${m.username[0]}<div class="mi-status" style="background:${statusColor(m.status)};"></div></div>`;
+      html += `<span class="mi-name" style="color:${m.roleColor};">${m.username}</span>`;
+      html += '</div>';
+    });
+  });
+  el.innerHTML = html;
+}
+
+// ═══ Friends & DM Rendering ═══
+
+function renderFriendsView() {
+  // Hide normal chat area, show friends view
+  document.getElementById('chatArea').style.display = 'none';
+  document.getElementById('memberList').style.display = 'none';
+  document.getElementById('dmProfile').classList.add('hidden');
+  const fv = document.getElementById('friendsView');
+  fv.style.display = 'flex';
+
+  let html = '';
+  // Header with tabs
+  html += '<div class="friends-header">';
+  html += '<div class="fh-title"><span class="fh-icon">👥</span>Friends</div>';
+  html += '<div class="fh-divider"></div>';
+  ['online','all','pending'].forEach(tab => {
+    const label = tab.charAt(0).toUpperCase() + tab.slice(1);
+    const count = tab === 'pending' && PENDING_REQUESTS.length ? ` (${PENDING_REQUESTS.length})` : '';
+    html += `<button class="friends-tab ${state.friendsTab===tab?'active':''}" onclick="switchFriendsTab('${tab}')">${label}${count}</button>`;
+  });
+  html += '<button class="friends-tab add-friend" onclick="switchFriendsTab(\'add\')">Add Friend</button>';
+  html += '</div>';
+
+  if (state.friendsTab === 'add') {
+    html += '<div class="add-friend-form"><h2>Add Friend</h2><p>You can add a friend with their username.</p>';
+    html += '<div class="add-friend-input-row"><input class="add-friend-input" placeholder="Enter a username" id="addFriendInput"><button class="add-friend-submit" onclick="sendFriendRequest()">Send Friend Request</button></div></div>';
+    html += '<div class="friends-list"></div>';
+  } else {
+    html += '<div class="friends-list">';
+    html += '<div class="friends-search-bar"><input class="friends-search" placeholder="Search" id="friendsSearchInput" oninput="renderFriendsView()"></div>';
+
+    let filtered = FRIENDS;
+    const searchQ = document.getElementById('friendsSearchInput')?.value?.toLowerCase() || '';
+    if (searchQ) filtered = filtered.filter(f => f.username.toLowerCase().includes(searchQ));
+
+    if (state.friendsTab === 'online') filtered = filtered.filter(f => f.status !== 'offline');
+    if (state.friendsTab === 'pending') {
+      html += `<div class="friends-count">Pending — ${PENDING_REQUESTS.length}</div>`;
+      PENDING_REQUESTS.forEach(r => {
+        html += `<div class="friend-item">`;
+        html += `<div class="fi-avatar" style="background:${r.avatar};">${r.username[0]}<div class="fi-status-dot" style="background:${statusColor(r.status)};"></div></div>`;
+        html += `<div class="fi-info"><div class="fi-name">${r.username}</div><div class="fi-status-text">Incoming Friend Request</div></div>`;
+        html += '<div class="fi-actions" style="opacity:1;">';
+        html += `<button class="fi-action-btn" title="Accept" onclick="acceptFriendRequest(${r.id})" style="color:var(--green);">✓</button>`;
+        html += `<button class="fi-action-btn" title="Decline" onclick="declineFriendRequest(${r.id})" style="color:var(--red);">✕</button>`;
+        html += '</div></div>';
+      });
+      filtered = []; // don't show regular friends in pending tab
+    }
+
+    const label = state.friendsTab === 'online' ? 'Online' : state.friendsTab === 'all' ? 'All Friends' : '';
+    if (label) html += `<div class="friends-count">${label} — ${filtered.length}</div>`;
+
+    filtered.forEach(f => {
+      html += `<div class="friend-item" onclick="openDm(${f.id})">`;
+      html += `<div class="fi-avatar" style="background:${f.avatar};">${f.username[0]}<div class="fi-status-dot" style="background:${statusColor(f.status)};"></div></div>`;
+      html += `<div class="fi-info"><div class="fi-name">${f.username}</div><div class="fi-status-text">${statusLabel(f.status)}</div></div>`;
+      html += '<div class="fi-actions">';
+      html += `<button class="fi-action-btn" title="Message" onclick="event.stopPropagation();openDm(${f.id})">💬</button>`;
+      html += `<button class="fi-action-btn" title="More" onclick="event.stopPropagation();showToast('Context menu')">⋯</button>`;
+      html += '</div></div>';
+    });
+
+    html += '</div>';
+  }
+
+  fv.innerHTML = html;
+}
+
+function renderDmMessages() {
+  // Show normal chat area elements but with DM content
+  document.getElementById('chatArea').style.display = 'flex';
+  document.getElementById('friendsView').style.display = 'none';
+  document.getElementById('memberList').style.display = 'none';
+
+  const f = getFriend(state.activeDmFriend);
+  if (!f) return;
+
+  // Update header to DM style
+  document.getElementById('chatChannelName').textContent = f.username;
+  document.getElementById('chatChannelTopic').textContent = '';
+  document.querySelector('.ch-hash').textContent = '@';
+  document.getElementById('msgInput').placeholder = `Message @${f.username}`;
+
+  // Render DM profile sidebar
+  renderDmProfile(f);
+
+  // Render messages
+  const msgs = DM_MESSAGES[state.activeDmFriend] || [];
+  const container = document.getElementById('messagesContainer');
+  let html = '';
+
+  // Welcome banner
+  html += '<div style="padding:16px 16px 24px;text-align:center;">';
+  html += `<div style="width:64px;height:64px;border-radius:50%;background:${f.avatar};display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;color:white;margin-bottom:8px;">${f.username[0]}</div>`;
+  html += `<div style="font-size:20px;font-weight:700;color:white;">${f.username}</div>`;
+  html += `<div style="font-size:13px;color:var(--text-muted);margin-top:4px;">This is the beginning of your direct message history with <strong style="color:white;">${f.username}</strong>.</div>`;
+  html += '</div>';
+
+  html += '<div class="msg-day-divider"><div class="line"></div><span class="date">March 15, 2026</span><div class="line"></div></div>';
+
+  msgs.forEach(msg => {
+    if (msg.system) return;
+    const m = msg.userId === 0 ? SELF : f;
+    const isGrouped = msg.grouped;
+
+    html += `<div class="message ${isGrouped?'grouped':''}" data-msg-id="${msg.id}">`;
+    if (!isGrouped) {
+      html += `<div class="msg-avatar" style="background:${m.avatar};">${m.username[0]}</div>`;
+      html += '<div class="msg-header">';
+      html += `<span class="msg-author" style="color:var(--text-normal);">${m.username}</span>`;
+      html += `<span class="msg-time">Today at ${msg.time}</span>`;
+      html += '</div>';
+    } else {
+      html += `<span class="msg-hover-time">${msg.time.replace(/ (AM|PM)/,'')}</span>`;
+    }
+    if (msg.text) html += `<div class="msg-text">${escapeHtml(msg.text)}</div>`;
+    if (msg.reactions && msg.reactions.length) {
+      html += '<div class="msg-reactions">';
+      msg.reactions.forEach(r => {
+        html += `<div class="reaction-chip ${r.me?'me':''}" onclick="toggleDmReaction('${msg.id}','${r.emoji}')">${r.emoji}<span class="rc-count">${r.count}</span></div>`;
+      });
+      html += '</div>';
+    }
+    html += '<div class="msg-actions-bar">';
+    html += `<button title="React" onclick="showEmojiForReaction(event,'${msg.id}')">😊</button>`;
+    html += `<button title="Reply" onclick="startReply('${msg.id}')">↩</button>`;
+    html += '<button title="More">⋯</button>';
+    html += '</div>';
+    html += '</div>';
+  });
+
+  container.innerHTML = html;
+  container.scrollTop = container.scrollHeight;
+}
+
+function renderDmProfile(f) {
+  const dp = document.getElementById('dmProfile');
+  if (!state.dmProfileVisible) { dp.classList.add('hidden'); return; }
+  dp.classList.remove('hidden');
+  dp.style.width = '340px';
+
+  let html = '';
+  html += `<div class="dm-profile-banner" style="background:${f.avatar};"></div>`;
+  html += '<div class="dm-profile-body">';
+  html += `<div class="dm-profile-avatar" style="background:${f.avatar};">${f.username[0]}</div>`;
+  html += `<div class="dm-profile-name">${f.username}</div>`;
+  html += `<div class="dm-profile-role" style="color:${statusColor(f.status)};">${statusLabel(f.status)}</div>`;
+
+  if (f.about) {
+    html += '<div class="dm-profile-section">';
+    html += '<div class="dm-profile-section-title">About Me</div>';
+    html += `<div class="dm-profile-section-text">${f.about}</div>`;
+    html += '</div>';
+  }
+
+  html += '<div class="dm-profile-section">';
+  html += '<div class="dm-profile-section-title">Member Since</div>';
+  html += '<div class="dm-profile-section-text">March 1, 2026</div>';
+  html += '</div>';
+
+  if (f.mutualServers && f.mutualServers.length) {
+    html += '<div class="dm-profile-section">';
+    html += `<div class="dm-profile-section-title">Mutual Servers — ${f.mutualServers.length}</div>`;
+    f.mutualServers.forEach(sname => {
+      const srv = SERVERS.find(s => s.name === sname);
+      html += '<div class="dm-profile-mutual">';
+      html += `<div class="dpm-avatar" style="background:${srv?srv.color:'var(--accent)'};">${sname[0]}</div>`;
+      html += `<span class="dpm-name">${sname}</span>`;
+      html += '</div>';
+    });
+    html += '</div>';
+  }
+
+  html += '</div>';
+  dp.innerHTML = html;
+}
+
+function renderStatusPicker() {
+  const el = document.getElementById('statusPicker');
+  const statuses = ['online','idle','dnd','offline'];
+  let html = '';
+  statuses.forEach(s => {
+    html += `<button class="status-option" onclick="setStatus('${s}')"><div class="so-dot" style="background:${statusColor(s)};"></div>${statusLabel(s)}</button>`;
+  });
+  el.innerHTML = html;
+}
+
+function renderEmojiPicker() {
+  const el = document.getElementById('emojiGrid');
+  let html = '';
+  Object.entries(EMOJI_DATA).forEach(([cat, emojis]) => {
+    html += `<div class="ep-category-label">${cat}</div>`;
+    html += '<div class="ep-grid">';
+    emojis.forEach(e => {
+      html += `<button class="ep-emoji" data-emoji="${e}" onclick="pickEmoji('${e}')">${e}</button>`;
+    });
+    html += '</div>';
+  });
+  el.innerHTML = html;
+}
+
+function renderAll() {
+  renderServerStrip();
+  renderChannelSidebar();
+  if (isHomeServer()) {
+    if (state.activeDmFriend) {
+      renderDmMessages();
+    } else {
+      renderFriendsView();
+    }
+  } else {
+    // Restore normal server view
+    document.getElementById('chatArea').style.display = 'flex';
+    document.getElementById('friendsView').style.display = 'none';
+    document.getElementById('dmProfile').classList.add('hidden');
+    document.getElementById('memberList').style.display = '';
+    document.querySelector('.ch-hash').textContent = '#';
+    renderMessages();
+    renderMemberList();
+  }
+}
+
+// ═══════════════════════════════════════════
+// ACTIONS
+// ═══════════════════════════════════════════
+
+function switchServer(id) {
+  state.activeServer = id;
+  if (id === 'home') {
+    state.activeDmFriend = null;
+    state.homeView = 'friends';
+  } else {
+    state.activeDmFriend = null;
+    const srv = getServer();
+    const firstText = srv.channels.flatMap(c => c.items).find(ch => ch.type === 'text');
+    state.activeChannel = firstText ? firstText.id : '';
+  }
+  closePopups();
+  renderAll();
+}
+
+function switchChannel(id) {
+  // Clear unread on the channel we're switching to
+  const srv = getServer();
+  for (const cat of srv.channels) for (const ch of cat.items) if (ch.id === id) ch.unread = 0;
+  state.activeChannel = id;
+  state.replyingTo = null;
+  document.getElementById('replyBar').classList.remove('visible');
+  document.getElementById('inputBox').classList.remove('reply-mode');
+  closePopups();
+  renderAll();
+}
+
+function sendMessage() {
+  const input = document.getElementById('msgInput');
+  const text = input.value.trim();
+  if (!text) return;
+
+  const isDm = isHomeServer() && state.activeDmFriend;
+
+  const newMsg = {
+    id: 'msg_' + Date.now(),
+    userId: 0,
+    text: text,
+    time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }),
+    reactions: [],
+  };
+
+  if (isDm) {
+    if (!DM_MESSAGES[state.activeDmFriend]) DM_MESSAGES[state.activeDmFriend] = [];
+    const msgs = DM_MESSAGES[state.activeDmFriend];
+    const last = msgs[msgs.length - 1];
+    if (last && last.userId === 0) newMsg.grouped = true;
+    msgs.push(newMsg);
+  } else {
+    if (state.replyingTo) {
+      newMsg.replyTo = state.replyingTo;
+      cancelReply();
+    }
+    const msgs = MESSAGES[state.activeChannel] || [];
+    const last = msgs[msgs.length - 1];
+    if (last && last.userId === 0 && !last.system) newMsg.grouped = true;
+    if (!MESSAGES[state.activeChannel]) MESSAGES[state.activeChannel] = [];
+    MESSAGES[state.activeChannel].push(newMsg);
+  }
+
+  input.value = '';
+  renderMessages();
+
+  // Simulate typing response
+  setTimeout(() => simulateTyping(), 800);
+}
+
+function simulateTyping() {
+  const isDm = isHomeServer() && state.activeDmFriend;
+  let responder;
+
+  if (isDm) {
+    responder = FRIENDS.find(f => f.id === state.activeDmFriend);
+  } else {
+    const srv = getServer();
+    if (!srv) return;
+    responder = srv.members.find(m => m.status === 'online' && m.id !== 0);
+  }
+  if (!responder) return;
+
+  const bar = document.getElementById('typingBar');
+  bar.innerHTML = `<div class="typing-dots"><span></span><span></span><span></span></div><span><strong>${responder.username}</strong> is typing...</span>`;
+
+  setTimeout(() => {
+    bar.innerHTML = '';
+    const replies = [
+      'Nice!', 'Interesting, tell me more.', 'Got it 👍', 'Makes sense!',
+      'I was thinking the same thing.', 'Let me look into that.',
+      'Good point!', 'Agreed.', 'That\'s a great idea!',
+    ];
+    const replyMsg = {
+      id: 'msg_' + Date.now(),
+      userId: responder.id,
+      text: replies[Math.floor(Math.random() * replies.length)],
+      time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }),
+      reactions: [],
+    };
+
+    if (isDm) {
+      if (!DM_MESSAGES[state.activeDmFriend]) DM_MESSAGES[state.activeDmFriend] = [];
+      DM_MESSAGES[state.activeDmFriend].push(replyMsg);
+    } else {
+      if (!MESSAGES[state.activeChannel]) MESSAGES[state.activeChannel] = [];
+      MESSAGES[state.activeChannel].push(replyMsg);
+    }
+    renderMessages();
+  }, 1500 + Math.random() * 1500);
+}
+
+function startReply(msgId) {
+  state.replyingTo = msgId;
+  const msgs = MESSAGES[state.activeChannel] || [];
+  const msg = msgs.find(m => m.id === msgId);
+  const srv = getServer();
+  const author = getMember(msg.userId, srv);
+  document.getElementById('replyToName').textContent = author.username;
+  document.getElementById('replyBar').classList.add('visible');
+  document.getElementById('inputBox').classList.add('reply-mode');
+  document.getElementById('msgInput').focus();
+}
+
+function cancelReply() {
+  state.replyingTo = null;
+  document.getElementById('replyBar').classList.remove('visible');
+  document.getElementById('inputBox').classList.remove('reply-mode');
+}
+
+function toggleReaction(msgId, emoji) {
+  const msgs = MESSAGES[state.activeChannel] || [];
+  const msg = msgs.find(m => m.id === msgId);
+  if (!msg) return;
+  if (!msg.reactions) msg.reactions = [];
+  const existing = msg.reactions.find(r => r.emoji === emoji);
+  if (existing) {
+    if (existing.me) { existing.count--; existing.me = false; if (existing.count <= 0) msg.reactions = msg.reactions.filter(r => r !== existing); }
+    else { existing.count++; existing.me = true; }
+  } else {
+    msg.reactions.push({ emoji, count: 1, me: true });
+  }
+  renderMessages();
+}
+
+function joinVoice(channelId) {
+  if (state.voiceChannel === channelId) return;
+  const srv = getServer();
+  // Remove self from old voice state
+  srv.voiceStates = srv.voiceStates.filter(vs => vs.userId !== 0);
+  state.voiceChannel = channelId;
+  const ch = srv.channels.flatMap(c => c.items).find(c => c.id === channelId);
+  showToast(`Joined voice: ${ch ? ch.name : channelId}`);
+  renderChannelSidebar();
+}
+
+function leaveVoice() {
+  const srv = getServer();
+  srv.voiceStates = srv.voiceStates.filter(vs => vs.userId !== 0);
+  state.voiceChannel = null;
+  state.isMuted = false;
+  state.isDeafened = false;
+  showToast('Disconnected from voice');
+  renderChannelSidebar();
+}
+
+function toggleMute() {
+  state.isMuted = !state.isMuted;
+  if (state.isMuted) showToast('Muted'); else showToast('Unmuted');
+  renderChannelSidebar();
+}
+
+function toggleDeafen() {
+  state.isDeafened = !state.isDeafened;
+  if (state.isDeafened) { state.isMuted = true; showToast('Deafened'); }
+  else { showToast('Undeafened'); }
+  renderChannelSidebar();
+}
+
+function toggleMembers() {
+  if (isHomeServer() && state.activeDmFriend) {
+    state.dmProfileVisible = !state.dmProfileVisible;
+    document.getElementById('toggleMembersBtn').classList.toggle('active', state.dmProfileVisible);
+    renderDmProfile(getFriend(state.activeDmFriend));
+    return;
+  }
+  state.memberListVisible = !state.memberListVisible;
+  document.getElementById('toggleMembersBtn').classList.toggle('active', state.memberListVisible);
+  renderMemberList();
+}
+
+// ═══ DM / Friends Actions ═══
+
+function showFriends() {
+  state.activeDmFriend = null;
+  state.homeView = 'friends';
+  renderAll();
+}
+
+function openDm(friendId) {
+  state.activeServer = 'home';
+  state.activeDmFriend = friendId;
+  state.homeView = 'dm';
+  // Ensure DM conversation exists
+  if (!DM_CONVERSATIONS.find(d => d.friendId === friendId)) {
+    DM_CONVERSATIONS.push({ friendId, unread: 0, lastMsg: '' });
+  }
+  // Clear unread
+  const dm = DM_CONVERSATIONS.find(d => d.friendId === friendId);
+  if (dm) dm.unread = 0;
+  // Ensure messages array exists
+  if (!DM_MESSAGES[friendId]) DM_MESSAGES[friendId] = [];
+  closePopups();
+  renderAll();
+}
+
+function closeDm(friendId) {
+  const idx = DM_CONVERSATIONS.findIndex(d => d.friendId === friendId);
+  if (idx !== -1) DM_CONVERSATIONS.splice(idx, 1);
+  if (state.activeDmFriend === friendId) {
+    state.activeDmFriend = null;
+    state.homeView = 'friends';
+  }
+  renderAll();
+}
+
+function switchFriendsTab(tab) {
+  state.friendsTab = tab;
+  renderFriendsView();
+}
+
+function sendFriendRequest() {
+  const input = document.getElementById('addFriendInput');
+  if (input && input.value.trim()) {
+    showToast(`Friend request sent to ${input.value.trim()}`);
+    input.value = '';
+  }
+}
+
+function acceptFriendRequest(id) {
+  const req = PENDING_REQUESTS.find(r => r.id === id);
+  if (req) {
+    FRIENDS.push({ ...req, about: 'New friend!', mutualServers: [] });
+    PENDING_REQUESTS.splice(PENDING_REQUESTS.indexOf(req), 1);
+    showToast(`${req.username} is now your friend!`);
+    renderFriendsView();
+  }
+}
+
+function declineFriendRequest(id) {
+  const idx = PENDING_REQUESTS.findIndex(r => r.id === id);
+  if (idx !== -1) {
+    const name = PENDING_REQUESTS[idx].username;
+    PENDING_REQUESTS.splice(idx, 1);
+    showToast(`Declined request from ${name}`);
+    renderFriendsView();
+  }
+}
+
+function dmFromPopup() {
+  const name = document.getElementById('upName').textContent;
+  // Find the friend or user by name
+  const friend = FRIENDS.find(f => f.username === name);
+  if (friend) {
+    openDm(friend.id);
+  } else {
+    // Not a friend yet, find in server members and add as DM-able
+    const srv = getServer();
+    const member = srv ? srv.members.find(m => m.username === name) : null;
+    if (member) {
+      // Create a temporary friend entry for DMing
+      if (!FRIENDS.find(f => f.username === name)) {
+        FRIENDS.push({ id: member.id + 1000, username: member.username, avatar: member.avatar, status: member.status, about: '', mutualServers: [srv.name] });
+      }
+      const f = FRIENDS.find(f2 => f2.username === name);
+      openDm(f.id);
+    } else {
+      showToast('Cannot message this user');
+    }
+  }
+  document.getElementById('userPopup').classList.remove('open');
+}
+
+function setStatus(s) {
+  state.selfStatus = s;
+  SELF.status = s;
+  toggleStatusPicker();
+  renderChannelSidebar();
+  showToast(`Status: ${statusLabel(s)}`);
+}
+
+function toggleStatusPicker() {
+  state.statusPickerOpen = !state.statusPickerOpen;
+  document.getElementById('statusPicker').classList.toggle('open', state.statusPickerOpen);
+}
+
+function showUserPopup(event, userId) {
+  event.stopPropagation();
+  const srv = getServer();
+  const m = getMember(userId, srv);
+  const popup = document.getElementById('userPopup');
+  document.getElementById('upBanner').style.background = m.avatar;
+  document.getElementById('upAvatar').style.background = m.avatar;
+  document.getElementById('upAvatar').textContent = m.username[0];
+  document.getElementById('upName').textContent = m.username;
+  document.getElementById('upRole').style.color = m.roleColor || 'var(--text-muted)';
+  document.getElementById('upRole').textContent = (m.role||'member').charAt(0).toUpperCase() + (m.role||'member').slice(1);
+  document.getElementById('upJoined').textContent = 'March 1, 2026';
+  document.getElementById('upRoles').innerHTML = `<div class="up-role-tag"><div class="up-role-dot" style="background:${m.roleColor||'var(--text-muted)'};"></div>${(m.role||'member').charAt(0).toUpperCase()+(m.role||'member').slice(1)}</div>`;
+
+  // Position near click
+  const rect = event.target.getBoundingClientRect();
+  let left = rect.right + 8;
+  let top = rect.top;
+  if (left + 300 > window.innerWidth) left = rect.left - 308;
+  if (top + 300 > window.innerHeight) top = window.innerHeight - 310;
+  popup.style.left = left + 'px';
+  popup.style.top = Math.max(8, top) + 'px';
+  popup.classList.add('open');
+}
+
+function toggleEmojiPicker(event) {
+  event && event.stopPropagation();
+  state.emojiPickerOpen = !state.emojiPickerOpen;
+  const picker = document.getElementById('emojiPicker');
+  picker.classList.toggle('open', state.emojiPickerOpen);
+  if (state.emojiPickerOpen) {
+    state._emojiTarget = null; // inserting into message input
+    const inputArea = document.getElementById('inputWrap');
+    const rect = inputArea.getBoundingClientRect();
+    picker.style.left = (rect.right - 330) + 'px';
+    picker.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+    picker.style.top = 'auto';
+    document.getElementById('emojiSearch').value = '';
+    filterEmoji();
+  }
+}
+
+function showEmojiForReaction(event, msgId) {
+  event.stopPropagation();
+  state._emojiTarget = msgId;
+  state.emojiPickerOpen = true;
+  const picker = document.getElementById('emojiPicker');
+  picker.classList.add('open');
+  const rect = event.target.getBoundingClientRect();
+  picker.style.left = Math.min(rect.left, window.innerWidth - 330) + 'px';
+  picker.style.top = (rect.bottom + 8) + 'px';
+  picker.style.bottom = 'auto';
+  document.getElementById('emojiSearch').value = '';
+  filterEmoji();
+}
+
+function pickEmoji(emoji) {
+  if (state._emojiTarget) {
+    toggleReaction(state._emojiTarget, emoji);
+  } else {
+    const input = document.getElementById('msgInput');
+    input.value += emoji;
+    input.focus();
+  }
+  state.emojiPickerOpen = false;
+  document.getElementById('emojiPicker').classList.remove('open');
+}
+
+function filterEmoji() {
+  const q = document.getElementById('emojiSearch').value.toLowerCase();
+  document.querySelectorAll('.ep-emoji').forEach(el => {
+    el.style.display = q ? (el.dataset.emoji.includes(q) ? '' : 'none') : '';
+  });
+}
+
+// ═══ Settings ═══
+
+const SETTINGS_NAV = [
+  { cat: 'User Settings', items: [
+    { id: 'account', icon: '👤', label: 'My Account' },
+    { id: 'appearance', icon: '🎨', label: 'Appearance' },
+    { id: 'notifications', icon: '🔔', label: 'Notifications' },
+  ]},
+  { cat: 'App Settings', items: [
+    { id: 'voice', icon: '🎤', label: 'Voice & Audio' },
+    { id: 'keybinds', icon: '⌨', label: 'Keybinds' },
+  ]},
+  { cat: 'About', items: [
+    { id: 'info', icon: '🔰', label: 'Info' },
+  ]},
+];
+
+function openSettings() {
+  state.settingsOpen = true;
+  state.settingsPage = 'account';
+  renderSettings();
+  document.getElementById('settingsOverlay').classList.add('open');
+}
+
+function closeSettings() {
+  state.settingsOpen = false;
+  document.getElementById('settingsOverlay').classList.remove('open');
+}
+
+function renderSettings() {
+  // Sidebar
+  let nav = '';
+  SETTINGS_NAV.forEach(cat => {
+    nav += `<div class="settings-cat">${cat.cat}</div>`;
+    cat.items.forEach(item => {
+      nav += `<button class="settings-nav-item ${state.settingsPage===item.id?'active':''}" onclick="switchSettingsPage('${item.id}')">${item.icon} ${item.label}</button>`;
+    });
+    nav += '<div class="settings-sep"></div>';
+  });
+  nav += '<button class="settings-nav-item danger" onclick="showToast(\'Logged out (simulated)\');closeSettings();">🚪 Log Out</button>';
+  document.getElementById('settingsSidebar').innerHTML = nav;
+
+  // Content
+  const content = document.getElementById('settingsContent');
+  let html = '';
+
+  if (state.settingsPage === 'account') {
+    html = `<h1>My Account</h1>
+    <div class="account-card"><div class="ac-avatar" style="background:${SELF.avatar};">${SELF.username[0]}</div><div><div class="ac-name">${SELF.username}</div><div class="ac-id">User ID: 1</div></div><button class="ac-btn" onclick="showToast('Edit profile dialog would open')">Edit Profile</button></div>
+    <h3>Password</h3><div class="setting-row"><div><div class="setting-label">Change Password</div><div class="setting-desc">You'll need your current password to set a new one.</div></div><button class="ac-btn" style="font-size:12px;padding:6px 12px;" onclick="showToast('Change password dialog would open')">Change</button></div>
+    <h3>Two-Factor Authentication</h3><div class="setting-row"><div><div class="setting-label">Enable 2FA</div><div class="setting-desc">Add an extra layer of security with TOTP.</div></div><div class="toggle" onclick="this.classList.toggle('on');showToast(this.classList.contains('on')?'2FA enabled (simulated)':'2FA disabled (simulated)')"></div></div>
+    <h3>Sessions</h3><div class="setting-row"><div><div class="setting-label">Active Sessions</div><div class="setting-desc">1 active session (this device).</div></div><button class="ac-btn" style="font-size:12px;padding:6px 12px;background:var(--red);" onclick="showToast('Would revoke all other sessions')">Revoke All</button></div>`;
+  }
+  else if (state.settingsPage === 'appearance') {
+    html = `<h1>Appearance</h1>
+    <h3>Theme</h3><div class="setting-row" style="flex-direction:column;align-items:flex-start;"><div class="setting-label">Color Theme</div><div class="theme-options"><div class="theme-opt dark active" onclick="selectTheme(this)">Dark</div><div class="theme-opt midnight" onclick="selectTheme(this)">Midnight</div><div class="theme-opt light" onclick="selectTheme(this)">Light</div></div></div>
+    <h3>Chat</h3>
+    <div class="setting-row"><div><div class="setting-label">Compact Mode</div><div class="setting-desc">Reduce spacing between messages.</div></div><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
+    <div class="setting-row" style="flex-direction:column;align-items:stretch;"><div class="setting-label">Font Size</div><div class="slider-row" style="margin-top:8px;"><input type="range" class="settings-slider" min="12" max="20" value="14" oninput="this.nextElementSibling.textContent=this.value+'px'"><span class="slider-val">14px</span></div></div>`;
+  }
+  else if (state.settingsPage === 'notifications') {
+    html = `<h1>Notifications</h1>
+    <h3>Desktop Notifications</h3>
+    <div class="setting-row"><div><div class="setting-label">Enable Desktop Notifications</div><div class="setting-desc">Show Windows toast notifications for new messages.</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
+    <div class="setting-row"><div><div class="setting-label">Notification Sounds</div><div class="setting-desc">Play a sound when you receive a notification.</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
+    <div class="setting-row"><div><div class="setting-label">Flash Taskbar</div><div class="setting-desc">Flash the taskbar icon for unread messages.</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
+    <h3>Muting</h3>
+    <div class="setting-row"><div><div class="setting-label">Suppress @everyone</div><div class="setting-desc">Don't notify for @everyone mentions.</div></div><div class="toggle" onclick="this.classList.toggle('on')"></div></div>`;
+  }
+  else if (state.settingsPage === 'voice') {
+    html = `<h1>Voice & Audio</h1>
+    <h3>Input</h3>
+    <div class="setting-row"><div><div class="setting-label">Input Device</div><div class="setting-desc">Microphone for voice chat.</div></div><select class="settings-select"><option>Default - Microphone (Realtek)</option><option>Headset Microphone (HyperX)</option></select></div>
+    <div class="setting-row" style="flex-direction:column;align-items:stretch;"><div class="setting-label">Input Volume</div><div class="slider-row" style="margin-top:8px;"><input type="range" class="settings-slider" min="0" max="100" value="80" oninput="this.nextElementSibling.textContent=this.value+'%'"><span class="slider-val">80%</span></div></div>
+    <h3>Output</h3>
+    <div class="setting-row"><div><div class="setting-label">Output Device</div><div class="setting-desc">Speakers or headphones.</div></div><select class="settings-select"><option>Default - Speakers (Realtek)</option><option>Headphones (HyperX Cloud II)</option></select></div>
+    <div class="setting-row" style="flex-direction:column;align-items:stretch;"><div class="setting-label">Output Volume</div><div class="slider-row" style="margin-top:8px;"><input type="range" class="settings-slider" min="0" max="100" value="100" oninput="this.nextElementSibling.textContent=this.value+'%'"><span class="slider-val">100%</span></div></div>
+    <h3>Processing</h3>
+    <div class="setting-row"><div><div class="setting-label">Noise Suppression</div><div class="setting-desc">Reduce background noise (RNNoise).</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
+    <div class="setting-row"><div><div class="setting-label">Voice Activity Detection</div><div class="setting-desc">Automatically detect when you're speaking.</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
+    <div class="setting-row" style="flex-direction:column;align-items:stretch;"><div class="setting-label">VAD Sensitivity</div><div class="slider-row" style="margin-top:8px;"><input type="range" class="settings-slider" min="0" max="100" value="60" oninput="this.nextElementSibling.textContent=this.value+'%'"><span class="slider-val">60%</span></div></div>
+    <div class="setting-row"><div><div class="setting-label">Echo Cancellation</div><div class="setting-desc">Prevent feedback loops from speakers.</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>`;
+  }
+  else if (state.settingsPage === 'keybinds') {
+    html = `<h1>Keybinds</h1>
+    <div class="setting-desc" style="margin-bottom:16px;">Click a keybind to change it. Press Escape to cancel.</div>
+    <div class="keybind-row"><div class="setting-label">Push to Talk</div><div><span class="kbd">V</span></div></div>
+    <div class="keybind-row"><div class="setting-label">Toggle Mute</div><div><span class="kbd">Ctrl</span> <span style="color:var(--text-micro)">+</span> <span class="kbd">Shift</span> <span style="color:var(--text-micro)">+</span> <span class="kbd">M</span></div></div>
+    <div class="keybind-row"><div class="setting-label">Toggle Deafen</div><div><span class="kbd">Ctrl</span> <span style="color:var(--text-micro)">+</span> <span class="kbd">Shift</span> <span style="color:var(--text-micro)">+</span> <span class="kbd">D</span></div></div>
+    <div class="keybind-row"><div class="setting-label">Quick Switcher</div><div><span class="kbd">Ctrl</span> <span style="color:var(--text-micro)">+</span> <span class="kbd">K</span></div></div>
+    <div class="keybind-row"><div class="setting-label">Edit Last Message</div><div><span class="kbd">↑</span></div></div>
+    <div class="keybind-row"><div class="setting-label">Close Panel</div><div><span class="kbd">Esc</span></div></div>`;
+  }
+  else if (state.settingsPage === 'info') {
+    html = `<h1>About OwnCord</h1>
+    <div class="account-card" style="flex-direction:column;align-items:flex-start;gap:8px;">
+      <div style="font-size:24px;font-weight:700;color:white;">OwnCord</div>
+      <div style="color:var(--text-muted);">Version 1.0.0</div>
+      <div style="color:var(--text-muted);margin-top:8px;line-height:1.6;">
+        Self-hosted chat platform for friends.<br>
+        Server: Go + SQLite + Pion WebRTC<br>
+        Client: Native Windows (WPF)<br><br>
+        <span style="color:var(--text-link);cursor:pointer;">github.com/J3vb/OwnCord</span>
+      </div>
+    </div>`;
+  }
+
+  content.innerHTML = html;
+}
+
+function switchSettingsPage(id) {
+  state.settingsPage = id;
+  renderSettings();
+}
+
+function selectTheme(el) {
+  el.parentElement.querySelectorAll('.theme-opt').forEach(o => o.classList.remove('active'));
+  el.classList.add('active');
+  showToast('Theme changed (visual only in prototype)');
+}
+
+// ═══ Utilities ═══
+
+function escapeHtml(s) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+function closePopups() {
+  document.getElementById('userPopup').classList.remove('open');
+  document.getElementById('emojiPicker').classList.remove('open');
+  document.getElementById('statusPicker').classList.remove('open');
+  state.emojiPickerOpen = false;
+  state.statusPickerOpen = false;
+}
+
+let _toastTimer;
+function showToast(msg) {
+  const el = document.getElementById('toast');
+  el.textContent = msg;
+  el.classList.add('show');
+  clearTimeout(_toastTimer);
+  _toastTimer = setTimeout(() => el.classList.remove('show'), 2500);
+}
+
+// ═══ Event Listeners ═══
+
+document.getElementById('msgInput').addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+});
+
+document.addEventListener('click', e => {
+  if (!e.target.closest('.user-popup') && !e.target.closest('.msg-avatar') && !e.target.closest('.member-item') && !e.target.closest('.voice-user-item') && !e.target.closest('.msg-author')) {
+    document.getElementById('userPopup').classList.remove('open');
+  }
+  if (!e.target.closest('.emoji-picker') && !e.target.closest('.input-btn') && !e.target.closest('.reaction-chip') && !e.target.closest('.msg-actions-bar')) {
+    document.getElementById('emojiPicker').classList.remove('open');
+    state.emojiPickerOpen = false;
+  }
+  if (!e.target.closest('.status-picker') && !e.target.closest('.ub-avatar')) {
+    document.getElementById('statusPicker').classList.remove('open');
+    state.statusPickerOpen = false;
+  }
+});
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') {
+    if (state.settingsOpen) closeSettings();
+    else closePopups();
+  }
+});
+
+// ═══ INIT ═══
+renderStatusPicker();
+renderEmojiPicker();
+renderAll();
+document.getElementById('toggleMembersBtn').classList.add('active');
+</script>
+</body>
+</html>
diff --git a/PROTOCOL.md b/PROTOCOL.md
index 36b088b9..fc6e5538 100644
--- a/PROTOCOL.md
+++ b/PROTOCOL.md
@@ -1,6 +1,8 @@
 # WebSocket Protocol Spec
 
-All client-server communication (except file uploads and admin panel) happens over a single WebSocket connection. Messages are JSON with a `type` and `payload`.
+All client-server communication (except file uploads and
+admin panel) happens over a single WebSocket connection.
+Messages are JSON with a `type` and `payload`.
 
 ## Message Format
 
@@ -31,7 +33,17 @@ Server responses to client requests include the same `id` for correlation.
 ### Server → Client (success)
 
 ```json
-{ "type": "auth_ok", "payload": { "user": { "id": 1, "username": "alex", "avatar": "uuid.png", "role": "admin" }, "server_name": "My Server", "motd": "Welcome!" } }
+{
+  "type": "auth_ok",
+  "payload": {
+    "user": {
+      "id": 1, "username": "alex",
+      "avatar": "uuid.png", "role": "admin"
+    },
+    "server_name": "My Server",
+    "motd": "Welcome!"
+  }
+}
 ```
 
 ### Server → Client (failure)
@@ -49,31 +61,81 @@ Connection is closed by server after auth_error.
 ### Send Message (Client → Server)
 
 ```json
-{ "type": "chat_send", "id": "req-uuid", "payload": { "channel_id": 5, "content": "Hello everyone!", "reply_to": null, "attachments": ["upload-uuid-1"] } }
+{
+  "type": "chat_send",
+  "id": "req-uuid",
+  "payload": {
+    "channel_id": 5,
+    "content": "Hello everyone!",
+    "reply_to": null,
+    "attachments": ["upload-uuid-1"]
+  }
+}
 ```
 
 ### Message Broadcast (Server → Client)
 
 ```json
-{ "type": "chat_message", "payload": { "id": 1042, "channel_id": 5, "user": { "id": 1, "username": "alex", "avatar": "uuid.png" }, "content": "Hello everyone!", "reply_to": null, "attachments": [{ "id": "upload-uuid-1", "filename": "photo.jpg", "size": 204800, "mime": "image/jpeg", "url": "/files/upload-uuid-1" }], "timestamp": "2026-03-14T10:30:00Z" } }
+{
+  "type": "chat_message",
+  "payload": {
+    "id": 1042, "channel_id": 5,
+    "user": {
+      "id": 1, "username": "alex",
+      "avatar": "uuid.png"
+    },
+    "content": "Hello everyone!",
+    "reply_to": null,
+    "attachments": [{
+      "id": "upload-uuid-1",
+      "filename": "photo.jpg",
+      "size": 204800,
+      "mime": "image/jpeg",
+      "url": "/files/upload-uuid-1"
+    }],
+    "timestamp": "2026-03-14T10:30:00Z"
+  }
+}
 ```
 
 ### Send Ack (Server → Client)
 
 ```json
-{ "type": "chat_send_ok", "id": "req-uuid", "payload": { "message_id": 1042, "timestamp": "2026-03-14T10:30:00Z" } }
+{
+  "type": "chat_send_ok",
+  "id": "req-uuid",
+  "payload": {
+    "message_id": 1042,
+    "timestamp": "2026-03-14T10:30:00Z"
+  }
+}
 ```
 
 ### Edit Message (Client → Server)
 
 ```json
-{ "type": "chat_edit", "id": "req-uuid", "payload": { "message_id": 1042, "content": "Hello everyone! (edited)" } }
+{
+  "type": "chat_edit",
+  "id": "req-uuid",
+  "payload": {
+    "message_id": 1042,
+    "content": "Hello everyone! (edited)"
+  }
+}
 ```
 
 ### Edit Broadcast (Server → Client)
 
 ```json
-{ "type": "chat_edited", "payload": { "message_id": 1042, "channel_id": 5, "content": "Hello everyone! (edited)", "edited_at": "2026-03-14T10:31:00Z" } }
+{
+  "type": "chat_edited",
+  "payload": {
+    "message_id": 1042,
+    "channel_id": 5,
+    "content": "Hello everyone! (edited)",
+    "edited_at": "2026-03-14T10:31:00Z"
+  }
+}
 ```
 
 ### Delete Message (Client → Server)
@@ -98,7 +160,16 @@ Connection is closed by server after auth_error.
 ### Reaction Broadcast (Server → Client)
 
 ```json
-{ "type": "reaction_update", "payload": { "message_id": 1042, "channel_id": 5, "emoji": "👍", "user_id": 1, "action": "add" } }
+{
+  "type": "reaction_update",
+  "payload": {
+    "message_id": 1042,
+    "channel_id": 5,
+    "emoji": "👍",
+    "user_id": 1,
+    "action": "add"
+  }
+}
 ```
 
 ---
@@ -114,7 +185,14 @@ Connection is closed by server after auth_error.
 ### Server → Client (broadcast to channel members)
 
 ```json
-{ "type": "typing", "payload": { "channel_id": 5, "user_id": 1, "username": "alex" } }
+{
+  "type": "typing",
+  "payload": {
+    "channel_id": 5,
+    "user_id": 1,
+    "username": "alex"
+  }
+}
 ```
 
 Client-side: show indicator for 5 seconds, reset on new typing event from same user.
@@ -123,7 +201,7 @@ Client-side: show indicator for 5 seconds, reset on new typing event from same u
 
 ## Presence
 
-### Client → Server
+### Presence Client → Server
 
 ```json
 { "type": "presence_update", "payload": { "status": "online" } }
@@ -131,7 +209,7 @@ Client-side: show indicator for 5 seconds, reset on new typing event from same u
 
 Status values: `online`, `idle`, `dnd`, `offline`
 
-### Server → Client (broadcast)
+### Presence Server → Client (broadcast)
 
 ```json
 { "type": "presence", "payload": { "user_id": 1, "status": "online" } }
@@ -146,8 +224,21 @@ Server auto-sets `idle` after 10 minutes of no WebSocket activity.
 ### Server → Client (on channel created/edited/deleted/reordered)
 
 ```json
-{ "type": "channel_create", "payload": { "id": 8, "name": "gaming", "type": "text", "category": "Hangout", "position": 3 } }
-{ "type": "channel_update", "payload": { "id": 8, "name": "gaming-talk", "position": 4 } }
+{
+  "type": "channel_create",
+  "payload": {
+    "id": 8, "name": "gaming",
+    "type": "text",
+    "category": "Hangout", "position": 3
+  }
+}
+{
+  "type": "channel_update",
+  "payload": {
+    "id": 8, "name": "gaming-talk",
+    "position": 4
+  }
+}
 { "type": "channel_delete", "payload": { "id": 8 } }
 ```
 
@@ -166,7 +257,16 @@ Channel types: `text`, `voice`, `announcement`
 ### Server → Client (voice state updates, broadcast to channel)
 
 ```json
-{ "type": "voice_state", "payload": { "channel_id": 10, "user_id": 1, "username": "alex", "muted": false, "deafened": false, "speaking": false } }
+{
+  "type": "voice_state",
+  "payload": {
+    "channel_id": 10, "user_id": 1,
+    "username": "alex",
+    "muted": false, "deafened": false,
+    "speaking": false,
+    "camera": false, "screenshare": false
+  }
+}
 ```
 
 ### Voice User Left (Server → Client)
@@ -175,7 +275,29 @@ Channel types: `text`, `voice`, `announcement`
 { "type": "voice_leave", "payload": { "channel_id": 10, "user_id": 1 } }
 ```
 
-### WebRTC Signaling (bidirectional)
+### Voice Config (Server → Client, sent after voice_join acceptance)
+
+```json
+{
+  "type": "voice_config",
+  "payload": {
+    "channel_id": 10, "quality": "medium", "bitrate": 64000,
+    "threshold_mode": "forwarding", "mixing_threshold": 10,
+    "top_speakers": 3, "max_users": 50
+  }
+}
+```
+
+Client uses `bitrate` to configure the Opus encoder. Other fields are
+informational for UI.
+
+### WebRTC Signaling (Client ↔ Server SFU)
+
+**Note:** As of the SFU migration, `voice_offer`/`voice_answer`/`voice_ice`
+are exchanged between each client and the **server** (not relayed between
+clients). The server is the WebRTC peer.
+
+Clients must include RFC 6464 `ssrc-audio-level` RTP header extension in SDP offers.
 
 ```json
 { "type": "voice_offer", "payload": { "channel_id": 10, "sdp": "..." } }
@@ -190,6 +312,33 @@ Channel types: `text`, `voice`, `announcement`
 { "type": "voice_deafen", "payload": { "deafened": true } }
 ```
 
+### Voice Camera / Screenshare (Client → Server)
+
+```json
+{ "type": "voice_camera", "payload": { "enabled": true } }
+{ "type": "voice_screenshare", "payload": { "enabled": true } }
+```
+
+Requires `USE_VIDEO` (bit 11) or `SHARE_SCREEN` (bit 12) permission.
+Rate limit: 2/sec per user.
+
+### Active Speakers (Server → Client)
+
+```json
+{
+  "type": "voice_speakers",
+  "payload": {
+    "channel_id": 10, "speakers": [1, 5, 12],
+    "threshold_mode": "forwarding"
+  }
+}
+```
+
+- `speakers`: Active speaker user IDs (up to top-N)
+- `threshold_mode`: `"forwarding"` or `"selective"`
+- Sent on speaker list changes or mode transitions
+- Rate: at most once per 200ms per channel
+
 ### Soundboard (Client → Server)
 
 ```json
@@ -203,7 +352,15 @@ Channel types: `text`, `voice`, `announcement`
 ### Server → Client
 
 ```json
-{ "type": "member_join", "payload": { "user": { "id": 5, "username": "newuser", "avatar": null, "role": "member" } } }
+{
+  "type": "member_join",
+  "payload": {
+    "user": {
+      "id": 5, "username": "newuser",
+      "avatar": null, "role": "member"
+    }
+  }
+}
 { "type": "member_leave", "payload": { "user_id": 5 } }
 { "type": "member_update", "payload": { "user_id": 5, "role": "moderator" } }
 { "type": "member_ban", "payload": { "user_id": 5 } }
@@ -213,7 +370,7 @@ Channel types: `text`, `voice`, `announcement`
 
 ## Server Restart
 
-### Server → Client
+### Restart Server → Client
 
 ```json
 {
@@ -228,32 +385,58 @@ Channel types: `text`, `voice`, `announcement`
 - `reason` (string): Why the server is restarting. Currently only `"update"`.
 - `delay_seconds` (integer): How many seconds until the server shuts down.
 
-Client behavior: Display a banner/notification ("Server restarting for update..."), then auto-reconnect using existing reconnection logic after the delay expires.
+Client behavior: Display a banner ("Server restarting..."),
+then auto-reconnect after the delay expires.
 
 ---
 
 ## Initial State (sent after auth_ok)
 
-### Server → Client
+### Ready Server → Client
 
 ```json
 {
   "type": "ready",
   "payload": {
     "channels": [
-      { "id": 1, "name": "general", "type": "text", "category": "Main", "position": 0, "unread_count": 3, "last_message_id": 1040 },
-      { "id": 10, "name": "voice-chat", "type": "voice", "category": "Main", "position": 1 }
+      {
+        "id": 1, "name": "general",
+        "type": "text", "category": "Main",
+        "position": 0, "unread_count": 3,
+        "last_message_id": 1040
+      },
+      {
+        "id": 10, "name": "voice-chat",
+        "type": "voice", "category": "Main",
+        "position": 1
+      }
     ],
     "members": [
-      { "id": 1, "username": "alex", "avatar": "uuid.png", "role": "admin", "status": "online" },
-      { "id": 2, "username": "jordan", "avatar": null, "role": "member", "status": "idle" }
+      {
+        "id": 1, "username": "alex",
+        "avatar": "uuid.png",
+        "role": "admin", "status": "online"
+      },
+      {
+        "id": 2, "username": "jordan",
+        "avatar": null,
+        "role": "member", "status": "idle"
+      }
     ],
     "voice_states": [
       { "channel_id": 10, "user_id": 2, "muted": false, "deafened": false }
     ],
     "roles": [
-      { "id": 1, "name": "Owner", "color": "#E74C3C", "permissions": 2147483647 },
-      { "id": 2, "name": "Admin", "color": "#F39C12", "permissions": 1073741823 },
+      {
+        "id": 1, "name": "Owner",
+        "color": "#E74C3C",
+        "permissions": 2147483647
+      },
+      {
+        "id": 2, "name": "Admin",
+        "color": "#F39C12",
+        "permissions": 1073741823
+      },
       { "id": 3, "name": "Member", "color": null, "permissions": 1049601 }
     ]
   }
@@ -266,8 +449,8 @@ Client behavior: Display a banner/notification ("Server restarting for update...
 
 Fetched via REST API, not WebSocket, to keep the WS connection lean.
 
-```
-GET /api/channels/{id}/messages?before={message_id}&limit=50
+```text
+GET /api/channels/{id}/messages?before={msg_id}&limit=50
 ```
 
 ---
@@ -277,10 +460,18 @@ GET /api/channels/{id}/messages?before={message_id}&limit=50
 Any request that fails returns:
 
 ```json
-{ "type": "error", "id": "original-req-uuid", "payload": { "code": "FORBIDDEN", "message": "You don't have permission to post in this channel" } }
+{
+  "type": "error",
+  "id": "original-req-uuid",
+  "payload": {
+    "code": "FORBIDDEN",
+    "message": "No permission to post here"
+  }
+}
 ```
 
-Error codes: `FORBIDDEN`, `NOT_FOUND`, `RATE_LIMITED`, `INVALID_INPUT`, `SERVER_ERROR`
+Error codes: `FORBIDDEN`, `NOT_FOUND`, `RATE_LIMITED`, `INVALID_INPUT`,
+`SERVER_ERROR`, `CHANNEL_FULL`, `INVALID_SDP`, `VOICE_ERROR`, `VIDEO_LIMIT`
 
 ---
 
@@ -291,6 +482,7 @@ Error codes: `FORBIDDEN`, `NOT_FOUND`, `RATE_LIMITED`, `INVALID_INPUT`, `SERVER_
 - Presence updates: 1/10sec per user
 - Reactions: 5/sec per user
 - Voice signaling: 20/sec per user
+- Voice camera/screenshare: 2/sec per user
 - Soundboard: 1/3sec per user
 
 Server sends `rate_limited` error with `retry_after` in seconds.
diff --git a/SCHEMA.md b/SCHEMA.md
index 90ab21db..89e13c42 100644
--- a/SCHEMA.md
+++ b/SCHEMA.md
@@ -1,6 +1,7 @@
 # Database Schema (SQLite)
 
-Single file: `data/chatserver.db`. WAL mode enabled. Migrations run automatically on server startup.
+Single file: `data/chatserver.db`. WAL mode enabled.
+Migrations run automatically on startup.
 
 ---
 
@@ -62,7 +63,7 @@ CREATE TABLE roles (
 
 ### Permission Bitfield
 
-```
+```text
 Bit 0:  SEND_MESSAGES        (0x1)
 Bit 1:  READ_MESSAGES         (0x2)
 Bit 5:  ATTACH_FILES          (0x20)
@@ -88,15 +89,19 @@ Bit 30: ADMINISTRATOR          (0x40000000) -- bypasses all checks
 
 ```sql
 CREATE TABLE channels (
-    id       INTEGER PRIMARY KEY AUTOINCREMENT,
-    name     TEXT    NOT NULL,
-    type     TEXT    NOT NULL DEFAULT 'text',  -- text, voice, announcement
-    category TEXT,                              -- category name for grouping
-    topic    TEXT,                              -- channel description
-    position INTEGER NOT NULL DEFAULT 0,
-    slow_mode INTEGER NOT NULL DEFAULT 0,      -- seconds between messages, 0 = off
-    archived INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    name             TEXT    NOT NULL,
+    type             TEXT    NOT NULL DEFAULT 'text',  -- text, voice, announcement
+    category         TEXT,                              -- category name for grouping
+    topic            TEXT,                              -- channel description
+    position         INTEGER NOT NULL DEFAULT 0,
+    slow_mode        INTEGER NOT NULL DEFAULT 0,  -- seconds, 0=off
+    archived         INTEGER NOT NULL DEFAULT 0,
+    created_at       TEXT NOT NULL DEFAULT (datetime('now')),
+    voice_max_users  INTEGER NOT NULL DEFAULT 0,        -- 0 = unlimited
+    voice_quality    TEXT,                    -- low|medium|high; NULL=default
+    mixing_threshold INTEGER,                           -- NULL = server default
+    voice_max_video  INTEGER NOT NULL DEFAULT 10  -- max video streams
 );
 ```
 
@@ -147,11 +152,13 @@ CREATE TRIGGER messages_ai AFTER INSERT ON messages BEGIN
 END;
 
 CREATE TRIGGER messages_ad AFTER DELETE ON messages BEGIN
-    INSERT INTO messages_fts(messages_fts, rowid, content) VALUES('delete', old.id, old.content);
+    INSERT INTO messages_fts(messages_fts, rowid, content)
+        VALUES('delete', old.id, old.content);
 END;
 
 CREATE TRIGGER messages_au AFTER UPDATE ON messages BEGIN
-    INSERT INTO messages_fts(messages_fts, rowid, content) VALUES('delete', old.id, old.content);
+    INSERT INTO messages_fts(messages_fts, rowid, content)
+        VALUES('delete', old.id, old.content);
     INSERT INTO messages_fts(rowid, content) VALUES (new.id, new.content);
 END;
 ```
@@ -218,7 +225,7 @@ CREATE TABLE read_states (
 CREATE TABLE audit_log (
     id         INTEGER PRIMARY KEY AUTOINCREMENT,
     user_id    INTEGER REFERENCES users(id),
-    action     TEXT    NOT NULL,  -- e.g. user_ban, channel_create, message_delete, role_update
+    action     TEXT    NOT NULL,  -- e.g. user_ban, channel_create
     target_type TEXT,             -- user, channel, message, role, invite
     target_id   INTEGER,
     details    TEXT,              -- JSON with extra context
@@ -282,10 +289,31 @@ CREATE TABLE sounds (
 
 ---
 
+## Voice States
+
+```sql
+CREATE TABLE voice_states (
+    user_id     INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+    channel_id  INTEGER NOT NULL REFERENCES channels(id) ON DELETE CASCADE,
+    muted       INTEGER NOT NULL DEFAULT 0,
+    deafened    INTEGER NOT NULL DEFAULT 0,
+    speaking    INTEGER NOT NULL DEFAULT 0,
+    camera      INTEGER NOT NULL DEFAULT 0,
+    screenshare INTEGER NOT NULL DEFAULT 0,
+    joined_at   TEXT    NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE INDEX idx_voice_states_channel ON voice_states(channel_id);
+```
+
+On startup: `DELETE FROM voice_states;` clears stale state from previous run.
+
+---
+
 ## Notes
 
 - All datetimes stored as ISO 8601 UTC strings.
 - Enable WAL mode on connection: `PRAGMA journal_mode=WAL;`
 - Enable foreign keys: `PRAGMA foreign_keys=ON;`
 - Use `modernc.org/sqlite` (pure Go, no CGO needed).
-- Migrations: store schema version in `settings` table, apply incremental SQL on startup.
+- Migrations: schema version in `settings`, apply incremental SQL on startup.
diff --git a/Server/admin/api_test.go b/Server/admin/api_test.go
index 17b97314..c64e2699 100644
--- a/Server/admin/api_test.go
+++ b/Server/admin/api_test.go
@@ -59,15 +59,19 @@ CREATE TABLE IF NOT EXISTS sessions (
 CREATE INDEX IF NOT EXISTS idx_sessions_token ON sessions(token);
 
 CREATE TABLE IF NOT EXISTS channels (
-    id         INTEGER PRIMARY KEY AUTOINCREMENT,
-    name       TEXT    NOT NULL,
-    type       TEXT    NOT NULL DEFAULT 'text',
-    category   TEXT,
-    topic      TEXT,
-    position   INTEGER NOT NULL DEFAULT 0,
-    slow_mode  INTEGER NOT NULL DEFAULT 0,
-    archived   INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT    NOT NULL DEFAULT (datetime('now'))
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    name             TEXT    NOT NULL,
+    type             TEXT    NOT NULL DEFAULT 'text',
+    category         TEXT,
+    topic            TEXT,
+    position         INTEGER NOT NULL DEFAULT 0,
+    slow_mode        INTEGER NOT NULL DEFAULT 0,
+    archived         INTEGER NOT NULL DEFAULT 0,
+    created_at       TEXT    NOT NULL DEFAULT (datetime('now')),
+    voice_max_users  INTEGER NOT NULL DEFAULT 0,
+    voice_quality    TEXT,
+    mixing_threshold INTEGER,
+    voice_max_video  INTEGER NOT NULL DEFAULT 0
 );
 
 CREATE TABLE IF NOT EXISTS messages (
diff --git a/Server/admin/static/admin-mockup.html b/Server/admin/static/admin-mockup.html
new file mode 100644
index 00000000..14f99569
--- /dev/null
+++ b/Server/admin/static/admin-mockup.html
@@ -0,0 +1,1300 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OwnCord — Admin Panel</title>
+<style>
+  /* ═══════════════════════════════════════════
+     DESIGN TOKENS (shared with client mockups)
+     ═══════════════════════════════════════════ */
+  :root {
+    --bg-tertiary:   #1e1f22;
+    --bg-secondary:  #2b2d31;
+    --bg-primary:    #313338;
+    --bg-input:      #1e1f22;
+    --bg-hover:      #35373c;
+    --bg-active:     #404249;
+    --bg-overlay:    rgba(0,0,0,.7);
+    --bg-card:       #2b2d31;
+    --bg-table-hover:rgba(88,101,242,.06);
+    --accent:        #5865f2;
+    --accent-hover:  #4752c4;
+    --accent-active: #3c45a5;
+    --accent-glow:   rgba(88,101,242,.25);
+    --text-normal:   #dbdee1;
+    --text-muted:    #949ba4;
+    --text-faint:    #80848e;
+    --text-micro:    #6d6f78;
+    --text-link:     #00a8fc;
+    --green:         #23a55a;
+    --yellow:        #f0b232;
+    --red:           #f23f43;
+    --red-bg:        #2d1214;
+    --border:        #3f4147;
+    --border-strong: #4e5058;
+    --role-owner:    #e74c3c;
+    --role-admin:    #f39c12;
+    --role-mod:      #2ecc71;
+    --role-member:   #949ba4;
+    --font-display: "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
+    --font-body:    "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
+    --font-mono:    "Cascadia Code","Consolas",monospace;
+    --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
+    --sidebar-w:240px;
+  }
+
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+  html,body{height:100%;overflow:hidden}
+  body{font-family:var(--font-body);font-size:14px;color:var(--text-normal);background:var(--bg-tertiary);-webkit-font-smoothing:antialiased}
+  button{font-family:inherit;border:none;cursor:pointer;outline:none}
+  input,select,textarea{font-family:inherit;border:none;outline:none}
+  ::-webkit-scrollbar{width:6px}
+  ::-webkit-scrollbar-track{background:transparent}
+  ::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:3px}
+  ::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}
+
+  /* ═══ Layout ═══ */
+  .admin{display:flex;height:100vh}
+
+  /* ═══ Sidebar ═══ */
+  .sidebar{width:var(--sidebar-w);background:var(--bg-secondary);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
+  .sidebar-header{padding:20px 16px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
+  .sidebar-brand{display:flex;align-items:center;gap:10px}
+  .sidebar-logo{width:36px;height:36px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
+  .sidebar-logo svg{width:22px;height:22px}
+  .sidebar-title{font-size:15px;font-weight:700;color:white}
+  .sidebar-subtitle{font-size:11px;color:var(--text-faint);letter-spacing:.03em}
+  .sidebar-nav{flex:1;padding:8px}
+  .sidebar-label{font-size:11px;font-weight:700;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase;padding:12px 12px 4px}
+  .sidebar-sep{height:1px;background:var(--border);margin:4px 12px}
+  .nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);font-size:14px;color:var(--text-muted);background:transparent;width:100%;text-align:left;transition:all .15s;position:relative}
+  .nav-item:hover{background:var(--bg-hover);color:var(--text-normal)}
+  .nav-item.active{background:var(--bg-active);color:white}
+  .nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.7}
+  .nav-item.active svg{opacity:1}
+  .nav-item.danger{color:var(--red)}
+  .nav-item.danger:hover{background:rgba(242,63,67,.1)}
+  .nav-item .nav-badge{margin-left:auto;background:var(--accent);color:white;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;min-width:18px;text-align:center}
+  .nav-item .unsaved-dot{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--yellow)}
+  .sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;font-size:11px;color:var(--text-micro);text-align:center}
+
+  /* ═══ Content ═══ */
+  .content{flex:1;overflow-y:auto;padding:32px 40px;background:var(--bg-primary)}
+  .page-title{font-size:22px;font-weight:700;color:white;margin-bottom:4px}
+  .page-desc{font-size:13px;color:var(--text-faint);margin-bottom:24px}
+
+  /* ═══ Stat Cards ═══ */
+  .stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:24px}
+  .stat-card{background:var(--bg-card);border-radius:var(--radius-md);padding:18px 20px;border:1px solid var(--border);transition:border-color .2s}
+  .stat-card:hover{border-color:var(--border-strong)}
+  .stat-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
+  .stat-card-label{font-size:11px;font-weight:700;color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase}
+  .stat-card-icon{width:32px;height:32px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
+  .stat-card-icon svg{width:16px;height:16px}
+  .stat-card-value{font-size:28px;font-weight:700;color:white;font-family:var(--font-mono);line-height:1.1}
+  .stat-card-sub{font-size:12px;color:var(--text-faint);margin-top:4px;font-family:var(--font-mono)}
+
+  /* Usage bar */
+  .usage-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:8px}
+  .usage-fill{height:100%;border-radius:3px;transition:width .6s ease}
+  .usage-fill.ok{background:var(--green)}
+  .usage-fill.warn{background:var(--yellow)}
+  .usage-fill.danger{background:var(--red)}
+
+  /* ═══ Section Cards ═══ */
+  .section-card{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border);margin-bottom:20px;overflow:hidden}
+  .section-card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
+  .section-card-header h3{font-size:14px;font-weight:700;color:white}
+  .section-card-body{padding:16px 20px}
+  .section-card-body.no-pad{padding:0}
+
+  /* ═══ Tables ═══ */
+  .tbl{width:100%;border-collapse:collapse}
+  .tbl th{font-size:11px;font-weight:700;color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:10px 16px;border-bottom:2px solid var(--border)}
+  .tbl td{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
+  .tbl tr:hover td{background:var(--bg-table-hover)}
+  .tbl tr:last-child td{border-bottom:none}
+
+  /* Avatar */
+  .avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:white;flex-shrink:0}
+  .avatar-sm{width:22px;height:22px;font-size:10px}
+
+  /* Status dot */
+  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0}
+  .dot.online{background:var(--green)}.dot.offline{background:var(--text-micro)}.dot.banned{background:var(--red)}
+
+  /* Role badge */
+  .role-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.06)}
+  .role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+
+  /* Action buttons */
+  .act-btn{width:28px;height:28px;border-radius:var(--radius-sm);background:transparent;color:var(--text-faint);display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
+  .act-btn:hover{background:var(--bg-active);color:var(--text-normal)}
+  .act-btn.danger:hover{background:var(--red);color:white}
+  .act-btn svg{width:14px;height:14px}
+  .act-group{display:flex;gap:2px}
+
+  /* Badges */
+  .badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}
+  .badge-green{background:rgba(35,165,90,.15);color:var(--green)}
+  .badge-red{background:rgba(242,63,67,.15);color:var(--red)}
+  .badge-yellow{background:rgba(240,178,50,.15);color:var(--yellow)}
+  .badge-muted{background:rgba(128,132,142,.15);color:var(--text-faint)}
+  .badge-accent{background:var(--accent-glow);color:var(--accent)}
+
+  /* ═══ Filter Bar ═══ */
+  .filter-bar{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
+  .filter-search{flex:1;min-width:200px;padding:8px 12px 8px 34px;background:var(--bg-input);color:var(--text-normal);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;transition:border-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236d6f78' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%236d6f78' stroke-width='2' fill='none'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' stroke='%236d6f78' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}
+  .filter-search::placeholder{color:var(--text-micro)}
+  .filter-search:focus{border-color:var(--accent)}
+  .filter-select{padding:8px 28px 8px 10px;background:var(--bg-input);color:var(--text-normal);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2380848e' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
+  .filter-select:focus{border-color:var(--accent)}
+
+  /* ═══ Buttons ═══ */
+  .btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
+  .btn-accent{background:var(--accent);color:white}.btn-accent:hover{background:var(--accent-hover)}
+  .btn-danger{background:var(--red);color:white}.btn-danger:hover{background:#d83135}
+  .btn-ghost{background:var(--bg-hover);color:var(--text-muted)}.btn-ghost:hover{background:var(--bg-active);color:var(--text-normal)}
+  .btn-outline{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--border-strong);color:var(--text-normal)}
+  .btn:disabled{opacity:.5;cursor:not-allowed}
+  .btn .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .6s linear infinite}
+  @keyframes spin{to{transform:rotate(360deg)}}
+
+  /* ═══ Forms ═══ */
+  .form-group{margin-bottom:16px}
+  .form-label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
+  .form-label .req{color:var(--red);margin-left:2px}
+  .form-input{width:100%;padding:10px 12px;background:var(--bg-input);color:var(--text-normal);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;transition:border-color .2s}
+  .form-input::placeholder{color:var(--text-micro)}
+  .form-input:focus{border-color:var(--accent)}
+  .form-textarea{resize:vertical;min-height:80px}
+  .toggle{width:40px;height:22px;border-radius:11px;background:var(--border-strong);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;padding:0}
+  .toggle.on{background:var(--green)}
+  .toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .2s}
+  .toggle.on::after{transform:translateX(18px)}
+  .setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
+  .setting-row:last-child{border-bottom:none}
+  .setting-info{flex:1;min-width:0}
+  .setting-name{font-size:14px;color:var(--text-normal);margin-bottom:2px}
+  .setting-desc{font-size:12px;color:var(--text-faint)}
+  .setting-ctrl{flex-shrink:0;margin-left:16px}
+
+  /* ═══ Modals ═══ */
+  .modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:none;align-items:center;justify-content:center;z-index:100}
+  .modal-overlay.visible{display:flex}
+  .modal{background:var(--bg-primary);border-radius:var(--radius-md);width:480px;max-height:80vh;overflow-y:auto;box-shadow:0 8px 48px rgba(0,0,0,.5);animation:modalIn .25s cubic-bezier(.16,1,.3,1)}
+  @keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
+  .modal-header{padding:20px 24px 0;display:flex;align-items:center;justify-content:space-between}
+  .modal-header h3{font-size:18px;font-weight:700;color:white}
+  .modal-close{background:transparent;color:var(--text-faint);font-size:20px;padding:4px;border-radius:var(--radius-sm);transition:color .15s}
+  .modal-close:hover{color:var(--text-normal)}
+  .modal-body{padding:20px 24px}
+  .modal-footer{padding:16px 24px;background:var(--bg-secondary);border-radius:0 0 var(--radius-md) var(--radius-md);display:flex;justify-content:flex-end;gap:8px}
+
+  /* ═══ Pagination ═══ */
+  .pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 0;margin-top:4px}
+  .pagination-info{font-size:12px;color:var(--text-faint)}
+  .pagination-btns{display:flex;gap:4px}
+  .page-btn{width:32px;height:32px;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s}
+  .page-btn:hover{background:var(--bg-hover);color:var(--text-normal)}
+  .page-btn.active{background:var(--accent);color:white}
+  .page-btn:disabled{opacity:.3;cursor:not-allowed}
+
+  /* ═══ Permission toggles ═══ */
+  .perm-grid{display:grid;gap:0}
+  .perm-row{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
+  .perm-row:last-child{border-bottom:none}
+  .perm-name{flex:1;font-size:13px;color:var(--text-normal)}
+  .perm-name small{display:block;font-size:11px;color:var(--text-micro);font-family:var(--font-mono)}
+  .perm-toggles{display:flex;gap:4px}
+  .perm-btn{padding:3px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;background:var(--bg-hover);color:var(--text-faint);transition:all .15s}
+  .perm-btn:hover{color:var(--text-normal)}
+  .perm-btn.allow{background:rgba(35,165,90,.2);color:var(--green)}
+  .perm-btn.deny{background:rgba(242,63,67,.2);color:var(--red)}
+  .perm-btn.inherit{background:var(--bg-hover);color:var(--text-faint)}
+
+  /* ═══ Sub-tabs ═══ */
+  .sub-tabs{display:flex;gap:4px;margin-bottom:20px}
+  .sub-tab{padding:6px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-muted);background:transparent;transition:all .15s}
+  .sub-tab:hover{background:var(--bg-hover);color:var(--text-normal)}
+  .sub-tab.active{background:var(--bg-active);color:white}
+
+  /* ═══ Toast ═══ */
+  .toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:var(--radius-md);font-size:13px;font-weight:600;display:none;align-items:center;gap:8px;z-index:200;box-shadow:0 4px 24px rgba(0,0,0,.4);animation:toastIn .3s cubic-bezier(.16,1,.3,1)}
+  .toast.visible{display:flex}
+  .toast.success{background:var(--green);color:white}
+  .toast.error{background:var(--red);color:white}
+  .toast.info{background:var(--accent);color:white}
+  @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+
+  /* ═══ Activity item ═══ */
+  .activity-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
+  .activity-item:last-child{border-bottom:none}
+  .activity-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+  .activity-icon svg{width:14px;height:14px}
+  .activity-text{font-size:13px;color:var(--text-muted);line-height:1.4}
+  .activity-text strong{color:var(--text-normal)}
+  .activity-time{font-size:11px;color:var(--text-micro);margin-top:2px}
+
+  /* ═══ Copyable code ═══ */
+  .code-copy{display:flex;align-items:center;gap:8px;background:var(--bg-tertiary);padding:8px 12px;border-radius:var(--radius-sm);margin-top:8px}
+  .code-copy code{flex:1;font-family:var(--font-mono);font-size:13px;color:var(--text-link);word-break:break-all}
+  .code-copy .btn{padding:4px 10px;font-size:11px}
+
+  /* ═══ Update card ═══ */
+  .update-card{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border)}
+  .update-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
+  .update-icon svg{width:24px;height:24px}
+  .update-info{flex:1}
+  .update-ver{font-size:18px;font-weight:700;color:white}
+  .update-notes{font-size:13px;color:var(--text-faint);margin-top:6px;line-height:1.5}
+
+  /* ═══ Toggle (accessible) ═══ */
+  .toggle{appearance:none;-webkit-appearance:none;border:none;font:inherit;color:inherit}
+
+  /* ═══ Responsive ═══ */
+  @media(max-width:900px){
+    .sidebar{width:200px}
+    .content{padding:24px 20px}
+    .stat-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
+  }
+  @media(max-width:600px){
+    .admin{flex-direction:column}
+    .sidebar{width:100%;height:auto;max-height:56px;overflow:hidden;flex-direction:row;align-items:center}
+    .sidebar.expanded{max-height:100vh;flex-direction:column}
+    .sidebar-header{padding:12px 16px}
+    .sidebar-nav{display:flex;flex-wrap:wrap;gap:2px;padding:4px 8px}
+    .sidebar-label,.sidebar-sep{display:none}
+    .nav-item{padding:6px 10px;font-size:12px}
+    .content{padding:16px 12px}
+    .stat-grid{grid-template-columns:1fr 1fr}
+    .filter-bar{flex-direction:column}
+    .filter-search{min-width:unset}
+    .modal{width:95vw;max-height:90vh}
+  }
+</style>
+</head>
+<body>
+
+<div class="admin" data-wpf-component="AdminShell" data-wpf-notes="Grid: sidebar NavigationView + content Frame">
+  <!-- ═══ Sidebar ═══ -->
+  <div class="sidebar" id="sidebar" data-wpf-component="NavigationView" data-wpf-notes="WPF NavigationView with MenuItems, PaneDisplayMode=Left">
+    <div class="sidebar-header">
+      <div class="sidebar-brand">
+        <div class="sidebar-logo">
+          <svg viewBox="0 0 24 24" fill="white"><path d="M12 2L4 5.5v5c0 5.25 3.4 10.15 8 11.5 4.6-1.35 8-6.25 8-11.5v-5L12 2zm0 3l1.5 3h3.2l-2.6 1.9 1 3.1L12 11.1 8.9 13l1-3.1L7.3 8h3.2L12 5z"/></svg>
+        </div>
+        <div>
+          <div class="sidebar-title">OwnCord</div>
+          <div class="sidebar-subtitle">Admin Panel</div>
+        </div>
+      </div>
+    </div>
+    <nav class="sidebar-nav" id="sidebarNav" role="navigation" aria-label="Admin sections"><!-- JS --></nav>
+    <div class="sidebar-footer">OwnCord v1.2.0</div>
+  </div>
+
+  <!-- ═══ Content ═══ -->
+  <div class="content" id="content" data-wpf-component="Frame" data-wpf-notes="Frame navigates between admin Page subclasses"><!-- JS --></div>
+</div>
+
+<!-- ═══ Modal ═══ -->
+<div class="modal-overlay" id="modal" role="dialog" aria-modal="true" aria-hidden="true">
+  <div class="modal" id="modalInner"><!-- JS --></div>
+</div>
+
+<!-- ═══ Toast ═══ -->
+<div class="toast" id="toast" role="status" aria-live="polite"></div>
+
+<script>
+/* ═══════════════════════════════════════════
+   ICONS (inline SVG strings)
+   ═══════════════════════════════════════════ */
+const I = {
+  dashboard:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>',
+  users:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
+  channels:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>',
+  invites:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
+  settings:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>',
+  moderation:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
+  backup:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" y1="16" x2="6.01" y2="16"/><line x1="10" y1="16" x2="10.01" y2="16"/></svg>',
+  updates:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>',
+  logout:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
+  edit:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+  trash:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
+  ban:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>',
+  kick:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="18" y1="8" x2="23" y2="13"/><line x1="23" y1="8" x2="18" y2="13"/></svg>',
+  key:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>',
+  copy:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
+  check:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+  plus:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
+  refresh:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>',
+  disconnect:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+  voice:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>',
+  megaphone:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
+  download:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
+  roles:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+};
+
+/* ═══════════════════════════════════════════
+   MOCK DATA
+   ═══════════════════════════════════════════ */
+const ROLES = [
+  { id:1, name:'Owner',     color:'#e74c3c', perms:0x7FFFFFFF, position:100 },
+  { id:2, name:'Admin',     color:'#f39c12', perms:0x3FFFFFFF, position:80 },
+  { id:3, name:'Moderator', color:'#2ecc71', perms:0x000FFFFF, position:50 },
+  { id:4, name:'Member',    color:'#949ba4', perms:0x00000663, position:10 },
+];
+
+const PERMS = [
+  { name:'Send Messages',   bit:0x1 },
+  { name:'Read Messages',   bit:0x2 },
+  { name:'Attach Files',    bit:0x20 },
+  { name:'Add Reactions',   bit:0x40 },
+  { name:'Use Soundboard',  bit:0x100 },
+  { name:'Connect Voice',   bit:0x200 },
+  { name:'Speak Voice',     bit:0x400 },
+  { name:'Use Video',       bit:0x800 },
+  { name:'Share Screen',    bit:0x1000 },
+  { name:'Manage Messages', bit:0x10000 },
+  { name:'Manage Channels', bit:0x20000 },
+  { name:'Kick Members',    bit:0x40000 },
+  { name:'Ban Members',     bit:0x80000 },
+  { name:'Mute Members',    bit:0x100000 },
+  { name:'Manage Roles',    bit:0x1000000 },
+  { name:'Manage Server',   bit:0x2000000 },
+  { name:'Manage Invites',  bit:0x4000000 },
+  { name:'View Audit Log',  bit:0x8000000 },
+  { name:'Administrator',   bit:0x40000000 },
+];
+
+const USERS = [
+  { id:1,  username:'LordJebus',   color:'#5865f2', role_id:1, status:'online',  created:'2025-12-01', last_seen:'Just now',    banned:0, totp:true,  sessions:2 },
+  { id:2,  username:'alex_dev',    color:'#57f287', role_id:2, status:'online',  created:'2025-12-15', last_seen:'Just now',    banned:0, totp:true,  sessions:1 },
+  { id:3,  username:'sarah_mod',   color:'#eb459e', role_id:3, status:'online',  created:'2026-01-03', last_seen:'Just now',    banned:0, totp:false, sessions:1 },
+  { id:4,  username:'mike_gamer',  color:'#f47b67', role_id:4, status:'online',  created:'2026-01-10', last_seen:'2 min ago',   banned:0, totp:false, sessions:1 },
+  { id:5,  username:'jessica',     color:'#9b59b6', role_id:4, status:'online',  created:'2026-01-15', last_seen:'5 min ago',   banned:0, totp:false, sessions:1 },
+  { id:6,  username:'dave_music',  color:'#1abc9c', role_id:4, status:'offline', created:'2026-01-20', last_seen:'3 hours ago', banned:0, totp:false, sessions:0 },
+  { id:7,  username:'emma_art',    color:'#e67e22', role_id:4, status:'offline', created:'2026-02-01', last_seen:'Yesterday',   banned:0, totp:false, sessions:0 },
+  { id:8,  username:'toxic_user',  color:'#ed4245', role_id:4, status:'offline', created:'2026-02-10', last_seen:'1 week ago',  banned:1, totp:false, sessions:0, ban_reason:'Harassment' },
+  { id:9,  username:'bob_builder', color:'#f0b232', role_id:4, status:'offline', created:'2026-02-15', last_seen:'2 days ago',  banned:0, totp:false, sessions:0 },
+  { id:10, username:'newbie42',    color:'#5865f2', role_id:4, status:'online',  created:'2026-03-10', last_seen:'Just now',    banned:0, totp:false, sessions:1 },
+  { id:11, username:'coolcat',     color:'#57f287', role_id:4, status:'online',  created:'2026-03-12', last_seen:'1 min ago',   banned:0, totp:false, sessions:1 },
+  { id:12, username:'nightowl',    color:'#eb459e', role_id:3, status:'online',  created:'2026-02-20', last_seen:'Just now',    banned:0, totp:true,  sessions:1 },
+];
+
+const CHANNELS = [
+  { id:1, name:'general',       type:'text',         category:'Text Channels',  topic:'General chat', slow_mode:0, archived:false },
+  { id:2, name:'announcements', type:'announcement', category:'Text Channels',  topic:'Server news',  slow_mode:0, archived:false },
+  { id:3, name:'dev-talk',      type:'text',         category:'Development',    topic:'Code talk',    slow_mode:5, archived:false },
+  { id:4, name:'bug-reports',   type:'text',         category:'Development',    topic:'Report bugs',  slow_mode:0, archived:false },
+  { id:5, name:'gaming',        type:'text',         category:'Fun',            topic:'',             slow_mode:0, archived:false },
+  { id:6, name:'memes',         type:'text',         category:'Fun',            topic:'Memes only',   slow_mode:10,archived:false },
+  { id:7, name:'General Voice', type:'voice',        category:'Voice Channels', topic:'',             slow_mode:0, archived:false },
+  { id:8, name:'Gaming Voice',  type:'voice',        category:'Voice Channels', topic:'',             slow_mode:0, archived:false },
+  { id:9, name:'old-chat',      type:'text',         category:'Archived',       topic:'',             slow_mode:0, archived:true },
+];
+
+const INVITES = [
+  { id:1, code:'ABC123XY', created_by:'LordJebus', max_uses:10, uses:3,  expires:'2026-03-20', status:'active' },
+  { id:2, code:'TEAM2026', created_by:'alex_dev',  max_uses:0,  uses:12, expires:null,         status:'active' },
+  { id:3, code:'OLDCODE1', created_by:'LordJebus', max_uses:5,  uses:5,  expires:'2026-03-01', status:'exhausted' },
+  { id:4, code:'REVOKED1', created_by:'sarah_mod', max_uses:20, uses:2,  expires:'2026-04-01', status:'revoked' },
+  { id:5, code:'EXPIRED1', created_by:'LordJebus', max_uses:50, uses:8,  expires:'2026-03-10', status:'expired' },
+];
+
+const AUDIT_LOG = [
+  { id:1,  user:'LordJebus',  action:'user.ban',        target:'toxic_user',  detail:'Harassment',          time:'5 min ago' },
+  { id:2,  user:'sarah_mod',  action:'message.delete',   target:'#general',    detail:'Removed spam',        time:'12 min ago' },
+  { id:3,  user:'alex_dev',   action:'channel.create',   target:'#dev-talk',   detail:'',                    time:'1 hour ago' },
+  { id:4,  user:'LordJebus',  action:'role.update',      target:'Moderator',   detail:'Added MUTE_MEMBERS',  time:'2 hours ago' },
+  { id:5,  user:'LordJebus',  action:'invite.create',    target:'ABC123XY',    detail:'Max 10 uses',         time:'3 hours ago' },
+  { id:6,  user:'sarah_mod',  action:'user.kick',        target:'spammer99',   detail:'Spam',                time:'5 hours ago' },
+  { id:7,  user:'LordJebus',  action:'settings.update',  target:'MOTD',        detail:'Updated welcome msg', time:'Yesterday' },
+  { id:8,  user:'alex_dev',   action:'channel.update',   target:'#bug-reports',detail:'Changed topic',       time:'Yesterday' },
+  { id:9,  user:'LordJebus',  action:'backup.create',    target:'Manual',      detail:'2.3 GB',              time:'2 days ago' },
+  { id:10, user:'LordJebus',  action:'user.create',      target:'newbie42',    detail:'Via invite ABC123XY', time:'3 days ago' },
+];
+
+const BACKUPS = [
+  { id:1, name:'backup_2026-03-15_manual.db',    size:'2.3 GB', date:'Mar 15, 2026', type:'manual' },
+  { id:2, name:'backup_2026-03-14_scheduled.db',  size:'2.3 GB', date:'Mar 14, 2026', type:'scheduled' },
+  { id:3, name:'backup_2026-03-13_scheduled.db',  size:'2.2 GB', date:'Mar 13, 2026', type:'scheduled' },
+];
+
+/* ═══════════════════════════════════════════
+   STATE
+   ═══════════════════════════════════════════ */
+const state = {
+  section: 'dashboard',
+  // Users
+  users: USERS.map(u=>({...u})),
+  userSearch: '', userRoleFilter:'all', userStatusFilter:'all', userPage:1,
+  // Channels
+  channels: CHANNELS.map(c=>({...c})),
+  // Invites
+  invites: INVITES.map(i=>({...i})),
+  // Roles
+  roles: ROLES.map(r=>({...r})),
+  // Moderation
+  auditLog: AUDIT_LOG.map(a=>({...a})),
+  auditSearch: '', auditActionFilter:'all',
+  modTab: 'audit',
+  wordFilter: ['slur1','offensive2','spam-link.com'],
+  // Settings
+  serverName: 'OwnCord Home Server',
+  motd: 'Welcome to the server! Be nice.',
+  maxUpload: '50',
+  voiceQuality: '64',
+  require2FA: false,
+  tlsMode: 'self-signed',
+  rateMessages: '5',
+  rateUploads: '3',
+  rateLogins: '5',
+  settingsChanged: false,
+  // Backup
+  backups: BACKUPS.map(b=>({...b})),
+  backupSchedule: 'daily',
+  backupRetention: '30',
+  backupRunning: false,
+  // Updates
+  currentVersion: 'v1.2.0',
+  latestVersion: 'v1.3.0',
+  updateAvailable: true,
+  updateNotes: '- Fixed voice reconnection bug\n- Added message search\n- Improved upload validation\n- Security patches',
+  updateApplying: false,
+  // Stats (live)
+  stats: { online:8, total:12, msgToday:1834, msgTotal:142567, diskUsed:2340, diskTotal:50000, cpu:23, ram:128, ramTotal:8192, uptime:864000, voice:3 },
+  // Modal
+  modalContent: null,
+};
+
+/* ═══════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════ */
+function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
+function getRole(rid){return ROLES.find(r=>r.id===rid)||ROLES[3]}
+function formatUptime(s){const d=Math.floor(s/86400),h=Math.floor((s%86400)/3600);return d+'d '+h+'h'}
+function formatBytes(mb){return mb>=1000?(mb/1000).toFixed(1)+' GB':mb+' MB'}
+function usageClass(pct){return pct<60?'ok':pct<80?'warn':'danger'}
+function actionColor(a){if(a.includes('ban')||a.includes('kick')||a.includes('delete'))return'var(--red)';if(a.includes('create'))return'var(--green)';if(a.includes('update'))return'var(--yellow)';return'var(--accent)'}
+function actionBadge(a){if(a.includes('ban')||a.includes('kick')||a.includes('delete'))return'badge-red';if(a.includes('create'))return'badge-green';if(a.includes('update'))return'badge-yellow';return'badge-accent'}
+
+function showToast(msg, type='success'){
+  const t=document.getElementById('toast');
+  t.className='toast visible '+type;
+  t.innerHTML=(type==='success'?I.check:type==='error'?I.ban:I.check)+'<span>'+msg+'</span>';
+  clearTimeout(window._toastTimer);
+  window._toastTimer=setTimeout(()=>t.classList.remove('visible'),3000);
+}
+
+function openModal(html){
+  const overlay=document.getElementById('modal');
+  document.getElementById('modalInner').innerHTML=html;
+  overlay.classList.add('visible');
+  overlay.setAttribute('aria-hidden','false');
+}
+function closeModal(){
+  const overlay=document.getElementById('modal');
+  overlay.classList.remove('visible');
+  overlay.setAttribute('aria-hidden','true');
+}
+
+/* ═══════════════════════════════════════════
+   NAV
+   ═══════════════════════════════════════════ */
+const NAV = [
+  {section:'Management'},
+  {id:'dashboard',  label:'Dashboard',  icon:I.dashboard},
+  {id:'users',      label:'Users',      icon:I.users,     badge:()=>state.stats.online},
+  {id:'channels',   label:'Channels',   icon:I.channels},
+  {id:'roles',      label:'Roles',      icon:I.roles},
+  {id:'invites',    label:'Invites',    icon:I.invites},
+  {sep:true},
+  {section:'Configuration'},
+  {id:'settings',   label:'Settings',   icon:I.settings,  unsaved:()=>state.settingsChanged},
+  {id:'moderation', label:'Moderation', icon:I.moderation},
+  {id:'backup',     label:'Backup',     icon:I.backup},
+  {id:'updates',    label:'Updates',    icon:I.updates,   badge:()=>state.updateAvailable?'!':null},
+  {sep:true},
+  {id:'logout',     label:'Sign Out',   icon:I.logout,    danger:true},
+];
+
+function renderNav(){
+  document.getElementById('sidebarNav').innerHTML=NAV.map(n=>{
+    if(n.section)return`<div class="sidebar-label">${n.section}</div>`;
+    if(n.sep)return'<div class="sidebar-sep"></div>';
+    const active=state.section===n.id?'active':'';
+    const cls=n.danger?'danger':'';
+    const badge=n.badge&&n.badge()?`<span class="nav-badge">${n.badge()}</span>`:'';
+    const unsaved=n.unsaved&&n.unsaved()?'<span class="unsaved-dot"></span>':'';
+    return`<button class="nav-item ${active} ${cls}" role="tab" aria-selected="${active?'true':'false'}" onclick="${n.id==='logout'?'showToast(\'Signed out\',\'info\')':'navigateTo(\''+n.id+'\')'}">
+      ${unsaved}${n.icon}<span>${n.label}</span>${badge}</button>`;
+  }).join('');
+}
+
+function navigateTo(id){state.section=id;renderNav();renderContent()}
+
+/* ═══════════════════════════════════════════
+   CONTENT ROUTER
+   ═══════════════════════════════════════════ */
+function renderContent(){
+  const c=document.getElementById('content');
+  c.scrollTop=0;
+  const r={dashboard:renderDashboard,users:renderUsers,channels:renderChannels,roles:renderRoles,invites:renderInvites,settings:renderSettings,moderation:renderModeration,backup:renderBackup,updates:renderUpdates};
+  c.innerHTML=(r[state.section]||renderDashboard)();
+}
+
+/* ═══════════════════════════════════════════
+   DASHBOARD
+   ═══════════════════════════════════════════ */
+function renderDashboard(){
+  const s=state.stats;
+  const diskPct=Math.round(s.diskUsed/s.diskTotal*100);
+  const cpuPct=s.cpu;
+  const ramPct=Math.round(s.ram/s.ramTotal*100);
+  return`
+  <div data-wpf-component="DashboardPage" data-wpf-notes="Page with DispatcherTimer for auto-refresh, binds to DashboardViewModel">
+  <div class="page-title">Dashboard</div>
+  <div class="page-desc">Server overview and real-time statistics</div>
+  <div class="stat-grid" data-wpf-component="UniformGrid" data-wpf-notes="Columns=3, ItemsSource=StatCards">
+    <div class="stat-card">
+      <div class="stat-card-header"><span class="stat-card-label">Users Online</span><div class="stat-card-icon" style="background:rgba(35,165,90,.15);color:var(--green)">${I.users}</div></div>
+      <div class="stat-card-value">${s.online}</div>
+      <div class="stat-card-sub">of ${s.total} total</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-card-header"><span class="stat-card-label">Messages Today</span><div class="stat-card-icon" style="background:var(--accent-glow);color:var(--accent)">${I.megaphone}</div></div>
+      <div class="stat-card-value">${s.msgToday.toLocaleString()}</div>
+      <div class="stat-card-sub">${s.msgTotal.toLocaleString()} total</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-card-header"><span class="stat-card-label">Voice Active</span><div class="stat-card-icon" style="background:rgba(240,178,50,.15);color:var(--yellow)">${I.voice}</div></div>
+      <div class="stat-card-value">${s.voice}</div>
+      <div class="stat-card-sub">connections</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-card-header"><span class="stat-card-label">Disk Usage</span><div class="stat-card-icon" style="background:rgba(88,101,242,.15);color:var(--accent)">${I.backup}</div></div>
+      <div class="stat-card-value">${formatBytes(s.diskUsed)}</div>
+      <div class="stat-card-sub">of ${formatBytes(s.diskTotal)}</div>
+      <div class="usage-bar"><div class="usage-fill ${usageClass(diskPct)}" style="width:${diskPct}%"></div></div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-card-header"><span class="stat-card-label">CPU</span></div>
+      <div class="stat-card-value">${cpuPct}%</div>
+      <div class="usage-bar"><div class="usage-fill ${usageClass(cpuPct)}" style="width:${cpuPct}%"></div></div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-card-header"><span class="stat-card-label">Uptime</span></div>
+      <div class="stat-card-value">${formatUptime(s.uptime)}</div>
+      <div class="stat-card-sub">v${state.currentVersion.slice(1)}</div>
+    </div>
+  </div>
+
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+    <div class="section-card">
+      <div class="section-card-header"><h3>Online Users</h3><button class="btn btn-ghost" onclick="navigateTo('users')">View All</button></div>
+      <div class="section-card-body no-pad">
+        <table class="tbl">${state.users.filter(u=>u.status==='online').slice(0,6).map(u=>{
+          const r=getRole(u.role_id);
+          return`<tr><td style="width:40px"><div class="avatar" style="background:${u.color}">${u.username[0].toUpperCase()}</div></td>
+          <td><strong>${esc(u.username)}</strong></td>
+          <td><span class="role-badge"><span class="role-dot" style="background:${r.color}"></span>${r.name}</span></td>
+          <td style="font-size:12px;color:var(--text-faint)">${u.last_seen}</td></tr>`;
+        }).join('')}</table>
+      </div>
+    </div>
+
+    <div class="section-card">
+      <div class="section-card-header"><h3>Recent Activity</h3><button class="btn btn-ghost" onclick="navigateTo('moderation')">View All</button></div>
+      <div class="section-card-body">
+        ${state.auditLog.slice(0,5).map(a=>`
+          <div class="activity-item">
+            <div class="activity-icon" style="background:${actionColor(a.action)}22;color:${actionColor(a.action)}">${I.moderation}</div>
+            <div>
+              <div class="activity-text"><strong>${esc(a.user)}</strong> ${a.action.replace('.',' ')} <strong>${esc(a.target)}</strong></div>
+              <div class="activity-time">${a.time}${a.detail?' — '+esc(a.detail):''}</div>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+  </div>
+  </div>`;
+}
+
+/* ═══════════════════════════════════════════
+   USERS
+   ═══════════════════════════════════════════ */
+function renderUsers(){
+  let users=state.users.filter(u=>{
+    if(state.userSearch && !u.username.toLowerCase().includes(state.userSearch.toLowerCase()))return false;
+    if(state.userRoleFilter!=='all' && u.role_id!==parseInt(state.userRoleFilter))return false;
+    if(state.userStatusFilter==='online' && u.status!=='online')return false;
+    if(state.userStatusFilter==='banned' && !u.banned)return false;
+    if(state.userStatusFilter==='offline' && u.status!=='offline')return false;
+    return true;
+  });
+  const pageSize=8, totalPages=Math.ceil(users.length/pageSize)||1;
+  if(state.userPage>totalPages)state.userPage=totalPages;
+  const start=(state.userPage-1)*pageSize;
+  const paged=users.slice(start,start+pageSize);
+
+  return`
+  <div data-wpf-component="UsersPage" data-wpf-notes="Page with DataGrid, binds to UsersViewModel with search/filter ICollectionView">
+  <div class="page-title">Users</div>
+  <div class="page-desc">${state.users.length} registered users, ${state.users.filter(u=>u.status==='online').length} online</div>
+  <div class="filter-bar">
+    <input class="filter-search" placeholder="Search users..." value="${esc(state.userSearch)}" oninput="state.userSearch=this.value;state.userPage=1;renderContent()">
+    <select class="filter-select" onchange="state.userRoleFilter=this.value;state.userPage=1;renderContent()">
+      <option value="all" ${state.userRoleFilter==='all'?'selected':''}>All Roles</option>
+      ${ROLES.map(r=>`<option value="${r.id}" ${state.userRoleFilter==r.id?'selected':''}>${r.name}</option>`).join('')}
+    </select>
+    <select class="filter-select" onchange="state.userStatusFilter=this.value;state.userPage=1;renderContent()">
+      <option value="all" ${state.userStatusFilter==='all'?'selected':''}>All Status</option>
+      <option value="online" ${state.userStatusFilter==='online'?'selected':''}>Online</option>
+      <option value="offline" ${state.userStatusFilter==='offline'?'selected':''}>Offline</option>
+      <option value="banned" ${state.userStatusFilter==='banned'?'selected':''}>Banned</option>
+    </select>
+  </div>
+  <div class="section-card">
+    <div class="section-card-body no-pad">
+      <table class="tbl">
+        <thead><tr><th>User</th><th>Role</th><th>Status</th><th>2FA</th><th>Last Seen</th><th>Joined</th><th style="text-align:right">Actions</th></tr></thead>
+        <tbody>${paged.map(u=>{
+          const r=getRole(u.role_id);
+          const statusDot=u.banned?'banned':u.status;
+          const statusLabel=u.banned?'Banned':u.status==='online'?'Online':'Offline';
+          return`<tr>
+            <td><div style="display:flex;align-items:center;gap:8px"><div class="avatar" style="background:${u.color}">${u.username[0].toUpperCase()}</div><strong>${esc(u.username)}</strong></div></td>
+            <td><span class="role-badge"><span class="role-dot" style="background:${r.color}"></span>${r.name}</span></td>
+            <td><span class="dot ${statusDot}"></span>${statusLabel}</td>
+            <td>${u.totp?'<span class="badge badge-green">On</span>':'<span class="badge badge-muted">Off</span>'}</td>
+            <td style="font-size:12px;color:var(--text-faint)">${u.last_seen}</td>
+            <td style="font-size:12px;color:var(--text-faint)">${u.created}</td>
+            <td><div class="act-group" style="justify-content:flex-end">
+              <button class="act-btn" title="Edit role" onclick="openEditUser(${u.id})">${I.edit}</button>
+              <button class="act-btn" title="Reset password" onclick="showToast('Password reset. Temp: Abc12345','info')">${I.key}</button>
+              ${u.status==='online'?`<button class="act-btn danger" title="Disconnect" onclick="showToast('${esc(u.username)} disconnected')">${I.disconnect}</button>`:''}
+              ${u.banned?`<button class="act-btn" title="Unban" onclick="unbanUser(${u.id})">${I.check}</button>`:`<button class="act-btn danger" title="Ban" onclick="openBanUser(${u.id})">${I.ban}</button>`}
+            </div></td>
+          </tr>`;
+        }).join('')}</tbody>
+      </table>
+    </div>
+  </div>
+  <div class="pagination">
+    <div class="pagination-info">Showing ${start+1}-${Math.min(start+pageSize,users.length)} of ${users.length}</div>
+    <div class="pagination-btns">
+      <button class="page-btn" ${state.userPage<=1?'disabled':''} onclick="state.userPage--;renderContent()">&lt;</button>
+      ${Array.from({length:totalPages},(_,i)=>`<button class="page-btn ${state.userPage===i+1?'active':''}" onclick="state.userPage=${i+1};renderContent()">${i+1}</button>`).join('')}
+      <button class="page-btn" ${state.userPage>=totalPages?'disabled':''} onclick="state.userPage++;renderContent()">&gt;</button>
+    </div>
+  </div>
+  </div>`;
+}
+
+function openEditUser(id){
+  const u=state.users.find(x=>x.id===id); if(!u)return;
+  const r=getRole(u.role_id);
+  openModal(`
+    <div class="modal-header"><h3>Edit User</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body">
+      <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
+        <div class="avatar" style="background:${u.color};width:48px;height:48px;font-size:20px;border-radius:50%">${u.username[0].toUpperCase()}</div>
+        <div><div style="font-size:16px;font-weight:700;color:white">${esc(u.username)}</div><div style="font-size:12px;color:var(--text-faint)">Joined ${u.created}</div></div>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Role</label>
+        <select class="form-input" id="editRoleSelect" style="appearance:auto">
+          ${ROLES.map(rl=>`<option value="${rl.id}" ${u.role_id===rl.id?'selected':''}>${rl.name}</option>`).join('')}
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" onclick="closeModal()">Cancel</button>
+      <button class="btn btn-accent" onclick="saveUserRole(${u.id})">Save</button>
+    </div>`);
+}
+
+function saveUserRole(id){
+  const sel=document.getElementById('editRoleSelect');
+  if(!sel)return;
+  const newRoleId=parseInt(sel.value);
+  const username=state.users.find(x=>x.id===id)?.username||'User';
+  state.users=state.users.map(u=>u.id===id?{...u,role_id:newRoleId}:u);
+  closeModal();renderContent();showToast('Role updated for '+username);
+}
+
+function openBanUser(id){
+  const u=state.users.find(x=>x.id===id); if(!u)return;
+  openModal(`
+    <div class="modal-header"><h3>Ban User</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body">
+      <p style="color:var(--text-muted);margin-bottom:16px">Ban <strong style="color:white">${esc(u.username)}</strong> from the server?</p>
+      <div class="form-group"><label class="form-label">Reason</label><textarea class="form-input form-textarea" id="banReason" placeholder="Reason for ban..."></textarea></div>
+      <div class="form-group"><label class="form-label">Duration</label>
+        <select class="form-input" id="banDuration" style="appearance:auto">
+          <option value="permanent">Permanent</option><option value="1h">1 Hour</option><option value="1d">1 Day</option><option value="7d">7 Days</option><option value="30d">30 Days</option>
+        </select>
+      </div>
+      <div class="form-group" style="display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)">
+        <input type="checkbox" id="banPurge" style="accent-color:var(--red)">
+        <label for="banPurge" style="font-size:13px;color:var(--text-muted);cursor:pointer">Delete message history from this user</label>
+      </div>
+    </div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-danger" onclick="confirmBan(${u.id})">Ban User</button></div>`);
+}
+
+function confirmBan(id){
+  const reason=document.getElementById('banReason')?.value||'';
+  const purge=document.getElementById('banPurge')?.checked||false;
+  state.users=state.users.map(u=>u.id===id?{...u,banned:1,ban_reason:reason,status:'offline',sessions:0}:u);
+  const user=state.users.find(x=>x.id===id);
+  closeModal();renderNav();renderContent();
+  showToast(user.username+' has been banned'+(purge?' (messages purged)':''));
+}
+
+function unbanUser(id){
+  const username=state.users.find(x=>x.id===id)?.username||'User';
+  state.users=state.users.map(u=>u.id===id?{...u,banned:0,ban_reason:''}:u);
+  closeModal();renderContent();showToast(username+' has been unbanned');
+}
+
+/* ═══════════════════════════════════════════
+   CHANNELS
+   ═══════════════════════════════════════════ */
+function renderChannels(){
+  const chIcon=(t)=>t==='voice'?I.voice:t==='announcement'?I.megaphone:I.channels;
+  return`
+  <div data-wpf-component="ChannelsPage" data-wpf-notes="Page with DataGrid grouped by category, binds to ChannelsViewModel">
+  <div class="page-title">Channels</div>
+  <div class="page-desc">${state.channels.length} channels across ${[...new Set(state.channels.map(c=>c.category))].length} categories</div>
+  <div class="filter-bar">
+    <button class="btn btn-accent" onclick="openChannelModal(null)">${I.plus} Create Channel</button>
+  </div>
+  <div class="section-card"><div class="section-card-body no-pad">
+    <table class="tbl">
+      <thead><tr><th>Channel</th><th>Category</th><th>Type</th><th>Slow Mode</th><th>Status</th><th style="text-align:right">Actions</th></tr></thead>
+      <tbody>${state.channels.map(c=>`<tr>
+        <td><div style="display:flex;align-items:center;gap:8px"><span style="color:var(--text-faint)">${chIcon(c.type)}</span><strong>${esc(c.name)}</strong></div></td>
+        <td style="font-size:12px;color:var(--text-faint)">${esc(c.category)}</td>
+        <td><span class="badge ${c.type==='voice'?'badge-yellow':c.type==='announcement'?'badge-accent':'badge-muted'}">${c.type}</span></td>
+        <td>${c.slow_mode?c.slow_mode+'s':'—'}</td>
+        <td>${c.archived?'<span class="badge badge-muted">Archived</span>':'<span class="badge badge-green">Active</span>'}</td>
+        <td><div class="act-group" style="justify-content:flex-end">
+          <button class="act-btn" title="Edit" onclick="openChannelModal(${c.id})">${I.edit}</button>
+          <button class="act-btn" title="Permissions" onclick="openPermsModal(${c.id})">${I.moderation}</button>
+          <button class="act-btn danger" title="Delete" onclick="deleteChannel(${c.id})">${I.trash}</button>
+        </div></td>
+      </tr>`).join('')}</tbody>
+    </table>
+  </div></div>
+  </div>`;
+}
+
+function openChannelModal(id){
+  const c=id?state.channels.find(x=>x.id===id):null;
+  const cats=[...new Set(state.channels.map(x=>x.category))];
+  openModal(`
+    <div class="modal-header"><h3>${c?'Edit':'Create'} Channel</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body">
+      <div class="form-group"><label class="form-label">Name <span class="req">*</span></label><input class="form-input" id="chName" value="${c?esc(c.name):''}"></div>
+      <div class="form-group"><label class="form-label">Type</label><select class="form-input" id="chType" style="appearance:auto"><option value="text" ${c&&c.type==='text'?'selected':''}>Text</option><option value="voice" ${c&&c.type==='voice'?'selected':''}>Voice</option><option value="announcement" ${c&&c.type==='announcement'?'selected':''}>Announcement</option></select></div>
+      <div class="form-group"><label class="form-label">Category</label><select class="form-input" id="chCat" style="appearance:auto">${cats.map(ct=>`<option ${c&&c.category===ct?'selected':''}>${ct}</option>`).join('')}<option value="__new">+ New Category</option></select></div>
+      <div class="form-group"><label class="form-label">Topic</label><input class="form-input" id="chTopic" value="${c?esc(c.topic):''}"></div>
+      <div class="form-group"><label class="form-label">Slow Mode (seconds, 0=off)</label><input class="form-input" id="chSlow" type="number" value="${c?c.slow_mode:0}" min="0"></div>
+    </div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-accent" onclick="saveChannel(${id||'null'})">${c?'Save':'Create'}</button></div>`);
+}
+
+function saveChannel(id){
+  const name=document.getElementById('chName').value.trim();if(!name)return;
+  const type=document.getElementById('chType').value;
+  const category=document.getElementById('chCat').value;
+  const topic=document.getElementById('chTopic').value;
+  const slow_mode=parseInt(document.getElementById('chSlow').value)||0;
+  if(id){
+    state.channels=state.channels.map(c=>c.id===id?{...c,name,type,category,topic,slow_mode}:c);
+    showToast('Channel updated');
+  }else{
+    state.channels=[...state.channels,{id:Date.now(),name,type,category,topic,slow_mode,archived:false}];
+    showToast('Channel created');
+  }
+  closeModal();renderContent();
+}
+
+function deleteChannel(id){
+  const ch=state.channels.find(c=>c.id===id);
+  openModal(`
+    <div class="modal-header"><h3>Delete Channel</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body"><p style="color:var(--text-muted)">Are you sure? This will permanently delete <strong style="color:white">#${esc(ch?.name||'')}</strong> and all its messages.</p></div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-danger" onclick="confirmDeleteChannel(${id})">Delete</button></div>`);
+}
+
+function confirmDeleteChannel(id){
+  state.channels=state.channels.filter(c=>c.id!==id);
+  closeModal();renderContent();showToast('Channel deleted');
+}
+
+function openPermsModal(id){
+  const c=state.channels.find(x=>x.id===id);if(!c)return;
+  openModal(`
+    <div class="modal-header"><h3>Permissions: #${esc(c.name)}</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body" style="max-height:400px;overflow-y:auto">
+      ${ROLES.slice(1).map(r=>`
+        <div style="margin-bottom:16px">
+          <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px"><span class="role-dot" style="background:${r.color};width:10px;height:10px;border-radius:50%;display:inline-block"></span><strong>${r.name}</strong></div>
+          <div class="perm-grid">
+            ${PERMS.slice(0,10).map(p=>`<div class="perm-row">
+              <div class="perm-name">${p.name}<small>0x${p.bit.toString(16)}</small></div>
+              <div class="perm-toggles" data-perm-group="${r.id}-${p.bit}">
+                <button class="perm-btn ${(r.perms&p.bit)?'allow':'inherit'}" onclick="setPermState(this,'allow')" aria-label="Allow ${p.name}">&#10003;</button>
+                <button class="perm-btn ${(r.perms&p.bit)?'inherit':'inherit'}" onclick="setPermState(this,'inherit')" aria-label="Inherit ${p.name}">—</button>
+                <button class="perm-btn inherit" onclick="setPermState(this,'deny')" aria-label="Deny ${p.name}">&#10007;</button>
+              </div>
+            </div>`).join('')}
+          </div>
+        </div>
+      `).join('')}
+    </div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-accent" onclick="closeModal();showToast('Permissions saved')">Save</button></div>`);
+}
+
+/* ═══════════════════════════════════════════
+   PERMISSION TOGGLE HELPER
+   ═══════════════════════════════════════════ */
+function setPermState(btn, newState){
+  const group=btn.parentElement;
+  group.querySelectorAll('.perm-btn').forEach(b=>{b.className='perm-btn inherit'});
+  btn.className='perm-btn '+newState;
+}
+
+/* ═══════════════════════════════════════════
+   ROLES
+   ═══════════════════════════════════════════ */
+function renderRoles(){
+  return`
+  <div class="page-title" data-wpf-component="TextBlock">Roles</div>
+  <div class="page-desc">Manage roles and their global permissions</div>
+  <div class="filter-bar"><button class="btn btn-accent" onclick="openRoleModal(null)">${I.plus} Create Role</button></div>
+  <div class="section-card" data-wpf-component="ListView" data-wpf-notes="ItemsSource=Roles, DataTemplate per role"><div class="section-card-body no-pad">
+    <table class="tbl">
+      <thead><tr><th>Role</th><th>Position</th><th>Members</th><th>Permissions</th><th style="text-align:right">Actions</th></tr></thead>
+      <tbody>${state.roles.map(r=>{
+        const memberCount=state.users.filter(u=>u.role_id===r.id).length;
+        const permCount=PERMS.filter(p=>r.perms&p.bit).length;
+        return`<tr>
+          <td><span class="role-badge"><span class="role-dot" style="background:${r.color}"></span>${esc(r.name)}</span></td>
+          <td style="font-family:var(--font-mono);font-size:12px">${r.position}</td>
+          <td>${memberCount}</td>
+          <td><span class="badge badge-accent">${permCount} / ${PERMS.length}</span></td>
+          <td><div class="act-group" style="justify-content:flex-end">
+            <button class="act-btn" title="Edit" onclick="openRoleModal(${r.id})">${I.edit}</button>
+            <button class="act-btn" title="Edit permissions" onclick="openRolePermsModal(${r.id})">${I.moderation}</button>
+            ${r.id>2?`<button class="act-btn danger" title="Delete" onclick="deleteRole(${r.id})">${I.trash}</button>`:''}
+          </div></td>
+        </tr>`;
+      }).join('')}</tbody>
+    </table>
+  </div></div>`;
+}
+
+function openRoleModal(id){
+  const r=id?state.roles.find(x=>x.id===id):null;
+  openModal(`
+    <div class="modal-header"><h3>${r?'Edit':'Create'} Role</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body">
+      <div class="form-group"><label class="form-label">Name <span class="req">*</span></label><input class="form-input" id="roleName" value="${r?esc(r.name):''}"></div>
+      <div class="form-group"><label class="form-label">Color</label><input class="form-input" id="roleColor" type="color" value="${r?r.color:'#5865f2'}" style="height:40px;padding:4px"></div>
+      <div class="form-group"><label class="form-label">Position (higher = more authority)</label><input class="form-input" id="rolePos" type="number" value="${r?r.position:10}" min="1" max="99"></div>
+    </div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-accent" onclick="saveRole(${id||'null'})">${r?'Save':'Create'}</button></div>`);
+}
+
+function saveRole(id){
+  const name=document.getElementById('roleName').value.trim();if(!name)return;
+  const color=document.getElementById('roleColor').value;
+  const position=parseInt(document.getElementById('rolePos').value)||10;
+  if(id){
+    state.roles=state.roles.map(r=>r.id===id?{...r,name,color,position}:r);
+    showToast('Role updated');
+  }else{
+    state.roles=[...state.roles,{id:Date.now(),name,color,perms:0x00000663,position}];
+    showToast('Role created');
+  }
+  closeModal();renderContent();
+}
+
+function deleteRole(id){
+  const r=state.roles.find(x=>x.id===id);if(!r)return;
+  const memberCount=state.users.filter(u=>u.role_id===id).length;
+  openModal(`
+    <div class="modal-header"><h3>Delete Role</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body"><p style="color:var(--text-muted)">Delete <strong style="color:white">${esc(r.name)}</strong>${memberCount?' '+memberCount+' member(s) will be demoted to Member.':''}</p></div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-danger" onclick="confirmDeleteRole(${id})">Delete</button></div>`);
+}
+
+function confirmDeleteRole(id){
+  state.users=state.users.map(u=>u.role_id===id?{...u,role_id:4}:u);
+  state.roles=state.roles.filter(r=>r.id!==id);
+  closeModal();renderContent();showToast('Role deleted');
+}
+
+function openRolePermsModal(id){
+  const r=state.roles.find(x=>x.id===id);if(!r)return;
+  const permsHtml=PERMS.map(p=>`<div class="perm-row">
+    <div class="perm-name">${p.name}<small>0x${p.bit.toString(16)}</small></div>
+    <div class="perm-toggles">
+      <button class="perm-btn ${(r.perms&p.bit)?'allow':'inherit'}" onclick="setPermState(this,'allow')" aria-label="Allow ${p.name}">&#10003;</button>
+      <button class="perm-btn inherit" onclick="setPermState(this,'inherit')" aria-label="Inherit ${p.name}">—</button>
+      <button class="perm-btn inherit" onclick="setPermState(this,'deny')" aria-label="Deny ${p.name}">&#10007;</button>
+    </div>
+  </div>`).join('');
+  openModal(`
+    <div class="modal-header"><h3>Permissions: ${esc(r.name)}</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body" style="max-height:400px;overflow-y:auto">
+      <div class="perm-grid">${permsHtml}</div>
+    </div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-accent" onclick="closeModal();showToast('Permissions saved for ${esc(r.name)}')">Save</button></div>`);
+}
+
+/* ═══════════════════════════════════════════
+   INVITES
+   ═══════════════════════════════════════════ */
+function renderInvites(){
+  const statusBadge=s=>({active:'badge-green',expired:'badge-red',revoked:'badge-muted',exhausted:'badge-yellow'}[s]||'badge-muted');
+  return`
+  <div data-wpf-component="InvitesPage" data-wpf-notes="Page with DataGrid, binds to InvitesViewModel">
+  <div class="page-title">Invites</div>
+  <div class="page-desc">Manage invite codes for server registration</div>
+  <div class="filter-bar"><button class="btn btn-accent" onclick="openInviteModal()">${I.plus} Generate Invite</button></div>
+  <div class="section-card"><div class="section-card-body no-pad">
+    <table class="tbl">
+      <thead><tr><th>Code</th><th>Created By</th><th>Uses</th><th>Expires</th><th>Status</th><th style="text-align:right">Actions</th></tr></thead>
+      <tbody>${state.invites.map(inv=>`<tr>
+        <td><code style="font-family:var(--font-mono);color:var(--text-link)">${inv.code}</code></td>
+        <td>${esc(inv.created_by)}</td>
+        <td>${inv.uses}${inv.max_uses?' / '+inv.max_uses:' / ∞'}</td>
+        <td style="font-size:12px;color:var(--text-faint)">${inv.expires||'Never'}</td>
+        <td><span class="badge ${statusBadge(inv.status)}">${inv.status}</span></td>
+        <td><div class="act-group" style="justify-content:flex-end">
+          <button class="act-btn" title="Copy link" onclick="showToast('Link copied!','info')">${I.copy}</button>
+          ${inv.status==='active'?`<button class="act-btn danger" title="Revoke" onclick="revokeInvite(${inv.id})">${I.ban}</button>`:''}
+        </div></td>
+      </tr>`).join('')}</tbody>
+    </table>
+  </div></div>
+  </div>`;
+}
+
+function openInviteModal(){
+  openModal(`
+    <div class="modal-header"><h3>Generate Invite</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body">
+      <div class="form-group"><label class="form-label">Max Uses (0 = unlimited)</label><input class="form-input" id="invMaxUses" type="number" value="10" min="0"></div>
+      <div class="form-group"><label class="form-label">Expires In</label><select class="form-input" id="invExpiry" style="appearance:auto"><option value="30m">30 Minutes</option><option value="1h">1 Hour</option><option value="6h">6 Hours</option><option value="24h" selected>24 Hours</option><option value="7d">7 Days</option><option value="never">Never</option></select></div>
+    </div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-accent" onclick="generateInvite()">Generate</button></div>`);
+}
+
+function generateInvite(){
+  const code=Math.random().toString(36).substring(2,10).toUpperCase();
+  const maxUses=parseInt(document.getElementById('invMaxUses').value)||0;
+  state.invites=[{id:Date.now(),code,created_by:'LordJebus',max_uses:maxUses,uses:0,expires:'2026-03-16',status:'active'},...state.invites];
+  closeModal();renderContent();
+  openModal(`
+    <div class="modal-header"><h3>Invite Created</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body">
+      <p style="color:var(--text-muted);margin-bottom:12px">Share this link with people you want to invite:</p>
+      <div class="code-copy"><code>chatserver://${code}</code><button class="btn btn-ghost" onclick="showToast('Copied!','info')">Copy</button></div>
+    </div>
+    <div class="modal-footer"><button class="btn btn-accent" onclick="closeModal()">Done</button></div>`);
+}
+
+function revokeInvite(id){
+  state.invites=state.invites.map(i=>i.id===id?{...i,status:'revoked'}:i);
+  renderContent();showToast('Invite revoked');
+}
+
+/* ═══════════════════════════════════════════
+   SETTINGS
+   ═══════════════════════════════════════════ */
+function renderSettings(){
+  return`
+  <div data-wpf-component="SettingsPage" data-wpf-notes="ScrollViewer with StackPanel of GroupBoxes, binds to SettingsViewModel with IsDirty tracking">
+  <div class="page-title">Server Settings</div>
+  <div class="page-desc">Configure your OwnCord server</div>
+  <div class="section-card" data-wpf-component="GroupBox" data-wpf-notes="General settings bound to ServerConfigViewModel">
+    <div class="section-card-header"><h3>General</h3></div>
+    <div class="section-card-body">
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Server Name</div></div><div class="setting-ctrl"><input class="form-input" value="${esc(state.serverName)}" style="width:240px" oninput="state.serverName=this.value;markChanged()"></div></div>
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Message of the Day</div><div class="setting-desc">Shown to users when they connect</div></div><div class="setting-ctrl"><input class="form-input" value="${esc(state.motd)}" style="width:300px" oninput="state.motd=this.value;markChanged()"></div></div>
+    </div>
+  </div>
+  <div class="section-card">
+    <div class="section-card-header"><h3>Limits</h3></div>
+    <div class="section-card-body">
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Max Upload Size</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.maxUpload=this.value;markChanged()"><option value="10" ${state.maxUpload==='10'?'selected':''}>10 MB</option><option value="25" ${state.maxUpload==='25'?'selected':''}>25 MB</option><option value="50" ${state.maxUpload==='50'?'selected':''}>50 MB</option><option value="100" ${state.maxUpload==='100'?'selected':''}>100 MB</option></select></div></div>
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Voice Quality</div><div class="setting-desc">Higher quality uses more bandwidth</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.voiceQuality=this.value;markChanged()"><option value="32" ${state.voiceQuality==='32'?'selected':''}>Low (32 kbps)</option><option value="64" ${state.voiceQuality==='64'?'selected':''}>Medium (64 kbps)</option><option value="128" ${state.voiceQuality==='128'?'selected':''}>High (128 kbps)</option></select></div></div>
+    </div>
+  </div>
+  <div class="section-card" data-wpf-component="GroupBox" data-wpf-notes="Rate limit settings bound to ServerConfigViewModel">
+    <div class="section-card-header"><h3>Rate Limits</h3></div>
+    <div class="section-card-body">
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Messages</div><div class="setting-desc">Max messages per second per user</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.rateMessages=this.value;markChanged()"><option value="3" ${state.rateMessages==='3'?'selected':''}>3/sec</option><option value="5" ${state.rateMessages==='5'?'selected':''}>5/sec</option><option value="10" ${state.rateMessages==='10'?'selected':''}>10/sec</option></select></div></div>
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Uploads</div><div class="setting-desc">Max uploads per minute per user</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.rateUploads=this.value;markChanged()"><option value="1" ${state.rateUploads==='1'?'selected':''}>1/min</option><option value="3" ${state.rateUploads==='3'?'selected':''}>3/min</option><option value="5" ${state.rateUploads==='5'?'selected':''}>5/min</option><option value="10" ${state.rateUploads==='10'?'selected':''}>10/min</option></select></div></div>
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Login Attempts</div><div class="setting-desc">Max failed logins before lockout</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.rateLogins=this.value;markChanged()"><option value="3" ${state.rateLogins==='3'?'selected':''}>3 attempts</option><option value="5" ${state.rateLogins==='5'?'selected':''}>5 attempts</option><option value="10" ${state.rateLogins==='10'?'selected':''}>10 attempts</option></select></div></div>
+    </div>
+  </div>
+  <div class="section-card" data-wpf-component="GroupBox" data-wpf-notes="Security settings bound to ServerConfigViewModel">
+    <div class="section-card-header"><h3>Security</h3></div>
+    <div class="section-card-body">
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">Require 2FA</div><div class="setting-desc">Require all users to enable two-factor authentication</div></div><div class="setting-ctrl"><button class="toggle ${state.require2FA?'on':''}" role="switch" aria-checked="${state.require2FA}" aria-label="Require 2FA" onclick="state.require2FA=!state.require2FA;markChanged();renderContent()"></button></div></div>
+      <div class="setting-row"><div class="setting-info"><div class="setting-name">TLS Mode</div><div class="setting-desc">How the server handles HTTPS</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.tlsMode=this.value;markChanged()"><option value="self-signed" ${state.tlsMode==='self-signed'?'selected':''}>Self-Signed</option><option value="letsencrypt" ${state.tlsMode==='letsencrypt'?'selected':''}>Let's Encrypt</option><option value="manual" ${state.tlsMode==='manual'?'selected':''}>Manual Certificate</option></select></div></div>
+    </div>
+  </div>
+  <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px">
+    <button class="btn btn-accent" ${state.settingsChanged?'':'disabled'} onclick="state.settingsChanged=false;renderNav();renderContent();showToast('Settings saved')">Save Changes</button>
+  </div>
+  </div>`;
+}
+
+function markChanged(){state.settingsChanged=true;renderNav()}
+
+/* ═══════════════════════════════════════════
+   MODERATION
+   ═══════════════════════════════════════════ */
+function renderModeration(){
+  const tabs=[{id:'audit',label:'Audit Log'},{id:'wordfilter',label:'Word Filter'},{id:'bans',label:'Active Bans'}];
+  let body='';
+
+  if(state.modTab==='audit'){
+    const actionTypes=[...new Set(state.auditLog.map(a=>a.action))];
+    const filteredLog=state.auditLog.filter(a=>{
+      if(state.auditSearch && !a.user.toLowerCase().includes(state.auditSearch.toLowerCase()) && !a.target.toLowerCase().includes(state.auditSearch.toLowerCase()) && !a.detail.toLowerCase().includes(state.auditSearch.toLowerCase()))return false;
+      if(state.auditActionFilter!=='all' && a.action!==state.auditActionFilter)return false;
+      return true;
+    });
+    body=`
+    <div class="filter-bar">
+      <input class="filter-search" placeholder="Search audit log..." value="${esc(state.auditSearch)}" oninput="state.auditSearch=this.value;renderContent()">
+      <select class="filter-select" onchange="state.auditActionFilter=this.value;renderContent()">
+        <option value="all" ${state.auditActionFilter==='all'?'selected':''}>All Actions</option>
+        ${actionTypes.map(t=>`<option value="${t}" ${state.auditActionFilter===t?'selected':''}>${t}</option>`).join('')}
+      </select>
+    </div>
+    <div class="section-card"><div class="section-card-body no-pad">
+      <table class="tbl"><thead><tr><th>Time</th><th>User</th><th>Action</th><th>Target</th><th>Details</th></tr></thead>
+      <tbody>${filteredLog.map(a=>`<tr>
+        <td style="font-size:12px;color:var(--text-faint);white-space:nowrap">${a.time}</td>
+        <td><strong>${esc(a.user)}</strong></td>
+        <td><span class="badge ${actionBadge(a.action)}">${a.action}</span></td>
+        <td>${esc(a.target)}</td>
+        <td style="font-size:12px;color:var(--text-faint)">${esc(a.detail)}</td>
+      </tr>`).join('')}</tbody></table>
+    </div></div>`;
+  } else if(state.modTab==='wordfilter'){
+    body=`
+    <div class="filter-bar">
+      <input class="filter-search" id="newWordInput" placeholder="Add a word to filter..." style="flex:0 0 300px">
+      <button class="btn btn-accent" onclick="addFilterWord()">Add</button>
+    </div>
+    <div class="section-card"><div class="section-card-body">
+      ${state.wordFilter.map((w,i)=>`<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)">
+        <code style="font-family:var(--font-mono);color:var(--text-normal)">${esc(w)}</code>
+        <button class="act-btn danger" onclick="removeFilterWord(${i})">${I.trash}</button>
+      </div>`).join('')}
+      ${state.wordFilter.length===0?'<div style="text-align:center;padding:24px;color:var(--text-faint)">No filtered words</div>':''}
+    </div></div>`;
+  } else if(state.modTab==='bans'){
+    const banned=state.users.filter(u=>u.banned);
+    body=`<div class="section-card"><div class="section-card-body no-pad">
+      <table class="tbl"><thead><tr><th>User</th><th>Reason</th><th>Type</th><th style="text-align:right">Actions</th></tr></thead>
+      <tbody>${banned.length?banned.map(u=>`<tr>
+        <td><div style="display:flex;align-items:center;gap:8px"><div class="avatar" style="background:${u.color}">${u.username[0].toUpperCase()}</div><strong>${esc(u.username)}</strong></div></td>
+        <td style="color:var(--text-faint)">${esc(u.ban_reason||'No reason given')}</td>
+        <td><span class="badge badge-red">Permanent</span></td>
+        <td style="text-align:right"><button class="btn btn-ghost" onclick="unbanUser(${u.id})">Unban</button></td>
+      </tr>`).join(''):'<tr><td colspan="4" style="text-align:center;color:var(--text-faint);padding:24px">No active bans</td></tr>'}</tbody></table>
+    </div></div>`;
+  }
+
+  return`
+  <div data-wpf-component="ModerationPage" data-wpf-notes="Page with TabControl for sub-tabs, binds to ModerationViewModel">
+  <div class="page-title">Moderation</div>
+  <div class="page-desc">Audit log, word filter, and ban management</div>
+  <div class="sub-tabs">${tabs.map(t=>`<button class="sub-tab ${state.modTab===t.id?'active':''}" onclick="state.modTab='${t.id}';renderContent()">${t.label}</button>`).join('')}</div>
+  ${body}
+  </div>`;
+}
+
+function addFilterWord(){
+  const input=document.getElementById('newWordInput');
+  if(input&&input.value.trim()){state.wordFilter=[...state.wordFilter,input.value.trim()];renderContent();showToast('Word added to filter')}
+}
+
+function removeFilterWord(idx){
+  state.wordFilter=state.wordFilter.filter((_,i)=>i!==idx);
+  renderContent();showToast('Word removed');
+}
+
+/* ═══════════════════════════════════════════
+   BACKUP
+   ═══════════════════════════════════════════ */
+function renderBackup(){
+  return`
+  <div data-wpf-component="BackupPage" data-wpf-notes="Page with backup controls, binds to BackupViewModel with BackgroundWorker for backup tasks">
+  <div class="page-title">Backup</div>
+  <div class="page-desc">Database backup and restore</div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">
+    <div class="section-card">
+      <div class="section-card-header"><h3>Manual Backup</h3></div>
+      <div class="section-card-body" style="text-align:center;padding:32px">
+        <button class="btn btn-accent" style="font-size:15px;padding:12px 32px" onclick="runBackup()" ${state.backupRunning?'disabled':''}>
+          ${state.backupRunning?'<div class="spinner"></div> Running...':I.download+' Create Backup Now'}
+        </button>
+      </div>
+    </div>
+    <div class="section-card">
+      <div class="section-card-header"><h3>Schedule</h3></div>
+      <div class="section-card-body">
+        <div class="setting-row"><div class="setting-info"><div class="setting-name">Frequency</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.backupSchedule=this.value"><option value="off" ${state.backupSchedule==='off'?'selected':''}>Off</option><option value="daily" ${state.backupSchedule==='daily'?'selected':''}>Daily</option><option value="weekly" ${state.backupSchedule==='weekly'?'selected':''}>Weekly</option></select></div></div>
+        <div class="setting-row"><div class="setting-info"><div class="setting-name">Retention</div></div><div class="setting-ctrl"><select class="filter-select" onchange="state.backupRetention=this.value"><option value="7" ${state.backupRetention==='7'?'selected':''}>7 days</option><option value="14" ${state.backupRetention==='14'?'selected':''}>14 days</option><option value="30" ${state.backupRetention==='30'?'selected':''}>30 days</option><option value="90" ${state.backupRetention==='90'?'selected':''}>90 days</option></select></div></div>
+      </div>
+    </div>
+  </div>
+  <div class="section-card">
+    <div class="section-card-header"><h3>Backup History</h3></div>
+    <div class="section-card-body no-pad">
+      <table class="tbl"><thead><tr><th>Filename</th><th>Size</th><th>Date</th><th>Type</th><th style="text-align:right">Actions</th></tr></thead>
+      <tbody>${state.backups.map(b=>`<tr>
+        <td><code style="font-family:var(--font-mono);font-size:12px">${esc(b.name)}</code></td>
+        <td>${b.size}</td><td>${b.date}</td>
+        <td><span class="badge ${b.type==='manual'?'badge-accent':'badge-muted'}">${b.type}</span></td>
+        <td><div class="act-group" style="justify-content:flex-end">
+          <button class="btn btn-ghost" onclick="openRestoreModal(${b.id})">Restore</button>
+          <button class="act-btn danger" title="Delete" onclick="deleteBackup(${b.id})">${I.trash}</button>
+        </div></td>
+      </tr>`).join('')}</tbody></table>
+    </div>
+  </div>
+  </div>`;
+}
+
+function openRestoreModal(id){
+  const b=state.backups.find(x=>x.id===id);if(!b)return;
+  openModal(`
+    <div class="modal-header"><h3>Restore Backup</h3><button class="modal-close" onclick="closeModal()">&times;</button></div>
+    <div class="modal-body"><p style="color:var(--text-muted)">This will overwrite the current database with <strong style="color:white">${esc(b.name)}</strong>. Are you sure?</p></div>
+    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-danger" onclick="closeModal();showToast('Restore started','info')">Restore</button></div>`);
+}
+
+function deleteBackup(id){
+  state.backups=state.backups.filter(x=>x.id!==id);
+  renderContent();showToast('Backup deleted');
+}
+
+function runBackup(){
+  state.backupRunning=true;renderContent();
+  setTimeout(()=>{
+    state.backupRunning=false;
+    state.backups=[{id:Date.now(),name:'backup_2026-03-15_manual_2.db',size:'2.3 GB',date:'Mar 15, 2026',type:'manual'},...state.backups];
+    renderContent();showToast('Backup completed successfully');
+  },2500);
+}
+
+/* ═══════════════════════════════════════════
+   UPDATES
+   ═══════════════════════════════════════════ */
+function renderUpdates(){
+  return`
+  <div data-wpf-component="UpdatesPage" data-wpf-notes="Page with version comparison, binds to UpdatesViewModel with async update check">
+  <div class="page-title">Updates</div>
+  <div class="page-desc">Server version management</div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">
+    <div class="update-card">
+      <div class="update-icon" style="background:rgba(35,165,90,.15);color:var(--green)">${I.check}</div>
+      <div class="update-info">
+        <div class="update-ver">${state.currentVersion}</div>
+        <div class="update-notes">Current version</div>
+      </div>
+    </div>
+    ${state.updateAvailable?`
+    <div class="update-card" style="border-color:var(--accent)">
+      <div class="update-icon" style="background:var(--accent-glow);color:var(--accent)">${I.updates}</div>
+      <div class="update-info">
+        <div class="update-ver">${state.latestVersion} <span class="badge badge-accent">New</span></div>
+        <div class="update-notes">Available for download</div>
+      </div>
+    </div>`:`
+    <div class="update-card">
+      <div class="update-icon" style="background:rgba(35,165,90,.15);color:var(--green)">${I.check}</div>
+      <div class="update-info">
+        <div class="update-ver">Up to date</div>
+        <div class="update-notes">You're running the latest version</div>
+      </div>
+    </div>`}
+  </div>
+
+  ${state.updateAvailable?`
+  <div class="section-card">
+    <div class="section-card-header"><h3>Release Notes — ${state.latestVersion}</h3></div>
+    <div class="section-card-body">
+      <pre style="font-family:var(--font-mono);font-size:13px;color:var(--text-muted);white-space:pre-wrap;line-height:1.6">${esc(state.updateNotes)}</pre>
+    </div>
+  </div>
+  <div style="display:flex;gap:8px">
+    <button class="btn btn-danger" onclick="applyUpdate()" ${state.updateApplying?'disabled':''}>
+      ${state.updateApplying?'<div class="spinner"></div> Applying...':'Apply Update & Restart'}
+    </button>
+    <button class="btn btn-ghost" onclick="showToast('Already checked','info')">${I.refresh} Check Again</button>
+  </div>`:`
+  <div style="margin-top:16px"><button class="btn btn-ghost" onclick="state.updateAvailable=true;state.latestVersion='v1.3.0';renderContent();renderNav();showToast('Update found!','info')">${I.refresh} Check for Updates</button></div>`}
+  </div>`;
+}
+
+function applyUpdate(){
+  state.updateApplying=true;renderContent();
+  setTimeout(()=>{
+    openModal(`
+      <div class="modal-header"><h3>Update Applied</h3></div>
+      <div class="modal-body" style="text-align:center;padding:32px">
+        <div style="width:64px;height:64px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 16px">${I.check}</div>
+        <div style="font-size:18px;font-weight:700;color:white;margin-bottom:8px">Update Complete</div>
+        <div style="color:var(--text-muted)">Server updated to ${state.latestVersion}. In production, the server would restart now.</div>
+      </div>
+      <div class="modal-footer"><button class="btn btn-accent" onclick="state.updateApplying=false;state.updateAvailable=false;state.currentVersion=state.latestVersion;closeModal();renderContent();renderNav()">OK</button></div>`);
+  },3000);
+}
+
+/* ═══════════════════════════════════════════
+   KEYBOARD + AUTO-REFRESH + INIT
+   ═══════════════════════════════════════════ */
+document.addEventListener('keydown',e=>{
+  if(e.key==='Escape')closeModal();
+  if(e.key==='/'&&!document.querySelector('.modal-overlay.visible')){
+    e.preventDefault();
+    const s=document.querySelector('.filter-search');
+    if(s)s.focus();
+  }
+});
+
+// Dashboard auto-refresh
+setInterval(()=>{
+  if(state.section!=='dashboard')return;
+  const s=state.stats;
+  s.online=Math.max(3,s.online+Math.floor(Math.random()*3)-1);
+  s.msgToday+=Math.floor(Math.random()*5);
+  s.cpu=Math.max(5,Math.min(95,s.cpu+Math.floor(Math.random()*11)-5));
+  s.voice=Math.max(0,Math.min(8,s.voice+Math.floor(Math.random()*3)-1));
+  s.uptime+=5;
+  renderContent();
+},5000);
+
+renderNav();
+renderContent();
+</script>
+</body>
+</html>
diff --git a/Server/api/channel_handler_test.go b/Server/api/channel_handler_test.go
index 88b91690..9aef3a07 100644
--- a/Server/api/channel_handler_test.go
+++ b/Server/api/channel_handler_test.go
@@ -58,15 +58,19 @@ CREATE TABLE IF NOT EXISTS sessions (
 CREATE INDEX IF NOT EXISTS idx_sessions_token ON sessions(token);
 
 CREATE TABLE IF NOT EXISTS channels (
-    id         INTEGER PRIMARY KEY AUTOINCREMENT,
-    name       TEXT    NOT NULL,
-    type       TEXT    NOT NULL DEFAULT 'text',
-    category   TEXT,
-    topic      TEXT,
-    position   INTEGER NOT NULL DEFAULT 0,
-    slow_mode  INTEGER NOT NULL DEFAULT 0,
-    archived   INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT    NOT NULL DEFAULT (datetime('now'))
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    name             TEXT    NOT NULL,
+    type             TEXT    NOT NULL DEFAULT 'text',
+    category         TEXT,
+    topic            TEXT,
+    position         INTEGER NOT NULL DEFAULT 0,
+    slow_mode        INTEGER NOT NULL DEFAULT 0,
+    archived         INTEGER NOT NULL DEFAULT 0,
+    created_at       TEXT    NOT NULL DEFAULT (datetime('now')),
+    voice_max_users  INTEGER NOT NULL DEFAULT 0,
+    voice_quality    TEXT,
+    mixing_threshold INTEGER,
+    voice_max_video  INTEGER NOT NULL DEFAULT 0
 );
 CREATE TABLE IF NOT EXISTS channel_overrides (
     id         INTEGER PRIMARY KEY AUTOINCREMENT,
diff --git a/Server/api/router.go b/Server/api/router.go
index 8ae05d1f..0d75e317 100644
--- a/Server/api/router.go
+++ b/Server/api/router.go
@@ -3,6 +3,7 @@ package api
 
 import (
 	"encoding/json"
+	"log/slog"
 	"net/http"
 
 	"github.com/go-chi/chi/v5"
@@ -54,6 +55,15 @@ func NewRouter(cfg *config.Config, database *db.DB, ver string) http.Handler {
 
 	// WebSocket hub — WS does its own in-band auth, so no AuthMiddleware here.
 	hub := ws.NewHub(database, limiter)
+
+	// Create SFU if voice config is present; voice is disabled on failure.
+	sfu, sfuErr := ws.NewSFU(&cfg.Voice)
+	if sfuErr != nil {
+		slog.Warn("failed to create SFU, voice disabled", "error", sfuErr)
+	} else {
+		hub.SetSFU(sfu)
+	}
+
 	go hub.Run()
 	r.Get("/api/v1/ws", ws.ServeWS(hub, database, cfg.Server.AllowedOrigins))
 
diff --git a/Server/config/config.go b/Server/config/config.go
index 63eab039..2a09878c 100644
--- a/Server/config/config.go
+++ b/Server/config/config.go
@@ -29,12 +29,18 @@ type GitHubConfig struct {
 	Token string `koanf:"token"`
 }
 
-// VoiceConfig holds STUN/TURN server settings for WebRTC signaling.
+// VoiceConfig holds STUN/TURN server settings and SFU configuration.
 type VoiceConfig struct {
-	TURNSecret  string `koanf:"turn_secret"`  // HMAC-SHA1 secret; auto-generated if empty
-	STUNPort    int    `koanf:"stun_port"`    // default 3478
-	TURNPort    int    `koanf:"turn_port"`    // default 3478
-	TURNEnabled bool   `koanf:"turn_enabled"` // default true
+	TURNSecret      string `koanf:"turn_secret"`      // HMAC-SHA1 secret; auto-generated if empty
+	STUNPort        int    `koanf:"stun_port"`         // default 3478
+	TURNPort        int    `koanf:"turn_port"`         // default 3478
+	TURNEnabled     bool   `koanf:"turn_enabled"`      // default true
+	Quality         string `koanf:"quality"`            // low | medium | high
+	MixingThreshold int    `koanf:"mixing_threshold"`   // selective forwarding threshold
+	TopSpeakers     int    `koanf:"top_speakers"`       // top-N speakers in selective mode
+	ExternalIP      string `koanf:"external_ip"`        // set if behind NAT
+	MediaPortMin    int    `koanf:"media_port_min"`     // UDP port range start for WebRTC media
+	MediaPortMax    int    `koanf:"media_port_max"`     // UDP port range end for WebRTC media
 }
 
 // ServerConfig holds HTTP server settings.
@@ -90,9 +96,14 @@ func defaults() Config {
 			StorageDir: "data/uploads",
 		},
 		Voice: VoiceConfig{
-			STUNPort:    3478,
-			TURNPort:    3478,
-			TURNEnabled: true,
+			STUNPort:        3478,
+			TURNPort:        3478,
+			TURNEnabled:     true,
+			Quality:         "medium",
+			MixingThreshold: 10,
+			TopSpeakers:     3,
+			MediaPortMin:    10000,
+			MediaPortMax:    10100,
 		},
 		GitHub: GitHubConfig{},
 	}
diff --git a/Server/config/config_test.go b/Server/config/config_test.go
index 054b78f4..7b34c50c 100644
--- a/Server/config/config_test.go
+++ b/Server/config/config_test.go
@@ -226,6 +226,82 @@ tls:
 	}
 }
 
+func TestLoadVoiceConfigDefaults(t *testing.T) {
+	tmpDir := t.TempDir()
+	cfgPath := filepath.Join(tmpDir, "config.yaml")
+
+	cfg, err := config.Load(cfgPath)
+	if err != nil {
+		t.Fatalf("Load() returned error: %v", err)
+	}
+
+	tests := []struct {
+		name string
+		got  interface{}
+		want interface{}
+	}{
+		{"Voice.Quality", cfg.Voice.Quality, "medium"},
+		{"Voice.MixingThreshold", cfg.Voice.MixingThreshold, 10},
+		{"Voice.TopSpeakers", cfg.Voice.TopSpeakers, 3},
+		{"Voice.ExternalIP", cfg.Voice.ExternalIP, ""},
+		{"Voice.MediaPortMin", cfg.Voice.MediaPortMin, 10000},
+		{"Voice.MediaPortMax", cfg.Voice.MediaPortMax, 10100},
+		{"Voice.STUNPort", cfg.Voice.STUNPort, 3478},
+		{"Voice.TURNPort", cfg.Voice.TURNPort, 3478},
+		{"Voice.TURNEnabled", cfg.Voice.TURNEnabled, true},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			if tc.got != tc.want {
+				t.Errorf("got %v, want %v", tc.got, tc.want)
+			}
+		})
+	}
+}
+
+func TestLoadVoiceConfigFromYAML(t *testing.T) {
+	tmpDir := t.TempDir()
+	cfgPath := filepath.Join(tmpDir, "config.yaml")
+
+	yaml := `
+voice:
+  quality: high
+  mixing_threshold: 5
+  top_speakers: 4
+  external_ip: "1.2.3.4"
+  media_port_min: 20000
+  media_port_max: 20500
+`
+	if err := os.WriteFile(cfgPath, []byte(yaml), 0o644); err != nil {
+		t.Fatalf("failed to write yaml: %v", err)
+	}
+
+	cfg, err := config.Load(cfgPath)
+	if err != nil {
+		t.Fatalf("Load() returned error: %v", err)
+	}
+
+	if cfg.Voice.Quality != "high" {
+		t.Errorf("Voice.Quality = %q, want 'high'", cfg.Voice.Quality)
+	}
+	if cfg.Voice.MixingThreshold != 5 {
+		t.Errorf("Voice.MixingThreshold = %d, want 5", cfg.Voice.MixingThreshold)
+	}
+	if cfg.Voice.TopSpeakers != 4 {
+		t.Errorf("Voice.TopSpeakers = %d, want 4", cfg.Voice.TopSpeakers)
+	}
+	if cfg.Voice.ExternalIP != "1.2.3.4" {
+		t.Errorf("Voice.ExternalIP = %q, want '1.2.3.4'", cfg.Voice.ExternalIP)
+	}
+	if cfg.Voice.MediaPortMin != 20000 {
+		t.Errorf("Voice.MediaPortMin = %d, want 20000", cfg.Voice.MediaPortMin)
+	}
+	if cfg.Voice.MediaPortMax != 20500 {
+		t.Errorf("Voice.MediaPortMax = %d, want 20500", cfg.Voice.MediaPortMax)
+	}
+}
+
 func TestLoadUploadBoundaryValues(t *testing.T) {
 	tmpDir := t.TempDir()
 	cfgPath := filepath.Join(tmpDir, "config.yaml")
diff --git a/Server/db/admin_queries_test.go b/Server/db/admin_queries_test.go
index 4022e561..af2e024f 100644
--- a/Server/db/admin_queries_test.go
+++ b/Server/db/admin_queries_test.go
@@ -13,15 +13,19 @@ import (
 // adminTestSchema extends testSchema with tables needed for admin queries.
 var adminTestSchema = append(testSchema, []byte(`
 CREATE TABLE IF NOT EXISTS channels (
-    id         INTEGER PRIMARY KEY AUTOINCREMENT,
-    name       TEXT    NOT NULL,
-    type       TEXT    NOT NULL DEFAULT 'text',
-    category   TEXT,
-    topic      TEXT,
-    position   INTEGER NOT NULL DEFAULT 0,
-    slow_mode  INTEGER NOT NULL DEFAULT 0,
-    archived   INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT    NOT NULL DEFAULT (datetime('now'))
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    name             TEXT    NOT NULL,
+    type             TEXT    NOT NULL DEFAULT 'text',
+    category         TEXT,
+    topic            TEXT,
+    position         INTEGER NOT NULL DEFAULT 0,
+    slow_mode        INTEGER NOT NULL DEFAULT 0,
+    archived         INTEGER NOT NULL DEFAULT 0,
+    created_at       TEXT    NOT NULL DEFAULT (datetime('now')),
+    voice_max_users  INTEGER NOT NULL DEFAULT 0,
+    voice_quality    TEXT,
+    mixing_threshold INTEGER,
+    voice_max_video  INTEGER NOT NULL DEFAULT 0
 );
 
 CREATE TABLE IF NOT EXISTS messages (
diff --git a/Server/db/channel_queries.go b/Server/db/channel_queries.go
index c73eefd9..5596da58 100644
--- a/Server/db/channel_queries.go
+++ b/Server/db/channel_queries.go
@@ -39,7 +39,11 @@ func (d *DB) ListChannels() ([]Channel, error) {
 func (d *DB) GetChannel(id int64) (*Channel, error) {
 	row := d.sqlDB.QueryRow(
 		`SELECT id, name, type, COALESCE(category,''), COALESCE(topic,''),
-		        position, slow_mode, archived, created_at
+		        position, slow_mode, archived, created_at,
+		        COALESCE(voice_max_users, 0),
+		        voice_quality,
+		        mixing_threshold,
+		        COALESCE(voice_max_video, 0)
 		 FROM channels WHERE id = ?`,
 		id,
 	)
@@ -48,6 +52,7 @@ func (d *DB) GetChannel(id int64) (*Channel, error) {
 	err := row.Scan(
 		&ch.ID, &ch.Name, &ch.Type, &ch.Category, &ch.Topic,
 		&ch.Position, &ch.SlowMode, &archived, &ch.CreatedAt,
+		&ch.VoiceMaxUsers, &ch.VoiceQuality, &ch.MixingThreshold, &ch.VoiceMaxVideo,
 	)
 	if errors.Is(err, sql.ErrNoRows) {
 		return nil, nil
@@ -95,6 +100,15 @@ func (d *DB) SetChannelSlowMode(id int64, slowMode int) error {
 	return nil
 }
 
+// SetChannelVoiceMaxUsers updates the voice_max_users field for the given channel.
+func (d *DB) SetChannelVoiceMaxUsers(id int64, maxUsers int) error {
+	_, err := d.sqlDB.Exec(`UPDATE channels SET voice_max_users = ? WHERE id = ?`, maxUsers, id)
+	if err != nil {
+		return fmt.Errorf("SetChannelVoiceMaxUsers: %w", err)
+	}
+	return nil
+}
+
 // DeleteChannel removes the channel row (cascades to messages, overrides, etc.).
 func (d *DB) DeleteChannel(id int64) error {
 	_, err := d.sqlDB.Exec(`DELETE FROM channels WHERE id = ?`, id)
diff --git a/Server/db/models.go b/Server/db/models.go
index f73197b3..3e68422e 100644
--- a/Server/db/models.go
+++ b/Server/db/models.go
@@ -54,15 +54,19 @@ type Role struct {
 
 // Channel represents a row in the channels table.
 type Channel struct {
-	ID        int64  `json:"id"`
-	Name      string `json:"name"`
-	Type      string `json:"type"`
-	Category  string `json:"category"`
-	Topic     string `json:"topic"`
-	Position  int    `json:"position"`
-	SlowMode  int    `json:"slow_mode"`
-	Archived  bool   `json:"archived"`
-	CreatedAt string `json:"created_at"`
+	ID              int64   `json:"id"`
+	Name            string  `json:"name"`
+	Type            string  `json:"type"`
+	Category        string  `json:"category"`
+	Topic           string  `json:"topic"`
+	Position        int     `json:"position"`
+	SlowMode        int     `json:"slow_mode"`
+	Archived        bool    `json:"archived"`
+	CreatedAt       string  `json:"created_at"`
+	VoiceMaxUsers   int     `json:"voice_max_users"`
+	VoiceQuality    *string `json:"voice_quality,omitempty"`
+	MixingThreshold *int    `json:"mixing_threshold,omitempty"`
+	VoiceMaxVideo   int     `json:"voice_max_video"`
 }
 
 // Message represents a row in the messages table.
@@ -105,12 +109,14 @@ type MessageSearchResult struct {
 // VoiceState represents a row in the voice_states table.
 // It tracks which voice channel a user is in and their current audio state.
 type VoiceState struct {
-	UserID    int64
-	ChannelID int64
-	Username  string
-	Muted     bool
-	Deafened  bool
-	Speaking  bool
+	UserID      int64
+	ChannelID   int64
+	Username    string
+	Muted       bool
+	Deafened    bool
+	Speaking    bool
+	Camera      bool
+	Screenshare bool
 }
 
 // ServerStats contains aggregate counts for the admin dashboard.
diff --git a/Server/db/voice_queries.go b/Server/db/voice_queries.go
index 4cb9ec75..d5b2a097 100644
--- a/Server/db/voice_queries.go
+++ b/Server/db/voice_queries.go
@@ -11,14 +11,16 @@ import (
 // replaced. Muted, deafened, and speaking are reset to false on join.
 func (d *DB) JoinVoiceChannel(userID, channelID int64) error {
 	_, err := d.sqlDB.Exec(
-		`INSERT INTO voice_states (user_id, channel_id, muted, deafened, speaking)
-		 VALUES (?, ?, 0, 0, 0)
+		`INSERT INTO voice_states (user_id, channel_id, muted, deafened, speaking, camera, screenshare)
+		 VALUES (?, ?, 0, 0, 0, 0, 0)
 		 ON CONFLICT(user_id) DO UPDATE SET
-		     channel_id = excluded.channel_id,
-		     muted      = 0,
-		     deafened   = 0,
-		     speaking   = 0,
-		     joined_at  = datetime('now')`,
+		     channel_id  = excluded.channel_id,
+		     muted       = 0,
+		     deafened    = 0,
+		     speaking    = 0,
+		     camera      = 0,
+		     screenshare = 0,
+		     joined_at   = datetime('now')`,
 		userID, channelID,
 	)
 	if err != nil {
@@ -42,7 +44,8 @@ func (d *DB) LeaveVoiceChannel(userID int64) error {
 func (d *DB) GetVoiceState(userID int64) (*VoiceState, error) {
 	row := d.sqlDB.QueryRow(
 		`SELECT vs.user_id, vs.channel_id, u.username,
-		        vs.muted, vs.deafened, vs.speaking
+		        vs.muted, vs.deafened, vs.speaking,
+		        vs.camera, vs.screenshare
 		 FROM voice_states vs
 		 JOIN users u ON u.id = vs.user_id
 		 WHERE vs.user_id = ?`,
@@ -56,7 +59,8 @@ func (d *DB) GetVoiceState(userID int64) (*VoiceState, error) {
 func (d *DB) GetChannelVoiceStates(channelID int64) ([]VoiceState, error) {
 	rows, err := d.sqlDB.Query(
 		`SELECT vs.user_id, vs.channel_id, u.username,
-		        vs.muted, vs.deafened, vs.speaking
+		        vs.muted, vs.deafened, vs.speaking,
+		        vs.camera, vs.screenshare
 		 FROM voice_states vs
 		 JOIN users u ON u.id = vs.user_id
 		 WHERE vs.channel_id = ?
@@ -123,16 +127,65 @@ func (d *DB) ClearVoiceState(userID int64) error {
 	return nil
 }
 
+// ClearAllVoiceStates removes all voice state rows. Called on server startup
+// to clear stale state from a previous run.
+func (d *DB) ClearAllVoiceStates() error {
+	_, err := d.sqlDB.Exec(`DELETE FROM voice_states`)
+	if err != nil {
+		return fmt.Errorf("ClearAllVoiceStates: %w", err)
+	}
+	return nil
+}
+
+// UpdateVoiceCamera sets the camera field for the given user's voice state.
+func (d *DB) UpdateVoiceCamera(userID int64, camera bool) error {
+	_, err := d.sqlDB.Exec(
+		`UPDATE voice_states SET camera = ? WHERE user_id = ?`,
+		boolToInt(camera), userID,
+	)
+	if err != nil {
+		return fmt.Errorf("UpdateVoiceCamera: %w", err)
+	}
+	return nil
+}
+
+// UpdateVoiceScreenshare sets the screenshare field for the given user's voice state.
+func (d *DB) UpdateVoiceScreenshare(userID int64, screenshare bool) error {
+	_, err := d.sqlDB.Exec(
+		`UPDATE voice_states SET screenshare = ? WHERE user_id = ?`,
+		boolToInt(screenshare), userID,
+	)
+	if err != nil {
+		return fmt.Errorf("UpdateVoiceScreenshare: %w", err)
+	}
+	return nil
+}
+
+// CountChannelVoiceUsers returns the number of users currently in the given
+// voice channel.
+func (d *DB) CountChannelVoiceUsers(channelID int64) (int, error) {
+	var count int
+	err := d.sqlDB.QueryRow(
+		`SELECT COUNT(*) FROM voice_states WHERE channel_id = ?`,
+		channelID,
+	).Scan(&count)
+	if err != nil {
+		return 0, fmt.Errorf("CountChannelVoiceUsers: %w", err)
+	}
+	return count, nil
+}
+
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
 // scanVoiceState scans a single *sql.Row into a VoiceState.
 // Returns nil (not an error) when the row is not found.
 func scanVoiceState(row *sql.Row) (*VoiceState, error) {
 	vs := &VoiceState{}
-	var muted, deafened, speaking int
+	var muted, deafened, speaking, camera, screenshare int
 	err := row.Scan(
 		&vs.UserID, &vs.ChannelID, &vs.Username,
 		&muted, &deafened, &speaking,
+		&camera, &screenshare,
 	)
 	if errors.Is(err, sql.ErrNoRows) {
 		return nil, nil
@@ -143,16 +196,19 @@ func scanVoiceState(row *sql.Row) (*VoiceState, error) {
 	vs.Muted = muted != 0
 	vs.Deafened = deafened != 0
 	vs.Speaking = speaking != 0
+	vs.Camera = camera != 0
+	vs.Screenshare = screenshare != 0
 	return vs, nil
 }
 
 // scanVoiceStateRow scans a single row from *sql.Rows into a VoiceState.
 func scanVoiceStateRow(rows *sql.Rows) (VoiceState, error) {
 	vs := VoiceState{}
-	var muted, deafened, speaking int
+	var muted, deafened, speaking, camera, screenshare int
 	err := rows.Scan(
 		&vs.UserID, &vs.ChannelID, &vs.Username,
 		&muted, &deafened, &speaking,
+		&camera, &screenshare,
 	)
 	if err != nil {
 		return vs, fmt.Errorf("scanVoiceStateRow: %w", err)
@@ -160,6 +216,8 @@ func scanVoiceStateRow(rows *sql.Rows) (VoiceState, error) {
 	vs.Muted = muted != 0
 	vs.Deafened = deafened != 0
 	vs.Speaking = speaking != 0
+	vs.Camera = camera != 0
+	vs.Screenshare = screenshare != 0
 	return vs, nil
 }
 
diff --git a/Server/db/voice_queries_test.go b/Server/db/voice_queries_test.go
index 5822ebfe..2694c8be 100644
--- a/Server/db/voice_queries_test.go
+++ b/Server/db/voice_queries_test.go
@@ -15,6 +15,8 @@ CREATE TABLE IF NOT EXISTS voice_states (
     muted      INTEGER NOT NULL DEFAULT 0,
     deafened   INTEGER NOT NULL DEFAULT 0,
     speaking   INTEGER NOT NULL DEFAULT 0,
+    camera     INTEGER NOT NULL DEFAULT 0,
+    screenshare INTEGER NOT NULL DEFAULT 0,
     joined_at  TEXT    NOT NULL DEFAULT (datetime('now'))
 );
 CREATE INDEX IF NOT EXISTS idx_voice_states_channel ON voice_states(channel_id);
@@ -22,15 +24,19 @@ CREATE INDEX IF NOT EXISTS idx_voice_states_channel ON voice_states(channel_id);
 
 var channelSchema = []byte(`
 CREATE TABLE IF NOT EXISTS channels (
-    id         INTEGER PRIMARY KEY AUTOINCREMENT,
-    name       TEXT    NOT NULL,
-    type       TEXT    NOT NULL DEFAULT 'text',
-    category   TEXT,
-    topic      TEXT,
-    position   INTEGER NOT NULL DEFAULT 0,
-    slow_mode  INTEGER NOT NULL DEFAULT 0,
-    archived   INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT    NOT NULL DEFAULT (datetime('now'))
+    id              INTEGER PRIMARY KEY AUTOINCREMENT,
+    name            TEXT    NOT NULL,
+    type            TEXT    NOT NULL DEFAULT 'text',
+    category        TEXT,
+    topic           TEXT,
+    position        INTEGER NOT NULL DEFAULT 0,
+    slow_mode       INTEGER NOT NULL DEFAULT 0,
+    archived        INTEGER NOT NULL DEFAULT 0,
+    created_at      TEXT    NOT NULL DEFAULT (datetime('now')),
+    voice_max_users INTEGER NOT NULL DEFAULT 0,
+    voice_quality   TEXT,
+    mixing_threshold INTEGER,
+    voice_max_video INTEGER NOT NULL DEFAULT 10
 );
 `)
 
@@ -44,16 +50,18 @@ func newVoiceTestDB(t *testing.T) *db.DB {
 	t.Cleanup(func() { database.Close() })
 
 	migrFS := fstest.MapFS{
-		"001_schema.sql": {Data: testSchema},
+		"001_schema.sql":   {Data: testSchema},
 		"002_channels.sql": {Data: channelSchema},
 		"003_voice.sql": {Data: []byte(`
 CREATE TABLE IF NOT EXISTS voice_states (
-    user_id    INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
-    channel_id INTEGER NOT NULL REFERENCES channels(id) ON DELETE CASCADE,
-    muted      INTEGER NOT NULL DEFAULT 0,
-    deafened   INTEGER NOT NULL DEFAULT 0,
-    speaking   INTEGER NOT NULL DEFAULT 0,
-    joined_at  TEXT    NOT NULL DEFAULT (datetime('now'))
+    user_id     INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+    channel_id  INTEGER NOT NULL REFERENCES channels(id) ON DELETE CASCADE,
+    muted       INTEGER NOT NULL DEFAULT 0,
+    deafened    INTEGER NOT NULL DEFAULT 0,
+    speaking    INTEGER NOT NULL DEFAULT 0,
+    camera      INTEGER NOT NULL DEFAULT 0,
+    screenshare INTEGER NOT NULL DEFAULT 0,
+    joined_at   TEXT    NOT NULL DEFAULT (datetime('now'))
 );
 CREATE INDEX IF NOT EXISTS idx_voice_states_channel ON voice_states(channel_id);
 `)},
@@ -421,3 +429,274 @@ func TestVoice_GetChannelVoiceStates_IncludesUsername(t *testing.T) {
 		t.Errorf("Username = %q, want %q", states[0].Username, "rachel")
 	}
 }
+
+// ─── UpdateVoiceCamera ────────────────────────────────────────────────────────
+
+func TestVoice_UpdateVoiceCamera_True(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "cam-on")
+	chanID := seedVoiceChannel(t, database, "voice-camera")
+
+	if err := database.JoinVoiceChannel(userID, chanID); err != nil {
+		t.Fatalf("JoinVoiceChannel: %v", err)
+	}
+	if err := database.UpdateVoiceCamera(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceCamera(true): %v", err)
+	}
+
+	state, _ := database.GetVoiceState(userID)
+	if state == nil || !state.Camera {
+		t.Error("Camera = false after UpdateVoiceCamera(true)")
+	}
+}
+
+func TestVoice_UpdateVoiceCamera_False(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "cam-off")
+	chanID := seedVoiceChannel(t, database, "voice-camera-off")
+
+	if err := database.JoinVoiceChannel(userID, chanID); err != nil {
+		t.Fatalf("JoinVoiceChannel: %v", err)
+	}
+	if err := database.UpdateVoiceCamera(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceCamera(true): %v", err)
+	}
+	if err := database.UpdateVoiceCamera(userID, false); err != nil {
+		t.Fatalf("UpdateVoiceCamera(false): %v", err)
+	}
+
+	state, _ := database.GetVoiceState(userID)
+	if state == nil || state.Camera {
+		t.Error("Camera = true after UpdateVoiceCamera(false), want false")
+	}
+}
+
+func TestVoice_UpdateVoiceCamera_NotInChannel_NoError(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "cam-noop")
+
+	if err := database.UpdateVoiceCamera(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceCamera for non-member: %v", err)
+	}
+}
+
+// ─── UpdateVoiceScreenshare ──────────────────────────────────────────────────
+
+func TestVoice_UpdateVoiceScreenshare_True(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "share-on")
+	chanID := seedVoiceChannel(t, database, "voice-screen")
+
+	if err := database.JoinVoiceChannel(userID, chanID); err != nil {
+		t.Fatalf("JoinVoiceChannel: %v", err)
+	}
+	if err := database.UpdateVoiceScreenshare(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceScreenshare(true): %v", err)
+	}
+
+	state, _ := database.GetVoiceState(userID)
+	if state == nil || !state.Screenshare {
+		t.Error("Screenshare = false after UpdateVoiceScreenshare(true)")
+	}
+}
+
+func TestVoice_UpdateVoiceScreenshare_False(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "share-off")
+	chanID := seedVoiceChannel(t, database, "voice-screen-off")
+
+	if err := database.JoinVoiceChannel(userID, chanID); err != nil {
+		t.Fatalf("JoinVoiceChannel: %v", err)
+	}
+	if err := database.UpdateVoiceScreenshare(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceScreenshare(true): %v", err)
+	}
+	if err := database.UpdateVoiceScreenshare(userID, false); err != nil {
+		t.Fatalf("UpdateVoiceScreenshare(false): %v", err)
+	}
+
+	state, _ := database.GetVoiceState(userID)
+	if state == nil || state.Screenshare {
+		t.Error("Screenshare = true after UpdateVoiceScreenshare(false), want false")
+	}
+}
+
+// ─── CountChannelVoiceUsers ──────────────────────────────────────────────────
+
+func TestVoice_CountChannelVoiceUsers_Empty(t *testing.T) {
+	database := newVoiceTestDB(t)
+	chanID := seedVoiceChannel(t, database, "count-empty")
+
+	count, err := database.CountChannelVoiceUsers(chanID)
+	if err != nil {
+		t.Fatalf("CountChannelVoiceUsers: %v", err)
+	}
+	if count != 0 {
+		t.Errorf("count = %d, want 0", count)
+	}
+}
+
+func TestVoice_CountChannelVoiceUsers_Multiple(t *testing.T) {
+	database := newVoiceTestDB(t)
+	u1 := seedVoiceUser(t, database, "count1")
+	u2 := seedVoiceUser(t, database, "count2")
+	u3 := seedVoiceUser(t, database, "count3")
+	chanID := seedVoiceChannel(t, database, "count-multi")
+	otherChan := seedVoiceChannel(t, database, "count-other")
+
+	if err := database.JoinVoiceChannel(u1, chanID); err != nil {
+		t.Fatalf("join u1: %v", err)
+	}
+	if err := database.JoinVoiceChannel(u2, chanID); err != nil {
+		t.Fatalf("join u2: %v", err)
+	}
+	// u3 joins a different channel — should not be counted.
+	if err := database.JoinVoiceChannel(u3, otherChan); err != nil {
+		t.Fatalf("join u3: %v", err)
+	}
+
+	count, err := database.CountChannelVoiceUsers(chanID)
+	if err != nil {
+		t.Fatalf("CountChannelVoiceUsers: %v", err)
+	}
+	if count != 2 {
+		t.Errorf("count = %d, want 2", count)
+	}
+}
+
+// ─── ClearAllVoiceStates ─────────────────────────────────────────────────────
+
+func TestVoice_ClearAllVoiceStates_RemovesAll(t *testing.T) {
+	database := newVoiceTestDB(t)
+	u1 := seedVoiceUser(t, database, "clear1")
+	u2 := seedVoiceUser(t, database, "clear2")
+	chan1 := seedVoiceChannel(t, database, "clear-ch1")
+	chan2 := seedVoiceChannel(t, database, "clear-ch2")
+
+	if err := database.JoinVoiceChannel(u1, chan1); err != nil {
+		t.Fatalf("join u1: %v", err)
+	}
+	if err := database.JoinVoiceChannel(u2, chan2); err != nil {
+		t.Fatalf("join u2: %v", err)
+	}
+
+	if err := database.ClearAllVoiceStates(); err != nil {
+		t.Fatalf("ClearAllVoiceStates: %v", err)
+	}
+
+	s1, _ := database.GetVoiceState(u1)
+	s2, _ := database.GetVoiceState(u2)
+	if s1 != nil || s2 != nil {
+		t.Error("voice states still exist after ClearAllVoiceStates")
+	}
+}
+
+func TestVoice_ClearAllVoiceStates_EmptyTable_NoError(t *testing.T) {
+	database := newVoiceTestDB(t)
+
+	if err := database.ClearAllVoiceStates(); err != nil {
+		t.Fatalf("ClearAllVoiceStates on empty table: %v", err)
+	}
+}
+
+// ─── JoinVoiceChannel resets camera/screenshare ──────────────────────────────
+
+func TestVoice_JoinVoiceChannel_ResetsCameraAndScreenshare(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "reset-av")
+	chan1 := seedVoiceChannel(t, database, "voice-reset1")
+	chan2 := seedVoiceChannel(t, database, "voice-reset2")
+
+	// Join, enable camera and screenshare.
+	if err := database.JoinVoiceChannel(userID, chan1); err != nil {
+		t.Fatalf("first join: %v", err)
+	}
+	if err := database.UpdateVoiceCamera(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceCamera: %v", err)
+	}
+	if err := database.UpdateVoiceScreenshare(userID, true); err != nil {
+		t.Fatalf("UpdateVoiceScreenshare: %v", err)
+	}
+
+	// Join a different channel — camera and screenshare should be reset.
+	if err := database.JoinVoiceChannel(userID, chan2); err != nil {
+		t.Fatalf("second join: %v", err)
+	}
+
+	state, _ := database.GetVoiceState(userID)
+	if state == nil {
+		t.Fatal("GetVoiceState returned nil after re-join")
+	}
+	if state.Camera {
+		t.Error("Camera should be reset to false on re-join")
+	}
+	if state.Screenshare {
+		t.Error("Screenshare should be reset to false on re-join")
+	}
+}
+
+// ─── Camera/Screenshare in GetVoiceState ─────────────────────────────────────
+
+func TestVoice_GetVoiceState_IncludesCameraAndScreenshare(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "av-fields")
+	chanID := seedVoiceChannel(t, database, "voice-av-fields")
+
+	if err := database.JoinVoiceChannel(userID, chanID); err != nil {
+		t.Fatalf("JoinVoiceChannel: %v", err)
+	}
+
+	// Initially both should be false.
+	state, _ := database.GetVoiceState(userID)
+	if state == nil {
+		t.Fatal("GetVoiceState returned nil")
+	}
+	if state.Camera {
+		t.Error("Camera should be false after join")
+	}
+	if state.Screenshare {
+		t.Error("Screenshare should be false after join")
+	}
+
+	// Enable both.
+	database.UpdateVoiceCamera(userID, true)
+	database.UpdateVoiceScreenshare(userID, true)
+
+	state, _ = database.GetVoiceState(userID)
+	if state == nil {
+		t.Fatal("GetVoiceState returned nil after update")
+	}
+	if !state.Camera {
+		t.Error("Camera should be true after UpdateVoiceCamera(true)")
+	}
+	if !state.Screenshare {
+		t.Error("Screenshare should be true after UpdateVoiceScreenshare(true)")
+	}
+}
+
+// ─── Camera/Screenshare in GetChannelVoiceStates ─────────────────────────────
+
+func TestVoice_GetChannelVoiceStates_IncludesCameraAndScreenshare(t *testing.T) {
+	database := newVoiceTestDB(t)
+	userID := seedVoiceUser(t, database, "chan-av")
+	chanID := seedVoiceChannel(t, database, "voice-chan-av")
+
+	if err := database.JoinVoiceChannel(userID, chanID); err != nil {
+		t.Fatalf("JoinVoiceChannel: %v", err)
+	}
+	database.UpdateVoiceCamera(userID, true)
+
+	states, err := database.GetChannelVoiceStates(chanID)
+	if err != nil {
+		t.Fatalf("GetChannelVoiceStates: %v", err)
+	}
+	if len(states) != 1 {
+		t.Fatalf("got %d states, want 1", len(states))
+	}
+	if !states[0].Camera {
+		t.Error("Camera should be true in GetChannelVoiceStates")
+	}
+	if states[0].Screenshare {
+		t.Error("Screenshare should be false in GetChannelVoiceStates")
+	}
+}
diff --git a/Server/go.mod b/Server/go.mod
index 4dba34b7..089986ca 100644
--- a/Server/go.mod
+++ b/Server/go.mod
@@ -30,11 +30,29 @@ require (
 	github.com/mitchellh/copystructure v1.2.0 // indirect
 	github.com/mitchellh/reflectwalk v1.0.2 // indirect
 	github.com/ncruces/go-strftime v1.0.0 // indirect
+	github.com/pion/datachannel v1.6.0 // indirect
+	github.com/pion/dtls/v3 v3.1.2 // indirect
+	github.com/pion/ice/v4 v4.2.1 // indirect
+	github.com/pion/interceptor v0.1.44 // indirect
+	github.com/pion/logging v0.2.4 // indirect
+	github.com/pion/mdns/v2 v2.1.0 // indirect
+	github.com/pion/randutil v0.1.0 // indirect
+	github.com/pion/rtcp v1.2.16 // indirect
+	github.com/pion/rtp v1.10.1 // indirect
+	github.com/pion/sctp v1.9.2 // indirect
+	github.com/pion/sdp/v3 v3.0.18 // indirect
+	github.com/pion/srtp/v3 v3.0.10 // indirect
+	github.com/pion/stun/v3 v3.1.1 // indirect
+	github.com/pion/transport/v4 v4.0.1 // indirect
+	github.com/pion/turn/v4 v4.1.4 // indirect
+	github.com/pion/webrtc/v4 v4.2.9 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/wlynxg/anet v0.0.5 // indirect
 	golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546 // indirect
 	golang.org/x/net v0.51.0 // indirect
 	golang.org/x/sys v0.42.0 // indirect
 	golang.org/x/text v0.35.0 // indirect
+	golang.org/x/time v0.10.0 // indirect
 	modernc.org/libc v1.67.6 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
diff --git a/Server/go.sum b/Server/go.sum
index 2bbf492f..9f916854 100644
--- a/Server/go.sum
+++ b/Server/go.sum
@@ -46,12 +46,47 @@ github.com/mitchellh/reflectwalk v1.0.2 h1:G2LzWKi524PWgd3mLHV8Y5k7s6XUvT0Gef6zx
 github.com/mitchellh/reflectwalk v1.0.2/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
 github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
 github.com/ncruces/go-strftime v1.0.0/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/pion/datachannel v1.6.0 h1:XecBlj+cvsxhAMZWFfFcPyUaDZtd7IJvrXqlXD/53i0=
+github.com/pion/datachannel v1.6.0/go.mod h1:ur+wzYF8mWdC+Mkis5Thosk+u/VOL287apDNEbFpsIk=
+github.com/pion/dtls/v3 v3.1.2 h1:gqEdOUXLtCGW+afsBLO0LtDD8GnuBBjEy6HRtyofZTc=
+github.com/pion/dtls/v3 v3.1.2/go.mod h1:Hw/igcX4pdY69z1Hgv5x7wJFrUkdgHwAn/Q/uo7YHRo=
+github.com/pion/ice/v4 v4.2.1 h1:XPRYXaLiFq3LFDG7a7bMrmr3mFr27G/gtXN3v/TVfxY=
+github.com/pion/ice/v4 v4.2.1/go.mod h1:2quLV1S5v1tAx3VvAJaH//KGitRXvo4RKlX6D3tnN+c=
+github.com/pion/interceptor v0.1.44 h1:sNlZwM8dWXU9JQAkJh8xrarC0Etn8Oolcniukmuy0/I=
+github.com/pion/interceptor v0.1.44/go.mod h1:4atVlBkcgXuUP+ykQF0qOCGU2j7pQzX2ofvPRFsY5RY=
+github.com/pion/logging v0.2.4 h1:tTew+7cmQ+Mc1pTBLKH2puKsOvhm32dROumOZ655zB8=
+github.com/pion/logging v0.2.4/go.mod h1:DffhXTKYdNZU+KtJ5pyQDjvOAh/GsNSyv1lbkFbe3so=
+github.com/pion/mdns/v2 v2.1.0 h1:3IJ9+Xio6tWYjhN6WwuY142P/1jA0D5ERaIqawg/fOY=
+github.com/pion/mdns/v2 v2.1.0/go.mod h1:pcez23GdynwcfRU1977qKU0mDxSeucttSHbCSfFOd9A=
+github.com/pion/randutil v0.1.0 h1:CFG1UdESneORglEsnimhUjf33Rwjubwj6xfiOXBa3mA=
+github.com/pion/randutil v0.1.0/go.mod h1:XcJrSMMbbMRhASFVOlj/5hQial/Y8oH/HVo7TBZq+j8=
+github.com/pion/rtcp v1.2.16 h1:fk1B1dNW4hsI78XUCljZJlC4kZOPk67mNRuQ0fcEkSo=
+github.com/pion/rtcp v1.2.16/go.mod h1:/as7VKfYbs5NIb4h6muQ35kQF/J0ZVNz2Z3xKoCBYOo=
+github.com/pion/rtp v1.10.1 h1:xP1prZcCTUuhO2c83XtxyOHJteISg6o8iPsE2acaMtA=
+github.com/pion/rtp v1.10.1/go.mod h1:rF5nS1GqbR7H/TCpKwylzeq6yDM+MM6k+On5EgeThEM=
+github.com/pion/sctp v1.9.2 h1:HxsOzEV9pWoeggv7T5kewVkstFNcGvhMPx0GvUOUQXo=
+github.com/pion/sctp v1.9.2/go.mod h1:OTOlsQ5EDQ6mQ0z4MUGXt2CgQmKyafBEXhUVqLRB6G8=
+github.com/pion/sdp/v3 v3.0.18 h1:l0bAXazKHpepazVdp+tPYnrsy9dfh7ZbT8DxesH5ZnI=
+github.com/pion/sdp/v3 v3.0.18/go.mod h1:ZREGo6A9ZygQ9XkqAj5xYCQtQpif0i6Pa81HOiAdqQ8=
+github.com/pion/srtp/v3 v3.0.10 h1:tFirkpBb3XccP5VEXLi50GqXhv5SKPxqrdlhDCJlZrQ=
+github.com/pion/srtp/v3 v3.0.10/go.mod h1:3mOTIB0cq9qlbn59V4ozvv9ClW/BSEbRp4cY0VtaR7M=
+github.com/pion/stun/v3 v3.1.1 h1:CkQxveJ4xGQjulGSROXbXq94TAWu8gIX2dT+ePhUkqw=
+github.com/pion/stun/v3 v3.1.1/go.mod h1:qC1DfmcCTQjl9PBaMa5wSn3x9IPmKxSdcCsxBcDBndM=
+github.com/pion/transport/v4 v4.0.1 h1:sdROELU6BZ63Ab7FrOLn13M6YdJLY20wldXW2Cu2k8o=
+github.com/pion/transport/v4 v4.0.1/go.mod h1:nEuEA4AD5lPdcIegQDpVLgNoDGreqM/YqmEx3ovP4jM=
+github.com/pion/turn/v4 v4.1.4 h1:EU11yMXKIsK43FhcUnjLlrhE4nboHZq+TXBIi3QpcxQ=
+github.com/pion/turn/v4 v4.1.4/go.mod h1:ES1DXVFKnOhuDkqn9hn5VJlSWmZPaRJLyBXoOeO/BmQ=
+github.com/pion/webrtc/v4 v4.2.9 h1:DZIh1HAhPIL3RvwEDFsmL5hfPSLEpxsQk9/Jir2vkJE=
+github.com/pion/webrtc/v4 v4.2.9/go.mod h1:9EmLZve0H76eTzf8v2FmchZ6tcBXtDgpfTEu+drW6SY=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
+github.com/wlynxg/anet v0.0.5 h1:J3VJGi1gvo0JwZ/P1/Yc/8p63SoW98B5dHkYDmpgvvU=
+github.com/wlynxg/anet v0.0.5/go.mod h1:eay5PRQr7fIVAMbTbchTnO9gG65Hg/uYGdc7mguHxoA=
 go.yaml.in/yaml/v3 v3.0.3 h1:bXOww4E/J3f66rav3pX3m8w6jDE4knZjGOw8b5Y6iNE=
 go.yaml.in/yaml/v3 v3.0.3/go.mod h1:tBHosrYAkRZjRAOREWbDnBXUf08JOwYq++0QNwQiWzI=
 golang.org/x/crypto v0.49.0 h1:+Ng2ULVvLHnJ/ZFEq4KdcDd/cfjrrjjNSXNzxg0Y4U4=
@@ -69,6 +104,8 @@ golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=
 golang.org/x/sys v0.42.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
 golang.org/x/text v0.35.0 h1:JOVx6vVDFokkpaq1AEptVzLTpDe9KGpj5tR4/X+ybL8=
 golang.org/x/text v0.35.0/go.mod h1:khi/HExzZJ2pGnjenulevKNX1W67CUy0AsXcNubPGCA=
+golang.org/x/time v0.10.0 h1:3usCWA8tQn0L8+hFJQNgzpWbd89begxN66o1Ojdn5L4=
+golang.org/x/time v0.10.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.42.0 h1:uNgphsn75Tdz5Ji2q36v/nsFSfR/9BRFvqhGBaJGd5k=
 golang.org/x/tools v0.42.0/go.mod h1:Ma6lCIwGZvHK6XtgbswSoWroEkhugApmsXyrUmBhfr0=
 gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 h1:YR8cESwS4TdDjEe65xsg0ogRM/Nc3DYOhEAlW+xobZo=
diff --git a/Server/main.go b/Server/main.go
index fdf6e80e..cb3850c8 100644
--- a/Server/main.go
+++ b/Server/main.go
@@ -74,6 +74,14 @@ func run(log *slog.Logger) error {
 	if err := db.Migrate(database); err != nil {
 		return fmt.Errorf("running migrations: %w", err)
 	}
+
+	// Clear stale voice states from a previous run.
+	if err := database.ClearAllVoiceStates(); err != nil {
+		log.Warn("failed to clear stale voice states", "error", err)
+	} else {
+		log.Info("cleared stale voice states")
+	}
+
 	// ── 4. TLS ─────────────────────────────────────────────────────────────
 	tlsResult, err := auth.LoadOrGenerate(cfg.TLS)
 	if err != nil {
diff --git a/Server/migrations/003_voice_optimization.sql b/Server/migrations/003_voice_optimization.sql
new file mode 100644
index 00000000..e1b882b3
--- /dev/null
+++ b/Server/migrations/003_voice_optimization.sql
@@ -0,0 +1,9 @@
+-- Phase 5b: Voice optimization — add camera/screenshare tracking and
+-- per-channel voice configuration for the Pion SFU.
+ALTER TABLE voice_states ADD COLUMN camera INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE voice_states ADD COLUMN screenshare INTEGER NOT NULL DEFAULT 0;
+
+ALTER TABLE channels ADD COLUMN voice_max_users INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE channels ADD COLUMN voice_quality TEXT;
+ALTER TABLE channels ADD COLUMN mixing_threshold INTEGER;
+ALTER TABLE channels ADD COLUMN voice_max_video INTEGER NOT NULL DEFAULT 10;
diff --git a/Server/ws/client.go b/Server/ws/client.go
index 74e98772..e87d5b5a 100644
--- a/Server/ws/client.go
+++ b/Server/ws/client.go
@@ -3,6 +3,8 @@ package ws
 import (
 	"sync"
 
+	"github.com/pion/webrtc/v4"
+
 	"github.com/owncord/server/db"
 )
 
@@ -21,11 +23,14 @@ type Client struct {
 	userID     int64
 	user       *db.User
 	channelID  int64  // currently viewed channel for channel-scoped broadcasts
+	voiceChID  int64  // voice channel the user is in (0 = not in voice); guarded by voiceMu
+	pc         *webrtc.PeerConnection // SFU peer connection; nil when not in voice; guarded by voiceMu
 	tokenHash  string // SHA-256 hex of the session token; used for periodic revalidation
 	msgCount   int    // count of messages processed; resets after session check
 	sendClosed bool   // true after the send channel has been closed
 	send       chan []byte
-	mu         sync.Mutex
+	mu         sync.Mutex // guards sendClosed, msgCount, channelID
+	voiceMu    sync.Mutex // guards voiceChID and pc
 }
 
 // wsConn is the subset of nhooyr.io/websocket.Conn used by writePump/readPump.
@@ -85,6 +90,13 @@ func NewTestClientWithUser(hub *Hub, user *db.User, channelID int64, send chan [
 	}
 }
 
+// SetClientVoiceChID sets the voiceChID field on a client. For test use only.
+func SetClientVoiceChID(c *Client, channelID int64) {
+	c.voiceMu.Lock()
+	defer c.voiceMu.Unlock()
+	c.voiceChID = channelID
+}
+
 // NewTestClientWithTokenHash creates a test client that carries a session token
 // hash. Use this when tests need to exercise the periodic session-expiry check.
 func NewTestClientWithTokenHash(hub *Hub, user *db.User, tokenHash string, channelID int64, send chan []byte) *Client {
@@ -98,6 +110,40 @@ func NewTestClientWithTokenHash(hub *Hub, user *db.User, tokenHash string, chann
 	}
 }
 
+// getVoiceChID returns the voice channel ID under voiceMu.
+func (c *Client) getVoiceChID() int64 {
+	c.voiceMu.Lock()
+	defer c.voiceMu.Unlock()
+	return c.voiceChID
+}
+
+// getPC returns the PeerConnection under voiceMu.
+func (c *Client) getPC() *webrtc.PeerConnection {
+	c.voiceMu.Lock()
+	defer c.voiceMu.Unlock()
+	return c.pc
+}
+
+// setVoice sets the voice channel and PeerConnection atomically.
+func (c *Client) setVoice(chID int64, pc *webrtc.PeerConnection) {
+	c.voiceMu.Lock()
+	defer c.voiceMu.Unlock()
+	c.voiceChID = chID
+	c.pc = pc
+}
+
+// clearVoice clears voice state and returns the old values for cleanup.
+// The caller is responsible for closing the returned PeerConnection.
+func (c *Client) clearVoice() (oldChID int64, oldPC *webrtc.PeerConnection) {
+	c.voiceMu.Lock()
+	defer c.voiceMu.Unlock()
+	oldChID = c.voiceChID
+	oldPC = c.pc
+	c.voiceChID = 0
+	c.pc = nil
+	return
+}
+
 // sendMsg queues a message to this client's send buffer without blocking.
 // It is a no-op if the send channel has already been closed.
 func (c *Client) sendMsg(msg []byte) {
diff --git a/Server/ws/handlers.go b/Server/ws/handlers.go
index e5705eb0..3ff7bd52 100644
--- a/Server/ws/handlers.go
+++ b/Server/ws/handlers.go
@@ -31,6 +31,14 @@ func (h *Hub) HandleMessageForTest(c *Client, raw []byte) {
 	h.handleMessage(c, raw)
 }
 
+// HandleVoiceLeaveForTest calls handleVoiceLeave directly, simulating a
+// disconnect-triggered cleanup without an explicit voice_leave message.
+// Exported for ws_test package use only.
+func (h *Hub) HandleVoiceLeaveForTest(c *Client) {
+	h.handleVoiceLeave(c)
+}
+
+
 // handleMessage parses the envelope and dispatches to the appropriate handler.
 func (h *Hub) handleMessage(c *Client, raw []byte) {
 	// Periodic session expiry check: every SessionCheckInterval messages,
@@ -85,8 +93,16 @@ func (h *Hub) handleMessage(c *Client, raw []byte) {
 		h.handleVoiceMute(c, env.Payload)
 	case "voice_deafen":
 		h.handleVoiceDeafen(c, env.Payload)
-	case "voice_offer", "voice_answer", "voice_ice":
-		h.handleVoiceSignal(c, env.Type, env.Payload)
+	case "voice_camera":
+		h.handleVoiceCamera(c, env.Payload)
+	case "voice_screenshare":
+		h.handleVoiceScreenshare(c, env.Payload)
+	case "voice_offer":
+		h.handleVoiceOffer(c, env.Payload)
+	case "voice_answer":
+		h.handleVoiceAnswer(c, env.Payload)
+	case "voice_ice":
+		h.handleVoiceICE(c, env.Payload)
 	case "soundboard_play":
 		h.handleSoundboard(c, env.Payload)
 	default:
diff --git a/Server/ws/hub.go b/Server/ws/hub.go
index 10a3d524..a5c8ba39 100644
--- a/Server/ws/hub.go
+++ b/Server/ws/hub.go
@@ -18,14 +18,17 @@ type broadcastMsg struct {
 // Hub manages all active WebSocket clients and routes messages between them.
 // All exported methods are safe to call from multiple goroutines.
 type Hub struct {
-	clients    map[int64]*Client
-	mu         sync.RWMutex
-	db         *db.DB
-	limiter    *auth.RateLimiter
-	broadcast  chan broadcastMsg
-	register   chan *Client
-	unregister chan *Client
-	stop       chan struct{}
+	clients      map[int64]*Client
+	mu           sync.RWMutex
+	db           *db.DB
+	limiter      *auth.RateLimiter
+	broadcast    chan broadcastMsg
+	register     chan *Client
+	unregister   chan *Client
+	stop         chan struct{}
+	sfu          *SFU
+	voiceRooms   map[int64]*VoiceRoom
+	voiceRoomsMu sync.RWMutex
 }
 
 // NewHub creates a Hub ready to be started with Run.
@@ -38,12 +41,70 @@ func NewHub(database *db.DB, limiter *auth.RateLimiter) *Hub {
 		register:   make(chan *Client, 32),
 		unregister: make(chan *Client, 32),
 		stop:       make(chan struct{}),
+		voiceRooms: make(map[int64]*VoiceRoom),
+	}
+}
+
+// SetSFU sets the SFU engine on the hub. Must be called before Run.
+func (h *Hub) SetSFU(sfu *SFU) {
+	h.sfu = sfu
+}
+
+// GetOrCreateVoiceRoom returns the existing room for channelID or creates one.
+// cfg provides the room config (from channel settings and server defaults).
+func (h *Hub) GetOrCreateVoiceRoom(channelID int64, cfg VoiceRoomConfig) *VoiceRoom {
+	h.voiceRoomsMu.Lock()
+	defer h.voiceRoomsMu.Unlock()
+
+	if room, ok := h.voiceRooms[channelID]; ok {
+		return room
+	}
+	room := NewVoiceRoom(cfg)
+	h.voiceRooms[channelID] = room
+	return room
+}
+
+// GetVoiceRoom returns the room for channelID, or nil if none exists.
+func (h *Hub) GetVoiceRoom(channelID int64) *VoiceRoom {
+	h.voiceRoomsMu.RLock()
+	defer h.voiceRoomsMu.RUnlock()
+	return h.voiceRooms[channelID]
+}
+
+// RemoveVoiceRoom removes and closes the room for channelID. No-op if absent.
+func (h *Hub) RemoveVoiceRoom(channelID int64) {
+	h.voiceRoomsMu.Lock()
+	room, ok := h.voiceRooms[channelID]
+	if ok {
+		delete(h.voiceRooms, channelID)
+	}
+	h.voiceRoomsMu.Unlock()
+
+	if ok {
+		room.Close()
+	}
+}
+
+// CloseAllVoiceRooms closes all voice rooms. Called during shutdown.
+func (h *Hub) CloseAllVoiceRooms() {
+	h.voiceRoomsMu.Lock()
+	rooms := make([]*VoiceRoom, 0, len(h.voiceRooms))
+	for _, room := range h.voiceRooms {
+		rooms = append(rooms, room)
+	}
+	h.voiceRooms = make(map[int64]*VoiceRoom)
+	h.voiceRoomsMu.Unlock()
+
+	for _, room := range rooms {
+		room.Close()
 	}
 }
 
 // Run starts the hub's dispatch loop. It blocks until Stop is called.
 // Must be called in its own goroutine.
 func (h *Hub) Run() {
+	go h.runSpeakerBroadcast(h.stop)
+
 	for {
 		select {
 		case <-h.stop:
@@ -53,7 +114,23 @@ func (h *Hub) Run() {
 			h.mu.Lock()
 			// If an existing client has the same userID, close its send channel
 			// so writePump exits cleanly before the new client takes over.
+			// Also clean up any voice state the old client held.
 			if old, ok := h.clients[c.userID]; ok && old != c {
+				oldChID, oldPC := old.clearVoice()
+				if oldPC != nil {
+					_ = oldPC.Close()
+				}
+				if oldChID > 0 {
+					if room := h.GetVoiceRoom(oldChID); room != nil {
+						room.RemoveParticipant(old.userID)
+						if room.IsEmpty() {
+							h.voiceRoomsMu.Lock()
+							delete(h.voiceRooms, oldChID)
+							h.voiceRoomsMu.Unlock()
+						}
+					}
+					_ = h.db.LeaveVoiceChannel(old.userID)
+				}
 				old.closeSend()
 			}
 			h.clients[c.userID] = c
@@ -77,6 +154,55 @@ func (h *Hub) Stop() {
 	close(h.stop)
 }
 
+// GracefulStop closes all PeerConnections, voice rooms, and then stops the hub.
+func (h *Hub) GracefulStop() {
+	// Close all client PeerConnections first (CRIT-2 fix).
+	h.mu.RLock()
+	for _, c := range h.clients {
+		if _, oldPC := c.clearVoice(); oldPC != nil {
+			_ = oldPC.Close()
+		}
+	}
+	h.mu.RUnlock()
+
+	h.CloseAllVoiceRooms()
+	close(h.stop)
+}
+
+// CleanupVoiceForChannel removes the voice room for the given channel and
+// closes PeerConnections for all participants. Called when a channel is deleted.
+func (h *Hub) CleanupVoiceForChannel(channelID int64) {
+	room := h.GetVoiceRoom(channelID)
+	if room == nil {
+		return
+	}
+
+	// Get participant IDs before removing the room.
+	participantIDs := room.ParticipantIDs()
+
+	// Remove the room (this also calls room.Close() which clears participants).
+	h.RemoveVoiceRoom(channelID)
+
+	// Close PeerConnections and clean up DB state for all participants.
+	// Use RLock for client map read; voice fields are guarded by voiceMu (HIGH-3 fix).
+	h.mu.RLock()
+	for _, userID := range participantIDs {
+		if client, ok := h.clients[userID]; ok {
+			if _, oldPC := client.clearVoice(); oldPC != nil {
+				_ = oldPC.Close()
+			}
+		}
+		// Clean up DB voice state (best-effort; ignore error).
+		_ = h.db.LeaveVoiceChannel(userID)
+	}
+	h.mu.RUnlock()
+
+	// Broadcast voice_leave for each participant.
+	for _, userID := range participantIDs {
+		h.BroadcastToChannel(channelID, buildVoiceLeave(channelID, userID))
+	}
+}
+
 // Register queues a client for registration with the hub.
 func (h *Hub) Register(c *Client) {
 	h.register <- c
diff --git a/Server/ws/hub_test.go b/Server/ws/hub_test.go
index bbe67d6c..a38fa330 100644
--- a/Server/ws/hub_test.go
+++ b/Server/ws/hub_test.go
@@ -425,6 +425,266 @@ func assertNotReceived(t *testing.T, ch <-chan []byte, label string) {
 	}
 }
 
+// ─── Voice room lifecycle ─────────────────────────────────────────────────────
+
+func TestHub_SetSFU_NilSafe(t *testing.T) {
+	hub, _ := newTestHub(t)
+	// Setting a nil SFU must not panic.
+	hub.SetSFU(nil)
+}
+
+func TestHub_GetOrCreateVoiceRoom_CreatesNew(t *testing.T) {
+	hub, _ := newTestHub(t)
+	cfg := ws.VoiceRoomConfig{ChannelID: 42, MaxUsers: 10, Quality: "medium"}
+
+	room := hub.GetOrCreateVoiceRoom(42, cfg)
+	if room == nil {
+		t.Fatal("GetOrCreateVoiceRoom returned nil")
+	}
+}
+
+func TestHub_GetOrCreateVoiceRoom_ReturnsSameRoom(t *testing.T) {
+	hub, _ := newTestHub(t)
+	cfg := ws.VoiceRoomConfig{ChannelID: 99, MaxUsers: 5, Quality: "low"}
+
+	r1 := hub.GetOrCreateVoiceRoom(99, cfg)
+	r2 := hub.GetOrCreateVoiceRoom(99, cfg)
+	if r1 != r2 {
+		t.Error("GetOrCreateVoiceRoom should return the same room on subsequent calls")
+	}
+}
+
+func TestHub_GetOrCreateVoiceRoom_DifferentChannels(t *testing.T) {
+	hub, _ := newTestHub(t)
+	cfg1 := ws.VoiceRoomConfig{ChannelID: 1, Quality: "low"}
+	cfg2 := ws.VoiceRoomConfig{ChannelID: 2, Quality: "high"}
+
+	r1 := hub.GetOrCreateVoiceRoom(1, cfg1)
+	r2 := hub.GetOrCreateVoiceRoom(2, cfg2)
+	if r1 == r2 {
+		t.Error("different channel IDs must produce distinct rooms")
+	}
+}
+
+func TestHub_GetVoiceRoom_ReturnsNilWhenAbsent(t *testing.T) {
+	hub, _ := newTestHub(t)
+	room := hub.GetVoiceRoom(404)
+	if room != nil {
+		t.Errorf("GetVoiceRoom: want nil for absent channel, got %v", room)
+	}
+}
+
+func TestHub_GetVoiceRoom_ReturnsRoomAfterCreate(t *testing.T) {
+	hub, _ := newTestHub(t)
+	cfg := ws.VoiceRoomConfig{ChannelID: 7, Quality: "medium"}
+	hub.GetOrCreateVoiceRoom(7, cfg)
+
+	room := hub.GetVoiceRoom(7)
+	if room == nil {
+		t.Fatal("GetVoiceRoom: want non-nil after GetOrCreateVoiceRoom, got nil")
+	}
+}
+
+func TestHub_RemoveVoiceRoom_NoopWhenAbsent(t *testing.T) {
+	hub, _ := newTestHub(t)
+	// Must not panic on removal of non-existent room.
+	hub.RemoveVoiceRoom(999)
+}
+
+func TestHub_RemoveVoiceRoom_RemovesRoom(t *testing.T) {
+	hub, _ := newTestHub(t)
+	cfg := ws.VoiceRoomConfig{ChannelID: 55, Quality: "low"}
+	hub.GetOrCreateVoiceRoom(55, cfg)
+
+	hub.RemoveVoiceRoom(55)
+	if hub.GetVoiceRoom(55) != nil {
+		t.Error("GetVoiceRoom: want nil after RemoveVoiceRoom")
+	}
+}
+
+func TestHub_CloseAllVoiceRooms_ClearsAll(t *testing.T) {
+	hub, _ := newTestHub(t)
+	for _, id := range []int64{10, 20, 30} {
+		hub.GetOrCreateVoiceRoom(id, ws.VoiceRoomConfig{ChannelID: id, Quality: "medium"})
+	}
+
+	hub.CloseAllVoiceRooms()
+
+	for _, id := range []int64{10, 20, 30} {
+		if hub.GetVoiceRoom(id) != nil {
+			t.Errorf("GetVoiceRoom(%d): want nil after CloseAllVoiceRooms", id)
+		}
+	}
+}
+
+func TestHub_CloseAllVoiceRooms_EmptyIsNoop(t *testing.T) {
+	hub, _ := newTestHub(t)
+	// Must not panic when no rooms exist.
+	hub.CloseAllVoiceRooms()
+}
+
+func TestHub_VoiceRooms_ConcurrentAccess(t *testing.T) {
+	hub, _ := newTestHub(t)
+	var wg sync.WaitGroup
+
+	// Concurrent creates and reads must not race.
+	for i := int64(0); i < 20; i++ {
+		wg.Add(1)
+		go func(id int64) {
+			defer wg.Done()
+			cfg := ws.VoiceRoomConfig{ChannelID: id, Quality: "medium"}
+			hub.GetOrCreateVoiceRoom(id, cfg)
+			hub.GetVoiceRoom(id)
+			hub.RemoveVoiceRoom(id)
+		}(i)
+	}
+	wg.Wait()
+}
+
+// ─── GracefulStop ─────────────────────────────────────────────────────────────
+
+func TestHub_GracefulStop_StopsHub(t *testing.T) {
+	hub, _ := newTestHub(t)
+	done := make(chan struct{})
+	go func() {
+		hub.Run()
+		close(done)
+	}()
+	time.Sleep(10 * time.Millisecond)
+
+	hub.GracefulStop()
+
+	select {
+	case <-done:
+		// ok — hub stopped
+	case <-time.After(2 * time.Second):
+		t.Error("hub.Run() did not stop after GracefulStop()")
+	}
+}
+
+func TestHub_GracefulStop_ClosesAllVoiceRooms(t *testing.T) {
+	hub, _ := newTestHub(t)
+	for _, id := range []int64{100, 200, 300} {
+		hub.GetOrCreateVoiceRoom(id, ws.VoiceRoomConfig{ChannelID: id, Quality: "low"})
+	}
+	go hub.Run()
+
+	hub.GracefulStop()
+	time.Sleep(20 * time.Millisecond)
+
+	for _, id := range []int64{100, 200, 300} {
+		if hub.GetVoiceRoom(id) != nil {
+			t.Errorf("GetVoiceRoom(%d): expected nil after GracefulStop", id)
+		}
+	}
+}
+
+func TestHub_GracefulStop_NoRooms_NoPanic(t *testing.T) {
+	hub, _ := newTestHub(t)
+	go hub.Run()
+	// Must not panic with zero voice rooms.
+	hub.GracefulStop()
+}
+
+// ─── CleanupVoiceForChannel ───────────────────────────────────────────────────
+
+func TestHub_CleanupVoiceForChannel_RemovesRoom(t *testing.T) {
+	hub, _ := newTestHub(t)
+	chID := int64(55)
+	hub.GetOrCreateVoiceRoom(chID, ws.VoiceRoomConfig{ChannelID: chID, Quality: "medium"})
+
+	hub.CleanupVoiceForChannel(chID)
+
+	if hub.GetVoiceRoom(chID) != nil {
+		t.Error("expected room to be nil after CleanupVoiceForChannel")
+	}
+}
+
+func TestHub_CleanupVoiceForChannel_NoRoom_NoPanic(t *testing.T) {
+	hub, _ := newTestHub(t)
+	// Must not panic when channel has no voice room.
+	hub.CleanupVoiceForChannel(9999)
+}
+
+func TestHub_CleanupVoiceForChannel_BroadcastsVoiceLeave(t *testing.T) {
+	hub, database := newTestHub(t)
+	go hub.Run()
+	defer hub.Stop()
+
+	chID := seedTestChannel(t, database, "cleanup-vc")
+	u1 := seedTestUser(t, database, "cleanup-user1")
+	u2 := seedTestUser(t, database, "cleanup-user2")
+
+	send1 := make(chan []byte, 16)
+	send2 := make(chan []byte, 16)
+	c1 := ws.NewTestClientWithChannel(hub, u1, chID, send1)
+	c2 := ws.NewTestClientWithChannel(hub, u2, chID, send2)
+	hub.Register(c1)
+	hub.Register(c2)
+	time.Sleep(20 * time.Millisecond)
+
+	room := hub.GetOrCreateVoiceRoom(chID, ws.VoiceRoomConfig{ChannelID: chID, Quality: "medium"})
+	if err := room.AddParticipant(u1); err != nil {
+		t.Fatalf("AddParticipant u1: %v", err)
+	}
+	if err := room.AddParticipant(u2); err != nil {
+		t.Fatalf("AddParticipant u2: %v", err)
+	}
+
+	hub.CleanupVoiceForChannel(chID)
+	time.Sleep(50 * time.Millisecond)
+
+	// At least one of the clients must receive a voice_leave.
+	allMsgs := append(drainChan(send1), drainChan(send2)...)
+	found := false
+	for _, msg := range allMsgs {
+		var env map[string]interface{}
+		if err := json.Unmarshal(msg, &env); err == nil {
+			if env["type"] == "voice_leave" {
+				found = true
+				break
+			}
+		}
+	}
+	if !found {
+		t.Error("expected voice_leave broadcast after CleanupVoiceForChannel")
+	}
+}
+
+// ─── Hub.Register voice state cleanup ────────────────────────────────────────
+
+func TestHub_Register_CleansUpOldVoiceState(t *testing.T) {
+	// Use voiceHub (has voice_states table) so handleVoiceJoin succeeds.
+	hub, database := newVoiceHub(t)
+
+	user := seedVoiceOwner(t, database, "register-voice-user")
+	chID := seedVoiceChan(t, database, "vc-register-voice")
+
+	// Create the voice room and register the first client.
+	room := hub.GetOrCreateVoiceRoom(chID, ws.VoiceRoomConfig{ChannelID: chID, Quality: "medium"})
+
+	send1 := make(chan []byte, 16)
+	c1 := ws.NewTestClientWithUser(hub, user, chID, send1)
+	if err := room.AddParticipant(user.ID); err != nil {
+		t.Fatalf("AddParticipant: %v", err)
+	}
+	ws.SetClientVoiceChID(c1, chID)
+
+	hub.Register(c1)
+	time.Sleep(20 * time.Millisecond)
+
+	// Register a second client for the same user — should evict the first.
+	send2 := make(chan []byte, 16)
+	c2 := ws.NewTestClientWithUser(hub, user, chID, send2)
+	hub.Register(c2)
+	time.Sleep(30 * time.Millisecond)
+
+	// The old client's voice state in the room should be cleaned up.
+	if room.HasParticipant(user.ID) {
+		t.Error("expected old client's voice participation to be cleaned up after re-register")
+	}
+}
+
 // hubTestSchema is the minimal schema needed for hub tests.
 var hubTestSchema = []byte(`
 CREATE TABLE IF NOT EXISTS roles (
@@ -469,15 +729,19 @@ CREATE TABLE IF NOT EXISTS sessions (
 );
 
 CREATE TABLE IF NOT EXISTS channels (
-    id         INTEGER PRIMARY KEY AUTOINCREMENT,
-    name       TEXT    NOT NULL,
-    type       TEXT    NOT NULL DEFAULT 'text',
-    category   TEXT,
-    topic      TEXT,
-    position   INTEGER NOT NULL DEFAULT 0,
-    slow_mode  INTEGER NOT NULL DEFAULT 0,
-    archived   INTEGER NOT NULL DEFAULT 0,
-    created_at TEXT    NOT NULL DEFAULT (datetime('now'))
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    name             TEXT    NOT NULL,
+    type             TEXT    NOT NULL DEFAULT 'text',
+    category         TEXT,
+    topic            TEXT,
+    position         INTEGER NOT NULL DEFAULT 0,
+    slow_mode        INTEGER NOT NULL DEFAULT 0,
+    archived         INTEGER NOT NULL DEFAULT 0,
+    created_at       TEXT    NOT NULL DEFAULT (datetime('now')),
+    voice_max_users  INTEGER NOT NULL DEFAULT 0,
+    voice_quality    TEXT,
+    mixing_threshold INTEGER,
+    voice_max_video  INTEGER NOT NULL DEFAULT 0
 );
 
 CREATE TABLE IF NOT EXISTS channel_overrides (
diff --git a/Server/ws/messages.go b/Server/ws/messages.go
index 689c8683..017b4030 100644
--- a/Server/ws/messages.go
+++ b/Server/ws/messages.go
@@ -154,12 +154,42 @@ func buildVoiceState(state db.VoiceState) []byte {
 	return buildJSON(map[string]any{
 		"type": "voice_state",
 		"payload": map[string]any{
-			"channel_id": state.ChannelID,
-			"user_id":    state.UserID,
-			"username":   state.Username,
-			"muted":      state.Muted,
-			"deafened":   state.Deafened,
-			"speaking":   state.Speaking,
+			"channel_id":  state.ChannelID,
+			"user_id":     state.UserID,
+			"username":    state.Username,
+			"muted":       state.Muted,
+			"deafened":    state.Deafened,
+			"speaking":    state.Speaking,
+			"camera":      state.Camera,
+			"screenshare": state.Screenshare,
+		},
+	})
+}
+
+// buildVoiceConfig constructs a voice_config message sent after voice_join acceptance.
+func buildVoiceConfig(channelID int64, quality string, bitrate int, mode string, threshold, topSpeakers, maxUsers int) []byte {
+	return buildJSON(map[string]any{
+		"type": "voice_config",
+		"payload": map[string]any{
+			"channel_id":       channelID,
+			"quality":          quality,
+			"bitrate":          bitrate,
+			"threshold_mode":   mode,
+			"mixing_threshold": threshold,
+			"top_speakers":     topSpeakers,
+			"max_users":        maxUsers,
+		},
+	})
+}
+
+// buildVoiceSpeakers constructs a voice_speakers broadcast.
+func buildVoiceSpeakers(channelID int64, speakers []int64, mode string) []byte {
+	return buildJSON(map[string]any{
+		"type": "voice_speakers",
+		"payload": map[string]any{
+			"channel_id":     channelID,
+			"speakers":       speakers,
+			"threshold_mode": mode,
 		},
 	})
 }
@@ -175,13 +205,26 @@ func buildVoiceLeave(channelID, userID int64) []byte {
 	})
 }
 
-// buildVoiceSignalRelay relays a signaling message (offer/answer/ice) as-is to
-// channel members. The original payload is embedded unchanged.
-// channelID is provided for future filtering logic.
-func buildVoiceSignalRelay(msgType string, _ int64, data json.RawMessage) []byte {
+// buildVoiceAnswer constructs a voice_answer message sent from server to client.
+func buildVoiceAnswer(channelID int64, sdp string) []byte {
 	return buildJSON(map[string]any{
-		"type":    msgType,
-		"payload": data,
+		"type": "voice_answer",
+		"payload": map[string]any{
+			"channel_id": channelID,
+			"sdp":        sdp,
+		},
+	})
+}
+
+// buildVoiceOffer constructs a voice_offer message sent from server to client
+// (used during renegotiation when server needs to send a new offer).
+func buildVoiceOffer(channelID int64, sdp string) []byte {
+	return buildJSON(map[string]any{
+		"type": "voice_offer",
+		"payload": map[string]any{
+			"channel_id": channelID,
+			"sdp":        sdp,
+		},
 	})
 }
 
diff --git a/Server/ws/sfu.go b/Server/ws/sfu.go
new file mode 100644
index 00000000..54230677
--- /dev/null
+++ b/Server/ws/sfu.go
@@ -0,0 +1,113 @@
+package ws
+
+import (
+	"fmt"
+	"strconv"
+
+	"github.com/pion/interceptor"
+	"github.com/pion/webrtc/v4"
+
+	"github.com/owncord/server/config"
+)
+
+// SFU wraps Pion's WebRTC API with pre-configured MediaEngine,
+// InterceptorRegistry, and SettingEngine.
+type SFU struct {
+	api    *webrtc.API
+	config *config.VoiceConfig
+}
+
+// NewSFU creates a new SFU with the given voice configuration. It sets up
+// the Pion MediaEngine with default codecs, registers the ssrc-audio-level
+// RTP header extension, configures interceptors, and applies NAT/port settings.
+func NewSFU(cfg *config.VoiceConfig) (*SFU, error) {
+	var me webrtc.MediaEngine
+	if err := me.RegisterDefaultCodecs(); err != nil {
+		return nil, err
+	}
+
+	// Register ssrc-audio-level header extension for active speaker detection.
+	const audioLevelURI = "urn:ietf:params:rtp-hdrext:ssrc-audio-level"
+	for _, dir := range []webrtc.RTPTransceiverDirection{
+		webrtc.RTPTransceiverDirectionSendonly,
+		webrtc.RTPTransceiverDirectionRecvonly,
+	} {
+		if err := me.RegisterHeaderExtension(
+			webrtc.RTPHeaderExtensionCapability{URI: audioLevelURI},
+			webrtc.RTPCodecTypeAudio,
+			dir,
+		); err != nil {
+			return nil, err
+		}
+	}
+
+	var ir interceptor.Registry
+	if err := webrtc.RegisterDefaultInterceptors(&me, &ir); err != nil {
+		return nil, err
+	}
+
+	var se webrtc.SettingEngine
+	se.SetEphemeralUDPPortRange(uint16(cfg.MediaPortMin), uint16(cfg.MediaPortMax))
+
+	if cfg.ExternalIP != "" {
+		if err := se.SetICEAddressRewriteRules(webrtc.ICEAddressRewriteRule{
+			External:        []string{cfg.ExternalIP},
+			AsCandidateType: webrtc.ICECandidateTypeHost,
+			Mode:            webrtc.ICEAddressRewriteReplace,
+		}); err != nil {
+			return nil, fmt.Errorf("setting ICE address rewrite rules: %w", err)
+		}
+	}
+
+	api := webrtc.NewAPI(
+		webrtc.WithMediaEngine(&me),
+		webrtc.WithInterceptorRegistry(&ir),
+		webrtc.WithSettingEngine(se),
+	)
+
+	return &SFU{api: api, config: cfg}, nil
+}
+
+// NewPeerConnection creates a new PeerConnection using the SFU's pre-configured
+// WebRTC API and ICE server settings from config.
+func (s *SFU) NewPeerConnection() (*webrtc.PeerConnection, error) {
+	pcConfig := webrtc.Configuration{}
+
+	// Add STUN server if port is configured.
+	if s.config.STUNPort > 0 {
+		pcConfig.ICEServers = append(pcConfig.ICEServers, webrtc.ICEServer{
+			URLs: []string{"stun:localhost:" + strconv.Itoa(s.config.STUNPort)},
+		})
+	}
+
+	// Add TURN server if enabled.
+	if s.config.TURNEnabled && s.config.TURNPort > 0 {
+		pcConfig.ICEServers = append(pcConfig.ICEServers, webrtc.ICEServer{
+			URLs:       []string{"turn:localhost:" + strconv.Itoa(s.config.TURNPort)},
+			Username:   "owncord",
+			Credential: s.config.TURNSecret,
+		})
+	}
+
+	return s.api.NewPeerConnection(pcConfig)
+}
+
+// Close is a placeholder for SFU cleanup. Future implementations may close
+// active peer connections or release resources.
+func (s *SFU) Close() {
+	// Placeholder for cleanup.
+}
+
+// QualityBitrate returns the target audio bitrate in bits/s based on the
+// configured quality preset.
+func (s *SFU) QualityBitrate() int {
+	switch s.config.Quality {
+	case "low":
+		return 32000
+	case "high":
+		return 128000
+	default:
+		return 64000
+	}
+}
+
diff --git a/Server/ws/sfu_test.go b/Server/ws/sfu_test.go
new file mode 100644
index 00000000..68252abb
--- /dev/null
+++ b/Server/ws/sfu_test.go
@@ -0,0 +1,106 @@
+package ws_test
+
+import (
+	"testing"
+
+	"github.com/owncord/server/config"
+	"github.com/owncord/server/ws"
+)
+
+func testVoiceConfig() *config.VoiceConfig {
+	return &config.VoiceConfig{
+		Quality:      "medium",
+		MediaPortMin: 50000,
+		MediaPortMax: 50100,
+	}
+}
+
+func TestNewSFU_Success(t *testing.T) {
+	sfu, err := ws.NewSFU(testVoiceConfig())
+	if err != nil {
+		t.Fatalf("NewSFU() returned error: %v", err)
+	}
+	if sfu == nil {
+		t.Fatal("NewSFU() returned nil SFU")
+	}
+	defer sfu.Close()
+}
+
+func TestNewSFU_CreatesValidPeerConnection(t *testing.T) {
+	sfu, err := ws.NewSFU(testVoiceConfig())
+	if err != nil {
+		t.Fatalf("NewSFU() returned error: %v", err)
+	}
+	defer sfu.Close()
+
+	pc, err := sfu.NewPeerConnection()
+	if err != nil {
+		t.Fatalf("NewPeerConnection() returned error: %v", err)
+	}
+	if pc == nil {
+		t.Fatal("NewPeerConnection() returned nil PeerConnection")
+	}
+	if err := pc.Close(); err != nil {
+		t.Fatalf("PeerConnection.Close() returned error: %v", err)
+	}
+}
+
+func TestSFU_QualityBitrate_Presets(t *testing.T) {
+	tests := []struct {
+		quality string
+		want    int
+	}{
+		{"low", 32000},
+		{"medium", 64000},
+		{"high", 128000},
+		{"unknown", 64000},
+		{"", 64000},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.quality, func(t *testing.T) {
+			cfg := testVoiceConfig()
+			cfg.Quality = tt.quality
+
+			sfu, err := ws.NewSFU(cfg)
+			if err != nil {
+				t.Fatalf("NewSFU() returned error: %v", err)
+			}
+			defer sfu.Close()
+
+			got := sfu.QualityBitrate()
+			if got != tt.want {
+				t.Errorf("QualityBitrate() = %d, want %d", got, tt.want)
+			}
+		})
+	}
+}
+
+func TestSFU_Close(t *testing.T) {
+	sfu, err := ws.NewSFU(testVoiceConfig())
+	if err != nil {
+		t.Fatalf("NewSFU() returned error: %v", err)
+	}
+
+	// Close should not panic.
+	sfu.Close()
+}
+
+func TestNewSFU_WithExternalIP(t *testing.T) {
+	cfg := testVoiceConfig()
+	cfg.ExternalIP = "203.0.113.1"
+
+	sfu, err := ws.NewSFU(cfg)
+	if err != nil {
+		t.Fatalf("NewSFU() returned error: %v", err)
+	}
+	defer sfu.Close()
+
+	pc, err := sfu.NewPeerConnection()
+	if err != nil {
+		t.Fatalf("NewPeerConnection() returned error: %v", err)
+	}
+	if err := pc.Close(); err != nil {
+		t.Fatalf("PeerConnection.Close() returned error: %v", err)
+	}
+}
diff --git a/Server/ws/speaker_broadcast.go b/Server/ws/speaker_broadcast.go
new file mode 100644
index 00000000..c4d33acd
--- /dev/null
+++ b/Server/ws/speaker_broadcast.go
@@ -0,0 +1,79 @@
+package ws
+
+import (
+	"log/slog"
+	"strconv"
+	"time"
+)
+
+const speakerBroadcastInterval = 200 * time.Millisecond
+
+// runSpeakerBroadcast periodically checks all voice rooms for speaker changes
+// and broadcasts voice_speakers to the channel. Runs until stop is closed.
+func (h *Hub) runSpeakerBroadcast(stop <-chan struct{}) {
+	ticker := time.NewTicker(speakerBroadcastInterval)
+	defer ticker.Stop()
+
+	// Track previous speaker lists to avoid redundant broadcasts.
+	prevSpeakers := make(map[int64]string) // channelID → comma-joined speaker IDs
+
+	for {
+		select {
+		case <-stop:
+			return
+		case <-ticker.C:
+			h.voiceRoomsMu.RLock()
+			rooms := make(map[int64]*VoiceRoom, len(h.voiceRooms))
+			for id, room := range h.voiceRooms {
+				rooms[id] = room
+			}
+			h.voiceRoomsMu.RUnlock()
+
+			for channelID, room := range rooms {
+				speakers := room.TopSpeakers()
+				mode := room.Mode()
+
+				// Build a simple key to detect changes.
+				key := speakerKey(speakers)
+				if prev, ok := prevSpeakers[channelID]; ok && prev == key {
+					continue // no change
+				}
+				prevSpeakers[channelID] = key
+
+				msg := buildVoiceSpeakers(channelID, speakers, mode)
+				slog.Debug("speaker broadcast", "channel_id", channelID, "speakers", speakers, "mode", mode)
+				h.BroadcastToChannel(channelID, msg)
+			}
+
+			// Clean up stale entries for rooms that no longer exist.
+			for id := range prevSpeakers {
+				if _, exists := rooms[id]; !exists {
+					delete(prevSpeakers, id)
+				}
+			}
+		}
+	}
+}
+
+// speakerKey builds a simple string key from speaker IDs for change detection.
+// Order matters: [1,2,3] and [3,2,1] produce different keys.
+func speakerKey(speakers []int64) string {
+	if len(speakers) == 0 {
+		return ""
+	}
+	// Simple concatenation — order matters for change detection.
+	b := make([]byte, 0, len(speakers)*4)
+	for i, id := range speakers {
+		if i > 0 {
+			b = append(b, ',')
+		}
+		b = append(b, []byte(strconv.FormatInt(id, 10))...)
+	}
+	return string(b)
+}
+
+// SpeakerKeyForTest exposes speakerKey for use in external test packages.
+// Only call from *_test.go files.
+func SpeakerKeyForTest(speakers []int64) string {
+	return speakerKey(speakers)
+}
diff --git a/Server/ws/speaker_detector.go b/Server/ws/speaker_detector.go
new file mode 100644
index 00000000..632c676c
--- /dev/null
+++ b/Server/ws/speaker_detector.go
@@ -0,0 +1,164 @@
+package ws
+
+import (
+	"sort"
+	"sync"
+	"time"
+)
+
+const defaultHoldoff = 500 * time.Millisecond
+
+// speakerLevel tracks the running audio level average for one user.
+type speakerLevel struct {
+	userID     int64
+	levels     [10]uint8 // ring buffer, 10 samples = 200ms at 20ms frames
+	pos        int
+	count      int     // how many samples collected (up to 10)
+	average    float64
+	lastActive time.Time // last time this speaker was in top-N
+}
+
+// SpeakerDetector selects the top-N loudest speakers by RFC 6464 audio level.
+type SpeakerDetector struct {
+	speakers map[int64]*speakerLevel
+	topN     int
+	holdoff  time.Duration // how long a speaker stays in top-N after going quiet
+	mu       sync.Mutex
+}
+
+// NewSpeakerDetector creates a detector with the default 500ms holdoff.
+func NewSpeakerDetector(topN int) *SpeakerDetector {
+	return NewSpeakerDetectorWithHoldoff(topN, defaultHoldoff)
+}
+
+// NewSpeakerDetectorWithHoldoff creates a detector with a custom holdoff duration.
+func NewSpeakerDetectorWithHoldoff(topN int, holdoff time.Duration) *SpeakerDetector {
+	return &SpeakerDetector{
+		speakers: make(map[int64]*speakerLevel),
+		topN:     topN,
+		holdoff:  holdoff,
+	}
+}
+
+// UpdateLevel adds an audio level sample to the ring buffer for the given user
+// and recalculates the running average. Level is RFC 6464 dBov: 0 = loudest,
+// 127 = silence.
+func (d *SpeakerDetector) UpdateLevel(userID int64, level uint8) {
+	d.mu.Lock()
+	defer d.mu.Unlock()
+
+	sl, ok := d.speakers[userID]
+	if !ok {
+		sl = &speakerLevel{userID: userID}
+		d.speakers[userID] = sl
+	}
+
+	sl.levels[sl.pos] = level
+	sl.pos = (sl.pos + 1) % len(sl.levels)
+	if sl.count < len(sl.levels) {
+		sl.count++
+	}
+
+	// Recalculate average over collected samples.
+	var sum int
+	for i := 0; i < sl.count; i++ {
+		sum += int(sl.levels[i])
+	}
+	sl.average = float64(sum) / float64(sl.count)
+
+	// Mark as active if not silent.
+	if sl.average < 127 {
+		sl.lastActive = time.Now()
+	}
+}
+
+// TopSpeakers returns up to top-N user IDs sorted by lowest average level
+// (loudest first). Silent speakers (average == 127) are excluded unless they
+// are within the holdoff window.
+func (d *SpeakerDetector) TopSpeakers() []int64 {
+	d.mu.Lock()
+	defer d.mu.Unlock()
+
+	now := time.Now()
+
+	// Collect candidates: not silent, or within holdoff.
+	candidates := make([]*speakerLevel, 0, len(d.speakers))
+	for _, sl := range d.speakers {
+		if sl.average < 127 {
+			candidates = append(candidates, sl)
+		} else if !sl.lastActive.IsZero() && now.Sub(sl.lastActive) <= d.holdoff {
+			candidates = append(candidates, sl)
+		}
+	}
+
+	// Sort by average level ascending (loudest first).
+	sort.Slice(candidates, func(i, j int) bool {
+		return candidates[i].average < candidates[j].average
+	})
+
+	n := d.topN
+	if len(candidates) < n {
+		n = len(candidates)
+	}
+
+	result := make([]int64, n)
+	for i := 0; i < n; i++ {
+		result[i] = candidates[i].userID
+	}
+	return result
+}
+
+// RemoveSpeaker removes a speaker from the detector (e.g., when they leave).
+func (d *SpeakerDetector) RemoveSpeaker(userID int64) {
+	d.mu.Lock()
+	defer d.mu.Unlock()
+
+	delete(d.speakers, userID)
+}
+
+// ParseAudioLevel parses an RFC 6464 one-byte header extension from raw RTP
+// extension data (RFC 5285 one-byte header format). It scans for the given
+// extensionID and extracts the voice activity bit and 7-bit level.
+//
+// Returns ok=false if the extension is not found.
+func ParseAudioLevel(buf []byte, extensionID uint8) (level uint8, voice bool, ok bool) {
+	if len(buf) == 0 {
+		return 0, false, false
+	}
+
+	// Walk RFC 5285 one-byte header extensions.
+	// Each element: 4-bit ID | 4-bit (length-1), followed by (length) data bytes.
+	// ID=0 is padding, ID=15 terminates.
+	i := 0
+	for i < len(buf) {
+		id := buf[i] >> 4
+		dataLen := int(buf[i]&0x0F) + 1
+
+		if id == 0 {
+			// Padding byte — skip.
+			i++
+			continue
+		}
+		if id == 15 {
+			// Terminator.
+			break
+		}
+
+		i++ // move past header byte
+
+		if i+dataLen > len(buf) {
+			break
+		}
+
+		if id == extensionID && dataLen >= 1 {
+			b := buf[i]
+			voice = (b & 0x80) != 0
+			level = b & 0x7F
+			return level, voice, true
+		}
+
+		i += dataLen
+	}
+
+	return 0, false, false
+}
diff --git a/Server/ws/speaker_detector_test.go b/Server/ws/speaker_detector_test.go
new file mode 100644
index 00000000..462f1093
--- /dev/null
+++ b/Server/ws/speaker_detector_test.go
@@ -0,0 +1,234 @@
+package ws_test
+
+import (
+	"testing"
+	"time"
+
+	"github.com/owncord/server/ws"
+)
+
+func TestNewSpeakerDetector(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetector(3)
+	if sd == nil {
+		t.Fatal("NewSpeakerDetector returned nil")
+	}
+	top := sd.TopSpeakers()
+	if len(top) != 0 {
+		t.Fatalf("expected empty top speakers, got %v", top)
+	}
+}
+
+func TestSpeakerDetector_UpdateLevel(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetector(3)
+
+	// Feed several level samples for a single user.
+	for i := 0; i < 5; i++ {
+		sd.UpdateLevel(1, 30) // relatively loud
+	}
+
+	top := sd.TopSpeakers()
+	if len(top) != 1 {
+		t.Fatalf("expected 1 speaker, got %d", len(top))
+	}
+	if top[0] != int64(1) {
+		t.Fatalf("expected userID 1, got %d", top[0])
+	}
+}
+
+func TestSpeakerDetector_TopSpeakers_RankedByLoudest(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetector(3)
+
+	// 5 users with different average levels (lower = louder in dBov).
+	// User 10: level 10 (loudest)
+	// User 20: level 30
+	// User 30: level 50
+	// User 40: level 80
+	// User 50: level 100 (quietest)
+	users := []struct {
+		id    int64
+		level uint8
+	}{
+		{10, 10},
+		{20, 30},
+		{30, 50},
+		{40, 80},
+		{50, 100},
+	}
+	for _, u := range users {
+		for i := 0; i < 5; i++ {
+			sd.UpdateLevel(u.id, u.level)
+		}
+	}
+
+	top := sd.TopSpeakers()
+	if len(top) != 3 {
+		t.Fatalf("expected 3 top speakers, got %d: %v", len(top), top)
+	}
+	// Should be sorted loudest first: 10, 20, 30
+	expected := []int64{10, 20, 30}
+	for i, want := range expected {
+		if top[i] != want {
+			t.Errorf("top[%d] = %d, want %d", i, top[i], want)
+		}
+	}
+}
+
+func TestSpeakerDetector_TopSpeakers_SilentExcluded(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetector(3)
+
+	// User 1: loud
+	for i := 0; i < 5; i++ {
+		sd.UpdateLevel(1, 20)
+	}
+	// User 2: completely silent (127 = digital silence in RFC 6464)
+	for i := 0; i < 5; i++ {
+		sd.UpdateLevel(2, 127)
+	}
+
+	top := sd.TopSpeakers()
+	if len(top) != 1 {
+		t.Fatalf("expected 1 speaker (silent excluded), got %d: %v", len(top), top)
+	}
+	if top[0] != int64(1) {
+		t.Fatalf("expected userID 1, got %d", top[0])
+	}
+}
+
+func TestSpeakerDetector_TopSpeakers_HoldoffKeepsSpeaker(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetectorWithHoldoff(3, 50*time.Millisecond)
+
+	// User 1 speaks loudly.
+	for i := 0; i < 5; i++ {
+		sd.UpdateLevel(1, 20)
+	}
+
+	// User 1 goes silent.
+	for i := 0; i < 10; i++ {
+		sd.UpdateLevel(1, 127)
+	}
+
+	// Immediately check — holdoff should keep user 1 in top speakers.
+	top := sd.TopSpeakers()
+	found := false
+	for _, id := range top {
+		if id == int64(1) {
+			found = true
+			break
+		}
+	}
+	if !found {
+		t.Fatalf("expected user 1 to remain in top speakers during holdoff, got %v", top)
+	}
+}
+
+func TestSpeakerDetector_TopSpeakers_HoldoffExpires(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetectorWithHoldoff(3, 50*time.Millisecond)
+
+	// User 1 speaks loudly.
+	for i := 0; i < 5; i++ {
+		sd.UpdateLevel(1, 20)
+	}
+
+	// User 1 goes silent — fill ring buffer with silence.
+	for i := 0; i < 10; i++ {
+		sd.UpdateLevel(1, 127)
+	}
+
+	// Wait longer than holdoff.
+	time.Sleep(80 * time.Millisecond)
+
+	top := sd.TopSpeakers()
+	for _, id := range top {
+		if id == int64(1) {
+			t.Fatalf("expected user 1 to be evicted after holdoff expired, got %v", top)
+		}
+	}
+}
+
+func TestSpeakerDetector_RemoveSpeaker(t *testing.T) {
+	t.Parallel()
+	sd := ws.NewSpeakerDetector(3)
+
+	for i := 0; i < 5; i++ {
+		sd.UpdateLevel(1, 20)
+		sd.UpdateLevel(2, 30)
+	}
+
+	sd.RemoveSpeaker(1)
+
+	top := sd.TopSpeakers()
+	for _, id := range top {
+		if id == int64(1) {
+			t.Fatalf("removed speaker should not appear in TopSpeakers, got %v", top)
+		}
+	}
+	if len(top) != 1 || top[0] != int64(2) {
+		t.Fatalf("expected [2], got %v", top)
+	}
+}
+
+func TestParseAudioLevel_Valid(t *testing.T) {
+	t.Parallel()
+
+	// Construct a one-byte header extension value:
+	// V=1, Level=42 → binary: 1_0101010 → 0xAA
+	extByte := byte(0x80 | 42) // voice=1, level=42
+	// RFC 5285 one-byte header format: 4-bit ID | 4-bit length-1
+	// For extensionID=1, length=1 byte: header = 0x10
+	extensionID := uint8(1)
+	buf := []byte{(extensionID << 4) | 0x00, extByte} // ID=1, L=0 (meaning 1 byte), then the data byte
+
+	level, voice, ok := ws.ParseAudioLevel(buf, extensionID)
+	if !ok {
+		t.Fatal("expected ok=true for valid extension")
+	}
+	if level != 42 {
+		t.Errorf("level = %d, want 42", level)
+	}
+	if !voice {
+		t.Error("expected voice=true")
+	}
+
+	// Test with voice=false, level=10 → binary: 0_0001010 → 0x0A
+	extByte2 := byte(10) // voice=0, level=10
+	buf2 := []byte{(extensionID << 4) | 0x00, extByte2}
+
+	level2, voice2, ok2 := ws.ParseAudioLevel(buf2, extensionID)
+	if !ok2 {
+		t.Fatal("expected ok=true")
+	}
+	if level2 != 10 {
+		t.Errorf("level = %d, want 10", level2)
+	}
+	if voice2 {
+		t.Error("expected voice=false")
+	}
+}
+
+func TestParseAudioLevel_NotFound(t *testing.T) {
+	t.Parallel()
+
+	// Empty buffer.
+	_, _, ok := ws.ParseAudioLevel(nil, 1)
+	if ok {
+		t.Error("expected ok=false for nil buffer")
+	}
+
+	_, _, ok = ws.ParseAudioLevel([]byte{}, 1)
+	if ok {
+		t.Error("expected ok=false for empty buffer")
+	}
+
+	// Wrong extension ID — buffer has ID=2 but we ask for ID=1.
+	buf := []byte{(2 << 4) | 0x00, 0x80}
+	_, _, ok = ws.ParseAudioLevel(buf, 1)
+	if ok {
+		t.Error("expected ok=false for wrong extension ID")
+	}
+}
diff --git a/Server/ws/speaker_integration_test.go b/Server/ws/speaker_integration_test.go
new file mode 100644
index 00000000..f50e687a
--- /dev/null
+++ b/Server/ws/speaker_integration_test.go
@@ -0,0 +1,373 @@
+package ws_test
+
+import (
+	"encoding/json"
+	"testing"
+	"time"
+
+	"github.com/owncord/server/auth"
+	"github.com/owncord/server/ws"
+)
+
+// ─── VoiceRoom speaker detection ─────────────────────────────────────────────
+
+func TestVoiceRoom_UpdateSpeakerLevel(t *testing.T) {
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:   1,
+		TopSpeakers: 3,
+	}
+	room := ws.NewVoiceRoom(cfg)
+
+	// Add participants first.
+	_ = room.AddParticipant(10)
+	_ = room.AddParticipant(20)
+	_ = room.AddParticipant(30)
+
+	// User 10 is loudest (lowest dBov = 10), user 30 quietest (90).
+	for i := 0; i < 5; i++ {
+		room.UpdateSpeakerLevel(10, 10)
+		room.UpdateSpeakerLevel(20, 50)
+		room.UpdateSpeakerLevel(30, 90)
+	}
+
+	top := room.TopSpeakers()
+	if len(top) == 0 {
+		t.Fatal("TopSpeakers returned empty; expected at least one active speaker")
+	}
+	if top[0] != int64(10) {
+		t.Errorf("top speaker = %d, want 10 (loudest)", top[0])
+	}
+}
+
+func TestVoiceRoom_TopSpeakers_EmptyRoom(t *testing.T) {
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:   2,
+		TopSpeakers: 3,
+	}
+	room := ws.NewVoiceRoom(cfg)
+
+	top := room.TopSpeakers()
+	if len(top) != 0 {
+		t.Errorf("TopSpeakers on empty room = %v, want empty slice", top)
+	}
+}
+
+func TestVoiceRoom_RemoveParticipant_RemovesFromDetector(t *testing.T) {
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:   3,
+		TopSpeakers: 3,
+	}
+	room := ws.NewVoiceRoom(cfg)
+	_ = room.AddParticipant(100)
+	_ = room.AddParticipant(200)
+
+	// Feed audio so both appear in top speakers.
+	for i := 0; i < 5; i++ {
+		room.UpdateSpeakerLevel(100, 20)
+		room.UpdateSpeakerLevel(200, 30)
+	}
+
+	// Verify both appear before removal.
+	topBefore := room.TopSpeakers()
+	if len(topBefore) < 2 {
+		t.Fatalf("expected 2 speakers before removal, got %v", topBefore)
+	}
+
+	// Remove user 100 from the room.
+	room.RemoveParticipant(100)
+
+	// After removal, user 100 must not appear in TopSpeakers.
+	top := room.TopSpeakers()
+	for _, id := range top {
+		if id == int64(100) {
+			t.Errorf("removed user 100 still appears in TopSpeakers: %v", top)
+		}
+	}
+}
+
+func TestVoiceRoom_Config(t *testing.T) {
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:       42,
+		MaxUsers:        10,
+		Quality:         "high",
+		MixingThreshold: 8,
+		TopSpeakers:     5,
+		MaxVideo:        2,
+	}
+	room := ws.NewVoiceRoom(cfg)
+
+	got := room.Config()
+	if got.ChannelID != 42 {
+		t.Errorf("Config().ChannelID = %d, want 42", got.ChannelID)
+	}
+	if got.MaxUsers != 10 {
+		t.Errorf("Config().MaxUsers = %d, want 10", got.MaxUsers)
+	}
+	if got.Quality != "high" {
+		t.Errorf("Config().Quality = %q, want %q", got.Quality, "high")
+	}
+	if got.MixingThreshold != 8 {
+		t.Errorf("Config().MixingThreshold = %d, want 8", got.MixingThreshold)
+	}
+	if got.TopSpeakers != 5 {
+		t.Errorf("Config().TopSpeakers = %d, want 5", got.TopSpeakers)
+	}
+	if got.MaxVideo != 2 {
+		t.Errorf("Config().MaxVideo = %d, want 2", got.MaxVideo)
+	}
+}
+
+// ─── speakerKey helper ────────────────────────────────────────────────────────
+
+func TestSpeakerKey_Empty(t *testing.T) {
+	key := ws.SpeakerKeyForTest(nil)
+	if key != "" {
+		t.Errorf("SpeakerKeyForTest(nil) = %q, want empty string", key)
+	}
+
+	key2 := ws.SpeakerKeyForTest([]int64{})
+	if key2 != "" {
+		t.Errorf("SpeakerKeyForTest([]) = %q, want empty string", key2)
+	}
+}
+
+func TestSpeakerKey_SingleSpeaker(t *testing.T) {
+	key := ws.SpeakerKeyForTest([]int64{42})
+	if key == "" {
+		t.Error("SpeakerKeyForTest([42]) returned empty string")
+	}
+	// Key must contain the speaker ID in some form.
+	if key != "42" {
+		t.Errorf("SpeakerKeyForTest([42]) = %q, want %q", key, "42")
+	}
+}
+
+func TestSpeakerKey_MultipleSpeakers(t *testing.T) {
+	key1 := ws.SpeakerKeyForTest([]int64{1, 2, 3})
+	key2 := ws.SpeakerKeyForTest([]int64{1, 2, 3})
+	key3 := ws.SpeakerKeyForTest([]int64{3, 2, 1})
+
+	// Same order → same key.
+	if key1 != key2 {
+		t.Errorf("same speaker lists produced different keys: %q vs %q", key1, key2)
+	}
+	// Different order → different key (order matters for change detection).
+	if key1 == key3 {
+		t.Errorf("different speaker order should produce different keys but got %q for both", key1)
+	}
+}
+
+func TestSpeakerKey_DistinctFromDifferentSpeakers(t *testing.T) {
+	key1 := ws.SpeakerKeyForTest([]int64{1, 2})
+	key2 := ws.SpeakerKeyForTest([]int64{1, 3})
+	if key1 == key2 {
+		t.Errorf("different speaker sets should produce different keys, both got %q", key1)
+	}
+}
+
+// ─── Speaker broadcast integration ───────────────────────────────────────────
+
+// TestSpeakerBroadcast_Integration creates a hub with a voice room, feeds
+// speaker levels, and verifies a voice_speakers broadcast is sent within the
+// ticker interval.
+func TestSpeakerBroadcast_Integration(t *testing.T) {
+	database := openTestDB(t)
+	limiter := auth.NewRateLimiter()
+	hub := ws.NewHub(database, limiter)
+	go hub.Run()
+	defer hub.Stop()
+
+	// Create a voice room for channel 99.
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:   99,
+		TopSpeakers: 3,
+	}
+	room := hub.GetOrCreateVoiceRoom(99, cfg)
+
+	// Register a client subscribed to channel 99 to receive the broadcast.
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithChannel(hub, 1, 99, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	// Feed audio levels into the room — make user 1 a speaker.
+	for i := 0; i < 5; i++ {
+		room.UpdateSpeakerLevel(1, 20) // level=20 (dBov), well below silence threshold
+	}
+
+	// Wait for at least two ticker intervals (200ms each) so the broadcast fires.
+	time.Sleep(500 * time.Millisecond)
+
+	// Drain and look for a voice_speakers message.
+	var found bool
+drainLoop:
+	for {
+		select {
+		case msg := <-send:
+			var env map[string]json.RawMessage
+			if err := json.Unmarshal(msg, &env); err != nil {
+				continue
+			}
+			msgType, ok := env["type"]
+			if !ok {
+				continue
+			}
+			var t2 string
+			if err := json.Unmarshal(msgType, &t2); err != nil {
+				continue
+			}
+			if t2 == "voice_speakers" {
+				found = true
+				break drainLoop
+			}
+		default:
+			break drainLoop
+		}
+	}
+
+	if !found {
+		t.Error("expected voice_speakers broadcast within ticker interval, none received")
+	}
+}
+
+// TestSpeakerBroadcast_NoBroadcastWhenNoChange verifies that the ticker does
+// not repeatedly broadcast when the speaker list has not changed.
+func TestSpeakerBroadcast_NoBroadcastWhenNoChange(t *testing.T) {
+	database := openTestDB(t)
+	limiter := auth.NewRateLimiter()
+	hub := ws.NewHub(database, limiter)
+	go hub.Run()
+	defer hub.Stop()
+
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:   100,
+		TopSpeakers: 3,
+	}
+	room := hub.GetOrCreateVoiceRoom(100, cfg)
+
+	send := make(chan []byte, 64)
+	c := ws.NewTestClientWithChannel(hub, 2, 100, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	// Feed levels to produce a stable speaker list.
+	for i := 0; i < 5; i++ {
+		room.UpdateSpeakerLevel(2, 20)
+	}
+
+	// Wait for first broadcast.
+	time.Sleep(300 * time.Millisecond)
+
+	// Count how many voice_speakers messages arrived after the initial one.
+	// In a change-detection implementation, subsequent ticks with the same
+	// speaker list should NOT send more broadcasts.
+	count := 0
+	for {
+		select {
+		case msg := <-send:
+			var env map[string]json.RawMessage
+			if err := json.Unmarshal(msg, &env); err != nil {
+				continue
+			}
+			var msgType string
+			if raw, ok := env["type"]; ok {
+				_ = json.Unmarshal(raw, &msgType)
+			}
+			if msgType == "voice_speakers" {
+				count++
+			}
+		default:
+			goto done
+		}
+	}
+done:
+	// We allow 1 broadcast (initial detection), but not many repeated ones.
+	// If every tick sent a message, we'd see ~2-4 in 300ms. We cap at 2.
+	if count > 2 {
+		t.Errorf("expected at most 2 voice_speakers broadcasts (dedup), got %d", count)
+	}
+}
+
+// TestSpeakerBroadcast_RoomCleanup verifies that when a voice room is removed,
+// the ticker cleans up its stale prevSpeakers entry so that re-creating the
+// room with an active speaker triggers a new broadcast.
+func TestSpeakerBroadcast_RoomCleanup(t *testing.T) {
+	database := openTestDB(t)
+	limiter := auth.NewRateLimiter()
+	hub := ws.NewHub(database, limiter)
+	go hub.Run()
+	defer hub.Stop()
+
+	const chanID = int64(101)
+	cfg := ws.VoiceRoomConfig{
+		ChannelID:   chanID,
+		TopSpeakers: 3,
+	}
+	room := hub.GetOrCreateVoiceRoom(chanID, cfg)
+
+	// Use a large buffer to avoid missing messages due to timing.
+	send := make(chan []byte, 64)
+	c := ws.NewTestClientWithChannel(hub, 3, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	// Feed levels so the ticker broadcasts at least once.
+	for i := 0; i < 5; i++ {
+		room.UpdateSpeakerLevel(3, 20)
+	}
+
+	// Wait for two ticker intervals to ensure at least one broadcast fires.
+	time.Sleep(500 * time.Millisecond)
+
+	// Remove the room; this should cause the ticker to clean up prevSpeakers.
+	hub.RemoveVoiceRoom(chanID)
+
+	// Wait one more tick to let the cleanup run.
+	time.Sleep(250 * time.Millisecond)
+
+	// Drain all pending messages.
+	draining:
+	for {
+		select {
+		case <-send:
+		default:
+			break draining
+		}
+	}
+
+	// Re-create the room and feed a new speaker — the ticker should broadcast
+	// again because prevSpeakers[chanID] was deleted when the room was removed.
+	newRoom := hub.GetOrCreateVoiceRoom(chanID, cfg)
+	for i := 0; i < 5; i++ {
+		newRoom.UpdateSpeakerLevel(3, 20)
+	}
+
+	// Wait for the ticker to detect the new room and broadcast.
+	time.Sleep(500 * time.Millisecond)
+
+	var found bool
+	collectLoop:
+	for {
+		select {
+		case msg := <-send:
+			var env map[string]json.RawMessage
+			if err := json.Unmarshal(msg, &env); err != nil {
+				continue
+			}
+			var msgType string
+			if raw, ok := env["type"]; ok {
+				_ = json.Unmarshal(raw, &msgType)
+			}
+			if msgType == "voice_speakers" {
+				found = true
+				break collectLoop
+			}
+		default:
+			break collectLoop
+		}
+	}
+
+	if !found {
+		t.Error("expected voice_speakers broadcast after room re-creation, none received")
+	}
+}
diff --git a/Server/ws/voice_handlers.go b/Server/ws/voice_handlers.go
index 4608f93c..6759ea3d 100644
--- a/Server/ws/voice_handlers.go
+++ b/Server/ws/voice_handlers.go
@@ -2,10 +2,14 @@ package ws
 
 import (
 	"encoding/json"
+	"errors"
 	"fmt"
 	"log/slog"
 	"time"
 
+	"github.com/pion/webrtc/v4"
+
+	"github.com/owncord/server/db"
 	"github.com/owncord/server/permissions"
 )
 
@@ -15,13 +19,51 @@ const (
 	voiceSignalWindow       = time.Second
 	soundboardRateLimit     = 1
 	soundboardWindow        = 3 * time.Second
+	voiceCameraRateLimit    = 2
+	voiceCameraWindow       = time.Second
+	voiceScreenshareRateLimit = 2
+	voiceScreenshareWindow    = time.Second
 )
 
+// setupICEMonitor monitors ICE connection state changes on the client's
+// PeerConnection. On failure/disconnect, it cleans up voice state.
+func (h *Hub) setupICEMonitor(c *Client, channelID int64) {
+	pc := c.getPC()
+	if pc == nil {
+		return
+	}
+
+	pc.OnICEConnectionStateChange(func(state webrtc.ICEConnectionState) {
+		slog.Info("ICE state change", "user_id", c.userID, "channel_id", channelID, "state", state.String())
+
+		switch state {
+		case webrtc.ICEConnectionStateFailed:
+			slog.Warn("ICE connection failed, cleaning up voice", "user_id", c.userID, "channel_id", channelID)
+			h.handleVoiceLeave(c)
+		case webrtc.ICEConnectionStateDisconnected:
+			// Disconnected is transient — ICE may recover.
+			// Log but don't clean up immediately.
+			slog.Info("ICE disconnected (may recover)", "user_id", c.userID, "channel_id", channelID)
+		}
+	})
+}
+
+// SetupICEMonitorForTest exposes setupICEMonitor for tests.
+func (h *Hub) SetupICEMonitorForTest(c *Client, channelID int64) {
+	h.setupICEMonitor(c, channelID)
+}
+
 // handleVoiceJoin processes a voice_join message.
-// 1. Checks CONNECT_VOICE permission.
-// 2. Persists join in DB.
-// 3. Broadcasts voice_state to channel.
-// 4. Sends all current voice states in the channel back to the joiner.
+// 1. Parses channel_id.
+// 2. Checks CONNECT_VOICE permission.
+// 3. If already in a different voice channel, leaves it first.
+// 4. Gets or creates VoiceRoom with config from channel settings.
+// 5. Adds participant to VoiceRoom (checks capacity).
+// 6. Persists join in DB.
+// 7. Creates PeerConnection if SFU is available.
+// 8. Broadcasts voice_state to channel.
+// 9. Sends existing voice states to joiner.
+// 10. Sends voice_config to joiner.
 func (h *Hub) handleVoiceJoin(c *Client, payload json.RawMessage) {
 	channelID, err := parseChannelID(payload)
 	if err != nil || channelID <= 0 {
@@ -34,12 +76,62 @@ func (h *Hub) handleVoiceJoin(c *Client, payload json.RawMessage) {
 		return
 	}
 
+	currentChID := c.getVoiceChID()
+
+	// HIGH-2: If user is already in the same voice channel, no-op.
+	if currentChID == channelID {
+		c.sendMsg(buildErrorMsg("ALREADY_JOINED", "already in this voice channel"))
+		return
+	}
+
+	// If user is already in a different voice channel, leave it first.
+	if currentChID > 0 {
+		h.handleVoiceLeave(c)
+	}
+
+	ch, err := h.db.GetChannel(channelID)
+	if err != nil || ch == nil {
+		c.sendMsg(buildErrorMsg("NOT_FOUND", "channel not found"))
+		return
+	}
+
+	roomCfg := h.buildVoiceRoomConfig(ch)
+	room := h.GetOrCreateVoiceRoom(channelID, roomCfg)
+
+	if addErr := room.AddParticipant(c.userID); addErr != nil {
+		if errors.Is(addErr, ErrRoomFull) {
+			c.sendMsg(buildErrorMsg("CHANNEL_FULL", "voice channel is full"))
+		} else {
+			c.sendMsg(buildErrorMsg("VOICE_ERROR", "failed to join voice channel"))
+		}
+		return
+	}
+
 	if err := h.db.JoinVoiceChannel(c.userID, channelID); err != nil {
+		room.RemoveParticipant(c.userID)
 		slog.Error("ws handleVoiceJoin JoinVoiceChannel", "err", err, "user_id", c.userID)
 		c.sendMsg(buildErrorMsg("INTERNAL", "failed to join voice channel"))
 		return
 	}
 
+	// Create PeerConnection if SFU is available. Non-fatal on failure.
+	var pc *webrtc.PeerConnection
+	if h.sfu != nil {
+		var pcErr error
+		pc, pcErr = h.sfu.NewPeerConnection()
+		if pcErr != nil {
+			slog.Error("ws handleVoiceJoin NewPeerConnection", "err", pcErr, "user_id", c.userID)
+		}
+	}
+
+	// Track the voice channel and PC on the client atomically (CRIT-1 fix).
+	c.setVoice(channelID, pc)
+
+	if pc != nil {
+		h.setupOnTrack(c, channelID)
+		h.setupICEMonitor(c, channelID)
+	}
+
 	state, err := h.db.GetVoiceState(c.userID)
 	if err != nil || state == nil {
 		slog.Error("ws handleVoiceJoin GetVoiceState", "err", err, "user_id", c.userID)
@@ -57,21 +149,74 @@ func (h *Hub) handleVoiceJoin(c *Client, payload json.RawMessage) {
 	}
 	for _, vs := range existing {
 		if vs.UserID == c.userID {
-			continue // skip the joiner themselves
+			continue
 		}
 		c.sendMsg(buildVoiceState(vs))
 	}
+
+	// Send voice_config to the joiner with room settings.
+	quality := roomCfg.Quality
+	bitrate := 64000 // default medium
+	if h.sfu != nil {
+		bitrate = h.sfu.QualityBitrate()
+	}
+	c.sendMsg(buildVoiceConfig(channelID, quality, bitrate, room.Mode(), roomCfg.MixingThreshold, roomCfg.TopSpeakers, roomCfg.MaxUsers))
+
+	slog.Info("voice join", "user_id", c.userID, "channel_id", channelID, "participants", room.ParticipantCount(), "mode", room.Mode())
+}
+
+// buildVoiceRoomConfig constructs a VoiceRoomConfig from channel settings and server defaults.
+func (h *Hub) buildVoiceRoomConfig(ch *db.Channel) VoiceRoomConfig {
+	cfg := VoiceRoomConfig{
+		ChannelID:       ch.ID,
+		MaxUsers:        ch.VoiceMaxUsers,
+		Quality:         "medium",
+		MixingThreshold: 10,
+		TopSpeakers:     3,
+		MaxVideo:        ch.VoiceMaxVideo,
+	}
+	if ch.VoiceQuality != nil && *ch.VoiceQuality != "" {
+		cfg.Quality = *ch.VoiceQuality
+	}
+	if ch.MixingThreshold != nil {
+		cfg.MixingThreshold = *ch.MixingThreshold
+	}
+	return cfg
 }
 
 // handleVoiceLeave processes an explicit voice_leave message or a disconnect.
-// 1. Removes voice state from DB.
-// 2. Broadcasts voice_leave to the channel the user was in.
+// 1. Reads current voice state (for broadcast).
+// 2. Closes PeerConnection if active.
+// 3. Removes participant from VoiceRoom; removes room if empty.
+// 4. Removes voice state from DB.
+// 5. Broadcasts voice_leave to the channel the user was in.
 func (h *Hub) handleVoiceLeave(c *Client) {
 	state, err := h.db.GetVoiceState(c.userID)
 	if err != nil {
 		slog.Error("ws handleVoiceLeave GetVoiceState", "err", err, "user_id", c.userID)
 	}
 
+	// Atomically clear voice state and get old values for cleanup (CRIT-1 fix).
+	oldChID, oldPC := c.clearVoice()
+
+	// Close PeerConnection if active.
+	// This also causes any setupOnTrack goroutine to exit via track.Read error (HIGH-1).
+	if oldPC != nil {
+		if closeErr := oldPC.Close(); closeErr != nil {
+			slog.Error("ws handleVoiceLeave pc.Close", "err", closeErr, "user_id", c.userID)
+		}
+	}
+
+	// Remove from VoiceRoom and clean up empty rooms.
+	if oldChID > 0 {
+		if room := h.GetVoiceRoom(oldChID); room != nil {
+			room.RemoveParticipant(c.userID)
+			if room.IsEmpty() {
+				h.RemoveVoiceRoom(oldChID)
+			}
+		}
+	}
+
 	if leaveErr := h.db.LeaveVoiceChannel(c.userID); leaveErr != nil {
 		slog.Error("ws handleVoiceLeave LeaveVoiceChannel", "err", leaveErr, "user_id", c.userID)
 	}
@@ -125,26 +270,214 @@ func (h *Hub) handleVoiceDeafen(c *Client, payload json.RawMessage) {
 	h.broadcastVoiceStateUpdate(c)
 }
 
-// handleVoiceSignal relays voice_offer, voice_answer, and voice_ice messages.
-// 1. Rate limits at 20/sec per user.
-// 2. Parses channel_id from payload.
-// 3. Relays the message (with original type) to all other channel members.
-// SDP/ICE content is not inspected or logged.
-func (h *Hub) handleVoiceSignal(c *Client, msgType string, payload json.RawMessage) {
+// handleVoiceCamera processes a voice_camera message.
+// 1. Rate limits at 2/sec per user.
+// 2. Checks USE_VIDEO permission.
+// 3. Parses enabled bool.
+// 4. Updates DB.
+// 5. Broadcasts voice_state update to channel.
+func (h *Hub) handleVoiceCamera(c *Client, payload json.RawMessage) {
+	ratKey := fmt.Sprintf("voice_camera:%d", c.userID)
+	if !h.limiter.Allow(ratKey, voiceCameraRateLimit, voiceCameraWindow) {
+		c.sendMsg(buildErrorMsg("RATE_LIMITED", "too many camera toggles"))
+		return
+	}
+
+	voiceChID := c.getVoiceChID()
+	if voiceChID == 0 {
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "not in a voice channel"))
+		return
+	}
+
+	if !h.hasChannelPerm(c, voiceChID, permissions.UseVideo) {
+		c.sendMsg(buildErrorMsg("FORBIDDEN", "missing USE_VIDEO permission"))
+		return
+	}
+
+	var p struct {
+		Enabled bool `json:"enabled"`
+	}
+	if err := json.Unmarshal(payload, &p); err != nil {
+		c.sendMsg(buildErrorMsg("BAD_REQUEST", "invalid voice_camera payload"))
+		return
+	}
+
+	if err := h.db.UpdateVoiceCamera(c.userID, p.Enabled); err != nil {
+		slog.Error("ws handleVoiceCamera UpdateVoiceCamera", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("INTERNAL", "failed to update camera state"))
+		return
+	}
+
+	h.broadcastVoiceStateUpdate(c)
+}
+
+// handleVoiceScreenshare processes a voice_screenshare message.
+// 1. Rate limits at 2/sec per user.
+// 2. Checks SHARE_SCREEN permission.
+// 3. Parses enabled bool.
+// 4. Updates DB.
+// 5. Broadcasts voice_state update to channel.
+func (h *Hub) handleVoiceScreenshare(c *Client, payload json.RawMessage) {
+	ratKey := fmt.Sprintf("voice_screenshare:%d", c.userID)
+	if !h.limiter.Allow(ratKey, voiceScreenshareRateLimit, voiceScreenshareWindow) {
+		c.sendMsg(buildErrorMsg("RATE_LIMITED", "too many screenshare toggles"))
+		return
+	}
+
+	voiceChID := c.getVoiceChID()
+	if voiceChID == 0 {
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "not in a voice channel"))
+		return
+	}
+
+	if !h.hasChannelPerm(c, voiceChID, permissions.ShareScreen) {
+		c.sendMsg(buildErrorMsg("FORBIDDEN", "missing SHARE_SCREEN permission"))
+		return
+	}
+
+	var p struct {
+		Enabled bool `json:"enabled"`
+	}
+	if err := json.Unmarshal(payload, &p); err != nil {
+		c.sendMsg(buildErrorMsg("BAD_REQUEST", "invalid voice_screenshare payload"))
+		return
+	}
+
+	if err := h.db.UpdateVoiceScreenshare(c.userID, p.Enabled); err != nil {
+		slog.Error("ws handleVoiceScreenshare UpdateVoiceScreenshare", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("INTERNAL", "failed to update screenshare state"))
+		return
+	}
+
+	h.broadcastVoiceStateUpdate(c)
+}
+
+// handleVoiceOffer processes a voice_offer from the client.
+// The client sends an SDP offer; the server sets it as remote description
+// on the client's PeerConnection, creates an answer, and sends it back.
+func (h *Hub) handleVoiceOffer(c *Client, payload json.RawMessage) {
 	ratKey := fmt.Sprintf("voice_signal:%d", c.userID)
 	if !h.limiter.Allow(ratKey, voiceSignalRateLimit, voiceSignalWindow) {
 		c.sendMsg(buildErrorMsg("RATE_LIMITED", "too many signaling messages"))
 		return
 	}
 
-	channelID, err := parseChannelID(payload)
-	if err != nil || channelID <= 0 {
-		c.sendMsg(buildErrorMsg("BAD_REQUEST", "channel_id must be a positive integer"))
+	pc := c.getPC()
+	if pc == nil {
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "not in a voice channel"))
 		return
 	}
 
-	relayed := buildVoiceSignalRelay(msgType, channelID, payload)
-	h.broadcastExclude(channelID, c.userID, relayed)
+	var p struct {
+		ChannelID json.Number `json:"channel_id"`
+		SDP       string      `json:"sdp"`
+	}
+	if err := json.Unmarshal(payload, &p); err != nil {
+		c.sendMsg(buildErrorMsg("BAD_REQUEST", "invalid voice_offer payload"))
+		return
+	}
+	if p.SDP == "" {
+		c.sendMsg(buildErrorMsg("INVALID_SDP", "SDP is required"))
+		return
+	}
+
+	offer := webrtc.SessionDescription{
+		Type: webrtc.SDPTypeOffer,
+		SDP:  p.SDP,
+	}
+
+	if err := pc.SetRemoteDescription(offer); err != nil {
+		slog.Error("ws handleVoiceOffer SetRemoteDescription", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("INVALID_SDP", "failed to set remote description"))
+		return
+	}
+
+	answer, err := pc.CreateAnswer(nil)
+	if err != nil {
+		slog.Error("ws handleVoiceOffer CreateAnswer", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "failed to create answer"))
+		return
+	}
+
+	if err := pc.SetLocalDescription(answer); err != nil {
+		slog.Error("ws handleVoiceOffer SetLocalDescription", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "failed to set local description"))
+		return
+	}
+
+	// Send the answer back to the client.
+	c.sendMsg(buildVoiceAnswer(c.getVoiceChID(), answer.SDP))
+}
+
+// handleVoiceAnswer processes a voice_answer from the client.
+// This handles the case where the server sent an offer (e.g., renegotiation)
+// and the client responds with an answer.
+func (h *Hub) handleVoiceAnswer(c *Client, payload json.RawMessage) {
+	ratKey := fmt.Sprintf("voice_signal:%d", c.userID)
+	if !h.limiter.Allow(ratKey, voiceSignalRateLimit, voiceSignalWindow) {
+		c.sendMsg(buildErrorMsg("RATE_LIMITED", "too many signaling messages"))
+		return
+	}
+
+	pc := c.getPC()
+	if pc == nil {
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "not in a voice channel"))
+		return
+	}
+
+	var p struct {
+		ChannelID json.Number `json:"channel_id"`
+		SDP       string      `json:"sdp"`
+	}
+	if err := json.Unmarshal(payload, &p); err != nil {
+		c.sendMsg(buildErrorMsg("BAD_REQUEST", "invalid voice_answer payload"))
+		return
+	}
+	if p.SDP == "" {
+		c.sendMsg(buildErrorMsg("INVALID_SDP", "SDP is required"))
+		return
+	}
+
+	answer := webrtc.SessionDescription{
+		Type: webrtc.SDPTypeAnswer,
+		SDP:  p.SDP,
+	}
+
+	if err := pc.SetRemoteDescription(answer); err != nil {
+		slog.Error("ws handleVoiceAnswer SetRemoteDescription", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("INVALID_SDP", "failed to set remote description"))
+		return
+	}
+}
+
+// handleVoiceICE processes a voice_ice (ICE candidate) from the client.
+func (h *Hub) handleVoiceICE(c *Client, payload json.RawMessage) {
+	ratKey := fmt.Sprintf("voice_signal:%d", c.userID)
+	if !h.limiter.Allow(ratKey, voiceSignalRateLimit, voiceSignalWindow) {
+		c.sendMsg(buildErrorMsg("RATE_LIMITED", "too many signaling messages"))
+		return
+	}
+
+	pc := c.getPC()
+	if pc == nil {
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "not in a voice channel"))
+		return
+	}
+
+	var p struct {
+		ChannelID json.Number             `json:"channel_id"`
+		Candidate webrtc.ICECandidateInit `json:"candidate"`
+	}
+	if err := json.Unmarshal(payload, &p); err != nil {
+		c.sendMsg(buildErrorMsg("BAD_REQUEST", "invalid voice_ice payload"))
+		return
+	}
+
+	if err := pc.AddICECandidate(p.Candidate); err != nil {
+		slog.Error("ws handleVoiceICE AddICECandidate", "err", err, "user_id", c.userID)
+		c.sendMsg(buildErrorMsg("VOICE_ERROR", "failed to add ICE candidate"))
+		return
+	}
 }
 
 // handleSoundboard processes a soundboard_play message.
@@ -174,6 +507,63 @@ func (h *Hub) handleSoundboard(c *Client, payload json.RawMessage) {
 	h.BroadcastToAll(buildSoundboardPlay(p.SoundID, c.userID))
 }
 
+// setupOnTrack configures the PeerConnection's OnTrack handler to:
+// 1. Read RTP packets from incoming audio tracks.
+// 2. Parse the ssrc-audio-level header extension (RFC 6464).
+// 3. Feed the audio levels into the VoiceRoom's SpeakerDetector.
+//
+// Must be called after c.pc is set and before SDP negotiation completes.
+func (h *Hub) setupOnTrack(c *Client, channelID int64) {
+	pc := c.getPC()
+	if pc == nil {
+		return
+	}
+
+	// audioLevelExtID is the negotiated extension ID for ssrc-audio-level.
+	// In a real deployment this is resolved via SDP; we use ID 1 as the
+	// conventional default matching the MediaEngine registration in sfu.go.
+	const audioLevelExtID = 1
+
+	// The goroutine spawned inside OnTrack exits when track.Read returns an
+	// error, which happens when the PeerConnection is closed (HIGH-1).
+	pc.OnTrack(func(track *webrtc.TrackRemote, receiver *webrtc.RTPReceiver) {
+		// Only process audio tracks for speaker detection.
+		if track.Kind() != webrtc.RTPCodecTypeAudio {
+			return
+		}
+
+		slog.Info("SFU OnTrack",
+			"user_id", c.userID,
+			"channel_id", channelID,
+			"kind", track.Kind(),
+			"codec", track.Codec().MimeType,
+		)
+
+		go func() {
+			buf := make([]byte, 1500)
+			for {
+				n, _, readErr := track.Read(buf)
+				if readErr != nil {
+					return // track closed or connection gone
+				}
+
+				// Parse audio level from RTP header extension.
+				level, _, found := ParseAudioLevel(buf[:n], audioLevelExtID)
+				if !found {
+					continue
+				}
+
+				room := h.GetVoiceRoom(channelID)
+				if room == nil {
+					return // room has been removed
+				}
+
+				room.UpdateSpeakerLevel(c.userID, level)
+			}
+		}()
+	})
+}
+
 // broadcastVoiceStateUpdate fetches the current voice state for the client
 // and broadcasts it to all members of the voice channel they are in.
 func (h *Hub) broadcastVoiceStateUpdate(c *Client) {
diff --git a/Server/ws/voice_handlers_test.go b/Server/ws/voice_handlers_test.go
index dfe0389c..1588ebb4 100644
--- a/Server/ws/voice_handlers_test.go
+++ b/Server/ws/voice_handlers_test.go
@@ -14,12 +14,14 @@ import (
 // voiceSchema extends hubTestSchema with the voice_states table.
 var voiceSchema = append(hubTestSchema, []byte(`
 CREATE TABLE IF NOT EXISTS voice_states (
-    user_id    INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
-    channel_id INTEGER NOT NULL REFERENCES channels(id) ON DELETE CASCADE,
-    muted      INTEGER NOT NULL DEFAULT 0,
-    deafened   INTEGER NOT NULL DEFAULT 0,
-    speaking   INTEGER NOT NULL DEFAULT 0,
-    joined_at  TEXT    NOT NULL DEFAULT (datetime('now'))
+    user_id     INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+    channel_id  INTEGER NOT NULL REFERENCES channels(id) ON DELETE CASCADE,
+    muted       INTEGER NOT NULL DEFAULT 0,
+    deafened    INTEGER NOT NULL DEFAULT 0,
+    speaking    INTEGER NOT NULL DEFAULT 0,
+    camera      INTEGER NOT NULL DEFAULT 0,
+    screenshare INTEGER NOT NULL DEFAULT 0,
+    joined_at   TEXT    NOT NULL DEFAULT (datetime('now'))
 );
 CREATE INDEX IF NOT EXISTS idx_voice_states_channel ON voice_states(channel_id);
 `)...)
@@ -148,6 +150,25 @@ func extractType(t *testing.T, msg []byte) string {
 	return typ
 }
 
+// extractCode parses a JSON error message and returns the payload "code" field.
+// Returns an empty string if the message is not an error envelope.
+func extractCode(t *testing.T, msg []byte) string {
+	t.Helper()
+	var env struct {
+		Type    string `json:"type"`
+		Payload struct {
+			Code string `json:"code"`
+		} `json:"payload"`
+	}
+	if err := json.Unmarshal(msg, &env); err != nil {
+		return ""
+	}
+	if env.Type != "error" {
+		return ""
+	}
+	return env.Payload.Code
+}
+
 // drainChan reads all pending messages from ch into a slice.
 func drainChan(ch <-chan []byte) [][]byte {
 	var msgs [][]byte
@@ -506,132 +527,275 @@ func TestVoice_Deafen_BroadcastsVoiceState(t *testing.T) {
 	}
 }
 
-// ─── voice signaling relay ────────────────────────────────────────────────────
+// ─── voice signaling (SFU) ────────────────────────────────────────────────────
+//
+// The signaling flow changed from P2P relay to SFU: offer/answer/ice are now
+// exchanged between client and server, not relayed between clients.
+//
+// Tests focus on validation and error paths since PeerConnection operations
+// require a real WebRTC stack (only exercised in integration tests).
 
-func TestVoice_Signal_RelaysToOtherChannelMembers(t *testing.T) {
+// TestVoice_Offer_NoPeerConnection verifies that voice_offer when the client
+// has no PeerConnection returns a VOICE_ERROR.
+func TestVoice_Offer_NoPeerConnection(t *testing.T) {
 	hub, database := newVoiceHub(t)
-	chanID := seedVoiceChan(t, database, "vc-signal")
+	user := seedVoiceOwner(t, database, "offer-nopc")
 
-	sender := seedVoiceOwner(t, database, "kate")
-	receiver := seedVoiceOwner(t, database, "kate2")
-	outsider := seedVoiceOwner(t, database, "kate3")
-
-	sendR := make(chan []byte, 16)
-	cR := ws.NewTestClientWithUser(hub, receiver, chanID, sendR)
-	hub.Register(cR)
-
-	sendO := make(chan []byte, 16)
-	cO := ws.NewTestClientWithUser(hub, outsider, 999, sendO) // different channel
-	hub.Register(cO)
-
-	sendS := make(chan []byte, 16)
-	cS := ws.NewTestClientWithUser(hub, sender, chanID, sendS)
-	hub.Register(cS)
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
 	time.Sleep(20 * time.Millisecond)
 
-	hub.HandleMessageForTest(cS, voiceSignalMsg("voice_offer", chanID, "v=0..."))
-	time.Sleep(50 * time.Millisecond)
+	hub.HandleMessageForTest(c, voiceSignalMsg("voice_offer", 1, "v=0 offer..."))
+	time.Sleep(30 * time.Millisecond)
 
-	// Receiver in same channel should get the signal.
-	receiverMsgs := drainChan(sendR)
+	msgs := drainChan(send)
 	found := false
-	for _, msg := range receiverMsgs {
-		if extractType(t, msg) == "voice_offer" {
+	for _, m := range msgs {
+		if extractCode(t, m) == "VOICE_ERROR" {
 			found = true
 			break
 		}
 	}
 	if !found {
-		t.Error("receiver in channel did not receive voice_offer relay")
-	}
-
-	// Outsider in different channel should NOT get it.
-	outsiderMsgs := drainChan(sendO)
-	for _, msg := range outsiderMsgs {
-		if extractType(t, msg) == "voice_offer" {
-			t.Error("outsider received voice_offer, should not have")
-		}
-	}
-
-	// Sender should NOT receive their own signal.
-	senderMsgs := drainChan(sendS)
-	for _, msg := range senderMsgs {
-		if extractType(t, msg) == "voice_offer" {
-			t.Error("sender received their own voice_offer, should not have")
-		}
+		t.Error("expected VOICE_ERROR when sending voice_offer without a PeerConnection")
 	}
 }
 
-func TestVoice_Signal_ICERelayed(t *testing.T) {
+// TestVoice_Offer_EmptySDP verifies that voice_offer with an empty SDP field
+// returns INVALID_SDP before touching any PeerConnection.
+func TestVoice_Offer_EmptySDP(t *testing.T) {
 	hub, database := newVoiceHub(t)
-	chanID := seedVoiceChan(t, database, "vc-ice")
+	user := seedVoiceOwner(t, database, "offer-emptysdp")
 
-	sender := seedVoiceOwner(t, database, "leo")
-	receiver := seedVoiceOwner(t, database, "leo2")
-
-	sendR := make(chan []byte, 16)
-	cR := ws.NewTestClientWithUser(hub, receiver, chanID, sendR)
-	hub.Register(cR)
-
-	sendS := make(chan []byte, 16)
-	cS := ws.NewTestClientWithUser(hub, sender, chanID, sendS)
-	hub.Register(cS)
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
 	time.Sleep(20 * time.Millisecond)
 
-	hub.HandleMessageForTest(cS, voiceICEMsg(chanID, "candidate:..."))
+	// Send offer with blank SDP — pc is nil but SDP check comes after pc check,
+	// so we expect VOICE_ERROR (no pc) before INVALID_SDP would fire.
+	// To isolate the empty-SDP path we need a client with pc set. Since we
+	// can't construct a real PC in unit tests, we verify the pc==nil branch
+	// fires first, which returns VOICE_ERROR. The INVALID_SDP branch is
+	// separately reachable; we test its message format via the handler directly.
+	hub.HandleMessageForTest(c, voiceSignalMsg("voice_offer", 1, ""))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	if len(msgs) == 0 {
+		t.Fatal("expected at least one error response for voice_offer with no pc")
+	}
+	code := extractCode(t, msgs[0])
+	if code != "VOICE_ERROR" && code != "INVALID_SDP" {
+		t.Errorf("expected VOICE_ERROR or INVALID_SDP, got %q", code)
+	}
+}
+
+// TestVoice_Offer_RateLimit verifies that sending 25+ voice_offer messages
+// rapidly results in at least one RATE_LIMITED error being sent back to the
+// client.
+func TestVoice_Offer_RateLimit(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "offer-ratelimit")
+
+	send := make(chan []byte, 256)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	// 25 offers rapidly — limit is 20/sec.
+	for i := 0; i < 25; i++ {
+		hub.HandleMessageForTest(c, voiceSignalMsg("voice_offer", 1, "v=0..."))
+	}
 	time.Sleep(50 * time.Millisecond)
 
-	receiverMsgs := drainChan(sendR)
+	msgs := drainChan(send)
 	found := false
-	for _, msg := range receiverMsgs {
-		if extractType(t, msg) == "voice_ice" {
+	for _, m := range msgs {
+		if extractCode(t, m) == "RATE_LIMITED" {
 			found = true
 			break
 		}
 	}
 	if !found {
-		t.Error("receiver did not receive relayed voice_ice")
+		t.Error("expected RATE_LIMITED error after 25 rapid voice_offer messages")
 	}
 }
 
+// TestVoice_Answer_NoPeerConnection verifies that voice_answer when the client
+// has no PeerConnection returns VOICE_ERROR.
+func TestVoice_Answer_NoPeerConnection(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "answer-nopc")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceSignalMsg("voice_answer", 1, "v=0 answer..."))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	found := false
+	for _, m := range msgs {
+		if extractCode(t, m) == "VOICE_ERROR" {
+			found = true
+			break
+		}
+	}
+	if !found {
+		t.Error("expected VOICE_ERROR when sending voice_answer without a PeerConnection")
+	}
+}
+
+// TestVoice_Answer_EmptySDP verifies that voice_answer with blank SDP returns
+// an error (VOICE_ERROR from pc==nil check, or INVALID_SDP if pc existed).
+func TestVoice_Answer_EmptySDP(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "answer-emptysdp")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceSignalMsg("voice_answer", 1, ""))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	if len(msgs) == 0 {
+		t.Fatal("expected at least one error response for empty voice_answer")
+	}
+	code := extractCode(t, msgs[0])
+	if code != "VOICE_ERROR" && code != "INVALID_SDP" {
+		t.Errorf("expected VOICE_ERROR or INVALID_SDP, got %q", code)
+	}
+}
+
+// TestVoice_ICE_NoPeerConnection verifies that voice_ice when the client has
+// no PeerConnection returns VOICE_ERROR.
+func TestVoice_ICE_NoPeerConnection(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "ice-nopc")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceICEMsg(1, "candidate:0 1 UDP 123 192.168.1.1 5000 typ host"))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	found := false
+	for _, m := range msgs {
+		if extractCode(t, m) == "VOICE_ERROR" {
+			found = true
+			break
+		}
+	}
+	if !found {
+		t.Error("expected VOICE_ERROR when sending voice_ice without a PeerConnection")
+	}
+}
+
+// TestVoice_HandleMessage_VoiceOffer_Dispatched verifies that voice_offer is
+// dispatched by handleMessage and does not produce an UNKNOWN_TYPE error.
+func TestVoice_HandleMessage_VoiceOffer_Dispatched(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "offer-dispatch")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceSignalMsg("voice_offer", 1, "v=0..."))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	for _, m := range msgs {
+		if extractCode(t, m) == "UNKNOWN_TYPE" {
+			t.Error("voice_offer produced UNKNOWN_TYPE — handler not registered in dispatch")
+		}
+	}
+}
+
+// TestVoice_HandleMessage_VoiceAnswer_Dispatched verifies that voice_answer is
+// dispatched by handleMessage and does not produce an UNKNOWN_TYPE error.
+// This replaces the old TestVoice_HandleMessage_VoiceAnswer_Relayed which
+// tested the removed P2P relay behavior.
+func TestVoice_HandleMessage_VoiceAnswer_Dispatched(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "answer-dispatch")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceSignalMsg("voice_answer", 1, "v=0 answer..."))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	for _, m := range msgs {
+		if extractCode(t, m) == "UNKNOWN_TYPE" {
+			t.Error("voice_answer produced UNKNOWN_TYPE — handler not registered in dispatch")
+		}
+	}
+}
+
+// TestVoice_HandleMessage_VoiceICE_Dispatched verifies that voice_ice is
+// dispatched by handleMessage and does not produce an UNKNOWN_TYPE error.
+func TestVoice_HandleMessage_VoiceICE_Dispatched(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "ice-dispatch")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceICEMsg(1, "candidate:0 1 UDP 123 192.168.1.1 5000 typ host"))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	for _, m := range msgs {
+		if extractCode(t, m) == "UNKNOWN_TYPE" {
+			t.Error("voice_ice produced UNKNOWN_TYPE — handler not registered in dispatch")
+		}
+	}
+}
+
+// TestVoice_Signal_RateLimit_BlocksExcess verifies that rapid voice_offer
+// messages get rate limited (replaces the old relay-counting test).
 func TestVoice_Signal_RateLimit_BlocksExcess(t *testing.T) {
 	hub, database := newVoiceHub(t)
-	chanID := seedVoiceChan(t, database, "vc-ratelimit")
+	user := seedVoiceOwner(t, database, "mia")
 
-	sender := seedVoiceOwner(t, database, "mia")
-	receiver := seedVoiceOwner(t, database, "mia2")
-
-	sendR := make(chan []byte, 256)
-	cR := ws.NewTestClientWithUser(hub, receiver, chanID, sendR)
-	hub.Register(cR)
-
-	sendS := make(chan []byte, 256)
-	cS := ws.NewTestClientWithUser(hub, sender, chanID, sendS)
-	hub.Register(cS)
+	send := make(chan []byte, 256)
+	c := ws.NewTestClientWithUser(hub, user, 0, send)
+	hub.Register(c)
 	time.Sleep(20 * time.Millisecond)
 
-	// Send 30 signals rapidly — limit is 20/sec, so some should be dropped.
+	// Send 30 signals rapidly — limit is 20/sec, so some should be rate-limited.
 	for i := 0; i < 30; i++ {
-		hub.HandleMessageForTest(cS, voiceSignalMsg("voice_offer", chanID, "v=0..."))
+		hub.HandleMessageForTest(c, voiceSignalMsg("voice_offer", 1, "v=0..."))
 	}
 	time.Sleep(50 * time.Millisecond)
 
-	receivedCount := len(drainChan(sendR))
-	if receivedCount >= 30 {
-		t.Errorf("received %d signals, expected fewer due to rate limit", receivedCount)
-	}
-
-	// Sender should receive at least one RATE_LIMITED error.
-	senderMsgs := drainChan(sendS)
-	foundError := false
-	for _, msg := range senderMsgs {
-		if extractType(t, msg) == "error" {
-			foundError = true
+	msgs := drainChan(send)
+	foundRateLimit := false
+	for _, m := range msgs {
+		if extractCode(t, m) == "RATE_LIMITED" {
+			foundRateLimit = true
 			break
 		}
 	}
-	if !foundError {
-		t.Error("expected RATE_LIMITED error to sender after exceeding signal rate limit")
+	if !foundRateLimit {
+		t.Error("expected RATE_LIMITED error after 30 rapid voice_offer messages")
 	}
 }
 
@@ -732,36 +896,700 @@ func TestVoice_Soundboard_RateLimit(t *testing.T) {
 	}
 }
 
-// ─── handleMessage dispatch ───────────────────────────────────────────────────
+// ─── voice_camera ─────────────────────────────────────────────────────────────
 
-func TestVoice_HandleMessage_VoiceAnswer_Relayed(t *testing.T) {
+// voiceCameraMsg builds a voice_camera WebSocket message.
+func voiceCameraMsg(enabled bool) []byte {
+	raw, _ := json.Marshal(map[string]interface{}{
+		"type":    "voice_camera",
+		"payload": map[string]interface{}{"enabled": enabled},
+	})
+	return raw
+}
+
+// TestVoice_Camera_UpdatesState: join voice, send voice_camera {enabled:true},
+// verify voice_state broadcast includes camera:true.
+func TestVoice_Camera_UpdatesState(t *testing.T) {
 	hub, database := newVoiceHub(t)
-	chanID := seedVoiceChan(t, database, "vc-answer")
+	user := seedVoiceOwner(t, database, "cam-alice")
+	chanID := seedVoiceChan(t, database, "vc-cam-alice")
 
-	sender := seedVoiceOwner(t, database, "pedro")
-	receiver := seedVoiceOwner(t, database, "pedro2")
+	user2 := seedVoiceOwner(t, database, "cam-alice2")
+	send2 := make(chan []byte, 16)
+	c2 := ws.NewTestClientWithUser(hub, user2, chanID, send2)
+	hub.Register(c2)
 
-	sendR := make(chan []byte, 16)
-	cR := ws.NewTestClientWithUser(hub, receiver, chanID, sendR)
-	hub.Register(cR)
-
-	sendS := make(chan []byte, 16)
-	cS := ws.NewTestClientWithUser(hub, sender, chanID, sendS)
-	hub.Register(cS)
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
 	time.Sleep(20 * time.Millisecond)
 
-	hub.HandleMessageForTest(cS, voiceSignalMsg("voice_answer", chanID, "v=0 answer..."))
+	// Join voice channel first.
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+	drainChan(send2)
+
+	// Toggle camera on.
+	hub.HandleMessageForTest(c, voiceCameraMsg(true))
 	time.Sleep(50 * time.Millisecond)
 
-	receiverMsgs := drainChan(sendR)
-	found := false
-	for _, msg := range receiverMsgs {
-		if extractType(t, msg) == "voice_answer" {
-			found = true
+	// Verify DB state.
+	state, err := database.GetVoiceState(user.ID)
+	if err != nil {
+		t.Fatalf("GetVoiceState: %v", err)
+	}
+	if state == nil || !state.Camera {
+		t.Error("Camera = false after voice_camera(true)")
+	}
+
+	// Verify voice_state broadcast received by channel member.
+	allMsgs := append(drainChan(send), drainChan(send2)...)
+	foundVoiceState := false
+	for _, msg := range allMsgs {
+		if extractType(t, msg) == "voice_state" {
+			foundVoiceState = true
+
+			var env struct {
+				Type    string `json:"type"`
+				Payload struct {
+					Camera bool `json:"camera"`
+				} `json:"payload"`
+			}
+			if err := json.Unmarshal(msg, &env); err != nil {
+				t.Fatalf("unmarshal voice_state: %v", err)
+			}
+			if !env.Payload.Camera {
+				t.Error("voice_state broadcast payload.camera = false, want true")
+			}
 			break
 		}
 	}
-	if !found {
-		t.Error("receiver did not receive relayed voice_answer")
+	if !foundVoiceState {
+		t.Error("voice_state broadcast not received after voice_camera toggle")
 	}
 }
+
+// TestVoice_Camera_NoPermission: Member without USE_VIDEO gets FORBIDDEN.
+func TestVoice_Camera_NoPermission(t *testing.T) {
+	hub, _ := newVoiceHub(t)
+
+	// Client with no user set → hasChannelPerm returns false.
+	send := make(chan []byte, 16)
+	c := ws.NewTestClient(hub, 7001, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceCameraMsg(true))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	found := false
+	for _, m := range msgs {
+		if extractType(t, m) == "error" {
+			found = true
+		}
+	}
+	if !found {
+		t.Error("expected FORBIDDEN error for camera toggle without USE_VIDEO permission")
+	}
+}
+
+// TestVoice_Camera_RateLimit: send 3+ camera toggles rapidly, verify rate limit error.
+func TestVoice_Camera_RateLimit(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "cam-ratelimit")
+	chanID := seedVoiceChan(t, database, "vc-cam-ratelimit")
+
+	send := make(chan []byte, 64)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+
+	// Send 5 camera toggles rapidly — limit is 2/sec, so some should be rate-limited.
+	for i := 0; i < 5; i++ {
+		hub.HandleMessageForTest(c, voiceCameraMsg(true))
+	}
+	time.Sleep(50 * time.Millisecond)
+
+	msgs := drainChan(send)
+	errCount := 0
+	for _, m := range msgs {
+		if extractType(t, m) == "error" {
+			errCount++
+		}
+	}
+	if errCount == 0 {
+		t.Error("expected RATE_LIMITED error after exceeding camera rate limit")
+	}
+}
+
+// ─── voice_screenshare ────────────────────────────────────────────────────────
+
+// voiceScreenshareMsg builds a voice_screenshare WebSocket message.
+func voiceScreenshareMsg(enabled bool) []byte {
+	raw, _ := json.Marshal(map[string]interface{}{
+		"type":    "voice_screenshare",
+		"payload": map[string]interface{}{"enabled": enabled},
+	})
+	return raw
+}
+
+// TestVoice_Screenshare_UpdatesState: join voice, send voice_screenshare {enabled:true},
+// verify voice_state broadcast includes screenshare:true.
+func TestVoice_Screenshare_UpdatesState(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "ss-alice")
+	chanID := seedVoiceChan(t, database, "vc-ss-alice")
+
+	user2 := seedVoiceOwner(t, database, "ss-alice2")
+	send2 := make(chan []byte, 16)
+	c2 := ws.NewTestClientWithUser(hub, user2, chanID, send2)
+	hub.Register(c2)
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	// Join voice channel first.
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+	drainChan(send2)
+
+	// Toggle screenshare on.
+	hub.HandleMessageForTest(c, voiceScreenshareMsg(true))
+	time.Sleep(50 * time.Millisecond)
+
+	// Verify DB state.
+	state, err := database.GetVoiceState(user.ID)
+	if err != nil {
+		t.Fatalf("GetVoiceState: %v", err)
+	}
+	if state == nil || !state.Screenshare {
+		t.Error("Screenshare = false after voice_screenshare(true)")
+	}
+
+	// Verify voice_state broadcast received.
+	allMsgs := append(drainChan(send), drainChan(send2)...)
+	foundVoiceState := false
+	for _, msg := range allMsgs {
+		if extractType(t, msg) == "voice_state" {
+			foundVoiceState = true
+
+			var env struct {
+				Type    string `json:"type"`
+				Payload struct {
+					Screenshare bool `json:"screenshare"`
+				} `json:"payload"`
+			}
+			if err := json.Unmarshal(msg, &env); err != nil {
+				t.Fatalf("unmarshal voice_state: %v", err)
+			}
+			if !env.Payload.Screenshare {
+				t.Error("voice_state broadcast payload.screenshare = false, want true")
+			}
+			break
+		}
+	}
+	if !foundVoiceState {
+		t.Error("voice_state broadcast not received after voice_screenshare toggle")
+	}
+}
+
+// TestVoice_Screenshare_NoPermission: client without SHARE_SCREEN gets FORBIDDEN.
+func TestVoice_Screenshare_NoPermission(t *testing.T) {
+	hub, _ := newVoiceHub(t)
+
+	// Client with no user set → hasChannelPerm returns false.
+	send := make(chan []byte, 16)
+	c := ws.NewTestClient(hub, 7002, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceScreenshareMsg(true))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	found := false
+	for _, m := range msgs {
+		if extractType(t, m) == "error" {
+			found = true
+		}
+	}
+	if !found {
+		t.Error("expected FORBIDDEN error for screenshare toggle without SHARE_SCREEN permission")
+	}
+}
+
+// TestVoice_Screenshare_RateLimit: send 5+ screenshare toggles rapidly, verify rate limit error.
+func TestVoice_Screenshare_RateLimit(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "ss-ratelimit")
+	chanID := seedVoiceChan(t, database, "vc-ss-ratelimit")
+
+	send := make(chan []byte, 64)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+
+	// Send 5 screenshare toggles rapidly — limit is 2/sec.
+	for i := 0; i < 5; i++ {
+		hub.HandleMessageForTest(c, voiceScreenshareMsg(true))
+	}
+	time.Sleep(50 * time.Millisecond)
+
+	msgs := drainChan(send)
+	errCount := 0
+	for _, m := range msgs {
+		if extractType(t, m) == "error" {
+			errCount++
+		}
+	}
+	if errCount == 0 {
+		t.Error("expected RATE_LIMITED error after exceeding screenshare rate limit")
+	}
+}
+
+// ─── handleMessage dispatch ───────────────────────────────────────────────────
+
+// ─── SFU-integrated voice_join / voice_leave ──────────────────────────────────
+
+// seedVoiceChanMaxUsers creates a voice channel with a custom voice_max_users limit.
+func seedVoiceChanMaxUsers(t *testing.T, database *db.DB, name string, maxUsers int) int64 {
+	t.Helper()
+	id, err := database.CreateChannel(name, "voice", "", "", 0)
+	if err != nil {
+		t.Fatalf("seedVoiceChanMaxUsers CreateChannel: %v", err)
+	}
+	if err := database.SetChannelVoiceMaxUsers(id, maxUsers); err != nil {
+		t.Fatalf("seedVoiceChanMaxUsers SetChannelVoiceMaxUsers: %v", err)
+	}
+	return id
+}
+
+// TestVoice_Join_SFU_SendsVoiceConfig verifies that after voice_join the joiner
+// receives a voice_config message with the expected fields.
+func TestVoice_Join_SFU_SendsVoiceConfig(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "sfu-alice")
+	chanID := seedVoiceChan(t, database, "vc-sfu-alice")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	msgs := drainChan(send)
+	foundConfig := false
+	for _, msg := range msgs {
+		if extractType(t, msg) == "voice_config" {
+			foundConfig = true
+			var env struct {
+				Type    string `json:"type"`
+				Payload struct {
+					ChannelID int64  `json:"channel_id"`
+					Quality   string `json:"quality"`
+					Bitrate   int    `json:"bitrate"`
+					Mode      string `json:"threshold_mode"`
+				} `json:"payload"`
+			}
+			if err := json.Unmarshal(msg, &env); err != nil {
+				t.Fatalf("unmarshal voice_config: %v", err)
+			}
+			if env.Payload.ChannelID != chanID {
+				t.Errorf("voice_config channel_id = %d, want %d", env.Payload.ChannelID, chanID)
+			}
+			if env.Payload.Quality == "" {
+				t.Error("voice_config quality is empty")
+			}
+			if env.Payload.Bitrate <= 0 {
+				t.Errorf("voice_config bitrate = %d, want > 0", env.Payload.Bitrate)
+			}
+			if env.Payload.Mode == "" {
+				t.Error("voice_config threshold_mode is empty")
+			}
+			break
+		}
+	}
+	if !foundConfig {
+		t.Error("joiner did not receive voice_config after voice_join")
+	}
+}
+
+// TestVoice_Join_SFU_ChannelFull verifies that a second join to a max-1 room
+// returns a CHANNEL_FULL error and the first participant is unaffected.
+func TestVoice_Join_SFU_ChannelFull(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	chanID := seedVoiceChanMaxUsers(t, database, "vc-full", 1)
+
+	user1 := seedVoiceOwner(t, database, "full-user1")
+	send1 := make(chan []byte, 32)
+	c1 := ws.NewTestClientWithUser(hub, user1, chanID, send1)
+	hub.Register(c1)
+	time.Sleep(20 * time.Millisecond)
+
+	// First user joins — should succeed.
+	hub.HandleMessageForTest(c1, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	// Verify first user is in DB.
+	state1, err := database.GetVoiceState(user1.ID)
+	if err != nil || state1 == nil {
+		t.Fatalf("user1 voice state missing after join: %v", err)
+	}
+
+	user2 := seedVoiceOwner(t, database, "full-user2")
+	send2 := make(chan []byte, 32)
+	c2 := ws.NewTestClientWithUser(hub, user2, chanID, send2)
+	hub.Register(c2)
+	time.Sleep(20 * time.Millisecond)
+
+	drainChan(send1)
+	drainChan(send2)
+
+	// Second user joins — should get CHANNEL_FULL error.
+	hub.HandleMessageForTest(c2, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	msgs2 := drainChan(send2)
+	foundFull := false
+	for _, msg := range msgs2 {
+		if extractType(t, msg) == "error" {
+			var env struct {
+				Payload struct {
+					Code string `json:"code"`
+				} `json:"payload"`
+			}
+			if errU := json.Unmarshal(msg, &env); errU == nil && env.Payload.Code == "CHANNEL_FULL" {
+				foundFull = true
+				break
+			}
+		}
+	}
+	if !foundFull {
+		t.Error("expected CHANNEL_FULL error when joining a full voice channel")
+	}
+
+	// Second user should NOT be in DB voice state.
+	state2, err := database.GetVoiceState(user2.ID)
+	if err != nil {
+		t.Fatalf("GetVoiceState user2: %v", err)
+	}
+	if state2 != nil {
+		t.Error("user2 voice state should be nil after CHANNEL_FULL rejection")
+	}
+}
+
+// TestVoice_Join_SFU_AddsToVoiceRoom verifies that after voice_join the
+// participant is tracked in the Hub's VoiceRoom.
+func TestVoice_Join_SFU_AddsToVoiceRoom(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "room-alice")
+	chanID := seedVoiceChan(t, database, "vc-room-alice")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	room := hub.GetVoiceRoom(chanID)
+	if room == nil {
+		t.Fatal("VoiceRoom not created after voice_join")
+	}
+	if !room.HasParticipant(user.ID) {
+		t.Error("user not tracked as participant in VoiceRoom after voice_join")
+	}
+	if room.ParticipantCount() != 1 {
+		t.Errorf("VoiceRoom participant count = %d, want 1", room.ParticipantCount())
+	}
+}
+
+// TestVoice_Leave_SFU_RemovesFromRoom verifies that after voice_leave the
+// participant is no longer tracked in the VoiceRoom.
+func TestVoice_Leave_SFU_RemovesFromRoom(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "leave-bob")
+	chanID := seedVoiceChan(t, database, "vc-leave-bob")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	// Confirm in room before leave.
+	room := hub.GetVoiceRoom(chanID)
+	if room == nil || !room.HasParticipant(user.ID) {
+		t.Fatal("precondition: user not in room after join")
+	}
+
+	hub.HandleMessageForTest(c, voiceLeaveMsg())
+	time.Sleep(50 * time.Millisecond)
+
+	// After leave, participant should be removed (room gone or user absent).
+	room = hub.GetVoiceRoom(chanID)
+	if room != nil && room.HasParticipant(user.ID) {
+		t.Error("user still tracked in VoiceRoom after voice_leave")
+	}
+}
+
+// TestVoice_Leave_SFU_CleansUpEmptyRoom verifies that when the last participant
+// leaves, the VoiceRoom is removed from the Hub entirely.
+func TestVoice_Leave_SFU_CleansUpEmptyRoom(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "empty-carol")
+	chanID := seedVoiceChan(t, database, "vc-empty-carol")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	if hub.GetVoiceRoom(chanID) == nil {
+		t.Fatal("precondition: VoiceRoom not created after join")
+	}
+
+	hub.HandleMessageForTest(c, voiceLeaveMsg())
+	time.Sleep(50 * time.Millisecond)
+
+	if hub.GetVoiceRoom(chanID) != nil {
+		t.Error("VoiceRoom should be removed from Hub after last participant leaves")
+	}
+}
+
+// TestVoice_Leave_SFU_OnDisconnect verifies that handleVoiceLeave cleans up
+// room state when triggered by a disconnect without an explicit voice_leave message.
+func TestVoice_Leave_SFU_OnDisconnect(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "disco-dave")
+	chanID := seedVoiceChan(t, database, "vc-disco-dave")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(50 * time.Millisecond)
+
+	room := hub.GetVoiceRoom(chanID)
+	if room == nil || !room.HasParticipant(user.ID) {
+		t.Fatal("precondition: user not in VoiceRoom after join")
+	}
+
+	// Simulate disconnect by calling the exported test hook.
+	hub.HandleVoiceLeaveForTest(c)
+	time.Sleep(30 * time.Millisecond)
+
+	// DB state should be cleared.
+	state, err := database.GetVoiceState(user.ID)
+	if err != nil {
+		t.Fatalf("GetVoiceState after disconnect: %v", err)
+	}
+	if state != nil {
+		t.Error("voice state still in DB after simulated disconnect")
+	}
+
+	// VoiceRoom should be gone or user removed from it.
+	room = hub.GetVoiceRoom(chanID)
+	if room != nil && room.HasParticipant(user.ID) {
+		t.Error("user still in VoiceRoom after simulated disconnect")
+	}
+}
+
+// ─── handleMessage dispatch ───────────────────────────────────────────────────
+
+func TestVoice_HandleMessage_VoiceCamera_Dispatched(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "cam-dispatch")
+	chanID := seedVoiceChan(t, database, "vc-cam-dispatch")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+
+	// Send via HandleMessageForTest to verify dispatch occurs (no unknown_type error).
+	hub.HandleMessageForTest(c, voiceCameraMsg(true))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	for _, m := range msgs {
+		if extractType(t, m) == "error" {
+			var errEnv struct {
+				Payload struct {
+					Code string `json:"code"`
+				} `json:"payload"`
+			}
+			if err := json.Unmarshal(m, &errEnv); err == nil {
+				if errEnv.Payload.Code == "UNKNOWN_TYPE" {
+					t.Error("voice_camera was not dispatched: got UNKNOWN_TYPE error")
+				}
+			}
+		}
+	}
+}
+
+func TestVoice_HandleMessage_VoiceScreenshare_Dispatched(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "ss-dispatch")
+	chanID := seedVoiceChan(t, database, "vc-ss-dispatch")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+
+	// Send via HandleMessageForTest to verify dispatch occurs (no unknown_type error).
+	hub.HandleMessageForTest(c, voiceScreenshareMsg(true))
+	time.Sleep(30 * time.Millisecond)
+
+	msgs := drainChan(send)
+	for _, m := range msgs {
+		if extractType(t, m) == "error" {
+			var errEnv struct {
+				Payload struct {
+					Code string `json:"code"`
+				} `json:"payload"`
+			}
+			if err := json.Unmarshal(m, &errEnv); err == nil {
+				if errEnv.Payload.Code == "UNKNOWN_TYPE" {
+					t.Error("voice_screenshare was not dispatched: got UNKNOWN_TYPE error")
+				}
+			}
+		}
+	}
+}
+
+// ─── ICE monitor / setupICEMonitor ────────────────────────────────────────────
+
+// TestVoice_SetupICEMonitor_NilPC_NoPanic verifies that setupICEMonitor does
+// not panic when the client has a nil PeerConnection.
+func TestVoice_SetupICEMonitor_NilPC_NoPanic(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "ice-monitor-nil")
+	chanID := seedVoiceChan(t, database, "vc-ice-nil")
+
+	send := make(chan []byte, 16)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+
+	// SetupICEMonitorForTest should not panic when c.pc is nil.
+	hub.SetupICEMonitorForTest(c, chanID)
+}
+
+// ─── duplicate voice_join (channel switch) ────────────────────────────────────
+
+// TestVoice_Join_SwitchChannel_LeavesOldChannel verifies that joining channel B
+// while already in channel A results in the user leaving channel A first.
+func TestVoice_Join_SwitchChannel_LeavesOldChannel(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	userA := seedVoiceOwner(t, database, "switch-alice")
+	chanA := seedVoiceChan(t, database, "vc-switch-a")
+	chanB := seedVoiceChan(t, database, "vc-switch-b")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, userA, chanA, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	// Join channel A.
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanA))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+
+	// Verify in channel A.
+	roomA := hub.GetVoiceRoom(chanA)
+	if roomA == nil {
+		t.Fatal("room A should exist after joining")
+	}
+	if !roomA.HasParticipant(userA.ID) {
+		t.Fatal("user should be participant in room A")
+	}
+
+	// Join channel B — should leave A first.
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanB))
+	time.Sleep(50 * time.Millisecond)
+
+	// Room A should no longer have the user.
+	roomA = hub.GetVoiceRoom(chanA)
+	if roomA != nil && roomA.HasParticipant(userA.ID) {
+		t.Error("user should have been removed from room A after joining room B")
+	}
+
+	// Room B should have the user.
+	roomB := hub.GetVoiceRoom(chanB)
+	if roomB == nil {
+		t.Fatal("room B should exist after joining")
+	}
+	if !roomB.HasParticipant(userA.ID) {
+		t.Error("user should be participant in room B after switching")
+	}
+}
+
+// TestVoice_Join_SameChannel_IsIdempotent verifies that joining the same channel
+// twice does not result in errors or duplicate participation.
+func TestVoice_Join_SameChannel_IsIdempotent(t *testing.T) {
+	hub, database := newVoiceHub(t)
+	user := seedVoiceOwner(t, database, "idempotent-join")
+	chanID := seedVoiceChan(t, database, "vc-idempotent")
+
+	send := make(chan []byte, 32)
+	c := ws.NewTestClientWithUser(hub, user, chanID, send)
+	hub.Register(c)
+	time.Sleep(20 * time.Millisecond)
+
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+	drainChan(send)
+
+	// Join same channel again.
+	hub.HandleMessageForTest(c, voiceJoinMsg(chanID))
+	time.Sleep(30 * time.Millisecond)
+
+	// Should not receive an error for the second join.
+	msgs := drainChan(send)
+	for _, m := range msgs {
+		if code := extractCode(t, m); code == "CHANNEL_FULL" || code == "VOICE_ERROR" {
+			t.Errorf("unexpected error %q on re-join of same channel", code)
+		}
+	}
+
+	// Participant count should remain 1.
+	room := hub.GetVoiceRoom(chanID)
+	if room == nil {
+		t.Fatal("room should exist")
+	}
+	if count := room.ParticipantCount(); count != 1 {
+		t.Errorf("ParticipantCount = %d, want 1 after idempotent join", count)
+	}
+}
+
diff --git a/Server/ws/voice_room.go b/Server/ws/voice_room.go
new file mode 100644
index 00000000..7404c170
--- /dev/null
+++ b/Server/ws/voice_room.go
@@ -0,0 +1,177 @@
+package ws
+
+import (
+	"errors"
+	"sync"
+	"time"
+)
+
+// ErrRoomFull is returned when attempting to add a participant to a full voice room.
+var ErrRoomFull = errors.New("voice room is full")
+
+// VoiceParticipant represents one user in a voice room.
+type VoiceParticipant struct {
+	UserID   int64
+	JoinedAt time.Time
+}
+
+// VoiceRoomConfig holds per-room configuration derived from channel settings and server defaults.
+type VoiceRoomConfig struct {
+	ChannelID       int64
+	MaxUsers        int    // 0 = unlimited
+	Quality         string // low|medium|high
+	MixingThreshold int    // forwarding → selective threshold
+	TopSpeakers     int    // N for top-N selection
+	MaxVideo        int    // max simultaneous video streams
+}
+
+// VoiceRoom manages voice participants for a single channel.
+// It does NOT hold PeerConnections yet — those come in Phase 3/4.
+type VoiceRoom struct {
+	config       VoiceRoomConfig
+	participants map[int64]*VoiceParticipant
+	mode         string // "forwarding" or "selective"
+	detector     *SpeakerDetector
+	mu           sync.RWMutex
+}
+
+// NewVoiceRoom creates a new voice room in "forwarding" mode.
+func NewVoiceRoom(cfg VoiceRoomConfig) *VoiceRoom {
+	topN := cfg.TopSpeakers
+	if topN <= 0 {
+		topN = 3
+	}
+	return &VoiceRoom{
+		config:       cfg,
+		participants: make(map[int64]*VoiceParticipant),
+		mode:         "forwarding",
+		detector:     NewSpeakerDetector(topN),
+	}
+}
+
+// AddParticipant adds a user to the voice room. Returns ErrRoomFull if
+// MaxUsers > 0 and the room is already at capacity. Adding a duplicate
+// user ID is a no-op.
+func (r *VoiceRoom) AddParticipant(userID int64) error {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+
+	// Duplicate check — already present, nothing to do.
+	if _, exists := r.participants[userID]; exists {
+		return nil
+	}
+
+	if r.config.MaxUsers > 0 && len(r.participants) >= r.config.MaxUsers {
+		return ErrRoomFull
+	}
+
+	r.participants[userID] = &VoiceParticipant{
+		UserID:   userID,
+		JoinedAt: time.Now(),
+	}
+
+	r.updateMode()
+	return nil
+}
+
+// RemoveParticipant removes a user from the voice room. No-op if the user
+// is not present.
+func (r *VoiceRoom) RemoveParticipant(userID int64) {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+
+	if _, exists := r.participants[userID]; !exists {
+		return
+	}
+
+	delete(r.participants, userID)
+	r.detector.RemoveSpeaker(userID)
+	r.updateMode()
+}
+
+// ParticipantCount returns the number of participants (thread-safe).
+func (r *VoiceRoom) ParticipantCount() int {
+	r.mu.RLock()
+	defer r.mu.RUnlock()
+	return len(r.participants)
+}
+
+// IsEmpty returns true if the room has no participants.
+func (r *VoiceRoom) IsEmpty() bool {
+	return r.ParticipantCount() == 0
+}
+
+// Mode returns the current mixing mode ("forwarding" or "selective").
+func (r *VoiceRoom) Mode() string {
+	r.mu.RLock()
+	defer r.mu.RUnlock()
+	return r.mode
+}
+
+// ParticipantIDs returns a slice of all participant user IDs.
+func (r *VoiceRoom) ParticipantIDs() []int64 {
+	r.mu.RLock()
+	defer r.mu.RUnlock()
+
+	ids := make([]int64, 0, len(r.participants))
+	for id := range r.participants {
+		ids = append(ids, id)
+	}
+	return ids
+}
+
+// HasParticipant checks whether the given user is in the room.
+func (r *VoiceRoom) HasParticipant(userID int64) bool {
+	r.mu.RLock()
+	defer r.mu.RUnlock()
+	_, exists := r.participants[userID]
+	return exists
+}
+
+// Close clears all participants from the room.
+func (r *VoiceRoom) Close() {
+	r.mu.Lock()
+	defer r.mu.Unlock()
+	r.participants = make(map[int64]*VoiceParticipant)
+	r.mode = "forwarding"
+}
+
+// UpdateSpeakerLevel updates the audio level for a user in this room's detector.
+// level is the raw RFC 6464 dBov value: 0 = loudest, 127 = silence.
+func (r *VoiceRoom) UpdateSpeakerLevel(userID int64, level uint8) {
+	r.detector.UpdateLevel(userID, level)
+}
+
+// TopSpeakers returns the current top-N active speakers for this room.
+func (r *VoiceRoom) TopSpeakers() []int64 {
+	return r.detector.TopSpeakers()
+}
+
+// Config returns a copy of the room's configuration.
+func (r *VoiceRoom) Config() VoiceRoomConfig {
+	r.mu.RLock()
+	defer r.mu.RUnlock()
+	return r.config
+}
+
+// updateMode checks participant count vs threshold with ±2 hysteresis.
+// Must be called with r.mu held.
+func (r *VoiceRoom) updateMode() {
+	count := len(r.participants)
+	threshold := r.config.MixingThreshold
+
+	if threshold <= 0 {
+		return
+	}
+
+	switch r.mode {
+	case "forwarding":
+		if count >= threshold {
+			r.mode = "selective"
+		}
+	case "selective":
+		if count <= threshold-2 {
+			r.mode = "forwarding"
+		}
+	}
+}
diff --git a/Server/ws/voice_room_test.go b/Server/ws/voice_room_test.go
new file mode 100644
index 00000000..035ef303
--- /dev/null
+++ b/Server/ws/voice_room_test.go
@@ -0,0 +1,278 @@
+package ws_test
+
+import (
+	"errors"
+	"sort"
+	"sync"
+	"testing"
+
+	"github.com/owncord/server/ws"
+)
+
+func defaultRoomConfig() ws.VoiceRoomConfig {
+	return ws.VoiceRoomConfig{
+		ChannelID:       1,
+		MaxUsers:        0,
+		Quality:         "medium",
+		MixingThreshold: 5,
+		TopSpeakers:     3,
+		MaxVideo:        4,
+	}
+}
+
+func TestNewVoiceRoom(t *testing.T) {
+	cfg := defaultRoomConfig()
+	room := ws.NewVoiceRoom(cfg)
+
+	if room.Mode() != "forwarding" {
+		t.Errorf("NewVoiceRoom() mode = %q, want %q", room.Mode(), "forwarding")
+	}
+	if !room.IsEmpty() {
+		t.Error("NewVoiceRoom() should be empty")
+	}
+	if room.ParticipantCount() != 0 {
+		t.Errorf("NewVoiceRoom() count = %d, want 0", room.ParticipantCount())
+	}
+}
+
+func TestVoiceRoom_AddParticipant(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+
+	if err := room.AddParticipant(100); err != nil {
+		t.Fatalf("AddParticipant(100) returned error: %v", err)
+	}
+	if err := room.AddParticipant(200); err != nil {
+		t.Fatalf("AddParticipant(200) returned error: %v", err)
+	}
+
+	if room.ParticipantCount() != 2 {
+		t.Errorf("ParticipantCount() = %d, want 2", room.ParticipantCount())
+	}
+	if room.IsEmpty() {
+		t.Error("room should not be empty after adding participants")
+	}
+}
+
+func TestVoiceRoom_AddParticipant_Full(t *testing.T) {
+	cfg := defaultRoomConfig()
+	cfg.MaxUsers = 2
+	room := ws.NewVoiceRoom(cfg)
+
+	if err := room.AddParticipant(1); err != nil {
+		t.Fatalf("AddParticipant(1) returned error: %v", err)
+	}
+	if err := room.AddParticipant(2); err != nil {
+		t.Fatalf("AddParticipant(2) returned error: %v", err)
+	}
+
+	err := room.AddParticipant(3)
+	if err == nil {
+		t.Fatal("AddParticipant(3) should return error when room is full")
+	}
+	if !errors.Is(err, ws.ErrRoomFull) {
+		t.Errorf("error = %v, want ErrRoomFull", err)
+	}
+	if room.ParticipantCount() != 2 {
+		t.Errorf("ParticipantCount() = %d, want 2 (third should not be added)", room.ParticipantCount())
+	}
+}
+
+func TestVoiceRoom_AddParticipant_Unlimited(t *testing.T) {
+	cfg := defaultRoomConfig()
+	cfg.MaxUsers = 0
+	room := ws.NewVoiceRoom(cfg)
+
+	for i := int64(1); i <= 50; i++ {
+		if err := room.AddParticipant(i); err != nil {
+			t.Fatalf("AddParticipant(%d) returned error: %v", i, err)
+		}
+	}
+	if room.ParticipantCount() != 50 {
+		t.Errorf("ParticipantCount() = %d, want 50", room.ParticipantCount())
+	}
+}
+
+func TestVoiceRoom_RemoveParticipant(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+	_ = room.AddParticipant(1)
+	_ = room.AddParticipant(2)
+	_ = room.AddParticipant(3)
+
+	room.RemoveParticipant(2)
+
+	if room.ParticipantCount() != 2 {
+		t.Errorf("ParticipantCount() = %d, want 2", room.ParticipantCount())
+	}
+	if room.HasParticipant(2) {
+		t.Error("HasParticipant(2) = true after removal")
+	}
+}
+
+func TestVoiceRoom_RemoveParticipant_NotPresent(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+	_ = room.AddParticipant(1)
+
+	// Should not panic.
+	room.RemoveParticipant(999)
+
+	if room.ParticipantCount() != 1 {
+		t.Errorf("ParticipantCount() = %d, want 1", room.ParticipantCount())
+	}
+}
+
+func TestVoiceRoom_HasParticipant(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+	_ = room.AddParticipant(42)
+
+	if !room.HasParticipant(42) {
+		t.Error("HasParticipant(42) = false, want true")
+	}
+	if room.HasParticipant(99) {
+		t.Error("HasParticipant(99) = true, want false")
+	}
+}
+
+func TestVoiceRoom_ParticipantIDs(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+	_ = room.AddParticipant(10)
+	_ = room.AddParticipant(20)
+	_ = room.AddParticipant(30)
+
+	ids := room.ParticipantIDs()
+	if len(ids) != 3 {
+		t.Fatalf("ParticipantIDs() returned %d IDs, want 3", len(ids))
+	}
+
+	sort.Slice(ids, func(i, j int) bool { return ids[i] < ids[j] })
+	want := []int64{10, 20, 30}
+	for i, id := range ids {
+		if id != want[i] {
+			t.Errorf("ParticipantIDs()[%d] = %d, want %d", i, id, want[i])
+		}
+	}
+}
+
+func TestVoiceRoom_Mode_ForwardingToSelective(t *testing.T) {
+	cfg := defaultRoomConfig()
+	cfg.MixingThreshold = 3
+	room := ws.NewVoiceRoom(cfg)
+
+	_ = room.AddParticipant(1)
+	_ = room.AddParticipant(2)
+	if room.Mode() != "forwarding" {
+		t.Errorf("mode after 2 users = %q, want %q", room.Mode(), "forwarding")
+	}
+
+	_ = room.AddParticipant(3)
+	if room.Mode() != "selective" {
+		t.Errorf("mode after 3 users (threshold=3) = %q, want %q", room.Mode(), "selective")
+	}
+}
+
+func TestVoiceRoom_Mode_SelectiveToForwarding_Hysteresis(t *testing.T) {
+	cfg := defaultRoomConfig()
+	cfg.MixingThreshold = 5
+	room := ws.NewVoiceRoom(cfg)
+
+	// Add 5 participants to trigger selective mode.
+	for i := int64(1); i <= 5; i++ {
+		_ = room.AddParticipant(i)
+	}
+	if room.Mode() != "selective" {
+		t.Fatalf("mode after 5 users (threshold=5) = %q, want %q", room.Mode(), "selective")
+	}
+
+	// Remove 1: count=4, still selective (4 > 5-2=3).
+	room.RemoveParticipant(5)
+	if room.Mode() != "selective" {
+		t.Errorf("mode at count=4 should still be %q (hysteresis), got %q", "selective", room.Mode())
+	}
+
+	// Remove 1 more: count=3, 3 <= 5-2=3 → switch to forwarding.
+	room.RemoveParticipant(4)
+	if room.Mode() != "forwarding" {
+		t.Errorf("mode at count=3 should be %q (3 <= threshold-2=3), got %q", "forwarding", room.Mode())
+	}
+}
+
+func TestVoiceRoom_Close(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+	_ = room.AddParticipant(1)
+	_ = room.AddParticipant(2)
+
+	room.Close()
+
+	if !room.IsEmpty() {
+		t.Error("room should be empty after Close()")
+	}
+	if room.ParticipantCount() != 0 {
+		t.Errorf("ParticipantCount() = %d after Close(), want 0", room.ParticipantCount())
+	}
+}
+
+func TestVoiceRoom_Concurrent(t *testing.T) {
+	cfg := defaultRoomConfig()
+	cfg.MaxUsers = 0
+	room := ws.NewVoiceRoom(cfg)
+
+	var wg sync.WaitGroup
+	const goroutines = 50
+
+	// Add participants concurrently.
+	for i := int64(1); i <= goroutines; i++ {
+		wg.Add(1)
+		go func(id int64) {
+			defer wg.Done()
+			_ = room.AddParticipant(id)
+		}(i)
+	}
+	wg.Wait()
+
+	if room.ParticipantCount() != goroutines {
+		t.Errorf("ParticipantCount() = %d after concurrent adds, want %d", room.ParticipantCount(), goroutines)
+	}
+
+	// Remove participants concurrently.
+	for i := int64(1); i <= goroutines; i++ {
+		wg.Add(1)
+		go func(id int64) {
+			defer wg.Done()
+			room.RemoveParticipant(id)
+		}(i)
+	}
+	wg.Wait()
+
+	if !room.IsEmpty() {
+		t.Errorf("room should be empty after concurrent removes, count = %d", room.ParticipantCount())
+	}
+
+	// Mix add/remove concurrently.
+	for i := int64(1); i <= goroutines; i++ {
+		wg.Add(2)
+		go func(id int64) {
+			defer wg.Done()
+			_ = room.AddParticipant(id)
+		}(i)
+		go func(id int64) {
+			defer wg.Done()
+			room.RemoveParticipant(id)
+		}(i)
+	}
+	wg.Wait()
+
+	// Just verify no panic and count is non-negative.
+	if room.ParticipantCount() < 0 {
+		t.Errorf("ParticipantCount() = %d, should not be negative", room.ParticipantCount())
+	}
+}
+
+func TestVoiceRoom_AddParticipant_Duplicate(t *testing.T) {
+	room := ws.NewVoiceRoom(defaultRoomConfig())
+	_ = room.AddParticipant(1)
+	_ = room.AddParticipant(1) // duplicate
+
+	// Should not double-count.
+	if room.ParticipantCount() != 1 {
+		t.Errorf("ParticipantCount() = %d after duplicate add, want 1", room.ParticipantCount())
+	}
+}
diff --git a/Server/ws_cov.out b/Server/ws_cov.out
new file mode 100644
index 00000000..92d2d063
--- /dev/null
+++ b/Server/ws_cov.out
@@ -0,0 +1,571 @@
+mode: set
+github.com/owncord/server/ws/client.go:43.80,52.2 1 0
+github.com/owncord/server/ws/client.go:56.40,58.2 1 1
+github.com/owncord/server/ws/client.go:62.70,68.2 1 1
+github.com/owncord/server/ws/client.go:71.92,78.2 1 1
+github.com/owncord/server/ws/client.go:82.96,90.2 1 1
+github.com/owncord/server/ws/client.go:93.53,95.2 1 1
+github.com/owncord/server/ws/client.go:99.119,108.2 1 1
+github.com/owncord/server/ws/client.go:112.38,115.18 3 1
+github.com/owncord/server/ws/client.go:115.18,117.3 1 1
+github.com/owncord/server/ws/client.go:118.2,118.9 1 1
+github.com/owncord/server/ws/client.go:119.21,119.21 0 1
+github.com/owncord/server/ws/client.go:120.10,120.10 0 0
+github.com/owncord/server/ws/client.go:127.30,130.19 3 1
+github.com/owncord/server/ws/client.go:130.19,133.3 2 1
+github.com/owncord/server/ws/handlers.go:30.59,32.2 1 1
+github.com/owncord/server/ws/handlers.go:37.50,39.2 1 1
+github.com/owncord/server/ws/handlers.go:43.52,50.17 4 1
+github.com/owncord/server/ws/handlers.go:50.17,52.3 1 1
+github.com/owncord/server/ws/handlers.go:53.2,55.38 2 1
+github.com/owncord/server/ws/handlers.go:55.38,57.75 2 1
+github.com/owncord/server/ws/handlers.go:57.75,61.4 3 1
+github.com/owncord/server/ws/handlers.go:64.2,65.50 2 1
+github.com/owncord/server/ws/handlers.go:65.50,69.3 3 1
+github.com/owncord/server/ws/handlers.go:71.2,71.18 1 1
+github.com/owncord/server/ws/handlers.go:72.19,73.43 1 1
+github.com/owncord/server/ws/handlers.go:74.19,75.43 1 0
+github.com/owncord/server/ws/handlers.go:76.21,77.45 1 0
+github.com/owncord/server/ws/handlers.go:78.22,79.41 1 0
+github.com/owncord/server/ws/handlers.go:80.25,81.42 1 0
+github.com/owncord/server/ws/handlers.go:82.22,83.33 1 0
+github.com/owncord/server/ws/handlers.go:84.25,85.35 1 1
+github.com/owncord/server/ws/handlers.go:86.23,87.39 1 0
+github.com/owncord/server/ws/handlers.go:88.20,89.36 1 1
+github.com/owncord/server/ws/handlers.go:90.21,91.24 1 1
+github.com/owncord/server/ws/handlers.go:92.20,93.36 1 1
+github.com/owncord/server/ws/handlers.go:94.22,95.38 1 1
+github.com/owncord/server/ws/handlers.go:96.22,97.38 1 1
+github.com/owncord/server/ws/handlers.go:98.27,99.43 1 1
+github.com/owncord/server/ws/handlers.go:100.21,101.37 1 1
+github.com/owncord/server/ws/handlers.go:102.22,103.38 1 1
+github.com/owncord/server/ws/handlers.go:104.19,105.35 1 1
+github.com/owncord/server/ws/handlers.go:106.25,107.37 1 1
+github.com/owncord/server/ws/handlers.go:108.10,110.94 2 1
+github.com/owncord/server/ws/handlers.go:115.80,118.57 2 1
+github.com/owncord/server/ws/handlers.go:118.57,121.3 2 1
+github.com/owncord/server/ws/handlers.go:123.2,129.52 2 1
+github.com/owncord/server/ws/handlers.go:129.52,132.3 2 0
+github.com/owncord/server/ws/handlers.go:133.2,134.34 2 1
+github.com/owncord/server/ws/handlers.go:134.34,137.3 2 0
+github.com/owncord/server/ws/handlers.go:140.2,141.29 2 1
+github.com/owncord/server/ws/handlers.go:141.29,144.3 2 0
+github.com/owncord/server/ws/handlers.go:147.2,147.88 1 1
+github.com/owncord/server/ws/handlers.go:147.88,150.3 2 0
+github.com/owncord/server/ws/handlers.go:153.2,153.84 1 1
+github.com/owncord/server/ws/handlers.go:153.84,155.75 2 1
+github.com/owncord/server/ws/handlers.go:155.75,158.4 2 1
+github.com/owncord/server/ws/handlers.go:162.2,163.19 2 1
+github.com/owncord/server/ws/handlers.go:163.19,166.3 2 0
+github.com/owncord/server/ws/handlers.go:167.2,167.33 1 1
+github.com/owncord/server/ws/handlers.go:167.33,170.3 2 0
+github.com/owncord/server/ws/handlers.go:173.2,174.16 2 1
+github.com/owncord/server/ws/handlers.go:174.16,178.3 3 0
+github.com/owncord/server/ws/handlers.go:181.2,182.30 2 1
+github.com/owncord/server/ws/handlers.go:182.30,186.3 3 0
+github.com/owncord/server/ws/handlers.go:188.2,190.19 3 1
+github.com/owncord/server/ws/handlers.go:190.19,193.3 2 1
+github.com/owncord/server/ws/handlers.go:195.2,202.44 4 1
+github.com/owncord/server/ws/handlers.go:206.76,211.52 2 0
+github.com/owncord/server/ws/handlers.go:211.52,214.3 2 0
+github.com/owncord/server/ws/handlers.go:215.2,216.30 2 0
+github.com/owncord/server/ws/handlers.go:216.30,219.3 2 0
+github.com/owncord/server/ws/handlers.go:221.2,222.19 2 0
+github.com/owncord/server/ws/handlers.go:222.19,225.3 2 0
+github.com/owncord/server/ws/handlers.go:228.2,228.67 1 0
+github.com/owncord/server/ws/handlers.go:228.67,231.3 2 0
+github.com/owncord/server/ws/handlers.go:233.2,234.30 2 0
+github.com/owncord/server/ws/handlers.go:234.30,237.3 2 0
+github.com/owncord/server/ws/handlers.go:239.2,240.25 2 0
+github.com/owncord/server/ws/handlers.go:240.25,242.3 1 0
+github.com/owncord/server/ws/handlers.go:243.2,244.95 2 0
+github.com/owncord/server/ws/handlers.go:248.78,252.52 2 0
+github.com/owncord/server/ws/handlers.go:252.52,255.3 2 0
+github.com/owncord/server/ws/handlers.go:256.2,257.30 2 0
+github.com/owncord/server/ws/handlers.go:257.30,260.3 2 0
+github.com/owncord/server/ws/handlers.go:262.2,263.30 2 0
+github.com/owncord/server/ws/handlers.go:263.30,266.3 2 0
+github.com/owncord/server/ws/handlers.go:268.2,269.67 2 0
+github.com/owncord/server/ws/handlers.go:269.67,272.3 2 0
+github.com/owncord/server/ws/handlers.go:274.2,277.77 3 0
+github.com/owncord/server/ws/handlers.go:281.76,283.65 2 0
+github.com/owncord/server/ws/handlers.go:283.65,286.3 2 0
+github.com/owncord/server/ws/handlers.go:288.2,292.52 2 0
+github.com/owncord/server/ws/handlers.go:292.52,295.3 2 0
+github.com/owncord/server/ws/handlers.go:296.2,297.30 2 0
+github.com/owncord/server/ws/handlers.go:297.30,300.3 2 0
+github.com/owncord/server/ws/handlers.go:301.2,301.19 1 0
+github.com/owncord/server/ws/handlers.go:301.19,304.3 2 0
+github.com/owncord/server/ws/handlers.go:305.2,305.23 1 0
+github.com/owncord/server/ws/handlers.go:305.23,308.3 2 0
+github.com/owncord/server/ws/handlers.go:310.2,311.30 2 0
+github.com/owncord/server/ws/handlers.go:311.30,314.3 2 0
+github.com/owncord/server/ws/handlers.go:316.2,316.67 1 0
+github.com/owncord/server/ws/handlers.go:316.67,319.3 2 0
+github.com/owncord/server/ws/handlers.go:321.2,322.9 2 0
+github.com/owncord/server/ws/handlers.go:322.9,324.3 1 0
+github.com/owncord/server/ws/handlers.go:324.8,327.3 2 0
+github.com/owncord/server/ws/handlers.go:328.2,328.16 1 0
+github.com/owncord/server/ws/handlers.go:328.16,331.3 2 0
+github.com/owncord/server/ws/handlers.go:333.2,333.107 1 0
+github.com/owncord/server/ws/handlers.go:337.64,339.34 2 0
+github.com/owncord/server/ws/handlers.go:339.34,342.3 2 0
+github.com/owncord/server/ws/handlers.go:344.2,345.61 2 0
+github.com/owncord/server/ws/handlers.go:345.61,347.3 1 0
+github.com/owncord/server/ws/handlers.go:349.2,350.19 2 0
+github.com/owncord/server/ws/handlers.go:350.19,352.3 1 0
+github.com/owncord/server/ws/handlers.go:355.2,355.88 1 0
+github.com/owncord/server/ws/handlers.go:359.66,361.65 2 1
+github.com/owncord/server/ws/handlers.go:361.65,364.3 2 1
+github.com/owncord/server/ws/handlers.go:366.2,369.52 2 1
+github.com/owncord/server/ws/handlers.go:369.52,372.3 2 0
+github.com/owncord/server/ws/handlers.go:373.2,374.30 2 1
+github.com/owncord/server/ws/handlers.go:374.30,377.3 2 0
+github.com/owncord/server/ws/handlers.go:379.2,379.66 1 1
+github.com/owncord/server/ws/handlers.go:379.66,381.3 1 0
+github.com/owncord/server/ws/handlers.go:383.2,383.56 1 1
+github.com/owncord/server/ws/handlers.go:388.75,389.19 1 1
+github.com/owncord/server/ws/handlers.go:389.19,391.3 1 1
+github.com/owncord/server/ws/handlers.go:392.2,393.31 2 1
+github.com/owncord/server/ws/handlers.go:393.31,395.3 1 0
+github.com/owncord/server/ws/handlers.go:396.2,396.53 1 1
+github.com/owncord/server/ws/handlers.go:396.53,398.3 1 1
+github.com/owncord/server/ws/handlers.go:400.2,401.16 2 1
+github.com/owncord/server/ws/handlers.go:401.16,403.3 1 0
+github.com/owncord/server/ws/handlers.go:404.2,405.31 2 1
+github.com/owncord/server/ws/handlers.go:409.76,412.32 3 0
+github.com/owncord/server/ws/handlers.go:412.32,413.27 1 0
+github.com/owncord/server/ws/handlers.go:413.27,414.12 1 0
+github.com/owncord/server/ws/handlers.go:416.3,416.49 1 0
+github.com/owncord/server/ws/handlers.go:416.49,417.12 1 0
+github.com/owncord/server/ws/handlers.go:419.3,419.10 1 0
+github.com/owncord/server/ws/handlers.go:420.22,420.22 0 0
+github.com/owncord/server/ws/handlers.go:421.11,421.11 0 0
+github.com/owncord/server/ws/handlers.go:428.70,430.29 2 0
+github.com/owncord/server/ws/handlers.go:430.29,432.3 1 0
+github.com/owncord/server/ws/handlers.go:433.2,435.15 3 0
+github.com/owncord/server/ws/hub.go:35.62,46.2 1 1
+github.com/owncord/server/ws/hub.go:49.32,51.2 1 1
+github.com/owncord/server/ws/hub.go:55.85,59.45 3 1
+github.com/owncord/server/ws/hub.go:59.45,61.3 1 1
+github.com/owncord/server/ws/hub.go:62.2,64.13 3 1
+github.com/owncord/server/ws/hub.go:68.56,72.2 3 1
+github.com/owncord/server/ws/hub.go:75.48,78.8 3 1
+github.com/owncord/server/ws/hub.go:78.8,80.3 1 1
+github.com/owncord/server/ws/hub.go:81.2,83.8 2 1
+github.com/owncord/server/ws/hub.go:83.8,85.3 1 1
+github.com/owncord/server/ws/hub.go:89.36,92.36 3 1
+github.com/owncord/server/ws/hub.go:92.36,94.3 1 1
+github.com/owncord/server/ws/hub.go:95.2,98.29 3 1
+github.com/owncord/server/ws/hub.go:98.29,100.3 1 1
+github.com/owncord/server/ws/hub.go:105.21,108.6 2 1
+github.com/owncord/server/ws/hub.go:108.6,109.10 1 1
+github.com/owncord/server/ws/hub.go:110.17,111.10 1 1
+github.com/owncord/server/ws/hub.go:113.26,118.54 2 1
+github.com/owncord/server/ws/hub.go:118.54,119.22 1 1
+github.com/owncord/server/ws/hub.go:119.22,122.6 2 0
+github.com/owncord/server/ws/hub.go:123.5,123.26 1 1
+github.com/owncord/server/ws/hub.go:123.26,124.60 1 1
+github.com/owncord/server/ws/hub.go:124.60,126.25 2 1
+github.com/owncord/server/ws/hub.go:126.25,132.8 3 1
+github.com/owncord/server/ws/hub.go:134.6,135.23 2 1
+github.com/owncord/server/ws/hub.go:137.5,137.20 1 1
+github.com/owncord/server/ws/hub.go:139.4,140.17 2 1
+github.com/owncord/server/ws/hub.go:142.28,144.62 2 1
+github.com/owncord/server/ws/hub.go:144.62,146.5 1 1
+github.com/owncord/server/ws/hub.go:147.4,147.17 1 1
+github.com/owncord/server/ws/hub.go:149.28,150.26 1 1
+github.com/owncord/server/ws/hub.go:156.22,158.2 1 1
+github.com/owncord/server/ws/hub.go:161.30,164.2 2 1
+github.com/owncord/server/ws/hub.go:168.55,170.17 2 1
+github.com/owncord/server/ws/hub.go:170.17,172.3 1 1
+github.com/owncord/server/ws/hub.go:175.2,182.40 4 1
+github.com/owncord/server/ws/hub.go:182.40,183.42 1 1
+github.com/owncord/server/ws/hub.go:183.42,184.24 1 1
+github.com/owncord/server/ws/hub.go:184.24,187.5 2 0
+github.com/owncord/server/ws/hub.go:188.4,188.24 1 1
+github.com/owncord/server/ws/hub.go:191.3,191.37 1 1
+github.com/owncord/server/ws/hub.go:193.2,196.40 2 1
+github.com/owncord/server/ws/hub.go:196.40,198.3 1 1
+github.com/owncord/server/ws/hub.go:202.35,204.2 1 1
+github.com/owncord/server/ws/hub.go:207.37,209.2 1 1
+github.com/owncord/server/ws/hub.go:213.63,215.2 1 1
+github.com/owncord/server/ws/hub.go:218.42,220.2 1 1
+github.com/owncord/server/ws/hub.go:225.71,227.2 1 0
+github.com/owncord/server/ws/hub.go:230.54,232.2 1 0
+github.com/owncord/server/ws/hub.go:235.54,237.2 1 0
+github.com/owncord/server/ws/hub.go:240.55,242.2 1 0
+github.com/owncord/server/ws/hub.go:246.57,250.9 4 1
+github.com/owncord/server/ws/hub.go:250.9,252.3 1 1
+github.com/owncord/server/ws/hub.go:253.2,253.9 1 1
+github.com/owncord/server/ws/hub.go:254.21,255.14 1 1
+github.com/owncord/server/ws/hub.go:256.10,258.15 1 0
+github.com/owncord/server/ws/hub.go:263.33,267.2 3 1
+github.com/owncord/server/ws/hub.go:272.37,274.60 2 1
+github.com/owncord/server/ws/hub.go:274.60,276.3 1 1
+github.com/owncord/server/ws/hub.go:277.2,278.15 2 1
+github.com/owncord/server/ws/hub.go:282.49,286.30 3 1
+github.com/owncord/server/ws/hub.go:286.30,288.55 1 1
+github.com/owncord/server/ws/hub.go:288.55,289.12 1 1
+github.com/owncord/server/ws/hub.go:291.3,291.10 1 1
+github.com/owncord/server/ws/hub.go:292.25,292.25 0 1
+github.com/owncord/server/ws/hub.go:293.11,293.11 0 0
+github.com/owncord/server/ws/messages.go:18.30,20.16 2 1
+github.com/owncord/server/ws/messages.go:20.16,23.3 1 0
+github.com/owncord/server/ws/messages.go:24.2,24.10 1 1
+github.com/owncord/server/ws/messages.go:28.49,36.2 1 1
+github.com/owncord/server/ws/messages.go:39.59,47.2 1 1
+github.com/owncord/server/ws/messages.go:50.44,52.24 2 0
+github.com/owncord/server/ws/messages.go:52.24,54.3 1 0
+github.com/owncord/server/ws/messages.go:55.2,64.4 1 0
+github.com/owncord/server/ws/messages.go:68.145,70.19 2 1
+github.com/owncord/server/ws/messages.go:70.19,72.3 1 0
+github.com/owncord/server/ws/messages.go:73.2,87.4 1 1
+github.com/owncord/server/ws/messages.go:91.78,100.2 1 1
+github.com/owncord/server/ws/messages.go:103.79,113.2 1 0
+github.com/owncord/server/ws/messages.go:116.54,124.2 1 0
+github.com/owncord/server/ws/messages.go:127.87,138.2 1 0
+github.com/owncord/server/ws/messages.go:141.70,150.2 1 0
+github.com/owncord/server/ws/messages.go:153.50,167.2 1 1
+github.com/owncord/server/ws/messages.go:170.127,183.2 1 1
+github.com/owncord/server/ws/messages.go:186.80,195.2 1 1
+github.com/owncord/server/ws/messages.go:198.54,206.2 1 1
+github.com/owncord/server/ws/messages.go:209.59,217.2 1 0
+github.com/owncord/server/ws/messages.go:221.58,229.2 1 0
+github.com/owncord/server/ws/messages.go:232.63,240.2 1 1
+github.com/owncord/server/ws/messages.go:243.48,255.2 1 1
+github.com/owncord/server/ws/messages.go:258.48,270.2 1 1
+github.com/owncord/server/ws/messages.go:273.49,280.2 1 1
+github.com/owncord/server/ws/messages.go:283.68,291.2 1 1
+github.com/owncord/server/ws/messages.go:294.61,298.52 2 1
+github.com/owncord/server/ws/messages.go:298.52,300.3 1 0
+github.com/owncord/server/ws/messages.go:301.2,302.16 2 1
+github.com/owncord/server/ws/messages.go:302.16,304.3 1 0
+github.com/owncord/server/ws/messages.go:305.2,305.16 1 1
+github.com/owncord/server/ws/origin.go:15.76,16.30 1 1
+github.com/owncord/server/ws/origin.go:16.30,18.3 1 1
+github.com/owncord/server/ws/origin.go:20.2,20.35 1 1
+github.com/owncord/server/ws/origin.go:20.35,21.15 1 1
+github.com/owncord/server/ws/origin.go:21.15,23.4 1 1
+github.com/owncord/server/ws/origin.go:26.2,28.3 1 1
+github.com/owncord/server/ws/serve.go:27.83,29.54 2 0
+github.com/owncord/server/ws/serve.go:29.54,31.17 2 0
+github.com/owncord/server/ws/serve.go:31.17,34.4 2 0
+github.com/owncord/server/ws/serve.go:36.3,37.17 2 0
+github.com/owncord/server/ws/serve.go:37.17,41.4 3 0
+github.com/owncord/server/ws/serve.go:43.3,50.82 5 0
+github.com/owncord/server/ws/serve.go:50.82,52.4 1 0
+github.com/owncord/server/ws/serve.go:55.3,57.63 3 0
+github.com/owncord/server/ws/serve.go:57.63,59.4 1 0
+github.com/owncord/server/ws/serve.go:61.3,68.16 6 0
+github.com/owncord/server/ws/serve.go:73.70,74.6 1 0
+github.com/owncord/server/ws/serve.go:74.6,75.10 1 0
+github.com/owncord/server/ws/serve.go:76.28,77.11 1 0
+github.com/owncord/server/ws/serve.go:77.11,80.5 2 0
+github.com/owncord/server/ws/serve.go:81.4,84.18 4 0
+github.com/owncord/server/ws/serve.go:84.18,87.5 2 0
+github.com/owncord/server/ws/serve.go:88.21,89.10 1 0
+github.com/owncord/server/ws/serve.go:95.79,96.15 1 0
+github.com/owncord/server/ws/serve.go:96.15,99.20 3 0
+github.com/owncord/server/ws/serve.go:99.20,103.4 3 0
+github.com/owncord/server/ws/serve.go:106.2,106.6 1 0
+github.com/owncord/server/ws/serve.go:106.6,108.17 2 0
+github.com/owncord/server/ws/serve.go:108.17,110.4 1 0
+github.com/owncord/server/ws/serve.go:111.3,111.28 1 0
+github.com/owncord/server/ws/serve.go:118.88,123.16 4 0
+github.com/owncord/server/ws/serve.go:123.16,125.3 1 0
+github.com/owncord/server/ws/serve.go:127.2,128.50 2 0
+github.com/owncord/server/ws/serve.go:128.50,131.3 2 0
+github.com/owncord/server/ws/serve.go:132.2,132.24 1 0
+github.com/owncord/server/ws/serve.go:132.24,135.3 2 0
+github.com/owncord/server/ws/serve.go:137.2,140.73 2 0
+github.com/owncord/server/ws/serve.go:140.73,143.3 2 0
+github.com/owncord/server/ws/serve.go:145.2,147.31 3 0
+github.com/owncord/server/ws/serve.go:147.31,150.3 2 0
+github.com/owncord/server/ws/serve.go:152.2,152.43 1 0
+github.com/owncord/server/ws/serve.go:152.43,155.3 2 0
+github.com/owncord/server/ws/serve.go:157.2,158.31 2 0
+github.com/owncord/server/ws/serve.go:158.31,161.3 2 0
+github.com/owncord/server/ws/serve.go:163.2,163.36 1 0
+github.com/owncord/server/ws/serve.go:163.36,166.3 2 0
+github.com/owncord/server/ws/serve.go:168.2,168.24 1 0
+github.com/owncord/server/ws/serve.go:172.57,179.24 6 0
+github.com/owncord/server/ws/serve.go:179.24,181.3 1 0
+github.com/owncord/server/ws/serve.go:183.2,195.4 1 0
+github.com/owncord/server/ws/serve.go:199.50,201.16 2 0
+github.com/owncord/server/ws/serve.go:201.16,203.3 1 0
+github.com/owncord/server/ws/serve.go:204.2,205.16 2 0
+github.com/owncord/server/ws/serve.go:205.16,207.3 1 0
+github.com/owncord/server/ws/serve.go:209.2,210.16 2 0
+github.com/owncord/server/ws/serve.go:210.16,213.3 2 0
+github.com/owncord/server/ws/serve.go:216.2,217.16 2 0
+github.com/owncord/server/ws/serve.go:217.16,221.3 2 0
+github.com/owncord/server/ws/serve.go:223.2,231.9 1 0
+github.com/owncord/server/ws/serve.go:235.93,237.30 2 0
+github.com/owncord/server/ws/serve.go:237.30,238.25 1 0
+github.com/owncord/server/ws/serve.go:238.25,239.12 1 0
+github.com/owncord/server/ws/serve.go:241.3,242.17 2 0
+github.com/owncord/server/ws/serve.go:242.17,244.4 1 0
+github.com/owncord/server/ws/serve.go:245.3,245.31 1 0
+github.com/owncord/server/ws/serve.go:247.2,247.16 1 0
+github.com/owncord/server/ws/serve.go:247.16,249.3 1 0
+github.com/owncord/server/ws/serve.go:250.2,250.17 1 0
+github.com/owncord/server/ws/sfu.go:22.52,24.51 2 1
+github.com/owncord/server/ws/sfu.go:24.51,26.3 1 0
+github.com/owncord/server/ws/sfu.go:29.2,33.4 2 1
+github.com/owncord/server/ws/sfu.go:33.4,38.17 1 1
+github.com/owncord/server/ws/sfu.go:38.17,40.4 1 0
+github.com/owncord/server/ws/sfu.go:43.2,44.69 2 1
+github.com/owncord/server/ws/sfu.go:44.69,46.3 1 0
+github.com/owncord/server/ws/sfu.go:48.2,51.26 3 1
+github.com/owncord/server/ws/sfu.go:51.26,56.18 1 1
+github.com/owncord/server/ws/sfu.go:56.18,58.4 1 0
+github.com/owncord/server/ws/sfu.go:61.2,67.41 2 1
+github.com/owncord/server/ws/sfu.go:72.67,76.27 2 1
+github.com/owncord/server/ws/sfu.go:76.27,80.3 1 0
+github.com/owncord/server/ws/sfu.go:83.2,83.51 1 1
+github.com/owncord/server/ws/sfu.go:83.51,89.3 1 0
+github.com/owncord/server/ws/sfu.go:91.2,91.42 1 1
+github.com/owncord/server/ws/sfu.go:96.24,98.2 0 1
+github.com/owncord/server/ws/sfu.go:102.36,103.26 1 1
+github.com/owncord/server/ws/sfu.go:104.13,105.15 1 1
+github.com/owncord/server/ws/sfu.go:106.14,107.16 1 1
+github.com/owncord/server/ws/sfu.go:108.10,109.15 1 1
+github.com/owncord/server/ws/sfu.go:114.25,115.12 1 1
+github.com/owncord/server/ws/sfu.go:115.12,117.3 1 0
+github.com/owncord/server/ws/sfu.go:118.2,121.9 4 1
+github.com/owncord/server/ws/sfu.go:121.9,123.3 1 0
+github.com/owncord/server/ws/sfu.go:124.2,124.12 1 1
+github.com/owncord/server/ws/sfu.go:124.12,128.3 3 1
+github.com/owncord/server/ws/sfu.go:129.2,129.9 1 1
+github.com/owncord/server/ws/sfu.go:129.9,132.3 2 0
+github.com/owncord/server/ws/sfu.go:133.2,133.24 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:12.57,19.6 4 1
+github.com/owncord/server/ws/speaker_broadcast.go:19.6,20.10 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:21.15,22.10 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:23.19,26.39 3 1
+github.com/owncord/server/ws/speaker_broadcast.go:26.39,28.5 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:29.4,31.39 2 1
+github.com/owncord/server/ws/speaker_broadcast.go:31.39,37.63 4 1
+github.com/owncord/server/ws/speaker_broadcast.go:37.63,38.14 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:40.5,44.41 4 1
+github.com/owncord/server/ws/speaker_broadcast.go:48.4,48.33 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:48.33,49.40 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:49.40,51.6 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:59.42,60.24 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:60.24,62.3 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:64.2,65.30 2 1
+github.com/owncord/server/ws/speaker_broadcast.go:65.30,66.12 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:66.12,68.4 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:69.3,69.42 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:71.2,71.18 1 1
+github.com/owncord/server/ws/speaker_broadcast.go:76.49,78.2 1 1
+github.com/owncord/server/ws/speaker_detector.go:30.52,32.2 1 1
+github.com/owncord/server/ws/speaker_detector.go:35.86,41.2 1 1
+github.com/owncord/server/ws/speaker_detector.go:46.66,51.9 4 1
+github.com/owncord/server/ws/speaker_detector.go:51.9,54.3 2 1
+github.com/owncord/server/ws/speaker_detector.go:56.2,58.31 3 1
+github.com/owncord/server/ws/speaker_detector.go:58.31,60.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:63.2,64.32 2 1
+github.com/owncord/server/ws/speaker_detector.go:64.32,66.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:67.2,70.22 2 1
+github.com/owncord/server/ws/speaker_detector.go:70.22,72.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:78.49,86.32 5 1
+github.com/owncord/server/ws/speaker_detector.go:86.32,87.23 1 1
+github.com/owncord/server/ws/speaker_detector.go:87.23,89.4 1 1
+github.com/owncord/server/ws/speaker_detector.go:89.9,89.76 1 1
+github.com/owncord/server/ws/speaker_detector.go:89.76,91.4 1 1
+github.com/owncord/server/ws/speaker_detector.go:95.2,95.45 1 1
+github.com/owncord/server/ws/speaker_detector.go:95.45,97.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:99.2,100.25 2 1
+github.com/owncord/server/ws/speaker_detector.go:100.25,102.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:104.2,105.25 2 1
+github.com/owncord/server/ws/speaker_detector.go:105.25,107.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:108.2,108.15 1 1
+github.com/owncord/server/ws/speaker_detector.go:112.55,117.2 3 1
+github.com/owncord/server/ws/speaker_detector.go:124.88,125.19 1 1
+github.com/owncord/server/ws/speaker_detector.go:125.19,127.3 1 1
+github.com/owncord/server/ws/speaker_detector.go:132.2,133.19 2 1
+github.com/owncord/server/ws/speaker_detector.go:133.19,137.14 3 1
+github.com/owncord/server/ws/speaker_detector.go:137.14,140.12 2 0
+github.com/owncord/server/ws/speaker_detector.go:142.3,142.15 1 1
+github.com/owncord/server/ws/speaker_detector.go:142.15,144.9 1 0
+github.com/owncord/server/ws/speaker_detector.go:147.3,149.27 2 1
+github.com/owncord/server/ws/speaker_detector.go:149.27,150.9 1 0
+github.com/owncord/server/ws/speaker_detector.go:153.3,153.40 1 1
+github.com/owncord/server/ws/speaker_detector.go:153.40,158.4 4 1
+github.com/owncord/server/ws/speaker_detector.go:160.3,160.15 1 1
+github.com/owncord/server/ws/speaker_detector.go:163.2,163.24 1 1
+github.com/owncord/server/ws/voice_handlers.go:30.59,31.17 1 1
+github.com/owncord/server/ws/voice_handlers.go:31.17,33.3 1 1
+github.com/owncord/server/ws/voice_handlers.go:35.2,35.72 1 0
+github.com/owncord/server/ws/voice_handlers.go:35.72,38.16 2 0
+github.com/owncord/server/ws/voice_handlers.go:39.40,41.25 2 0
+github.com/owncord/server/ws/voice_handlers.go:42.46,45.93 1 0
+github.com/owncord/server/ws/voice_handlers.go:51.66,53.2 1 1
+github.com/owncord/server/ws/voice_handlers.go:66.67,68.34 2 1
+github.com/owncord/server/ws/voice_handlers.go:68.34,71.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:73.2,73.63 1 1
+github.com/owncord/server/ws/voice_handlers.go:73.63,76.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:79.2,79.49 1 1
+github.com/owncord/server/ws/voice_handlers.go:79.49,81.3 1 1
+github.com/owncord/server/ws/voice_handlers.go:83.2,84.29 2 1
+github.com/owncord/server/ws/voice_handlers.go:84.29,87.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:89.2,92.60 3 1
+github.com/owncord/server/ws/voice_handlers.go:92.60,93.37 1 1
+github.com/owncord/server/ws/voice_handlers.go:93.37,95.4 1 1
+github.com/owncord/server/ws/voice_handlers.go:95.9,97.4 1 0
+github.com/owncord/server/ws/voice_handlers.go:98.3,98.9 1 1
+github.com/owncord/server/ws/voice_handlers.go:101.2,101.67 1 1
+github.com/owncord/server/ws/voice_handlers.go:101.67,106.3 4 0
+github.com/owncord/server/ws/voice_handlers.go:109.2,112.18 2 1
+github.com/owncord/server/ws/voice_handlers.go:112.18,114.19 2 0
+github.com/owncord/server/ws/voice_handlers.go:114.19,116.4 1 0
+github.com/owncord/server/ws/voice_handlers.go:116.9,120.4 3 0
+github.com/owncord/server/ws/voice_handlers.go:123.2,124.32 2 1
+github.com/owncord/server/ws/voice_handlers.go:124.32,127.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:130.2,134.16 3 1
+github.com/owncord/server/ws/voice_handlers.go:134.16,137.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:138.2,138.30 1 1
+github.com/owncord/server/ws/voice_handlers.go:138.30,139.28 1 1
+github.com/owncord/server/ws/voice_handlers.go:139.28,140.12 1 1
+github.com/owncord/server/ws/voice_handlers.go:142.3,142.33 1 1
+github.com/owncord/server/ws/voice_handlers.go:146.2,148.18 3 1
+github.com/owncord/server/ws/voice_handlers.go:148.18,150.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:151.2,153.133 2 1
+github.com/owncord/server/ws/voice_handlers.go:157.68,166.54 2 1
+github.com/owncord/server/ws/voice_handlers.go:166.54,168.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:169.2,169.31 1 1
+github.com/owncord/server/ws/voice_handlers.go:169.31,171.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:172.2,172.12 1 1
+github.com/owncord/server/ws/voice_handlers.go:181.43,183.16 2 1
+github.com/owncord/server/ws/voice_handlers.go:183.16,185.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:188.2,188.17 1 1
+github.com/owncord/server/ws/voice_handlers.go:188.17,189.48 1 0
+github.com/owncord/server/ws/voice_handlers.go:189.48,191.4 1 0
+github.com/owncord/server/ws/voice_handlers.go:192.3,192.13 1 0
+github.com/owncord/server/ws/voice_handlers.go:196.2,196.21 1 1
+github.com/owncord/server/ws/voice_handlers.go:196.21,197.55 1 1
+github.com/owncord/server/ws/voice_handlers.go:197.55,199.22 2 1
+github.com/owncord/server/ws/voice_handlers.go:199.22,201.5 1 1
+github.com/owncord/server/ws/voice_handlers.go:203.3,203.18 1 1
+github.com/owncord/server/ws/voice_handlers.go:206.2,206.67 1 1
+github.com/owncord/server/ws/voice_handlers.go:206.67,208.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:210.2,210.18 1 1
+github.com/owncord/server/ws/voice_handlers.go:210.18,212.3 1 1
+github.com/owncord/server/ws/voice_handlers.go:219.67,223.52 2 1
+github.com/owncord/server/ws/voice_handlers.go:223.52,226.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:228.2,228.64 1 1
+github.com/owncord/server/ws/voice_handlers.go:228.64,232.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:234.2,234.32 1 1
+github.com/owncord/server/ws/voice_handlers.go:241.69,245.52 2 1
+github.com/owncord/server/ws/voice_handlers.go:245.52,248.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:250.2,250.69 1 1
+github.com/owncord/server/ws/voice_handlers.go:250.69,254.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:256.2,256.32 1 1
+github.com/owncord/server/ws/voice_handlers.go:265.69,267.71 2 1
+github.com/owncord/server/ws/voice_handlers.go:267.71,270.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:272.2,272.51 1 1
+github.com/owncord/server/ws/voice_handlers.go:272.51,275.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:277.2,280.52 2 1
+github.com/owncord/server/ws/voice_handlers.go:280.52,283.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:285.2,285.68 1 1
+github.com/owncord/server/ws/voice_handlers.go:285.68,289.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:291.2,291.32 1 1
+github.com/owncord/server/ws/voice_handlers.go:300.74,302.81 2 1
+github.com/owncord/server/ws/voice_handlers.go:302.81,305.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:307.2,307.54 1 1
+github.com/owncord/server/ws/voice_handlers.go:307.54,310.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:312.2,315.52 2 1
+github.com/owncord/server/ws/voice_handlers.go:315.52,318.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:320.2,320.73 1 1
+github.com/owncord/server/ws/voice_handlers.go:320.73,324.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:326.2,326.32 1 1
+github.com/owncord/server/ws/voice_handlers.go:332.68,334.71 2 1
+github.com/owncord/server/ws/voice_handlers.go:334.71,337.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:339.2,339.17 1 1
+github.com/owncord/server/ws/voice_handlers.go:339.17,342.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:344.2,348.52 2 0
+github.com/owncord/server/ws/voice_handlers.go:348.52,351.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:352.2,352.17 1 0
+github.com/owncord/server/ws/voice_handlers.go:352.17,355.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:357.2,362.57 2 0
+github.com/owncord/server/ws/voice_handlers.go:362.57,366.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:368.2,369.16 2 0
+github.com/owncord/server/ws/voice_handlers.go:369.16,373.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:375.2,375.57 1 0
+github.com/owncord/server/ws/voice_handlers.go:375.57,379.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:382.2,382.54 1 0
+github.com/owncord/server/ws/voice_handlers.go:388.69,390.71 2 1
+github.com/owncord/server/ws/voice_handlers.go:390.71,393.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:395.2,395.17 1 1
+github.com/owncord/server/ws/voice_handlers.go:395.17,398.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:400.2,404.52 2 0
+github.com/owncord/server/ws/voice_handlers.go:404.52,407.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:408.2,408.17 1 0
+github.com/owncord/server/ws/voice_handlers.go:408.17,411.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:413.2,418.58 2 0
+github.com/owncord/server/ws/voice_handlers.go:418.58,422.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:426.66,428.71 2 1
+github.com/owncord/server/ws/voice_handlers.go:428.71,431.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:433.2,433.17 1 1
+github.com/owncord/server/ws/voice_handlers.go:433.17,436.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:438.2,442.52 2 0
+github.com/owncord/server/ws/voice_handlers.go:442.52,445.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:447.2,447.58 1 0
+github.com/owncord/server/ws/voice_handlers.go:447.58,451.3 3 0
+github.com/owncord/server/ws/voice_handlers.go:458.68,460.69 2 1
+github.com/owncord/server/ws/voice_handlers.go:460.69,463.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:465.2,465.56 1 1
+github.com/owncord/server/ws/voice_handlers.go:465.56,468.3 2 1
+github.com/owncord/server/ws/voice_handlers.go:470.2,473.71 2 1
+github.com/owncord/server/ws/voice_handlers.go:473.71,476.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:478.2,478.60 1 1
+github.com/owncord/server/ws/voice_handlers.go:487.56,488.17 1 0
+github.com/owncord/server/ws/voice_handlers.go:488.17,490.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:495.2,497.77 2 0
+github.com/owncord/server/ws/voice_handlers.go:497.77,499.47 1 0
+github.com/owncord/server/ws/voice_handlers.go:499.47,501.4 1 0
+github.com/owncord/server/ws/voice_handlers.go:503.3,510.13 2 0
+github.com/owncord/server/ws/voice_handlers.go:510.13,512.8 2 0
+github.com/owncord/server/ws/voice_handlers.go:512.8,514.23 2 0
+github.com/owncord/server/ws/voice_handlers.go:514.23,516.6 1 0
+github.com/owncord/server/ws/voice_handlers.go:519.5,520.15 2 0
+github.com/owncord/server/ws/voice_handlers.go:520.15,521.14 1 0
+github.com/owncord/server/ws/voice_handlers.go:524.5,525.20 2 0
+github.com/owncord/server/ws/voice_handlers.go:525.20,527.6 1 0
+github.com/owncord/server/ws/voice_handlers.go:529.5,529.45 1 0
+github.com/owncord/server/ws/voice_handlers.go:537.52,539.16 2 1
+github.com/owncord/server/ws/voice_handlers.go:539.16,542.3 2 0
+github.com/owncord/server/ws/voice_handlers.go:543.2,543.18 1 1
+github.com/owncord/server/ws/voice_handlers.go:543.18,545.3 1 0
+github.com/owncord/server/ws/voice_handlers.go:546.2,546.64 1 1
+github.com/owncord/server/ws/voice_room.go:39.51,41.15 2 1
+github.com/owncord/server/ws/voice_room.go:41.15,43.3 1 1
+github.com/owncord/server/ws/voice_room.go:44.2,49.3 1 1
+github.com/owncord/server/ws/voice_room.go:55.56,60.49 3 1
+github.com/owncord/server/ws/voice_room.go:60.49,62.3 1 1
+github.com/owncord/server/ws/voice_room.go:64.2,64.71 1 1
+github.com/owncord/server/ws/voice_room.go:64.71,66.3 1 1
+github.com/owncord/server/ws/voice_room.go:68.2,74.12 3 1
+github.com/owncord/server/ws/voice_room.go:79.53,83.50 3 1
+github.com/owncord/server/ws/voice_room.go:83.50,85.3 1 1
+github.com/owncord/server/ws/voice_room.go:87.2,89.16 3 1
+github.com/owncord/server/ws/voice_room.go:93.44,97.2 3 1
+github.com/owncord/server/ws/voice_room.go:100.36,102.2 1 1
+github.com/owncord/server/ws/voice_room.go:105.35,109.2 3 1
+github.com/owncord/server/ws/voice_room.go:112.46,117.33 4 1
+github.com/owncord/server/ws/voice_room.go:117.33,119.3 1 1
+github.com/owncord/server/ws/voice_room.go:120.2,120.12 1 1
+github.com/owncord/server/ws/voice_room.go:124.55,129.2 4 1
+github.com/owncord/server/ws/voice_room.go:132.29,137.2 4 1
+github.com/owncord/server/ws/voice_room.go:141.67,143.2 1 1
+github.com/owncord/server/ws/voice_room.go:146.43,148.2 1 1
+github.com/owncord/server/ws/voice_room.go:151.46,155.2 3 1
+github.com/owncord/server/ws/voice_room.go:159.34,163.20 3 1
+github.com/owncord/server/ws/voice_room.go:163.20,165.3 1 1
+github.com/owncord/server/ws/voice_room.go:167.2,167.16 1 1
+github.com/owncord/server/ws/voice_room.go:168.20,169.25 1 1
+github.com/owncord/server/ws/voice_room.go:169.25,171.4 1 1
+github.com/owncord/server/ws/voice_room.go:172.19,173.27 1 1
+github.com/owncord/server/ws/voice_room.go:173.27,175.4 1 1