resolve issues with new features

backend/src/services/bookstack.service.ts

@@ -91,7 +91,7 @@ async function getRecentPages(): Promise<BookStackPage[]> {
     const response = await axios.get(
       `${bookstack.url}/api/pages`,
       {
-        params: { sort: '-updated_at', count: 5 },
+        params: { sort: '-updated_at', count: 20 },
         headers: buildHeaders(),
       },
     );

frontend/src/components/admin/ServiceManagerTab.tsx

@@ -17,29 +17,38 @@ import {
   IconButton,
   Typography,
   CircularProgress,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { adminApi } from '../../services/admin';
+import { useNotification } from '../../contexts/NotificationContext';
 import type { PingResult } from '../../types/admin.types';
 
 function ServiceManagerTab() {
   const queryClient = useQueryClient();
+  const { showError } = useNotification();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newName, setNewName] = useState('');
   const [newUrl, setNewUrl] = useState('');
+  const [refreshInterval, setRefreshInterval] = useState(15000);
 
   const { data: services, isLoading: servicesLoading } = useQuery({
     queryKey: ['admin', 'services'],
     queryFn: adminApi.getServices,
-    refetchInterval: 15000,
+    refetchInterval: refreshInterval || false,
+    placeholderData: (previousData: any) => previousData,
   });
 
   const { data: pingResults, isLoading: pingLoading } = useQuery({
     queryKey: ['admin', 'services', 'ping'],
     queryFn: adminApi.pingAll,
-    refetchInterval: 15000,
+    refetchInterval: refreshInterval || false,
+    placeholderData: (previousData: any) => previousData,
   });
 
   const createMutation = useMutation({
@@ -50,6 +59,10 @@ function ServiceManagerTab() {
       setNewName('');
       setNewUrl('');
     },
+    onError: (error: any) => {
+      const message = error?.response?.data?.message || 'Service konnte nicht erstellt werden';
+      showError(message);
+    },
   });
 
   const deleteMutation = useMutation({
@@ -57,6 +70,9 @@ function ServiceManagerTab() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin', 'services'] });
     },
+    onError: () => {
+      showError('Service konnte nicht gelöscht werden');
+    },
   });
 
   const getPingForUrl = (url: string): PingResult | undefined => {
@@ -102,9 +118,25 @@ function ServiceManagerTab() {
     <Box>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
         <Typography variant="h6">Service Monitor</Typography>
-        <Button startIcon={<AddIcon />} variant="contained" onClick={() => setDialogOpen(true)}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          Service hinzufuegen
+          <FormControl size="small" sx={{ minWidth: 160 }}>
-        </Button>
+            <InputLabel>Aktualisierung</InputLabel>
+            <Select
+              value={refreshInterval}
+              label="Aktualisierung"
+              onChange={(e) => setRefreshInterval(Number(e.target.value))}
+            >
+              <MenuItem value={5000}>5 Sekunden</MenuItem>
+              <MenuItem value={15000}>15 Sekunden</MenuItem>
+              <MenuItem value={30000}>30 Sekunden</MenuItem>
+              <MenuItem value={60000}>60 Sekunden</MenuItem>
+              <MenuItem value={0}>Aus</MenuItem>
+            </Select>
+          </FormControl>
+          <Button startIcon={<AddIcon />} variant="contained" onClick={() => setDialogOpen(true)}>
+            Service hinzufuegen
+          </Button>
+        </Box>
       </Box>
 
       <TableContainer component={Paper}>
@@ -185,6 +217,7 @@ function ServiceManagerTab() {
             fullWidth
             value={newUrl}
             onChange={(e) => setNewUrl(e.target.value)}
+            helperText="Vollständige URL mit http:// oder https://"
           />
         </DialogContent>
         <DialogActions>

frontend/src/components/admin/SystemHealthTab.tsx

@@ -19,16 +19,27 @@ function formatBytes(bytes: number): string {
 }
 
 function SystemHealthTab() {
-  const { data: health, isLoading } = useQuery({
+  const { data: health, isLoading, isError } = useQuery({
     queryKey: ['admin', 'system', 'health'],
     queryFn: adminApi.getSystemHealth,
     refetchInterval: 30000,
   });
 
-  if (isLoading || !health) {
+  if (isLoading) {
     return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
   }
 
+  if (isError || !health) {
+    return (
+      <Box sx={{ p: 4, textAlign: 'center' }}>
+        <Typography color="error" gutterBottom>Systemdaten konnten nicht geladen werden.</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Bitte versuchen Sie es später erneut.
+        </Typography>
+      </Box>
+    );
+  }
+
   const heapPercent = (health.memoryUsage.heapUsed / health.memoryUsage.heapTotal) * 100;
 
   return (

frontend/src/components/admin/UserOverviewTab.tsx

@@ -40,7 +40,7 @@ function UserOverviewTab() {
   const [sortKey, setSortKey] = useState<SortKey>('name');
   const [sortDir, setSortDir] = useState<SortDir>('asc');
 
-  const { data: users, isLoading } = useQuery({
+  const { data: users, isLoading, isError } = useQuery({
     queryKey: ['admin', 'users'],
     queryFn: adminApi.getUsers,
   });
@@ -82,6 +82,17 @@ function UserOverviewTab() {
     return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
   }
 
+  if (isError) {
+    return (
+      <Box sx={{ p: 4, textAlign: 'center' }}>
+        <Typography color="error" gutterBottom>Benutzerdaten konnten nicht geladen werden.</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Bitte versuchen Sie es später erneut.
+        </Typography>
+      </Box>
+    );
+  }
+
   return (
     <Box>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>

frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx

@@ -12,6 +12,7 @@ import {
 import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { atemschutzApi } from '../../services/atemschutz';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { AtemschutzStats } from '../../types/atemschutz.types';
 
 interface AtemschutzDashboardCardProps {
@@ -26,6 +27,9 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
     queryFn: () => atemschutzApi.getStats(),
   });
 
+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
   if (isLoading) {
     return (
       <Card>
@@ -72,7 +76,7 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
 
         {/* Main metric */}
         <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
         </Typography>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
           einsatzbereit

frontend/src/components/chat/ChatPanel.tsx

@@ -4,33 +4,81 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import ChatIcon from '@mui/icons-material/Chat';
 import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import Badge from '@mui/material/Badge';
+import Tooltip from '@mui/material/Tooltip';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import { useLayout } from '../../contexts/LayoutContext';
 import { ChatProvider, useChat } from '../../contexts/ChatContext';
 import ChatRoomList from './ChatRoomList';
 import ChatMessageView from './ChatMessageView';
 
+const TRANSITION = 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)';
+const COLLAPSED_WIDTH = 64;
+const EXPANDED_WIDTH = 360;
+
 const ChatPanelInner: React.FC = () => {
   const { chatPanelOpen, setChatPanelOpen } = useLayout();
-  const { selectedRoomToken, connected } = useChat();
+  const { rooms, selectedRoomToken, selectRoom, connected } = useChat();
 
   if (!chatPanelOpen) {
     return (
       <Paper
         elevation={2}
         sx={{
-          width: 60,
+          width: COLLAPSED_WIDTH,
           height: '100%',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           pt: 1,
           flexShrink: 0,
-          transition: 'width 0.2s ease',
+          transition: TRANSITION,
+          overflowX: 'hidden',
+          overflowY: 'auto',
         }}
       >
-        <IconButton onClick={() => setChatPanelOpen(true)}>
+        <IconButton onClick={() => setChatPanelOpen(true)} aria-label="Chat öffnen">
           <ChatIcon />
         </IconButton>
+        {connected && (
+          <List disablePadding>
+            {rooms.map((room) => (
+              <ListItem key={room.token} disablePadding sx={{ justifyContent: 'center', py: 0.5 }}>
+                <Tooltip title={room.displayName} placement="left" arrow>
+                  <IconButton
+                    onClick={() => {
+                      setChatPanelOpen(true);
+                      selectRoom(room.token);
+                    }}
+                    sx={{ p: 0.5 }}
+                  >
+                    <Badge
+                      variant="dot"
+                      color="primary"
+                      invisible={room.unreadMessages === 0}
+                    >
+                      <Avatar
+                        sx={{
+                          width: 32,
+                          height: 32,
+                          fontSize: '0.75rem',
+                          bgcolor:
+                            room.token === selectedRoomToken
+                              ? 'primary.main'
+                              : 'action.hover',
+                        }}
+                      >
+                        {room.displayName.substring(0, 2).toUpperCase()}
+                      </Avatar>
+                    </Badge>
+                  </IconButton>
+                </Tooltip>
+              </ListItem>
+            ))}
+          </List>
+        )}
       </Paper>
     );
   }
@@ -39,12 +87,12 @@ const ChatPanelInner: React.FC = () => {
     <Paper
       elevation={2}
       sx={{
-        width: 360,
+        width: EXPANDED_WIDTH,
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
         flexShrink: 0,
-        transition: 'width 0.2s ease',
+        transition: TRANSITION,
         overflow: 'hidden',
       }}
     >
@@ -62,7 +110,7 @@ const ChatPanelInner: React.FC = () => {
         <Typography variant="subtitle1" fontWeight={600}>
           Chat
         </Typography>
-        <IconButton size="small" onClick={() => setChatPanelOpen(false)}>
+        <IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
           <ChatIcon fontSize="small" />
         </IconButton>
       </Box>

frontend/src/components/chat/ChatRoomList.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
-import Typography from '@mui/material/Typography';
 import { useChat } from '../../contexts/ChatContext';
 
 const ChatRoomList: React.FC = () => {
@@ -12,34 +15,65 @@ const ChatRoomList: React.FC = () => {
   return (
     <Box sx={{ overflow: 'auto', flex: 1 }}>
       <List disablePadding>
-        {rooms.map((room) => (
+        {rooms.map((room) => {
-          <ListItemButton
+          const isSelected = room.token === selectedRoomToken;
-            key={room.token}
+          return (
-            selected={room.token === selectedRoomToken}
+            <ListItem key={room.token} disablePadding>
-            onClick={() => selectRoom(room.token)}
+              <ListItemButton
-            sx={{ py: 1, px: 1.5 }}
+                selected={isSelected}
-          >
+                onClick={() => selectRoom(room.token)}
-            <Box sx={{ flex: 1, minWidth: 0 }}>
+                sx={{
-              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  py: 1,
-                <Typography variant="subtitle2" noWrap sx={{ flex: 1 }}>
+                  px: 1.5,
-                  {room.displayName}
+                  '&.Mui-selected': {
-                </Typography>
+                    backgroundColor: 'primary.light',
-                {room.unreadMessages > 0 && (
+                    color: 'primary.contrastText',
+                    '&:hover': {
+                      backgroundColor: 'primary.main',
+                    },
+                    '& .MuiListItemIcon-root': {
+                      color: 'primary.contrastText',
+                    },
+                    '& .MuiListItemText-secondary': {
+                      color: 'primary.contrastText',
+                      opacity: 0.7,
+                    },
+                  },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 40 }}>
                   <Badge
                     badgeContent={room.unreadMessages}
                     color="primary"
-                    sx={{ ml: 1 }}
+                    invisible={room.unreadMessages === 0}
-                  />
+                  >
-                )}
+                    <Avatar
-              </Box>
+                      sx={{
-              {room.lastMessage && (
+                        width: 32,
-                <Typography variant="caption" color="text.secondary" noWrap>
+                        height: 32,
-                  {room.lastMessage.author}: {room.lastMessage.text}
+                        fontSize: '0.75rem',
-                </Typography>
+                        bgcolor: isSelected ? 'primary.main' : 'action.hover',
-              )}
+                        color: isSelected ? 'primary.contrastText' : 'text.primary',
-            </Box>
+                      }}
-          </ListItemButton>
+                    >
-        ))}
+                      {room.displayName.substring(0, 2).toUpperCase()}
+                    </Avatar>
+                  </Badge>
+                </ListItemIcon>
+                <ListItemText
+                  primary={room.displayName}
+                  primaryTypographyProps={{ noWrap: true, variant: 'subtitle2' }}
+                  secondary={
+                    room.lastMessage
+                      ? `${room.lastMessage.author}: ${room.lastMessage.text}`
+                      : undefined
+                  }
+                  secondaryTypographyProps={{ noWrap: true, variant: 'caption' }}
+                />
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
       </List>
     </Box>
   );

frontend/src/components/equipment/EquipmentDashboardCard.tsx

@@ -12,6 +12,7 @@ import {
 import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { equipmentApi } from '../../services/equipment';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { EquipmentStats } from '../../types/equipment.types';
 
 interface EquipmentDashboardCardProps {
@@ -26,6 +27,9 @@ const EquipmentDashboardCard: React.FC<EquipmentDashboardCardProps> = ({
     queryFn: () => equipmentApi.getStats(),
   });
 
+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
   if (isLoading) {
     return (
       <Card>
@@ -72,7 +76,7 @@ const EquipmentDashboardCard: React.FC<EquipmentDashboardCardProps> = ({
 
         {/* Main metric */}
         <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
         </Typography>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
           einsatzbereit

frontend/src/components/shared/Header.tsx

@@ -4,6 +4,7 @@ import {
   Toolbar,
   Typography,
   IconButton,
+  Button,
   Menu,
   MenuItem,
   Avatar,
@@ -94,9 +95,9 @@ function Header({ onMenuClick }: HeaderProps) {
     : [];
 
   const linkLabels: Record<string, string> = {
-    nextcloud: 'Nextcloud',
+    nextcloud: 'Nextcloud Dateien',
-    bookstack: 'BookStack',
+    bookstack: 'Wissensdatenbank',
-    vikunja: 'Vikunja',
+    vikunja: 'Aufgabenverwaltung',
   };
 
   return (
@@ -126,18 +127,18 @@ function Header({ onMenuClick }: HeaderProps) {
           <>
             {linkEntries.length > 0 && (
               <>
-                <Tooltip title="Externe Tools">
+                <Button
-                  <IconButton
+                    variant="text"
                     color="inherit"
                     onClick={handleToolsOpen}
                     size="small"
-                    aria-label="Externe Tools"
+                    startIcon={<Launch />}
+                    aria-label="Externe Links"
                     aria-controls="tools-menu"
                     aria-haspopup="true"
                   >
-                    <Launch />
+                    Externe Links
-                  </IconButton>
+                  </Button>
-                </Tooltip>
 
                 <Menu
                   id="tools-menu"

frontend/src/components/shared/Sidebar.tsx

@@ -20,8 +20,7 @@ import {
   CalendarMonth,
   MenuBook,
   AdminPanelSettings,
-  ChevronLeft,
+  Menu as MenuIcon,
-  ChevronRight,
 } from '@mui/icons-material';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useLayout, DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED } from '../../contexts/LayoutContext';
@@ -104,6 +103,11 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
   const drawerContent = (
     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       <Toolbar />
+      <Box sx={{ display: 'flex', justifyContent: sidebarCollapsed ? 'center' : 'flex-end', px: 1, py: 0.5 }}>
+        <IconButton onClick={toggleSidebar} aria-label="Sidebar umschalten">
+          <MenuIcon />
+        </IconButton>
+      </Box>
       <List sx={{ flex: 1 }}>
         {navigationItems.map((item) => {
           const isActive = location.pathname === item.path;
@@ -154,11 +158,6 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
           );
         })}
       </List>
-      <Box sx={{ display: 'flex', justifyContent: 'center', mb: 1 }}>
-        <IconButton onClick={toggleSidebar} aria-label="Sidebar umschalten">
-          {sidebarCollapsed ? <ChevronRight /> : <ChevronLeft />}
-        </IconButton>
-      </Box>
     </Box>
   );
 

frontend/src/components/vehicles/VehicleDashboardCard.tsx

@@ -13,6 +13,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { vehiclesApi } from '../../services/vehicles';
 import { equipmentApi } from '../../services/equipment';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { VehicleStats, InspectionAlert } from '../../types/vehicle.types';
 import type { VehicleEquipmentWarning } from '../../types/equipment.types';
 
@@ -38,6 +39,9 @@ const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({
     queryFn: () => equipmentApi.getVehicleWarnings(),
   });
 
+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
   const loading = statsLoading || alertsLoading || warningsLoading;
 
   if (loading) {
@@ -89,7 +93,7 @@ const VehicleDashboardCard: React.FC<VehicleDashboardCardProps> = ({
 
         {/* Main metric */}
         <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
         </Typography>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
           einsatzbereit

frontend/src/contexts/ChatContext.tsx

@@ -25,8 +25,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   const { data } = useQuery({
     queryKey: ['nextcloud', 'rooms'],
     queryFn: () => nextcloudApi.getRooms(),
-    refetchInterval: chatPanelOpen ? 30000 : false,
+    refetchInterval: chatPanelOpen ? 30000 : 120000,
-    enabled: chatPanelOpen,
+    enabled: true,
   });
 
   const rooms = data?.rooms ?? [];

frontend/src/pages/Wissen.tsx

@@ -11,12 +11,18 @@ import {
   CircularProgress,
   InputAdornment,
   Divider,
+  Chip,
+  IconButton,
+  Tooltip,
 } from '@mui/material';
-import { Search as SearchIcon } from '@mui/icons-material';
+import { Search as SearchIcon, OpenInNew } from '@mui/icons-material';
 import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
+import { formatDistanceToNow } from 'date-fns';
+import { de } from 'date-fns/locale';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import { bookstackApi } from '../services/bookstack';
+import { safeOpenUrl } from '../utils/safeOpenUrl';
 import type { BookStackPage, BookStackSearchResult } from '../types/bookstack.types';
 
 export default function Wissen() {
@@ -103,6 +109,21 @@ export default function Wissen() {
             />
           </Box>
           <Divider />
+          <Box sx={{ px: 2, pt: 1.5, pb: 0.5, display: 'flex', alignItems: 'center', gap: 1 }}>
+            {isSearching ? (
+              <>
+                <Typography variant="subtitle2" color="text.secondary">
+                  Suchergebnisse für &quot;{debouncedSearch}&quot;
+                </Typography>
+                <Chip label={listItems.length} size="small" />
+              </>
+            ) : (
+              <Typography variant="subtitle2" color="text.secondary">
+                Zuletzt geänderte Seiten
+              </Typography>
+            )}
+          </Box>
+          <Divider />
           <Box sx={{ flex: 1, overflow: 'auto' }}>
             {listLoading ? (
               <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
@@ -114,25 +135,32 @@ export default function Wissen() {
               </Typography>
             ) : (
               <List disablePadding>
-                {listItems.map((item) => (
+                {listItems.map((item) => {
-                  <ListItem key={item.id} disablePadding>
+                  const isRecentPage = 'updated_at' in item && !isSearching;
-                    <ListItemButton
+                  const bookName = 'book' in item && item.book ? item.book.name : undefined;
-                      selected={selectedPageId === item.id}
+                  const secondaryParts: string[] = [];
-                      onClick={() => handleSelectPage(item.id)}
+                  if (bookName) secondaryParts.push(bookName);
-                    >
+                  if (isRecentPage && (item as BookStackPage).updated_at) {
-                      <ListItemText
+                    secondaryParts.push(
-                        primary={item.name}
+                      `Geändert ${formatDistanceToNow(new Date((item as BookStackPage).updated_at), { addSuffix: true, locale: de })}`
-                        secondary={
+                    );
-                          'book' in item && item.book
+                  }
-                            ? item.book.name
+                  return (
-                            : undefined
+                    <ListItem key={item.id} disablePadding>
-                        }
+                      <ListItemButton
-                        primaryTypographyProps={{ noWrap: true }}
+                        selected={selectedPageId === item.id}
-                        secondaryTypographyProps={{ noWrap: true }}
+                        onClick={() => handleSelectPage(item.id)}
-                      />
+                      >
-                    </ListItemButton>
+                        <ListItemText
-                  </ListItem>
+                          primary={item.name}
-                ))}
+                          secondary={secondaryParts.length > 0 ? secondaryParts.join(' · ') : undefined}
+                          primaryTypographyProps={{ noWrap: true }}
+                          secondaryTypographyProps={{ noWrap: true }}
+                        />
+                      </ListItemButton>
+                    </ListItem>
+                  );
+                })}
               </List>
             )}
           </Box>
@@ -154,9 +182,21 @@ export default function Wissen() {
             </Typography>
           ) : pageQuery.data?.data ? (
             <Box>
-              <Typography variant="h5" gutterBottom>
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
-                {pageQuery.data.data.name}
+                <Typography variant="h5" gutterBottom sx={{ flex: 1 }}>
-              </Typography>
+                  {pageQuery.data.data.name}
+                </Typography>
+                {pageQuery.data.data.url && (
+                  <Tooltip title="In BookStack öffnen">
+                    <IconButton
+                      size="small"
+                      onClick={() => safeOpenUrl(pageQuery.data!.data!.url)}
+                    >
+                      <OpenInNew fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </Box>
               {pageQuery.data.data.book && (
                 <Typography variant="body2" color="text.secondary" gutterBottom>
                   Buch: {pageQuery.data.data.book.name}