diff --git a/src/app/memories/page.tsx b/src/app/memories/page.tsx
index f2ca134..34b682e 100644
--- a/src/app/memories/page.tsx
+++ b/src/app/memories/page.tsx
@@ -225,7 +225,7 @@ export default function MemoriesPage() {
       </form>
 
       {/* Folder pills */}
-      <div className="px-4 py-2 flex gap-2 overflow-x-auto no-scrollbar">
+      <div className="px-4 py-2 flex gap-2 overflow-x-auto scrollbar-hide">
         {allFolders.map(folder => {
           const count = folder.id === "" ? memories.length : (folderCounts[folder.id] || 0);
           const isActive = activeFolder === folder.id;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 291b4ca..42056a3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -262,11 +262,12 @@ export default function HomePage() {
             );
           })()}
         </div>
-        <div className="grid grid-cols-4 gap-2">
-          <button onClick={() => setModalType("feed")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
-          <button onClick={() => setModalType("sleep")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
-          <button onClick={() => setModalType("diaper")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">🚼</span><span className="text-sm mt-1">Diaper</span></button>
-          <Link href="/medical" className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
+        <div className="flex gap-3 overflow-x-auto scrollbar-hide pb-1 -mx-4 px-4">
+          <button onClick={() => setModalType("feed")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
+          <button onClick={() => setModalType("sleep")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
+          <button onClick={() => setModalType("diaper")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">🚼</span><span className="text-sm mt-1">Diaper</span></button>
+          <Link href="/medical" className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
+          <Link href="/wardrobe/add" className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">👗</span><span className="text-sm mt-1">Wardrobe</span></Link>
         </div>
       </div>
 
diff --git a/src/app/wardrobe/outfit/page.tsx b/src/app/wardrobe/outfit/page.tsx
index 26b37b4..453ebd0 100644
--- a/src/app/wardrobe/outfit/page.tsx
+++ b/src/app/wardrobe/outfit/page.tsx
@@ -100,7 +100,7 @@ export default function OutfitSuggestionPage() {
       )}
 
       {/* Occasion filter */}
-      <div className="px-4 mb-4 flex gap-2 overflow-x-auto no-scrollbar">
+      <div className="px-4 mb-4 flex gap-2 overflow-x-auto scrollbar-hide">
         {OCCASION_OPTS.map(o => (
           <button
             key={o || "all"}
diff --git a/src/app/wardrobe/page.tsx b/src/app/wardrobe/page.tsx
index a2be4cf..3beee49 100644
--- a/src/app/wardrobe/page.tsx
+++ b/src/app/wardrobe/page.tsx
@@ -121,7 +121,7 @@ export default function WardrobePage() {
       {/* Filters */}
       <div className="px-4 space-y-2 mb-4">
         {/* Status row */}
-        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
           {STATUS_OPTS.map(s => (
             <button
               key={s.value}
@@ -138,7 +138,7 @@ export default function WardrobePage() {
         </div>
 
         {/* Category row */}
-        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
           <button
             onClick={() => setFilterCategory("")}
             className={`px-3 py-1 rounded-full text-sm whitespace-nowrap flex-shrink-0 transition-all ${
@@ -161,7 +161,7 @@ export default function WardrobePage() {
         </div>
 
         {/* Size row */}
-        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
+        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
           <button
             onClick={() => setFilterSize("")}
             className={`px-3 py-1 rounded-full text-xs whitespace-nowrap flex-shrink-0 transition-all ${
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index 3e35e90..de96cc4 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export function TabBar({ tabs, value, onChange, danger }: Props) {
   return (
-    <div className="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
+    <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
       {tabs.map(tab => {
         const isActive = tab.value === value;
         const isDanger = danger && tab.value === danger;