diff --git a/frontend/src/components/Collections.tsx b/frontend/src/components/Collections.tsx
index 27c570c..d61f0fa 100644
--- a/frontend/src/components/Collections.tsx
+++ b/frontend/src/components/Collections.tsx
@@ -71,12 +71,13 @@ const Collections: React.FC<CollectionsProps> = ({ collections, onItemClick }) =
                                 label={`${Math.floor(collection.videos?.length || 0)}`}
                                 size="small"
                                 variant="outlined"
-                                sx={{ 
-                                    height: 20, 
-                                    minWidth: 20, 
+                                sx={{
+                                    height: 20,
+                                    minWidth: 20,
                                     ml: 1,
+                                    flexShrink: 0,
                                     '& .MuiChip-label': {
-                                        padding: '0 4px',
+                                        padding: '0 6px',
                                         fontSize: '0.75rem'
                                     }
                                 }}
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index f0a02b2..bdd1cc6 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -34,7 +34,7 @@ const VideoCard: React.FC<VideoCardProps> = ({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
-    
+
     // Get collection information
     const collectionInfo = getVideoCardCollectionInfo(
         video,
@@ -45,9 +45,9 @@ const VideoCard: React.FC<VideoCardProps> = ({
     // Hooks for different concerns
     const hoverPreview = useVideoHoverPreview({ videoPath: video.videoPath });
     const metadata = useVideoCardMetadata({ video });
-    const playerSelection = usePlayerSelection({ 
-        video, 
-        getVideoUrl: metadata.getVideoUrl 
+    const playerSelection = usePlayerSelection({
+        video,
+        getVideoUrl: metadata.getVideoUrl
     });
     const actions = useVideoCardActions({
         video,
@@ -72,7 +72,6 @@ const VideoCard: React.FC<VideoCardProps> = ({
                 borderRadius: isMobile ? 0 : undefined,
                 ...(!isMobile && {
                     '&:hover': {
-                        transform: 'translateY(-4px)',
                         boxShadow: theme.shadows[8],
                         '& .delete-btn': {
                             opacity: 1
@@ -82,8 +81,8 @@ const VideoCard: React.FC<VideoCardProps> = ({
                         }
                     }
                 }),
-                border: collectionInfo.isFirstInAnyCollection 
-                    ? `1px solid ${theme.palette.primary.main}` 
+                border: collectionInfo.isFirstInAnyCollection
+                    ? `1px solid ${theme.palette.primary.main}`
                     : 'none'
             }}
         >
diff --git a/frontend/src/components/VideoPlayer/UpNextSidebar.tsx b/frontend/src/components/VideoPlayer/UpNextSidebar.tsx
index c3504de..7bcf6e0 100644
--- a/frontend/src/components/VideoPlayer/UpNextSidebar.tsx
+++ b/frontend/src/components/VideoPlayer/UpNextSidebar.tsx
@@ -8,6 +8,7 @@ import {
     CardMedia,
     Chip,
     FormControlLabel,
+    Grid,
     IconButton,
     Skeleton,
     Stack,
@@ -134,57 +135,58 @@ const UpNextSidebar: React.FC<UpNextSidebarProps> = ({
                     sx={{ ml: 0, mr: 0 }}
                 />
             </Stack>
-            <Stack spacing={2}>
+            <Grid container spacing={2}>
                 {relatedVideos.map(relatedVideo => (
-                    <Card
-                        key={relatedVideo.id}
-                        sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }}
-                        onClick={() => onVideoClick(relatedVideo.id)}
-                        onMouseEnter={() => setHoveredVideoId(relatedVideo.id)}
-                        onMouseLeave={() => setHoveredVideoId(null)}
-                    >
-                        <SidebarThumbnail video={relatedVideo} />
+                    <Grid key={relatedVideo.id} size={{ xs: 12, md: 6, lg: 12 }}>
+                        <Card
+                            sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }}
+                            onClick={() => onVideoClick(relatedVideo.id)}
+                            onMouseEnter={() => setHoveredVideoId(relatedVideo.id)}
+                            onMouseLeave={() => setHoveredVideoId(null)}
+                        >
+                            <SidebarThumbnail video={relatedVideo} />
 
-                        <CardContent sx={{ flex: '1 1 auto', minWidth: 0, p: 1, '&:last-child': { pb: 1 }, position: 'relative', display: 'flex', flexDirection: 'column' }}>
-                            <Typography variant="body2" fontWeight="bold" sx={{ lineHeight: 1.2, mb: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-                                {relatedVideo.title}
-                            </Typography>
-                            <Typography variant="caption" display="block" color="text.secondary">
-                                {relatedVideo.author}
-                            </Typography>
-                            <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', mt: 'auto' }}>
-                                <Typography variant="caption" color="text.secondary">
-                                    {formatDate(relatedVideo.date)}
+                            <CardContent sx={{ flex: '1 1 auto', minWidth: 0, p: 1, '&:last-child': { pb: 1 }, position: 'relative', display: 'flex', flexDirection: 'column' }}>
+                                <Typography variant="body2" fontWeight="bold" sx={{ lineHeight: 1.2, mb: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                                    {relatedVideo.title}
                                 </Typography>
-                                <Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
-                                    ·  {relatedVideo.viewCount || 0} {t('views')}
+                                <Typography variant="caption" display="block" color="text.secondary">
+                                    {relatedVideo.author}
                                 </Typography>
-                            </Box>
+                                <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', mt: 'auto' }}>
+                                    <Typography variant="caption" color="text.secondary">
+                                        {formatDate(relatedVideo.date)}
+                                    </Typography>
+                                    <Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
+                                        ·  {relatedVideo.viewCount || 0} {t('views')}
+                                    </Typography>
+                                </Box>
 
-                            {hoveredVideoId === relatedVideo.id && !isMobile && !isTouch && !visitorMode && (
-                                <Tooltip title={t('addToCollection')} disableHoverListener={isTouch}>
-                                    <IconButton
-                                        size="small"
-                                        onClick={(e) => handleAddToCollectionClick(e, relatedVideo.id)}
-                                        sx={{
-                                            position: 'absolute',
-                                            bottom: 4,
-                                            right: 4,
-                                            padding: 0.5,
-                                            bgcolor: 'rgba(0,0,0,0.9)',
-                                        }}
-                                    >
-                                        <Add fontSize="small" />
-                                    </IconButton>
-                                </Tooltip>
-                            )}
-                        </CardContent>
-                    </Card>
+                                {hoveredVideoId === relatedVideo.id && !isMobile && !isTouch && !visitorMode && (
+                                    <Tooltip title={t('addToCollection')} disableHoverListener={isTouch}>
+                                        <IconButton
+                                            size="small"
+                                            onClick={(e) => handleAddToCollectionClick(e, relatedVideo.id)}
+                                            sx={{
+                                                position: 'absolute',
+                                                bottom: 4,
+                                                right: 4,
+                                                padding: 0.5,
+                                                bgcolor: 'rgba(0,0,0,0.9)',
+                                            }}
+                                        >
+                                            <Add fontSize="small" />
+                                        </IconButton>
+                                    </Tooltip>
+                                )}
+                            </CardContent>
+                        </Card>
+                    </Grid>
                 ))}
-                {relatedVideos.length === 0 && (
-                    <Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography>
-                )}
-            </Stack>
+            </Grid>
+            {relatedVideos.length === 0 && (
+                <Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography>
+            )}
         </Box>
     );
 };