diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx
index 9461ae1d..714985c1 100644
--- a/web/src/components/HomeSidebar.tsx
+++ b/web/src/components/HomeSidebar.tsx
@@ -4,7 +4,7 @@ import UsageHeatMap from "./UsageHeatMap";
 
 const HomeSidebar = () => {
   return (
-    <aside className="relative w-full pr-2 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4">
+    <aside className="relative w-full pr-2 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
       <div className="px-4 pr-8 mb-4 w-full">
         <SearchBar />
       </div>
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index 3bad18ed..5fae55de 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -98,9 +98,9 @@ const Navigation = () => {
     : [exploreNavLink, signInNavLink];
 
   return (
-    <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 z-30">
+    <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 sm:pt-6 z-30">
       <UserBanner />
-      <div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
+      <div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
         {navLinks.map((navLink) => (
           <NavLink
             key={navLink.id}
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index 21c22068..0aa88291 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -33,7 +33,7 @@ const UserBanner = () => {
   };
 
   return (
-    <div className="relative w-full h-auto px-2 shrink-0">
+    <div className="relative w-full h-auto px-1 shrink-0">
       <Dropdown
         className="w-auto"
         trigger={
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index 9c64041b..90f649d4 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -7,9 +7,9 @@ function Root() {
 
   return (
     <div className="w-full min-h-full">
-      <div className="w-full sm:pl-56 mx-auto flex flex-row justify-center items-start">
+      <div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
         {sm && (
-          <div className="hidden sm:block fixed top-0 left-0 w-56 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
+          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
             <Navigation />
           </div>
         )}
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index e6b94fb1..f03fbb2a 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -30,7 +30,7 @@ const Archived = () => {
   }, [memos]);
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         {loadingState.isLoading ? (
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 8a0d55a3..a6f8d134 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -54,7 +54,7 @@ const Explore = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="relative w-full h-auto flex flex-col justify-start items-start px-4">
         <MemoFilter />
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index a23610ca..ca1c5aec 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -9,10 +9,10 @@ const Home = () => {
   const { md } = useResponsiveWidth();
 
   return (
-    <div className="w-full max-w-4xl flex flex-row justify-center items-start">
-      <div className="w-full sm:pt-4">
+    <div className="w-full max-w-5xl flex flex-row justify-center items-start">
+      <div className="w-full sm:pt-6">
         <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
-        <div className="w-full px-4 md:pr-2">
+        <div className="w-full px-4 sm:px-6 md:pr-2">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <MemoList />
         </div>
diff --git a/web/src/pages/Inboxes.tsx b/web/src/pages/Inboxes.tsx
index dd209249..21720282 100644
--- a/web/src/pages/Inboxes.tsx
+++ b/web/src/pages/Inboxes.tsx
@@ -20,7 +20,7 @@ const Inboxes = () => {
   }, []);
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index bcd1c48e..5d2825f2 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -110,7 +110,7 @@ const MemoDetail = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index e6226625..d6eab911 100644
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@@ -66,7 +66,7 @@ const Resources = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index 7401c37e..b9fb2f4c 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -42,7 +42,7 @@ const Setting = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="setting-page-wrapper">
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index 58145d05..49ccb71e 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -64,7 +64,7 @@ const Timeline = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index ca99416a..6e302ed8 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -35,7 +35,7 @@ const UserProfile = () => {
   }, [params.username]);
 
   return (
-    <section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 flex flex-col justify-start items-center">
         {!loadingState.isLoading &&