diff --git a/app/components/layout/SideNav.tsx b/app/components/layout/SideNav.tsx
index 02d48f1ca..a74a177d6 100644
--- a/app/components/layout/SideNav.tsx
+++ b/app/components/layout/SideNav.tsx
@@ -8,7 +8,7 @@ export function SideNav() {
   const { t } = useTranslation(["common"]);
 
   return (
-    <nav className="layout__side-nav">
+    <nav className="layout__side-nav layout__item_size">
       {navItems.map((item) => {
         return (
           <Link
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 1e8224fbb..28a5a1763 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -54,10 +54,9 @@ export const Layout = React.memo(function Layout({
     data.publisherId &&
     !data?.user?.patronTier &&
     !location.pathname.includes("plans");
-
   return (
     <div className="layout__container">
-      <header className="layout__header">
+      <header className="layout__header layout__item_size">
         <div className="layout__breadcrumb-container">
           <Link to="/" className="layout__breadcrumb logo">
             sendou.ink
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 228ab9353..49aa00407 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -31,9 +31,11 @@
   font-size: 20px;
 }
 
-.layout__header {
+.layout__item_size {
   --item-size: 1.9rem;
+}
 
+.layout__header {
   position: fixed;
   z-index: 501;
   top: 0;
@@ -234,13 +236,17 @@
 }
 
 .layout__side-nav {
+  --top-size: calc(var(--item-size) + 2 * var(--s-2));
+
   position: fixed;
+  top: var(--top-size);
   display: flex;
-  height: 100vh;
+  height: calc(100vh - var(--top-size));
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   gap: var(--s-6);
   overflow-y: auto;
+  padding-block: var(--s-3);
   padding-inline: var(--s-4);
 }