diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1f09df2..06af0a9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -667,6 +667,8 @@ function App() {
                         onResetSearch={resetSearch}
                         theme={themeMode}
                         toggleTheme={toggleTheme}
+                        collections={collections}
+                        videos={videos}
                     />
 
                     {/* Bilibili Parts Modal */}
diff --git a/frontend/src/components/AuthorsList.tsx b/frontend/src/components/AuthorsList.tsx
index 0fd4cba..40d2270 100644
--- a/frontend/src/components/AuthorsList.tsx
+++ b/frontend/src/components/AuthorsList.tsx
@@ -15,9 +15,10 @@ import { Video } from '../types';
 
 interface AuthorsListProps {
     videos: Video[];
+    onItemClick?: () => void;
 }
 
-const AuthorsList: React.FC<AuthorsListProps> = ({ videos }) => {
+const AuthorsList: React.FC<AuthorsListProps> = ({ videos, onItemClick }) => {
     const [isOpen, setIsOpen] = useState<boolean>(true);
     const [authors, setAuthors] = useState<string[]>([]);
     const theme = useTheme();
@@ -64,6 +65,7 @@ const AuthorsList: React.FC<AuthorsListProps> = ({ videos }) => {
                             key={author}
                             component={Link}
                             to={`/author/${encodeURIComponent(author)}`}
+                            onClick={onItemClick}
                             sx={{ pl: 2, borderRadius: 1 }}
                         >
                             <Person fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} />
diff --git a/frontend/src/components/Collections.tsx b/frontend/src/components/Collections.tsx
index 9fd75a6..7ee060e 100644
--- a/frontend/src/components/Collections.tsx
+++ b/frontend/src/components/Collections.tsx
@@ -16,9 +16,10 @@ import { Collection } from '../types';
 
 interface CollectionsProps {
     collections: Collection[];
+    onItemClick?: () => void;
 }
 
-const Collections: React.FC<CollectionsProps> = ({ collections }) => {
+const Collections: React.FC<CollectionsProps> = ({ collections, onItemClick }) => {
     const [isOpen, setIsOpen] = useState<boolean>(true);
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -51,6 +52,7 @@ const Collections: React.FC<CollectionsProps> = ({ collections }) => {
                             key={collection.id}
                             component={Link}
                             to={`/collection/${collection.id}`}
+                            onClick={onItemClick}
                             sx={{ pl: 2, borderRadius: 1 }}
                         >
                             <Folder fontSize="small" sx={{ mr: 1, color: 'secondary.main' }} />
diff --git a/frontend/src/components/ConfirmationModal.tsx b/frontend/src/components/ConfirmationModal.tsx
index 3f6bdc0..6e62941 100644
--- a/frontend/src/components/ConfirmationModal.tsx
+++ b/frontend/src/components/ConfirmationModal.tsx
@@ -76,7 +76,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
                         onClose();
                     }}
                     color={isDanger ? 'error' : 'primary'}
-                    variant="contained"
+                    variant="outlined"
                     autoFocus
                 >
                     {confirmText}
diff --git a/frontend/src/components/DeleteCollectionModal.tsx b/frontend/src/components/DeleteCollectionModal.tsx
index bae8e60..5c94689 100644
--- a/frontend/src/components/DeleteCollectionModal.tsx
+++ b/frontend/src/components/DeleteCollectionModal.tsx
@@ -74,7 +74,7 @@ const DeleteCollectionModal: React.FC<DeleteCollectionModalProps> = ({
 
                     {videoCount > 0 && (
                         <Button
-                            variant="contained"
+                            variant="outlined"
                             color="error"
                             onClick={onDeleteCollectionAndVideos}
                             fullWidth
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 9d2d696..0e53cf5 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -29,6 +29,9 @@ import {
 import { FormEvent, useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import logo from '../assets/logo.svg';
+import { Collection, Video } from '../types';
+import AuthorsList from './AuthorsList';
+import Collections from './Collections';
 import UploadModal from './UploadModal';
 
 interface DownloadInfo {
@@ -46,6 +49,8 @@ interface HeaderProps {
     onResetSearch?: () => void;
     theme: string;
     toggleTheme: () => void;
+    collections?: Collection[];
+    videos?: Video[];
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -56,7 +61,9 @@ const Header: React.FC<HeaderProps> = ({
     searchTerm = '',
     onResetSearch,
     theme: currentThemeMode,
-    toggleTheme
+    toggleTheme,
+    collections = [],
+    videos = []
 }) => {
     const [videoUrl, setVideoUrl] = useState<string>('');
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -277,16 +284,43 @@ const Header: React.FC<HeaderProps> = ({
                 {/* Mobile Dropdown Layout */}
                 {isMobile && (
                     <Collapse in={mobileMenuOpen} sx={{ width: '100%' }}>
-                        <Stack spacing={2} sx={{ py: 2 }}>
-                            {/* Row 1: Search Input */}
-                            <Box>
-                                {renderSearchInput()}
-                            </Box>
-                            {/* Row 2: Action Buttons */}
-                            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                                {renderActionButtons()}
-                            </Box>
-                        </Stack>
+                        <Box sx={{ maxHeight: '80vh', overflowY: 'auto' }}>
+                            <Stack spacing={2} sx={{ py: 2 }}>
+                                {/* Row 1: Search Input */}
+                                <Box>
+                                    {renderSearchInput()}
+                                </Box>
+                                {/* Row 2: Action Buttons */}
+                                <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                                    {renderActionButtons()}
+                                </Box>
+
+                                {/* Mobile Navigation Items */}
+                                <Box sx={{ mt: 2 }}>
+                                    <Collections
+                                        collections={collections}
+                                        onItemClick={() => setMobileMenuOpen(false)}
+                                    />
+                                    <Box sx={{ mt: 2 }}>
+                                        <AuthorsList
+                                            videos={videos}
+                                            onItemClick={() => setMobileMenuOpen(false)}
+                                        />
+                                    </Box>
+                                    <Box sx={{ mt: 3, textAlign: 'center', mb: 2 }}>
+                                        <Button
+                                            component={Link}
+                                            to="/manage"
+                                            variant="outlined"
+                                            fullWidth
+                                            onClick={() => setMobileMenuOpen(false)}
+                                        >
+                                            Manage Videos
+                                        </Button>
+                                    </Box>
+                                </Box>
+                            </Stack>
+                        </Box>
                     </Collapse>
                 )}
             </Toolbar>
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 1e8c396..6ac4064 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -271,7 +271,7 @@ const Home: React.FC<HomeProps> = ({
             ) : (
                 <Grid container spacing={4}>
                     {/* Sidebar container for Collections and Authors */}
-                    <Grid size={{ xs: 12, md: 3 }}>
+                    <Grid size={{ xs: 12, md: 3 }} sx={{ display: { xs: 'none', md: 'block' } }}>
                         <Box sx={{ position: 'sticky', top: 80 }}>
                             <Collections collections={collections} />
                             <Box sx={{ mt: 2 }}>
diff --git a/frontend/src/pages/VideoPlayer.tsx b/frontend/src/pages/VideoPlayer.tsx
index db8510c..d5e7b0a 100644
--- a/frontend/src/pages/VideoPlayer.tsx
+++ b/frontend/src/pages/VideoPlayer.tsx
@@ -338,6 +338,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
                             src={`${BACKEND_URL}${video.videoPath || video.sourceUrl}`}
                             onPlay={() => setIsPlaying(true)}
                             onPause={() => setIsPlaying(false)}
+                            playsInline
                         >
                             Your browser does not support the video tag.
                         </video>
@@ -432,7 +433,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
                                     Add to Collection
                                 </Button>
                                 <Button
-                                    variant="contained"
+                                    variant="outlined"
                                     color="error"
                                     startIcon={<Delete />}
                                     onClick={handleDelete}