diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx
index fa90207..fb4d7b5 100644
--- a/frontend/src/pages/Chat.tsx
+++ b/frontend/src/pages/Chat.tsx
@@ -10,7 +10,7 @@ import { notificationsApi } from '../services/notifications';
 import ChatRoomList from '../components/chat/ChatRoomList';
 import ChatMessageView from '../components/chat/ChatMessageView';
 
-const ChatPage: React.FC = () => {
+const ChatContent: React.FC = () => {
   const { rooms, selectedRoomToken, connected } = useChat();
   const queryClient = useQueryClient();
   const markedRoomsRef = React.useRef(new Set<string>());
@@ -44,53 +44,59 @@ const ChatPage: React.FC = () => {
   }, [selectedRoomToken, queryClient]);
 
   return (
-    <DashboardLayout>
-      <Box
-        sx={{
-          height: 'calc(100vh - 112px)',
-          display: 'flex',
-          border: 1,
-          borderColor: 'divider',
-          borderRadius: 1,
-          overflow: 'hidden',
-        }}
-      >
-        {!connected ? (
-          <Box sx={{ p: 3, display: 'flex', alignItems: 'center' }}>
-            <Typography variant="body1" color="text.secondary">
-              Nextcloud nicht verbunden. Bitte verbinden Sie sich in den{' '}
-              <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
-            </Typography>
+    <Box
+      sx={{
+        height: 'calc(100vh - 112px)',
+        display: 'flex',
+        border: 1,
+        borderColor: 'divider',
+        borderRadius: 1,
+        overflow: 'hidden',
+      }}
+    >
+      {!connected ? (
+        <Box sx={{ p: 3, display: 'flex', alignItems: 'center' }}>
+          <Typography variant="body1" color="text.secondary">
+            Nextcloud nicht verbunden. Bitte verbinden Sie sich in den{' '}
+            <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
+          </Typography>
+        </Box>
+      ) : (
+        <>
+          <Box
+            sx={{
+              width: 280,
+              flexShrink: 0,
+              borderRight: 1,
+              borderColor: 'divider',
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+            }}
+          >
+            <ChatRoomList />
           </Box>
-        ) : (
-          <>
-            <Box
-              sx={{
-                width: 280,
-                flexShrink: 0,
-                borderRight: 1,
-                borderColor: 'divider',
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'hidden',
-              }}
-            >
-              <ChatRoomList />
-            </Box>
-            <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-              {selectedRoomToken ? (
-                <ChatMessageView />
-              ) : (
-                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-                  <Typography variant="body1" color="text.secondary">
-                    Wähle ein Gespräch aus, um zu beginnen.
-                  </Typography>
-                </Box>
-              )}
-            </Box>
-          </>
-        )}
-      </Box>
+          <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+            {selectedRoomToken ? (
+              <ChatMessageView />
+            ) : (
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+                <Typography variant="body1" color="text.secondary">
+                  Wähle ein Gespräch aus, um zu beginnen.
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+const ChatPage: React.FC = () => {
+  return (
+    <DashboardLayout>
+      <ChatContent />
     </DashboardLayout>
   );
 };