diff --git a/src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx b/src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx
index d362d872ac..062b453b37 100644
--- a/src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx
+++ b/src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx
@@ -2,10 +2,11 @@ import { Dashboard, ExpandLess, ExpandMore, LibraryAdd, People, PlayCircle, Sett
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import ListItemLink from 'components/ListItemLink';
@@ -28,8 +29,16 @@ const PLAYBACK_PATHS = [
 const ServerDrawerSection = () => {
     const location = useLocation();
 
-    const isLibrarySectionOpen = LIBRARY_PATHS.includes(location.pathname);
-    const isPlaybackSectionOpen = PLAYBACK_PATHS.includes(location.pathname);
+    const [ isLibrarySectionOpen, setIsLibrarySectionOpen ] = useState(LIBRARY_PATHS.includes(location.pathname));
+    const [ isPlaybackSectionOpen, setIsPlaybackSectionOpen ] = useState(PLAYBACK_PATHS.includes(location.pathname));
+
+    const onLibrarySectionClick = useCallback(() => {
+        setIsLibrarySectionOpen(isOpen => !isOpen);
+    }, []);
+
+    const onPlaybackSectionClick = useCallback(() => {
+        setIsPlaybackSectionOpen(isOpen => !isOpen);
+    }, []);
 
     return (
         <List
@@ -65,13 +74,13 @@ const ServerDrawerSection = () => {
                 </ListItemLink>
             </ListItem>
             <ListItem disablePadding>
-                <ListItemLink to='/dashboard/libraries' selected={false}>
+                <ListItemButton onClick={onLibrarySectionClick}>
                     <ListItemIcon>
                         <LibraryAdd />
                     </ListItemIcon>
                     <ListItemText primary={globalize.translate('HeaderLibraries')} />
                     {isLibrarySectionOpen ? <ExpandLess /> : <ExpandMore />}
-                </ListItemLink>
+                </ListItemButton>
             </ListItem>
             <Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit>
                 <List component='div' disablePadding>
@@ -90,13 +99,13 @@ const ServerDrawerSection = () => {
                 </List>
             </Collapse>
             <ListItem disablePadding>
-                <ListItemLink to='/dashboard/playback/transcoding' selected={false}>
+                <ListItemButton onClick={onPlaybackSectionClick}>
                     <ListItemIcon>
                         <PlayCircle />
                     </ListItemIcon>
                     <ListItemText primary={globalize.translate('TitlePlayback')} />
                     {isPlaybackSectionOpen ? <ExpandLess /> : <ExpandMore />}
-                </ListItemLink>
+                </ListItemButton>
             </ListItem>
             <Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit>
                 <List component='div' disablePadding>