diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
index 5dd0d25..5e16f7e 100644
--- a/web/src/components/Layout.tsx
+++ b/web/src/components/Layout.tsx
@@ -34,12 +34,10 @@ export function Layout() {
   const updateProfile = useAuthStore((state) => state.updateProfile);
   const wsConnect = useWebSocketStore((s) => s.connect);
   const wsDisconnect = useWebSocketStore((s) => s.disconnect);
-  const setActiveServer = useServerStore((s) => s.setActiveServer);
   const navigate = useNavigate();
   const location = useLocation();
   const [showStatusMenu, setShowStatusMenu] = useState(false);
   const isDM = useLayoutStore((s) => s.isDM);
-  const setDM = useLayoutStore((s) => s.setDM);
   const [showServerSettings, setShowServerSettings] = useState(false);
   const activeServerId = useServerStore((s) => s.activeServerId);
   useEffect(() => {
@@ -118,34 +116,6 @@ export function Layout() {
           </div>
         </div>
         <div className="flex-1 flex min-h-0">
-          <div className="flex flex-col items-center w-16 bg-gb-bg-h border-r border-gb-bg-t py-2 gap-2 shrink-0">
-            <button
-              onClick={() => { setDM(false); navigate('/'); }}
-              className={`w-11 h-11 flex items-center justify-center font-mono text-xs border rounded ${
-                !isDM
-                  ? 'bg-gb-bg-t text-gb-orange border-gb-orange'
-                  : 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t'
-              }`}
-              title="Servers"
-            >
-              [S]
-            </button>
-            <button
-              onClick={() => {
-                setDM(true);
-                setActiveServer(null);
-                navigate('/dm');
-              }}
-              className={`w-11 h-11 flex items-center justify-center font-mono text-xs border rounded ${
-                isDM
-                  ? 'bg-gb-bg-t text-gb-orange border-gb-orange'
-                  : 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t'
-              }`}
-              title="Direct Messages"
-            >
-              [@]
-            </button>
-          </div>
           <ServerBar />
           {isDM ? <ConversationList /> : <ChannelList />}
           <div className="flex-1 min-w-0 flex flex-col">
diff --git a/web/src/components/ServerBar.tsx b/web/src/components/ServerBar.tsx
index 96e25d6..121718e 100644
--- a/web/src/components/ServerBar.tsx
+++ b/web/src/components/ServerBar.tsx
@@ -1,13 +1,14 @@
-import { useEffect, useState } from 'react';
-import { useServerStore } from '../stores/server.ts';
-import { useChannelStore } from '../stores/channel.ts';
-import { useLayoutStore } from '../stores/layout.ts';
-import { CreateServerModal } from './CreateServerModal.tsx';
-import { JoinServerModal } from './JoinServerModal.tsx';
-import { ServerSettingsModal } from './ServerSettingsModal.tsx';
-import { InviteModal } from './InviteModal.tsx';
-import { useContextMenu } from './ContextMenu.tsx';
-import { api } from '../lib/api.ts';
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useServerStore } from "../stores/server.ts";
+import { useChannelStore } from "../stores/channel.ts";
+import { useLayoutStore } from "../stores/layout.ts";
+import { CreateServerModal } from "./CreateServerModal.tsx";
+import { JoinServerModal } from "./JoinServerModal.tsx";
+import { ServerSettingsModal } from "./ServerSettingsModal.tsx";
+import { InviteModal } from "./InviteModal.tsx";
+import { useContextMenu } from "./ContextMenu.tsx";
+import { api } from "../lib/api.ts";
 
 function getInitials(name: string): string {
   const words = name.trim().split(/\s+/);
@@ -24,6 +25,7 @@ export function ServerBar() {
   const setActiveServer = useServerStore((state) => state.setActiveServer);
   const setActiveChannel = useChannelStore((state) => state.setActiveChannel);
   const { isDM, setDM } = useLayoutStore();
+  const navigate = useNavigate();
   const [showCreate, setShowCreate] = useState(false);
   const [showJoin, setShowJoin] = useState(false);
   const [settingsServerId, setSettingsServerId] = useState<string | null>(null);
@@ -39,12 +41,14 @@ export function ServerBar() {
     setActiveServer(id);
     setActiveChannel(null);
     setDM(false);
+    navigate('/');
   };
 
   const handleDM = () => {
     setActiveServer(null);
     setActiveChannel(null);
     setDM(true);
+    navigate('/dm');
   };
 
   const handleServerContextMenu = (e: React.MouseEvent, server: { id: string; name: string }) => {