diff --git a/app/ui/src/app/page.tsx b/app/ui/src/app/page.tsx
index fabcf972..3b645221 100644
--- a/app/ui/src/app/page.tsx
+++ b/app/ui/src/app/page.tsx
@@ -67,10 +67,15 @@ export default function LandingPage() {
           text-align: center;
           max-width: 500px;
           line-height: 1.65;
+          min-height: 46px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
 
         .landing-cards {
           display: flex;
+          flex-wrap: wrap;
           width: 100%;
           max-width: 640px;
           background: #ffffff;
@@ -82,17 +87,15 @@ export default function LandingPage() {
 
         .landing-card {
           flex: 1;
+          min-width: 220px;
           padding: 32px 28px 28px;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 10px;
-          transition: background 0.15s;
           position: relative;
         }
 
-        .landing-card:hover { background: #f9f9f8; }
-
         .landing-card + .landing-card::before {
           content: '';
           position: absolute;
@@ -140,7 +143,7 @@ export default function LandingPage() {
           transition: background 0.15s;
         }
 
-        .landing-card:hover .landing-card-cta { background: #3d7a6a; }
+        .landing-card-cta:hover { background: #3d7a6a; }
 
         .landing-card-cta:focus-visible {
           outline: 2px solid #4a8c7a;
@@ -154,6 +157,25 @@ export default function LandingPage() {
           position: relative;
           z-index: 1;
         }
+
+        @media (max-width: 520px) {
+          .landing-cards {
+            flex-wrap: wrap;
+          }
+
+          .landing-card {
+            min-width: 100%;
+          }
+
+          .landing-card + .landing-card::before {
+            left: 24px;
+            right: 24px;
+            top: 0;
+            bottom: auto;
+            width: auto;
+            height: 1px;
+          }
+        }
       `}</style>
 
       <div className="landing-root">
@@ -179,6 +201,7 @@ export default function LandingPage() {
                 height={64}
                 className="landing-card-icon"
                 aria-hidden="true"
+                priority
               />
               <p className="landing-card-title">Route manager</p>
               <p className="landing-card-desc">
@@ -202,6 +225,7 @@ export default function LandingPage() {
                 height={64}
                 className="landing-card-icon"
                 aria-hidden="true"
+                priority
               />
               <p className="landing-card-title">Driver</p>
               <p className="landing-card-desc">
diff --git a/app/ui/src/app/upload-route/page.tsx b/app/ui/src/app/upload-route/page.tsx
index 42ae6195..42adc258 100644
--- a/app/ui/src/app/upload-route/page.tsx
+++ b/app/ui/src/app/upload-route/page.tsx
@@ -369,6 +369,7 @@ export default function UploadRoutePage() {
                 height="16"
                 viewBox="0 0 24 24"
                 fill="none"
+                aria-hidden="true"
                 style={{ color: "#4a8c7a", flexShrink: 0 }}
               >
                 <path
diff --git a/app/ui/src/app/welcome/page.tsx b/app/ui/src/app/welcome/page.tsx
index 274ea070..b04ab16c 100644
--- a/app/ui/src/app/welcome/page.tsx
+++ b/app/ui/src/app/welcome/page.tsx
@@ -78,6 +78,7 @@ export default function WelcomePage() {
 
         .welcome-cards {
           display: flex;
+          flex-wrap: wrap;
           width: 100%;
           max-width: 640px;
           background: #ffffff;
@@ -89,17 +90,15 @@ export default function WelcomePage() {
 
         .welcome-card {
           flex: 1;
+          min-width: 220px;
           padding: 32px 28px 28px;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 10px;
-          transition: background 0.15s;
           position: relative;
         }
 
-        .welcome-card:hover { background: #f9f9f8; }
-
         .welcome-card + .welcome-card::before {
           content: '';
           position: absolute;
@@ -147,7 +146,7 @@ export default function WelcomePage() {
           transition: background 0.15s;
         }
 
-        .welcome-card:hover .welcome-card-cta { background: #3d7a6a; }
+        .welcome-card-cta:hover { background: #3d7a6a; }
 
         .welcome-card-cta:focus-visible {
           outline: 2px solid #4a8c7a;
@@ -180,6 +179,39 @@ export default function WelcomePage() {
           position: relative;
           z-index: 1;
         }
+
+        @media (max-width: 520px) {
+          .welcome-cards {
+            flex-wrap: wrap;
+          }
+
+          .welcome-card {
+            min-width: 100%;
+          }
+
+          .welcome-card + .welcome-card::before {
+            left: 24px;
+            right: 24px;
+            top: 0;
+            bottom: auto;
+            width: auto;
+            height: 1px;
+          }
+        }
+
+        @media (max-height: 640px) {
+          .welcome-content {
+            justify-content: flex-start;
+            padding-top: 32px;
+            padding-bottom: 72px;
+          }
+
+          .welcome-back {
+            position: static;
+            transform: none;
+            margin-top: 24px;
+          }
+        }
       `}</style>
 
       <div className="welcome-root">
@@ -201,6 +233,7 @@ export default function WelcomePage() {
                 height={64}
                 className="welcome-card-icon"
                 aria-hidden="true"
+                priority
               />
               <p className="welcome-card-title">Resume session</p>
               <p className="welcome-card-desc">
@@ -224,6 +257,7 @@ export default function WelcomePage() {
                 height={64}
                 className="welcome-card-icon"
                 aria-hidden="true"
+                priority
               />
               <p className="welcome-card-title">Start new session</p>
               <p className="welcome-card-desc">