diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 74ac36ed..52623f43 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -10,6 +10,8 @@ import { motion, AnimatePresence } from "framer-motion";
 import CloseIcon from "@mui/icons-material/Close";
 import MenuIcon from "@mui/icons-material/Menu";
 import InfoIcon from "@mui/icons-material/Info";
+import { cn } from "@/lib/utils";
+import { SHELL } from "@/utils/layout";
 
 function Navbar() {
   const { address, isConnected } = useAccount();
@@ -138,7 +140,9 @@ function Navbar() {
         : "bg-[#161920]"
         }`}
     >
-      <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 z-10">
+      {/* Shares the page shell's gutter so the logo and wallet button line up
+          with the content edges. */}
+      <div className={cn(SHELL, "z-10")}>
         <div className="flex justify-between items-center h-24">
           <motion.div
             whileHover={{ scale: 1.05 }}
diff --git a/frontend/src/components/UserProfileSettings.jsx b/frontend/src/components/UserProfileSettings.jsx
index 02ce812a..9a5145fa 100644
--- a/frontend/src/components/UserProfileSettings.jsx
+++ b/frontend/src/components/UserProfileSettings.jsx
@@ -32,11 +32,16 @@ export default function UserProfileSettings() {
       onSubmit={handleSubmit}
       className="bg-white p-4 sm:p-6 rounded-xl border border-gray-100 shadow-sm"
     >
-      <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
-        <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
-          <User className="text-gray-600 w-5 h-5" />
-          Your Information
-        </h3>
+      <div className="flex flex-wrap items-start justify-between gap-2 mb-4">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
+            <User className="text-gray-600 w-5 h-5" />
+            Your Information
+          </h3>
+          <p className="mt-0.5 text-sm text-gray-500">
+            Applied as the sender on every invoice. Saved on this device only.
+          </p>
+        </div>
         {!loading && isComplete && (
           <span className="flex items-center gap-1.5 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2.5 py-1">
             <CheckCircle2 className="h-3.5 w-3.5" />
diff --git a/frontend/src/page/Applayout.jsx b/frontend/src/page/Applayout.jsx
index 83feae16..7c2d0d42 100644
--- a/frontend/src/page/Applayout.jsx
+++ b/frontend/src/page/Applayout.jsx
@@ -8,7 +8,9 @@ function Applayout() {
   return (
     <div className="flex flex-col min-h-screen overflow-x-hidden bg-[#161920]">
       <Navbar />
-      <main className="flex-1 pt-20 w-full max-w-[100vw] overflow-x-hidden">
+      {/* Navbar is fixed at h-24, so the offset has to match it exactly —
+          pt-20 left content tucked 16px underneath. */}
+      <main className="flex-1 pt-24 w-full max-w-[100vw] overflow-x-hidden">
         <Outlet />
       </main>
     </div>
diff --git a/frontend/src/page/CreateInvoice.jsx b/frontend/src/page/CreateInvoice.jsx
index e9193482..f49947af 100644
--- a/frontend/src/page/CreateInvoice.jsx
+++ b/frontend/src/page/CreateInvoice.jsx
@@ -55,6 +55,7 @@ import { toInvoiceUserDetails } from "@/utils/userProfile";
 import { useUserProfile } from "@/hooks/useUserProfile";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import SenderSummary from "@/components/SenderSummary";
+import { CARD, PAGE_CONTAINER } from "@/utils/layout";
 import toast from "react-hot-toast";
 import { storeInvoice } from "../services/invoiceStorage/invoiceDB.js";
 import { computeInvoiceHash } from "../services/relay/invoiceHashUtils.js";
@@ -798,7 +799,7 @@ function CreateInvoice() {
       </div>
 
       {showUnsupportedNetwork && (
-        <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6">
+        <div className={PAGE_CONTAINER}>
           <div className="bg-white border border-amber-200 rounded-lg p-6 shadow-sm">
             <h2 className="text-xl font-bold mb-2 text-gray-800">
               Unsupported network
@@ -812,16 +813,11 @@ function CreateInvoice() {
         </div>
       )}
 
-      <div
-        className={cn(
-          "w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6",
-          showUnsupportedNetwork && "hidden"
-        )}
-      >
+      <div className={cn(PAGE_CONTAINER, showUnsupportedNetwork && "hidden")}>
         {(searchParams.get("clientAddress") ||
           searchParams.get("amount") ||
           searchParams.get("description")) && (
-          <div className="mb-6 bg-green-50 border border-green-200 rounded-lg p-4 overflow-hidden">
+          <div className="mb-3 bg-green-50 border border-green-200 rounded-lg p-3 overflow-hidden">
             <div className="flex items-center gap-3">
               <CheckCircle2 className="h-5 w-5 text-green-600" />
               <div>
@@ -837,42 +833,46 @@ function CreateInvoice() {
           </div>
         )}
 
-        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-4 sm:mb-6">
+        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-3">
           <h2 className="text-xl sm:text-2xl font-bold text-white">
             Create New Invoice
           </h2>
           <SenderSummary />
         </div>
 
-        <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-3 sm:gap-4 mb-6 sm:mb-8 bg-gray-50 p-4 rounded-lg shadow-sm overflow-hidden">
+        {/* Full width so its right edge lands on the same line as the Payment
+            Currency card and the items table below. Every block on the page
+            shares one left and one right edge. */}
+        <div className="w-full flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-2 sm:gap-3 mb-3 sm:mb-4 bg-gray-50 p-3 rounded-lg shadow-sm overflow-hidden">
           <div className="flex items-center space-x-2 w-full sm:w-auto">
-            <Label className="text-sm sm:text-md font-medium text-gray-700">
+            <Label className="text-sm font-medium text-gray-700">
               Invoice #
             </Label>
             <Input
               value="1"
-              className="w-24 bg-gray-100 border-gray-300 text-gray-700"
+              className="w-16 bg-gray-100 border-gray-300 text-gray-700"
               disabled
             />
           </div>
 
           <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
-            <Label className="text-sm sm:text-md font-medium text-gray-700">
+            <Label className="text-sm font-medium text-gray-700">
               Issued Date
             </Label>
             <Button
+              type="button"
               className={cn(
-                "w-full sm:w-[220px] justify-start text-left font-normal bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
+                "w-full sm:w-auto justify-start text-left font-normal bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
                 !issueDate && "text-black"
               )}
             >
               <CalendarIcon className="mr-2 h-4 w-4" />
-              {format(issueDate, "PPP")}
+              {format(issueDate, "PP")}
             </Button>
           </div>
 
           <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
-            <Label className="text-sm sm:text-md font-medium text-gray-700">
+            <Label className="text-sm font-medium text-gray-700">
               Due Date
             </Label>
             <Popover>
@@ -880,13 +880,13 @@ function CreateInvoice() {
                 <Button
                   variant="outline"
                   className={cn(
-                    "w-full sm:w-[220px] justify-start text-left font-normal text-gray-700",
+                    "w-full sm:w-auto justify-start text-left font-normal text-gray-700",
                     !dueDate && "text-muted-foreground"
                   )}
                 >
                   <CalendarIcon className="mr-2 h-4 w-4" />
                   {dueDate ? (
-                    format(dueDate, "PPP")
+                    format(dueDate, "PP")
                   ) : (
                     <span className="text-gray-700">Pick a due date</span>
                   )}
@@ -915,9 +915,11 @@ function CreateInvoice() {
         <form onSubmit={handleSubmit}>
           {/* Client details and payment token sit side by side so the invoice
               items stay above the fold on desktop. */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
+          {/* items-stretch keeps both cards the same height; the two differ a
+              lot in content and a ragged bottom edge reads as unfinished. */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-3 sm:mb-4 items-stretch">
             {/* Client Information — the sender's own details come from Settings */}
-            <div className="w-full border border-gray-200 p-4 sm:p-6 rounded-lg shadow-sm bg-white overflow-hidden">
+            <div className={CARD}>
               <h3 className="text-base sm:text-lg font-semibold mb-4 text-gray-800">
                 Client Information
               </h3>
@@ -1122,7 +1124,7 @@ function CreateInvoice() {
               </div>
             </div>
 
-            <div className="bg-white p-4 sm:p-6 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+            <div className={CARD}>
               <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -1364,7 +1366,7 @@ function CreateInvoice() {
 
 
           {/* Invoice Items Section */}
-          <div className="mb-6 sm:mb-8">
+          <div className="mb-4">
             {/* Desktop Header - Hidden on mobile */}
             <div className="hidden md:grid bg-green-500 text-white py-3 px-4 rounded-t-lg font-medium text-sm gap-2 items-center" style={{ gridTemplateColumns: 'repeat(16, minmax(0, 1fr))' }}>
               <div className="col-span-4">DESCRIPTION</div>
@@ -1414,7 +1416,7 @@ function CreateInvoice() {
             </div>
 
             <div className="border border-gray-200 rounded-b-lg bg-white">
-              <div className="p-3 sm:p-4 space-y-4 md:space-y-3">
+              <div className="p-2 sm:p-3 space-y-3 md:space-y-2">
                 {itemData.map((item, index) => (
                   <div className="relative" key={item.id} style={{ zIndex: Math.max(1, 50 - index) }}>
                     {/* Mobile Layout - Stacked */}
@@ -1710,8 +1712,10 @@ function CreateInvoice() {
                 Add Item
               </Button>
 
-              <div className="bg-gray-50 p-2 rounded-lg w-full md:w-1/3">
-                <div className="flex justify-between items-center mb-2">
+              {/* Capped rather than a fraction of the row: at 1/3 of a wide
+                  content column the label and amount drifted far apart. */}
+              <div className="bg-gray-50 p-2 rounded-lg w-full sm:w-auto sm:min-w-[260px]">
+                <div className="flex justify-between items-center gap-6">
                   <span className="font-medium text-gray-700">Total:</span>
                   <span className="font-bold text-lg text-black">
                     {totalAmountDue}{" "}
@@ -1722,7 +1726,7 @@ function CreateInvoice() {
                 </div>
                 {totalAmountError && (
                   <div className="flex items-center justify-end gap-1.5 mt-1 text-red-600">
-                    <AlertCircle className="w-4 h-4" />
+                    <AlertCircle className="w-4 h-4 shrink-0" />
                     <span className="text-sm font-medium">{totalAmountError}</span>
                   </div>
                 )}
@@ -1731,7 +1735,7 @@ function CreateInvoice() {
           </div>
 
           {/* Form Actions */}
-          <div className="flex flex-col-reverse sm:flex-row justify-between items-center gap-4 mt-6">
+          <div className="flex flex-col-reverse sm:flex-row justify-between items-center gap-3 mt-4 pb-4">
             <Button
               className="bg-green-600 hover:bg-green-700 px-8 py-2 text-white"
               type="submit"
diff --git a/frontend/src/page/CreateInvoicesBatch.jsx b/frontend/src/page/CreateInvoicesBatch.jsx
index dc1f1443..1a06422a 100644
--- a/frontend/src/page/CreateInvoicesBatch.jsx
+++ b/frontend/src/page/CreateInvoicesBatch.jsx
@@ -64,6 +64,7 @@ import { toInvoiceUserDetails } from "@/utils/userProfile";
 import { useUserProfile } from "@/hooks/useUserProfile";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import SenderSummary from "@/components/SenderSummary";
+import { CARD, PAGE_CONTAINER, PAGE_HEADER, SECTION_GAP } from "@/utils/layout";
 
 import ProductAutocompleteInput from "@/components/ProductAutocompleteInput";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -835,9 +836,9 @@ function CreateInvoicesBatch() {
         />
       </div>
 
-      <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6">
+      <div className={PAGE_CONTAINER}>
         {/* Simple Header */}
-        <div className="mb-6 sm:mb-8">
+        <div className={PAGE_HEADER}>
           <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
             Create Multiple Invoices
           </h2>
@@ -849,7 +850,7 @@ function CreateInvoicesBatch() {
         </div>
 
         {/* Clean Date Selection */}
-        <div className="w-full bg-white p-4 sm:p-6 rounded-lg shadow-sm mb-6 sm:mb-8 border border-gray-200 overflow-hidden">
+        <div className={cn(CARD, SECTION_GAP)}>
           <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-4 sm:gap-6">
             <div className="flex items-center space-x-3 w-full sm:w-auto">
               <div className="flex items-center justify-center gap-3">
@@ -955,7 +956,7 @@ function CreateInvoicesBatch() {
 
         <form onSubmit={handleSubmit}>
           {/* Clean Token Selection */}
-          <div className="w-full mb-6 sm:mb-8 bg-white p-4 sm:p-6 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+          <div className={cn(CARD, SECTION_GAP)}>
             <h3 className="text-lg font-semibold text-gray-800 mb-4">
               Payment Currency
             </h3>
diff --git a/frontend/src/page/GenerateLink.jsx b/frontend/src/page/GenerateLink.jsx
index 7f19291d..623b4aa9 100644
--- a/frontend/src/page/GenerateLink.jsx
+++ b/frontend/src/page/GenerateLink.jsx
@@ -22,6 +22,8 @@ import { Badge } from "@/components/ui/badge";
 import { BrowserProvider, ethers } from "ethers";
 import { ERC20_ABI } from "@/contractsABI/ERC20_ABI";
 import { useTokenList } from "../hooks/useTokenList";
+import { PAGE_CONTAINER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const GenerateLink = () => {
   const { address, isConnected, chainId } = useAccount();
@@ -130,7 +132,7 @@ const GenerateLink = () => {
         />
       </div>
 
-      <div className="w-full max-w-7xl mx-auto space-y-6 px-2 sm:px-4 md:px-6 transition-all duration-300">
+      <div className={cn(PAGE_CONTAINER, "space-y-4 transition-all duration-300")}>
         <div className="mb-6 sm:mb-8">
           <h2 className="text-xl sm:text-2xl font-bold text-white mb-2 flex items-center gap-2 sm:gap-3">
             <div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
diff --git a/frontend/src/page/Home.jsx b/frontend/src/page/Home.jsx
index 370365f5..a103c793 100644
--- a/frontend/src/page/Home.jsx
+++ b/frontend/src/page/Home.jsx
@@ -1,6 +1,6 @@
-// Home.js - Updated with Batch Creation AND Batch Payment sections
+// Home.js - dashboard shell: collapsible nav rail on desktop, drawer below lg
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
@@ -8,18 +8,153 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import Tooltip from "@mui/material/Tooltip";
 import MailOutlineIcon from "@mui/icons-material/MailOutline";
 import DraftsIcon from "@mui/icons-material/Drafts";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import LinkIcon from "@mui/icons-material/Link";
 import SettingsIcon from "@mui/icons-material/Settings";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
-import { FileStackIcon } from "lucide-react";
+import { FileStackIcon, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
 import { useUserProfile } from "@/hooks/useUserProfile";
+import { SHELL } from "@/utils/layout";
+
+const MENU_ITEMS = [
+  {
+    text: "Send Invoice",
+    icon: <AddCircleOutlineIcon />,
+    route: "create",
+    color: "#f472b6",
+  },
+  {
+    text: "Send Multiple Invoices",
+    icon: <FileStackIcon />,
+    route: "batch-invoice",
+    color: "#22c55e",
+  },
+  {
+    text: "Sent Invoices",
+    icon: <MailOutlineIcon />,
+    route: "sent",
+    color: "#4ade80",
+  },
+  {
+    text: "Request Invoices",
+    icon: <LinkIcon />,
+    route: "generate-link",
+    color: "#a78bfa",
+  },
+  {
+    text: "Received Invoices",
+    icon: <DraftsIcon />,
+    route: "pending",
+    color: "#60a5fa",
+  },
+  {
+    text: "Settings",
+    icon: <SettingsIcon />,
+    route: "settings",
+    color: "#9ca3af",
+  },
+];
+
+const RAIL_WIDTH = 248;
+const RAIL_WIDTH_COLLAPSED = 68;
+const RAIL_COLLAPSED_KEY = "chainvoice_dashboard_rail_collapsed";
+const NAV_DRAWER_ID = "dashboard-nav-drawer";
+
+// Tailwind's lg, which the hamburger and the rail are keyed to. MUI's own `lg`
+// is 1200px, so relying on it here would leave the drawer mounted between
+// 1024px and 1199px where the hamburger that closes it is already hidden.
+const LG_QUERY = "(min-width: 1024px)";
+
+/**
+ * Reads the rail preference synchronously. localStorage rather than the
+ * IndexedDB used for app data: an async read would render the rail expanded
+ * and then snap it closed on every load.
+ */
+const readRailCollapsed = () => {
+  try {
+    return window.localStorage.getItem(RAIL_COLLAPSED_KEY) === "true";
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * The dashboard navigation list. Rendered by the desktop rail (expanded or
+ * collapsed to icons) and by the mobile drawer, so the variants cannot drift.
+ */
+function DashboardNav({ activeRoute, onNavigate, collapsed = false }) {
+  return (
+    <List className="space-y-1" sx={{ py: 0 }}>
+      {MENU_ITEMS.map((item) => {
+        const isActive = activeRoute === item.route;
+
+        return (
+          <ListItem key={item.route} disablePadding className="text-white">
+            <Tooltip
+              title={collapsed ? item.text : ""}
+              placement="right"
+              arrow
+              disableHoverListener={!collapsed}
+            >
+              <ListItemButton
+                onClick={() => onNavigate(item.route)}
+                selected={isActive}
+                aria-label={item.text}
+                sx={{
+                  borderRadius: "8px",
+                  transition: "all 0.2s ease",
+                  justifyContent: collapsed ? "center" : "flex-start",
+                  backgroundColor: isActive
+                    ? "rgba(255, 255, 255, 0.08)"
+                    : "transparent",
+                  "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
+                  "&.Mui-selected": { borderLeft: `4px solid ${item.color}` },
+                  padding: collapsed ? "10px 0" : "9px 14px",
+                }}
+              >
+                <ListItemIcon
+                  sx={{
+                    minWidth: collapsed ? 0 : "32px",
+                    justifyContent: "center",
+                    color: item.color,
+                    fontSize: "1.15rem",
+                  }}
+                >
+                  {item.icon}
+                </ListItemIcon>
+                {!collapsed && (
+                  <ListItemText
+                    primary={item.text}
+                    primaryTypographyProps={{
+                      fontSize: "0.925rem",
+                      fontWeight: isActive ? 600 : 500,
+                    }}
+                  />
+                )}
+              </ListItemButton>
+            </Tooltip>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}
+
+/**
+ * The dashboard greeting. The connected address and network deliberately are
+ * not repeated here — the navbar already shows both.
+ */
+function RailGreeting() {
+  return (
+    <p className="text-base text-white">
+      Welcome <span className="font-medium text-green-400">Back!</span>
+    </p>
+  );
+}
 
 export default function Home() {
   const navigate = useNavigate();
@@ -31,6 +166,8 @@ export default function Home() {
     dismissOnboarding,
   } = useUserProfile();
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [navOpen, setNavOpen] = useState(false);
+  const [railCollapsed, setRailCollapsed] = useState(readRailCollapsed);
 
   // First visit only: prompt for the sender details every invoice needs, once
   // storage has actually been read and once the user has not already skipped.
@@ -39,55 +176,50 @@ export default function Home() {
     setShowOnboarding(!hasProfile && !onboardingDismissed);
   }, [profileLoading, hasProfile, onboardingDismissed]);
 
-  // Get current active route for dropdown
-  const getCurrentRoute = () => {
-    const currentPath = location.pathname;
-    const matchedItem = menuItems.find(item => currentPath.includes(item.route));
-    return matchedItem ? matchedItem.route : 'create';
-  };
+  // Widening past lg hides the drawer and its hamburger by CSS, but the modal
+  // would stay open and keep the body scroll locked with nothing left to close
+  // it. Closing on the breakpoint keeps state and layout in step.
+  useEffect(() => {
+    const mq = window.matchMedia(LG_QUERY);
+    const handleChange = (e) => {
+      if (e.matches) setNavOpen(false);
+    };
 
-  const handleDropdownChange = (event) => {
-    navigate(event.target.value);
-  };
+    handleChange(mq);
+    mq.addEventListener("change", handleChange);
+    return () => mq.removeEventListener("change", handleChange);
+  }, []);
 
-  const menuItems = [
-    {
-      text: "Send Invoice",
-      icon: <AddCircleOutlineIcon />,
-      route: "create",
-      color: "#f472b6",
-    },
-    {
-      text: "Send Multiple Invoices",
-      icon: <FileStackIcon/>,
-      route: "batch-invoice",
-      color: "#22c55e",
-    },
-    {
-      text: "Sent Invoices",
-      icon: <MailOutlineIcon />,
-      route: "sent",
-      color: "#4ade80",
-    },
-    {
-      text: "Request Invoices",
-      icon: <LinkIcon />,
-      route: "generate-link",
-      color: "#a78bfa",
-    },
-    {
-      text: "Received Invoices",
-      icon: <DraftsIcon />,
-      route: "pending",
-      color: "#60a5fa",
-    },
-    {
-      text: "Settings",
-      icon: <SettingsIcon />,
-      route: "settings",
-      color: "#9ca3af",
+  const activeRoute =
+    MENU_ITEMS.find((item) => location.pathname.includes(item.route))?.route ??
+    "create";
+
+  const activeLabel =
+    MENU_ITEMS.find((item) => item.route === activeRoute)?.text ?? "Dashboard";
+
+  // Navigating from the drawer has to close it, or the overlay stays parked
+  // over the page the user just asked for.
+  const handleNavigate = useCallback(
+    (route) => {
+      navigate(route);
+      setNavOpen(false);
     },
-  ];
+    [navigate]
+  );
+
+  // The write stays outside the updater: React may call an updater more than
+  // once per dispatch, and updaters are expected to be pure.
+  const toggleRail = useCallback(() => {
+    const next = !railCollapsed;
+    try {
+      window.localStorage.setItem(RAIL_COLLAPSED_KEY, String(next));
+    } catch {
+      // A lost preference is not worth failing the interaction over.
+    }
+    setRailCollapsed(next);
+  }, [railCollapsed]);
+
+  const railWidth = railCollapsed ? RAIL_WIDTH_COLLAPSED : RAIL_WIDTH;
 
   return (
     <>
@@ -97,154 +229,96 @@ export default function Home() {
         onSkip={dismissOnboarding}
       />
 
-      <div className="px-2 sm:px-4 md:px-6 lg:px-10">
-        <header className="mb-2">
-          <h1 className="text-xl sm:text-2xl mt-4 text-white">
-            Welcome <span className="font-medium text-green-400">Back!</span>
-          </h1>
-        </header>
+      {/* Same gutter as the navbar, so the rail and content share its edges. */}
+      <div className={SHELL}>
+        {/* Mobile / tablet: the hamburger doubles as the current-section label */}
+        <div className="flex items-center gap-2 py-2 lg:hidden">
+          <button
+            type="button"
+            onClick={() => setNavOpen(true)}
+            aria-label="Open dashboard menu"
+            aria-expanded={navOpen}
+            aria-controls={NAV_DRAWER_ID}
+            className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-white transition-colors hover:bg-white/10"
+          >
+            <Menu className="h-5 w-5" />
+            <span className="text-sm font-medium">{activeLabel}</span>
+          </button>
+        </div>
+
+        <Drawer
+          id={NAV_DRAWER_ID}
+          open={navOpen}
+          onClose={() => setNavOpen(false)}
+          ModalProps={{ keepMounted: true }}
+          sx={{
+            display: "block",
+            [`@media ${LG_QUERY}`]: { display: "none" },
+            "& .MuiDrawer-paper": {
+              width: RAIL_WIDTH,
+              backgroundColor: "#161920",
+              borderRight: "1px solid rgba(255, 255, 255, 0.08)",
+              padding: "12px 8px",
+            },
+          }}
+        >
+          <div className="px-3 pb-2">
+            <RailGreeting />
+          </div>
+          <DashboardNav activeRoute={activeRoute} onNavigate={handleNavigate} />
+        </Drawer>
 
         <Box
           sx={{
             display: "flex",
             flexDirection: { xs: "column", lg: "row" },
-            minHeight: { xs: "auto", lg: "calc(100vh - 180px)" },
-            gap: { xs: "12px", sm: "24px" },
+            minHeight: { xs: "auto", lg: "calc(100vh - 130px)" },
+            gap: { xs: "8px", lg: "16px" },
           }}
         >
-          {/* Mobile Dropdown Menu */}
-          <Box
-            className="lg:hidden"
-            sx={{
-              width: "100%",
-              flexShrink: 0,
-            }}
-          >
-            <FormControl fullWidth>
-              <Select
-                value={getCurrentRoute()}
-                onChange={handleDropdownChange}
-                sx={{
-                  backgroundColor: "rgba(255, 255, 255, 0.05)",
-                  color: "white",
-                  borderRadius: "8px",
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "rgba(255, 255, 255, 0.1)",
-                  },
-                  "&:hover .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "rgba(255, 255, 255, 0.2)",
-                  },
-                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "rgba(255, 255, 255, 0.3)",
-                  },
-                  "& .MuiSvgIcon-root": {
-                    color: "white",
-                  },
-                }}
-                MenuProps={{
-                  PaperProps: {
-                    sx: {
-                      backgroundColor: "#1f2937",
-                      color: "white",
-                      "& .MuiMenuItem-root": {
-                        "&:hover": {
-                          backgroundColor: "rgba(255, 255, 255, 0.1)",
-                        },
-                        "&.Mui-selected": {
-                          backgroundColor: "rgba(255, 255, 255, 0.15)",
-                          "&:hover": {
-                            backgroundColor: "rgba(255, 255, 255, 0.2)",
-                          },
-                        },
-                      },
-                    },
-                  },
-                }}
-              >
-                {menuItems.map((item) => (
-                  <MenuItem key={item.route} value={item.route}>
-                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                      <Box sx={{ color: item.color, display: "flex", alignItems: "center" }}>
-                        {item.icon}
-                      </Box>
-                      <span>{item.text}</span>
-                    </Box>
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Box>
-
-          {/* Desktop Vertical Menu */}
+          {/* Desktop nav rail */}
           <Box
             className="hidden lg:block"
             sx={{
-              width: { lg: "264px" },
+              width: { lg: `${railWidth}px` },
               flexShrink: 0,
+              transition: "width 0.2s ease",
             }}
           >
-            <Drawer
-              variant="permanent"
-              sx={{
-                "& .MuiDrawer-paper": {
-                  width: "100%",
-                  border: "none",
-                  backgroundColor: "transparent",
-                  position: "relative",
-                  height: "auto",
-                  top: 0,
-                  zIndex: 1,
-                },
-              }}
+            {/* Greeting and the collapse toggle share one row; collapsed, only
+                the toggle remains. */}
+            <div
+              className={`flex items-center gap-2 pb-2 pt-1 ${
+                railCollapsed ? "justify-center" : "justify-between px-3"
+              }`}
             >
-              <List className="space-y-2">
-                {menuItems.map((item) => (
-                  <ListItem
-                    key={item.route}
-                    disablePadding
-                    className="text-white"
-                  >
-                    <ListItemButton
-                      onClick={() => navigate(item.route)}
-                      selected={location.pathname.includes(item.route)}
-                      sx={{
-                        borderRadius: "8px",
-                        transition: "all 0.2s ease",
-                        backgroundColor: location.pathname.includes(item.route)
-                          ? "rgba(255, 255, 255, 0.08)"
-                          : "transparent",
-                        "&:hover": {
-                          backgroundColor: "rgba(255, 255, 255, 0.05)",
-                        },
-                        "&.Mui-selected": {
-                          borderLeft: "4px solid " + item.color,
-                        },
-                        padding: "12px 16px",
-                      }}
-                    >
-                      <ListItemIcon
-                        sx={{
-                          minWidth: "36px",
-                          color: item.color,
-                          fontSize: "1.25rem",
-                        }}
-                      >
-                        {item.icon}
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={item.text}
-                        primaryTypographyProps={{
-                          fontSize: "1rem",
-                          fontWeight: location.pathname.includes(item.route)
-                            ? 600
-                            : 500,
-                        }}
-                      />
-                    </ListItemButton>
-                  </ListItem>
-                ))}
-              </List>
-            </Drawer>
+              {!railCollapsed && <RailGreeting />}
+              <Tooltip
+                title={railCollapsed ? "Expand menu" : "Collapse menu"}
+                placement="right"
+                arrow
+              >
+                <button
+                  type="button"
+                  onClick={toggleRail}
+                  aria-label={railCollapsed ? "Expand menu" : "Collapse menu"}
+                  aria-expanded={!railCollapsed}
+                  className="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-white/5 hover:text-white"
+                >
+                  {railCollapsed ? (
+                    <PanelLeftOpen className="h-5 w-5" />
+                  ) : (
+                    <PanelLeftClose className="h-5 w-5" />
+                  )}
+                </button>
+              </Tooltip>
+            </div>
+
+            <DashboardNav
+              activeRoute={activeRoute}
+              onNavigate={handleNavigate}
+              collapsed={railCollapsed}
+            />
           </Box>
 
           {/* Main Content */}
@@ -252,13 +326,12 @@ export default function Home() {
             component="main"
             sx={{
               flexGrow: 1,
-              px: { xs: 0, sm: 1 },
-              maxHeight: { xs: "none", lg: "calc(100vh - 180px)" },
+              minWidth: 0,
+              pl: { xs: 0, lg: 1.5 },
+              maxHeight: { xs: "none", lg: "calc(100vh - 130px)" },
               overflowY: { xs: "visible", lg: "auto" },
               scrollbarWidth: "none",
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
+              "&::-webkit-scrollbar": { display: "none" },
               transition: "all 0.3s ease",
               borderLeft: { lg: "2px solid #1f2937" },
             }}
diff --git a/frontend/src/page/ReceivedInvoice.jsx b/frontend/src/page/ReceivedInvoice.jsx
index 09f2da81..89863bbe 100644
--- a/frontend/src/page/ReceivedInvoice.jsx
+++ b/frontend/src/page/ReceivedInvoice.jsx
@@ -62,6 +62,8 @@ import ErrorIcon from "@mui/icons-material/Error";
 import WarningIcon from "@mui/icons-material/Warning";
 import { useTokenList } from "@/hooks/useTokenList";
 import WalletConnectionAlert from "@/components/WalletConnectionAlert";
+import { PAGE_CONTAINER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const columns = [
   { id: "select", label: "", minWidth: 50 },
@@ -1045,8 +1047,8 @@ function ReceivedInvoice() {
           onDismiss={() => setShowWalletAlert(false)}
         />
       </div>
-      <div className=" md:p-6 ">
-        <div className="max-w-8xl mx-auto">
+      <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
+        <div className="w-full">
           <div className="flex justify-between items-center mb-2">
             <div>
               <h2 className="text-2xl font-bold text-white">
diff --git a/frontend/src/page/SentInvoice.jsx b/frontend/src/page/SentInvoice.jsx
index cdd31134..83a9a1dd 100644
--- a/frontend/src/page/SentInvoice.jsx
+++ b/frontend/src/page/SentInvoice.jsx
@@ -56,6 +56,8 @@ import WarningIcon from "@mui/icons-material/Warning";
 import CurrencyExchangeIcon from "@mui/icons-material/CurrencyExchange";
 import { useTokenList } from "@/hooks/useTokenList";
 import WalletConnectionAlert from "@/components/WalletConnectionAlert";
+import { PAGE_CONTAINER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
 const columns = [
   { id: "fname", label: "Client", minWidth: 120 },
@@ -600,8 +602,8 @@ function SentInvoice() {
           onDismiss={() => setShowWalletAlert(false)}
         />
       </div>
-      <div className=" md:p-6 ">
-        <div className="max-w-8xl mx-auto">
+      <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
+        <div className="w-full">
           <div className="flex justify-between items-center mb-2">
             <div>
               <h2 className="text-2xl font-bold text-white">Sent Invoices</h2>
diff --git a/frontend/src/page/Settings.jsx b/frontend/src/page/Settings.jsx
index 26d04064..43d333b7 100644
--- a/frontend/src/page/Settings.jsx
+++ b/frontend/src/page/Settings.jsx
@@ -1,42 +1,32 @@
 import ProductCatalogImport from "../components/ProductCatalogImport";
 import UserProfileSettings from "../components/UserProfileSettings";
+import { PAGE_CONTAINER, PAGE_HEADER } from "@/utils/layout";
+import { cn } from "@/lib/utils";
 
+/**
+ * Each card carries its own heading, so the page does not repeat the same
+ * title immediately above the card that already states it.
+ */
 const SETTINGS_SECTIONS = [
-  {
-    id: "your-information",
-    title: "Your Information",
-    description:
-      "The sender details applied to every invoice you create. Saved on this device only.",
-    Content: UserProfileSettings,
-  },
-  {
-    id: "product-catalog",
-    title: "Product Catalog",
-    description:
-      "Manage your products for quick access when creating invoices.",
-    Content: ProductCatalogImport,
-  },
+  { id: "your-information", Content: UserProfileSettings },
+  { id: "product-catalog", Content: ProductCatalogImport },
 ];
 
 function Settings() {
   return (
-    <div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6 py-6">
-      <div className="mb-6 sm:mb-8">
-        <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
+    <div className={cn(PAGE_CONTAINER, "py-3 sm:py-4")}>
+      <div className={PAGE_HEADER}>
+        <h2 className="text-2xl sm:text-3xl font-bold text-white mb-1">
           Settings
         </h2>
         <p className="text-sm sm:text-base text-gray-300">
-          Manage your account settings and product catalog
+          Manage your sender details and product catalog
         </p>
       </div>
 
-      <div className="space-y-6 sm:space-y-8">
-        {SETTINGS_SECTIONS.map(({ id, title, description, Content }) => (
+      <div className="space-y-4 sm:space-y-6">
+        {SETTINGS_SECTIONS.map(({ id, Content }) => (
           <section key={id} id={id} className="scroll-mt-24">
-            <div className="mb-4">
-              <h3 className="text-xl font-semibold text-white">{title}</h3>
-              <p className="text-sm text-gray-400">{description}</p>
-            </div>
             <Content />
           </section>
         ))}
diff --git a/frontend/src/page/Treasure.jsx b/frontend/src/page/Treasure.jsx
index c83301a1..c7c5b857 100644
--- a/frontend/src/page/Treasure.jsx
+++ b/frontend/src/page/Treasure.jsx
@@ -16,6 +16,8 @@ import {
 } from "lucide-react";
 import { motion } from "framer-motion";
 import toast from "react-hot-toast";
+import { cn } from "@/lib/utils";
+import { SHELL } from "@/utils/layout";
 
 const Treasure = () => {
   const [treasureAmount, setTreasureAmount] = useState(0);
@@ -174,7 +176,7 @@ const Treasure = () => {
   };
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div className={cn(SHELL, "py-10")}>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
diff --git a/frontend/src/utils/layout.js b/frontend/src/utils/layout.js
new file mode 100644
index 00000000..d99f6d22
--- /dev/null
+++ b/frontend/src/utils/layout.js
@@ -0,0 +1,31 @@
+/**
+ * Shared spacing for the app shell.
+ *
+ * One gutter for the navbar and every page, so the logo, the nav links and
+ * the page content all line up on the same left and right edges. Pages add no
+ * max-width of their own — an inner `max-w-*` on top of the dashboard sidebar
+ * left a large dead gutter on one side only.
+ */
+
+/**
+ * Gutter shared by the navbar and all page shells.
+ *
+ * No max-width: a cap wide enough to matter still left a visible band of dead
+ * space down both sides. What made the layout read as stretched was blocks not
+ * sharing a right edge, not the page being wide — so the blocks align instead
+ * and the shell simply uses the screen.
+ */
+export const SHELL = "w-full px-3 sm:px-4 lg:px-6";
+
+/** Outer wrapper for a page rendered inside the dashboard outlet. */
+export const PAGE_CONTAINER = "w-full px-0 sm:px-1";
+
+/** Vertical gap between the major sections of a page. */
+export const SECTION_GAP = "mb-4 sm:mb-5";
+
+/** Standard white content card. */
+export const CARD =
+  "bg-white rounded-lg border border-gray-200 shadow-sm p-3 sm:p-4 overflow-hidden";
+
+/** Page title block: heading plus optional supporting line. */
+export const PAGE_HEADER = "mb-3 sm:mb-4";