diff --git a/src/ahc/apps/homepage/templates/homepage/homepage.html b/src/ahc/apps/homepage/templates/homepage/homepage.html
index 8250891..865e0b0 100644
--- a/src/ahc/apps/homepage/templates/homepage/homepage.html
+++ b/src/ahc/apps/homepage/templates/homepage/homepage.html
@@ -4,13 +4,13 @@
 
 {% block content %}
 
-    <div class="container welcome-heading">
+    <div class="welcome-heading">
         <h2>Welcome to your pet organizer</h2>
     </div>
 
     {% if user.is_authenticated %}
 
-        <div class="container">
+        <div>
             <h4>Operations:</h4>
 
             <div class="ops-row">
@@ -21,7 +21,7 @@ <h4>Operations:</h4>
         </div>
 
         {% if pinned_animals %}
-            <div class="container homepage-section">
+            <div class="homepage-section">
                 <h4>Pinned up:</h4>
 
                 <div class="animals-grid">
@@ -34,7 +34,7 @@ <h4>Pinned up:</h4>
         {% endif %}
 
         {% if recent_animals %}
-            <div class="container homepage-section">
+            <div class="homepage-section">
                 <h4>Recent added:</h4>
 
                 <div class="animals-grid">
diff --git a/static/css/custom_pico.css b/static/css/custom_pico.css
index 8c9e9f4..d172c0d 100644
--- a/static/css/custom_pico.css
+++ b/static/css/custom_pico.css
@@ -44,6 +44,18 @@ main {
   padding: 0;
   list-style: none;
   overflow-x: auto;
+  scroll-snap-type: x proximity;
+  /* Edge-fade affordance: "local" gradients mask content near each edge, "scroll" gradients show through only while there's more to scroll — no JS. */
+  background:
+    linear-gradient(to right, var(--pico-background-color) 0%, transparent 100%) left / 28px 100% no-repeat local,
+    linear-gradient(to left, var(--pico-background-color) 0%, transparent 100%) right / 28px 100% no-repeat local,
+    linear-gradient(to right, var(--pico-muted-border-color), transparent 100%) left / 14px 100% no-repeat scroll,
+    linear-gradient(to left, var(--pico-muted-border-color), transparent 100%) right / 14px 100% no-repeat scroll;
+  background-color: var(--pico-background-color);
+}
+
+.tab-nav ul li {
+  scroll-snap-align: start;
 }
 
 .tab-nav ul li a {
@@ -209,6 +221,7 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 0.875rem;
 }
 
+/* max-width: 767px deliberately mirrors Pico's own 768px tablet tier (767 = 768 - 1); timeline.css's unrelated 640px breakpoint is a separate, out-of-scope legacy component. */
 @media (max-width: 767px) {
   .site-header {
     overflow: visible;
@@ -242,8 +255,10 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .animal-profile-hero__img img {
-  width: 180px;
-  height: 180px;
+  /* clamp() keeps 180px as the desktop ceiling (no visual growth) while shrinking to 96px on narrow viewports. */
+  width: clamp(96px, 22vw, 180px);
+  aspect-ratio: 1 / 1;
+  height: auto;
   object-fit: cover;
   border-radius: 8px;
   display: block;