diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx
index 9e4cbac..89721be 100644
--- a/components/FolderGridLayout.tsx
+++ b/components/FolderGridLayout.tsx
@@ -76,7 +76,7 @@ const FolderGridLayout = ({
   const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
 
   return (
-    <div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100">
+    <div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100 shadow-sm">
       <div className="flex items-center border-b border-gray-900/10 px-3 text-xs font-bold uppercase tracking-widest text-gray-600 dark:border-gray-500/30 dark:text-gray-400">
         <div className="flex-1">{t('{{count}} item(s)', { count: folderChildren.length })}</div>
         <div className="flex p-1.5 text-gray-700 dark:text-gray-400">
diff --git a/components/FolderListLayout.tsx b/components/FolderListLayout.tsx
index b0a1b94..ca23401 100644
--- a/components/FolderListLayout.tsx
+++ b/components/FolderListLayout.tsx
@@ -53,7 +53,7 @@ const FolderListLayout = ({
   const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
 
   return (
-    <div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100">
+    <div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100 shadow-sm">
       <div className="grid grid-cols-12 items-center space-x-2 border-b border-gray-900/10 px-3 dark:border-gray-500/30">
         <div className="col-span-12 py-2 text-xs font-bold uppercase tracking-widest text-gray-600 dark:text-gray-300 md:col-span-6">
           {t('Name')}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 47a796f..6ff927b 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -120,7 +120,7 @@ const Navbar = () => {
 
           {tokenPresent && (
             <button
-              className="flex items-center space-x-2 p-2 hover:opacity-80 dark:text-white"
+              className="flex items-center space-x-2 hover:opacity-80 dark:text-white"
               onClick={() => setIsOpen(true)}
             >
               <span className="hidden text-sm font-medium md:inline-block">{t('Logout')}</span>
diff --git a/components/SwitchLayout.tsx b/components/SwitchLayout.tsx
index 59f1e91..97579a8 100644
--- a/components/SwitchLayout.tsx
+++ b/components/SwitchLayout.tsx
@@ -19,7 +19,7 @@ const SwitchLayout = () => {
   return (
     <div className="relative w-24 flex-shrink-0 text-sm text-gray-600 dark:text-gray-300 md:w-28">
       <Listbox value={preferredLayout} onChange={setPreferredLayout}>
-        <Listbox.Button className="relative w-full cursor-pointer rounded pl-2">
+        <Listbox.Button className="relative w-full cursor-pointer rounded pl-4">
           <span className="pointer-events-none flex items-center">
             <FontAwesomeIcon className="mr-2 h-3 w-3" icon={preferredLayout.icon} />
             <span>
diff --git a/components/previews/Containers.tsx b/components/previews/Containers.tsx
index 556a736..76b980e 100644
--- a/components/previews/Containers.tsx
+++ b/components/previews/Containers.tsx
@@ -1,10 +1,10 @@
 export function PreviewContainer({ children }): JSX.Element {
-  return <div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-white">{children}</div>
+  return <div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-white shadow-sm">{children}</div>
 }
 
 export function DownloadBtnContainer({ children }): JSX.Element {
   return (
-    <div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900">
+    <div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900 shadow-sm">
       {children}
     </div>
   )
diff --git a/pages/[...path].tsx b/pages/[...path].tsx
index 3c631d3..a7a3e56 100644
--- a/pages/[...path].tsx
+++ b/pages/[...path].tsx
@@ -20,8 +20,8 @@ export default function Folders() {
 
       <main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
         <Navbar />
-        <div className="mx-auto w-full max-w-5xl p-4">
-          <nav className="mb-4 flex items-center justify-between space-x-3 pl-1">
+        <div className="mx-auto w-full max-w-5xl sm:p-4 py-4">
+          <nav className="mb-4 flex items-center justify-between space-x-3 sm:pl-1 sm:px-0 px-4">
             <Breadcrumb query={query} />
             <SwitchLayout />
           </nav>
diff --git a/pages/index.tsx b/pages/index.tsx
index a6ebc17..5ff73e7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,8 +17,8 @@ export default function Home() {
 
       <main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
         <Navbar />
-        <div className="mx-auto w-full max-w-5xl p-4">
-          <nav className="mb-4 flex items-center justify-between pl-1">
+        <div className="mx-auto w-full max-w-5xl sm:p-4 py-4">
+          <nav className="mb-4 flex items-center justify-between sm:pl-1 sm:px-0 px-4">
             <Breadcrumb />
             <SwitchLayout />
           </nav>