diff --git a/.commandcode/taste/taste/taste.md b/.commandcode/taste/taste/taste.md
index 272ba98..a98342a 100644
--- a/.commandcode/taste/taste/taste.md
+++ b/.commandcode/taste/taste/taste.md
@@ -12,6 +12,7 @@
 - Prefers embedding related data into existing cache files over creating or calling separate API endpoints. Confidence: 0.9
 - Prefers using icons from Hicons (rather than custom/hand-authored SVGs or other icon libraries). Confidence: 0.9
 - When a feature or page is repurposed, wants file names, route names, and code references renamed to match the new purpose (not just UI content/icons). Confidence: 0.8
+- When replicating a UI pattern (e.g., home page tabs) onto a different page/context, adapt the copied colors to that page's own brand accent (e.g., the flash page's tabs use the flash pink `text-flash-600`/`bg-flash-500` instead of the home page's brand blue) while keeping the layout and styling identical. Confidence: 0.6
 - Wants analysis findings and plans persisted in a markdown file before any implementation begins, with explicit confirmation that implementation is paused until instructed. Confidence: 0.8
 - When changing cache or storage keys, wants both the read and write paths verified to use the same single source of truth (e.g., a shared `CACHE_STORAGE_KEYS` constant). Confidence: 0.8
 - In React Native with react-native-paper's `Text` component (wrapped as `MyText`), prefers avoiding mixed string/expression children; use template literals to produce a single string child to prevent "Text strings must be rendered within a <Text> component" warnings. Confidence: 0.8
@@ -23,6 +24,8 @@
 - Dislikes nested headers in mobile/drawer navigation; prefers a single, shared header (e.g., the drawer header) and relies on device back buttons or gestures for returning to previous screens. Confidence: 0.9
 - After reviewing a presented plan, prefers brief, action-oriented approval (e.g., "nice. go ahead", "go ahead and implement") before implementation proceeds, expecting the agent to autonomously execute the already-presented plan. Confidence: 0.85
 - Wants feature parity maintained between the web-ui and user-ui apps (port logic/data patterns, rebuild UI per platform). Confidence: 0.95
+- Wants the web-ui home page section/component order to match the reference user-ui home page exactly (e.g., "on the home page have the order same as that of @apps/user-ui/.../home/index.tsx"), including when deciding placement of sections like Explore, Stores, Slots, and All Products. Confidence: 0.7
+- Wants brand/logo spots to use the single real brand logo asset (shared across apps, e.g., the Freshyo splash logo) displayed as an image, not a generic/decorative icon (e.g., a "meat piece" Meat/Beef icon) — web-ui should be on par with user-ui and show the same logo; applies to favicon, PWA icons, and every in-UI branding spot (sidebar, topbar, login, home banner). Confidence: 0.85
 - Prefers dead-code audits to be documented in a markdown file. Confidence: 0.8
 - Prefers detailed technical documentation of system architecture, data models, flows, and integrations in markdown format. Confidence: 0.8
 - Wants edge cases explicitly enumerated when documenting or analyzing existing code/systems. Confidence: 0.8
@@ -32,9 +35,13 @@
 - Prefers handling special-case logic locally in the relevant component/file rather than globally or via parallel flows. Confidence: 0.85
 - Prefers lazy/virtualized list rendering (e.g., FlatList) for long lists, rather than rendering all items at once. Confidence: 0.8
 - Wants true responsive web design for desktop, not just color/theme changes or mobile layouts stretched to desktop. Confidence: 0.95
+- Specifies layout proportions in relative terms rather than fixed pixel sizes — e.g., the left sidebar/menu should be 20% of the viewport width at most ("the left menu should be 20% of width at max"), implemented as a viewport-relative track (20vw) rather than a hard-coded px column. Confidence: 0.7
+- On the web-ui, wants the topbar (logo/search/cart) hidden on mobile screens and only rendered from the tablet breakpoint (`md`, 768px) upward, since mobile gets its own bottom navigation; when hiding it, the surrounding grid layout must be cleaned up so no empty reserved space remains. Confidence: 0.8
+- The search bar must be independent of the topbar and always visible on every screen size; decoupling it from the topbar's tablet-only visibility — hiding the topbar must not hide search ("the search bar... should be independent of the top bar. I want it visible always"). When a page already has its own search UI (e.g., the search route's sticky header), the global always-visible search row should be suppressed there to avoid stacked duplicate bars. Confidence: 0.8
+- Wants the search bar (and other persistent page-level UI like the topbar) to be sticky, pinning to the top of the viewport while the page scrolls ("I see it's not sticky. I want it sticky"); to make sticky actually work, the header group should live in a full-height flex column rather than a bounded grid row that scrolls away. Confidence: 0.9
 - Does not want color/theme changes during redesigns — keep colors and theme consistent with the existing apps (e.g., @apps/user-ui): reuse the shared theme tokens (Untitled UI blue brand scale, flash pink accent, gray neutrals) rather than introducing new brand palettes; approval of a redesign's layout/composition does not imply approval of color or theme changes. Confidence: 0.95
 roducing new brand palettes; approval of a redesign's layout/composition does not imply approval of color or theme changes. Confidence: 0.95
-er-ui/app/(drawer)/(tabs)/home/index.tsx, I want similar here") and expects the agent to mirror that pattern exactly, including details like item counts and container styling. Confidence: 0.9
+er-ui/app/(drawer)/(tabs)/home/index.tsx, I want similar here") and expects the agent to mirror that pattern exactly, including details like item counts and container styling. Confidence: 0.95
 - Combo-only SKUs (`isComboOnly` on `product_skus`) must be hidden from all user-facing product surfaces — home page, offers page, and any other list where they could appear ("Don't display them. We're hiding them from home page too"). Confidence: 0.75
 - Expects a filter/business rule already applied on one page to be applied consistently on every other page showing the same data, not just the page he happened to notice ("we need to hide them here too"). Confidence: 0.85
 - Debugs by adding temporary console.log debug prints to inspect runtime data (e.g., `console.log({skusData})` to check a query result) and reports the observed values to the agent as ground truth (e.g., "the database is same. I've checked"). Confidence: 0.75
@@ -43,6 +50,7 @@ er-ui/app/(drawer)/(tabs)/home/index.tsx, I want similar here") and expects the
 - Prefers monetary amounts (totals, discounts, savings) displayed as whole numbers only — explicitly truncates decimals (e.g., `Math.trunc()`) rather than rounding, keeping internal calculations at full precision and truncating only at the render site ("Just truncate and show only the whole number"). Confidence: 0.7
 - When displaying savings/benefit lines, hides the row entirely unless the amount exceeds a meaningful threshold (e.g., "show only if the savings is greater than rs 1") so the truncated whole-number display never shows a negligible ₹0/₹1 saving. Confidence: 0.55
 - Prefers out-of-stock items pushed to the end of product list sections (e.g., home page tab sections) while preserving the existing/admin-curated order — a stable partition (in-stock first, out-of-stock last, relative order kept within each group), reusing the same out-of-stock detection rule used elsewhere on the page ("preserve the order but push the out of stock items to last"). Confidence: 0.7
+- Wants product grid sections (e.g., Explore Products, All Available Products on the home page) to render at least 3 columns even on the smallest screens, scaling up on larger breakpoints — prefers the minimum column count on mobile to not be reduced to 2. Confidence: 0.7
 - Tracks previously discussed/planned fixes and follows up to verify they were actually applied (e.g., "did we take care of the math.trunc"); expects the agent to check the current state of the code and apply any outstanding planned changes rather than assume they were completed. Confidence: 0.8
 - Prevents contradictory/invalid states in admin forms by hiding the inapplicable control entirely — including its label/text row — rather than leaving it visible but disabled (e.g., the entire "Combo Only SKU" checkbox row is hidden when the SKU itself is a combo — has combo items — not just disabled). Confidence: 0.6
 - Wants savings figures kept consistent across all order surfaces: a savings concept shown in the cart/checkout bill (market price − offered price) must also be reflected in the order confirmation summary ("you saved n on this order"), aggregating all savings sources (coupon discount, market-price savings, free delivery) rather than only the coupon/discount component. Confidence: 0.85
@@ -50,6 +58,22 @@ er-ui/app/(drawer)/(tabs)/home/index.tsx, I want similar here") and expects the
 - When a button/feature is broken on one page but works on a sibling page (e.g., "Edit Notes" in the order-list three-dot menu vs. the order detail page), expects it fixed to behave like the working page — including calling the proper API with the correct parameter types (numeric order id matching the backend's zod schema, not a stringified id) rather than a no-op or wrong call. Confidence: 0.7
 - Reports UI bugs by pointing at the specific file and describing the intended action plus the visible symptom (e.g., "submit not happening"), often with a hypothesis about the cause ("maybe we're not fulfilling conditions to enable"); expects the agent to trace the validation/submit path and find the root cause rather than just making the UI appear to work. Confidence: 0.6
 - Expects form validation and submit-enable conditions to match the current UI mode: fields hidden by a mode toggle (e.g., the single coupon-code field when "reserved coupon" is selected) must not be required, and discount-type toggles should not pre-fill placeholder values (like 0) that fail the `> 0` validation — hidden/placeholder state must never block submission. Confidence: 0.55
+- On mobile screens, prefers abbreviated button labels to conserve horizontal space — e.g., the add-to-cart button shows just the cart icon + "Add" on mobile and the full "Add to Cart" label from the `md` breakpoint up ("if the screen is mobile one just show cart symbol and Add instead of Add to cart"), implemented with responsive `md:hidden` / `hidden md:inline` spans. Confidence: 0.8
+- Expects the UI to reflect state changes immediately after an action, without a manual page refresh — e.g., items added to the cart must show up in the cart/badge right away; reports staleness bugs as "added items are not visible unless page is refreshed. They are added but not shown in cart," distinguishing that data was persisted (localStorage) but the UI didn't update. Confidence: 0.7
+- Wants the same UI component variant used consistently across every section/page in the app: when the user designates one section as having the "correct" version of a component, that exact section is the reference and its variant must be replicated everywhere else. Confirmed by an explicit correction: the Explore tabs section's mini floating cart icon (`miniView={true}`) was the correct one — "what was first present in tabs section, should've been replicated elsewhere" — i.e., replicated to All Products, search results, offers, and store detail, not the other way around. He expects the agent to follow the stated direction precisely and will correct a swapped interpretation. Confidence: 0.9
+- When the user asks for "similar tabs" on a page (e.g., the home page's category tabs on the 1-hr flash page), they mean the tabs model should REPLACE the page's existing filter/navigation mechanism — e.g., the store selector sidebar — entirely, not be layered on top of it ("I meant, replace the store selector with tabs model"). The page should use a single, consistent navigation/filter model like the home page, not two stacked filter controls; expects the agent to remove the superseded component and its now-unused imports/state. Confidence: 0.85
+- Dislikes transparent backgrounds on UI controls that overlay content — e.g., the quantity stepper floating over product images must have a solid background (white with a subtle shadow) so it reads clearly over any image, not a transparent one ("the background of the quantifier is transparent. Don't do that."). Confidence: 0.7
+- Modal dialogs (e.g., the add-to-cart dialog) must always layer above persistent fixed UI — the floating cart bar and the bottom navigation — never behind them; states the rule explicitly: the bar "shouldn't have more z index than the dialog," on both mobile and desktop. On mobile, interactive dialog content (the Add/Update button) must also clear the bottom nav (higher z-index than the nav's z-50 plus mobile-only bottom padding) while desktop behavior stays unchanged ("Move it a little top in case of mobile view"). Confidence: 0.75
+- In any cart surface, decrementing a quantity stepper down to 0 must remove the item from the cart entirely (make it disappear), never leave it persisted at quantity 0 — expected both on the cart page and in the cart slide-over opened from the floating cart bar, and the user will explicitly correct which surface he meant if the fix targets the wrong one ("I'm unable to click - to make it 0 and disappear" / "I clicked the cart bar to open cart view. There I'm not able to make '0' and remove"). Confidence: 0.7
+- In Tailwind v4 apps, arbitrary-value classes (e.g., `z-[60]`) authored in external/shared packages (like `packages/web-components`) can be silently dropped by the content scanner even when sibling classes from the same file compile — so for critical layering/positioning, prefer built-in scale values or an inline `style={{ zIndex: ... }}` and verify the compiled output (CSS/JS bundle) actually contains it rather than trusting the class source. Confidence: 0.7
+- In modal dialogs that contain a list plus a primary action (e.g., the add-to-cart dialog with delivery slots and an Add to Cart button), only the list region should scroll — the header and footer (quantity + action buttons) stay pinned and always visible, so reaching the primary action never requires scrolling ("only the slots should be scrollable... I need to scroll down to see the add to cart button"); implemented as a flex column with a fixed header, a `flex-1 min-h-0 overflow-y-auto` scrollable middle, and a `shrink-0` footer. Confidence: 0.75
+- On narrow/small screens, prefers text to scale DOWN to avoid crowding — prices/amounts and general card text alike: e.g., cart item prices `text-sm` on mobile bumping to `text-base` at the `sm` breakpoint, product card prices `text-base` → `text-lg`, and tightened vertical gaps near the quantity row ("if the width is small, reduce the price size and also the gap below the quantity"). Explicitly generalized to all card text (name, price, unit/quantity) with the direct request "when the screen width is small, reduce the font size too" — implemented as smaller arbitrary sizes (e.g., `text-[13px]`, `text-[15px]`, `text-[11px]`) below the `sm` breakpoint returning to normal sizes at `sm` and up. Explicitly requested and then repeatedly reinforced ("I still see large blue text in price"). Confidence: 0.8
+- When he reports a visual issue persisting ("I still see the same"), he is referring to the same visual pattern (e.g., "large blue text in price" = any `text-brand-600` price across cart pages, product cards) wherever it appears — expects the agent to grep the whole codebase for every occurrence of the matching styling and fix them all, not just the one surface initially identified. Confidence: 0.7
+- When a spacing/visual complaint persists ("I still see the gap below the quantity"), the same issue may live in a different rendering mode of the component than the one already fixed — e.g., product cards in `miniView` where the quantity control overlays the image and the gap comes from the unit-line bottom margin plus the card's bottom padding, not the cart slide-over that was edited first. Expects the agent to re-inspect the actual rendered layout of each variant/mode and tighten spacing everywhere the pattern appears. Confidence: 0.6
+- Prefers vertical tab/sidebar lists for store/category selection on ALL screen sizes — a vertical sidebar layout must not be swapped to a horizontal scrolling chip strip on mobile ("on the flash screen, the store tabs are horizontal, they should have been vertical"); instead keep the vertical list, stacked full-width above the content on small screens and as a sticky rail on desktop. Confidence: 0.7
+- When adopting the tabs model to replace a store filter, the tabs must be driven by the same dimension as the replaced filter — one tab per store, labeled by the store name, with each tab showing only that store's items (per-tab scoped content), not category/product tags. Explicitly corrected after a misinterpretation ("the tab labels should be store names. In every tab we need to show the items of that store"). Confidence: 0.8
+- When replicating a horizontal scrollable tab strip (store/category tabs) from user-ui to web-ui, expects identical interactive behavior, not just styling — the active tab must auto-scroll into view on selection so clicking a right-most tab brings it fully into view (matching user-ui's scroll-to-tab-position behavior, e.g., scroll to `offsetLeft - 16`), and the same auto-scroll must be applied consistently to every page using that tab strip pattern ("the tabs aren't behaving same as user-ui. They aren't auto scrolling when I try to click a right most tab"). Confidence: 0.8
+- For compact product cards (price, strike-through market price, quantity), dictates a specific vertical stacking layout rather than a side-by-side row: show the price first, then the struck market price on the same line, and the quantity on a new line below ("first show the price, then the striked price, in new line show the quantity") — this supersedes earlier attempts to pin the quantity to the right of the same row. Confidence: 0.7
 e changes. Confidence: 0.95
 er-ui/app/(drawer)/(tabs)/home/index.tsx, I want similar here") and expects the agent to mirror that pattern exactly, including details like item counts and container styling. Confidence: 0.9
 als) rather than introducing new brand palettes; approval of a redesign's layout/composition does not imply approval of color or theme changes. Confidence: 0.95
diff --git a/apps/web-ui/public/freshyo-logo.png b/apps/web-ui/public/freshyo-logo.png
new file mode 100644
index 0000000..83f0a8c
Binary files /dev/null and b/apps/web-ui/public/freshyo-logo.png differ
diff --git a/apps/web-ui/public/logo192.png b/apps/web-ui/public/logo192.png
index fc44b0a..c1c782e 100644
Binary files a/apps/web-ui/public/logo192.png and b/apps/web-ui/public/logo192.png differ
diff --git a/apps/web-ui/public/logo512.png b/apps/web-ui/public/logo512.png
index a4e47a6..2053b8b 100644
Binary files a/apps/web-ui/public/logo512.png and b/apps/web-ui/public/logo512.png differ
diff --git a/apps/web-ui/public/manifest.json b/apps/web-ui/public/manifest.json
index 078ef50..a3831d6 100644
--- a/apps/web-ui/public/manifest.json
+++ b/apps/web-ui/public/manifest.json
@@ -1,11 +1,11 @@
 {
-  "short_name": "TanStack App",
-  "name": "Create TanStack App Sample",
+  "short_name": "Freshyo",
+  "name": "Freshyo",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
       "src": "logo192.png",
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#0033CC",
   "background_color": "#ffffff"
 }
diff --git a/apps/web-ui/src/components/AddToCartDialog.tsx b/apps/web-ui/src/components/AddToCartDialog.tsx
index c1de297..af2b292 100644
--- a/apps/web-ui/src/components/AddToCartDialog.tsx
+++ b/apps/web-ui/src/components/AddToCartDialog.tsx
@@ -139,7 +139,7 @@ export default function AddToCartDialog() {
           </button>
         </div>
 
-        <div className="max-h-[40vh] space-y-3 overflow-y-auto mb-4">
+        <div className="max-h-[30vh] space-y-3 overflow-y-auto mb-4">
           {availableSlots.map((slot: any) => (
             <div
               key={slot.id}
diff --git a/apps/web-ui/src/components/AppLayout.tsx b/apps/web-ui/src/components/AppLayout.tsx
index 2e18067..b310dc3 100644
--- a/apps/web-ui/src/components/AppLayout.tsx
+++ b/apps/web-ui/src/components/AppLayout.tsx
@@ -15,6 +15,9 @@ interface AppLayoutProps {
 // Routes where the full shell (sidebar/topbar/bottom nav) should be hidden
 const hideShellRoutes = ['/login', '/register', '/checkout', '/home/checkout', '/flash/checkout']
 
+// Routes that render their own top bar UI — skip the global Topbar there
+const selfTopbarRoutes = ['/home/search']
+
 export function AppLayout({
   children,
   showCartBar = true,
@@ -28,6 +31,10 @@ export function AppLayout({
     hideShell ||
     hideShellRoutes.some((route) => currentPath === route || currentPath.startsWith(`${route}/`))
 
+  const hasOwnTopbar = selfTopbarRoutes.some(
+    (route) => currentPath === route || currentPath.startsWith(`${route}/`)
+  )
+
   // On mobile the cart bar replaces the old floating pill
   const shouldShowCartBar = showCartBar && !shouldHideShell
 
@@ -40,11 +47,13 @@ export function AppLayout({
       {/* Desktop rail */}
       <Sidebar />
 
-      {/* Top bar with search + cart */}
-      <Topbar isFlashDelivery={isFlashDelivery} />
+      <div className="shell-main">
+        {/* Single top bar — logo + search + cart (desktop) / search only (mobile) */}
+        {!hasOwnTopbar && <Topbar isFlashDelivery={isFlashDelivery} />}
 
-      {/* Main content */}
-      <main className="shell-content min-w-0">{children}</main>
+        {/* Main content */}
+        <main className="shell-content min-w-0">{children}</main>
+      </div>
 
       {/* Cart slide-over (desktop) / bottom bar (mobile) */}
       {shouldShowCartBar && <FloatingCartBar isFlashDelivery={isFlashDelivery} />}
diff --git a/apps/web-ui/src/components/Dialog.tsx b/apps/web-ui/src/components/Dialog.tsx
index 207cc45..639487e 100644
--- a/apps/web-ui/src/components/Dialog.tsx
+++ b/apps/web-ui/src/components/Dialog.tsx
@@ -27,7 +27,7 @@ export function Dialog({ open, onClose, children, title }: DialogProps) {
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
diff --git a/apps/web-ui/src/components/FloatingCartBar.tsx b/apps/web-ui/src/components/FloatingCartBar.tsx
index fa18b2c..e7ff4ac 100644
--- a/apps/web-ui/src/components/FloatingCartBar.tsx
+++ b/apps/web-ui/src/components/FloatingCartBar.tsx
@@ -165,20 +165,20 @@ export function FloatingCartBar({ isFlashDelivery = false }: FloatingCartBarProp
                       </p>
                     </div>
                   )}
-                  <div className="mt-1.5 flex items-center justify-between">
+                  <div className="mt-1 flex items-center justify-between gap-2">
                     <MiniQuantifier
                       value={quantities[item.id] || item.quantity}
                       setValue={(value) => {
                         if (value === 0) {
-                          removeFromCart.mutate(item.id)
+                          removeFromCart.mutate(item.productId)
                         } else {
                           setQuantities((prev) => ({ ...prev, [item.id]: value }))
-                          updateCartItem.mutate({ productId: item.id, quantity: value })
+                          updateCartItem.mutate({ productId: item.productId, quantity: value })
                         }
                       }}
                       step={productsById[item.productId]?.incrementStep || 1}
                     />
-                    <p className="text-sm font-bold text-gray-900">
+                    <p className="text-[13px] font-bold text-gray-900 sm:text-sm">
                       ₹{(() => {
                         const product = productsById[item.productId]
                         const basePrice = product?.price ?? 0
diff --git a/apps/web-ui/src/components/ProductCard.tsx b/apps/web-ui/src/components/ProductCard.tsx
index 0e181e8..cffe0eb 100644
--- a/apps/web-ui/src/components/ProductCard.tsx
+++ b/apps/web-ui/src/components/ProductCard.tsx
@@ -104,8 +104,12 @@ export function ProductCard({
       className="group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white transition-all hover:border-brand-300 hover:shadow-md"
       onClick={onPress}
     >
-      {/* Image */}
-      <div className="relative aspect-[4/3] w-full overflow-hidden bg-gray-50">
+      {/* Image — grows to fill card height in miniView so content area stays tight */}
+      <div
+        className={`relative w-full overflow-hidden bg-gray-50 ${
+          miniView ? 'min-h-[110px] flex-1' : 'aspect-[4/3] shrink-0'
+        }`}
+      >
         {imageUri && !imageError ? (
           <img
             src={imageUri}
@@ -166,19 +170,19 @@ export function ProductCard({
       </div>
 
       {/* Content */}
-      <div className="flex flex-1 flex-col px-4 pb-4 pt-3">
-        <p className="mb-1.5 text-sm font-bold leading-snug text-gray-900 line-clamp-2">
+      <div className="flex flex-1 flex-col px-4 pb-3 pt-3">
+        <p className="mb-1.5 text-[13px] font-bold leading-snug text-gray-900 line-clamp-2 sm:text-sm">
           {item.name}
         </p>
 
         <div className="mb-1 flex items-baseline">
-          <p className="text-lg font-extrabold text-brand-600">₹{item.price}</p>
+          <p className="text-[15px] font-extrabold text-brand-600 sm:text-lg">₹{item.price}</p>
           {discountPercent > 0 && (
-            <p className="ml-2 text-xs text-gray-400 line-through">₹{item.marketPrice}</p>
+            <p className="ml-2 text-[11px] text-gray-400 line-through sm:text-xs">₹{item.marketPrice}</p>
           )}
         </div>
 
-        <p className="mb-3 text-xs font-medium text-gray-500">
+        <p className="mb-1 text-[11px] font-medium text-gray-500 sm:text-xs">
           {formatQuantity(item.productQuantity || 1, item.unitNotation).display}
         </p>
 
@@ -215,7 +219,8 @@ export function ProductCard({
                 }}
               >
                 <ShoppingCart className="h-4 w-4" />
-                Add to Cart
+                <span className="md:hidden">Add</span>
+                <span className="hidden md:inline">Add to Cart</span>
               </button>
             )}
           </div>
diff --git a/apps/web-ui/src/components/shell/Sidebar.tsx b/apps/web-ui/src/components/shell/Sidebar.tsx
index d9f079f..d48109c 100644
--- a/apps/web-ui/src/components/shell/Sidebar.tsx
+++ b/apps/web-ui/src/components/shell/Sidebar.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useLocation, useNavigate } from '@tanstack/react-router'
 import { useAuth } from '../../lib/auth-context'
-import { Home, Store, Zap, Tag, User, LogOut, LogIn, Beef } from 'lucide-react'
+import { Home, Store, Zap, Tag, User, LogOut, LogIn } from 'lucide-react'
 
 interface NavItem {
   path: string
@@ -53,15 +53,19 @@ export function Sidebar() {
     <aside className="shell-sidebar sticky top-0 hidden h-screen flex-col border-r border-gray-200 bg-white md:flex">
       {/* Brand */}
       <div className="flex h-16 items-center gap-2.5 border-b border-gray-100 px-6">
-        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600">
-          <Beef className="h-5 w-5 text-white" />
+        <div className="flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl">
+          <img
+            src="/freshyo-logo.png"
+            alt="Freshyo logo"
+            className="h-full w-full object-cover"
+          />
         </div>
         <div>
           <p className="font-display text-lg font-extrabold leading-none tracking-tight text-gray-900">
             Freshyo
           </p>
           <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-gray-400">
-            Butcher &amp; Grocer
+            Delivering Freshness
           </p>
         </div>
       </div>
diff --git a/apps/web-ui/src/components/shell/Topbar.tsx b/apps/web-ui/src/components/shell/Topbar.tsx
index 7eb6a94..b2bc74c 100644
--- a/apps/web-ui/src/components/shell/Topbar.tsx
+++ b/apps/web-ui/src/components/shell/Topbar.tsx
@@ -2,15 +2,14 @@ import React from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { SearchBar } from 'web-components'
 import { useGetCart } from '../../hooks/cart-query-hooks'
-import { ShoppingCart, Beef } from 'lucide-react'
+import { ShoppingCart } from 'lucide-react'
 
 interface TopbarProps {
   isFlashDelivery?: boolean
   onCartClick?: () => void
-  onSearchClick?: () => void
 }
 
-export function Topbar({ isFlashDelivery = false, onCartClick, onSearchClick }: TopbarProps) {
+export function Topbar({ isFlashDelivery = false, onCartClick }: TopbarProps) {
   const navigate = useNavigate()
   const cartType = isFlashDelivery ? 'flash' : 'regular'
   const { data: cartData } = useGetCart(cartType)
@@ -25,36 +24,35 @@ export function Topbar({ isFlashDelivery = false, onCartClick, onSearchClick }:
   }
 
   const handleSearchClick = () => {
-    if (onSearchClick) {
-      onSearchClick()
-      return
-    }
     navigate({ to: '/home/search' as any })
   }
 
   return (
     <header className="shell-topbar sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur-sm">
-      {/* Row 1 — brand + cart (mobile) / search + cart (desktop) */}
       <div className="flex h-16 items-center gap-3 px-4 md:px-6">
-        {/* Brand — always visible, compact on mobile */}
-        <div className="flex shrink-0 items-center gap-2">
-          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-600 md:h-8 md:w-8">
-            <Beef className="h-5 w-5 text-white md:h-4 md:w-4" />
+        {/* Brand — tablet+ only */}
+        <div className="hidden shrink-0 items-center gap-2 md:flex">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg md:h-8 md:w-8">
+            <img
+              src="/freshyo-logo.png"
+              alt="Freshyo logo"
+              className="h-full w-full object-cover"
+            />
           </div>
           <span className="font-display text-lg font-extrabold tracking-tight text-gray-900">
             Freshyo
           </span>
         </div>
 
-        {/* Search — desktop wide field */}
-        <div className="hidden flex-1 max-w-xl md:block">
+        {/* Search — always visible */}
+        <div className="min-w-0 flex-1">
           <SearchBar
-            placeholder="Search chicken, mutton, fish, groceries..."
+            placeholder="Search chicken, mutton, fish"
             onClick={handleSearchClick}
           />
         </div>
 
-        <div className="ml-auto flex items-center gap-3">
+        <div className="flex shrink-0 items-center gap-3">
           {/* Flash status */}
           {isFlashDelivery && (
             <span className="hidden items-center gap-1.5 rounded-md bg-flash-50 px-2.5 py-1 text-xs font-bold text-flash-600 sm:flex">
@@ -63,11 +61,11 @@ export function Topbar({ isFlashDelivery = false, onCartClick, onSearchClick }:
             </span>
           )}
 
-          {/* Cart button */}
+          {/* Cart button — tablet+ only */}
           <button
             onClick={handleCartClick}
             aria-label={`Cart, ${itemCount} items`}
-            className="relative flex h-11 items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 text-sm font-bold text-gray-800 transition-colors hover:border-brand-300 hover:text-brand-700 md:px-4"
+            className="relative hidden h-11 items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 text-sm font-bold text-gray-800 transition-colors hover:border-brand-300 hover:text-brand-700 md:flex md:px-4"
           >
             <ShoppingCart className="h-5 w-5" />
             <span className="hidden sm:inline">Cart</span>
@@ -79,11 +77,6 @@ export function Topbar({ isFlashDelivery = false, onCartClick, onSearchClick }:
           </button>
         </div>
       </div>
-
-      {/* Row 2 — mobile search field */}
-      <div className="px-4 pb-3 md:hidden">
-        <SearchBar placeholder="Search chicken, mutton, fish..." onClick={handleSearchClick} />
-      </div>
     </header>
   )
 }
diff --git a/apps/web-ui/src/hooks/cart-query-hooks.ts b/apps/web-ui/src/hooks/cart-query-hooks.ts
index 0c314bd..789ff1b 100644
--- a/apps/web-ui/src/hooks/cart-query-hooks.ts
+++ b/apps/web-ui/src/hooks/cart-query-hooks.ts
@@ -12,6 +12,12 @@ interface CartItem {
   deliveryDate?: string | null
 }
 
+interface CartData {
+  items: CartItem[]
+  totalItems: number
+  totalAmount: number
+}
+
 function getCartKey(cartType: CartType): string {
   return `local-cart-${cartType}`
 }
@@ -29,15 +35,16 @@ function writeCart(cartType: CartType, items: CartItem[]) {
   localStorage.setItem(getCartKey(cartType), JSON.stringify(items))
 }
 
+// Build the exact shape useGetCart returns, so setQueryData matches the cache.
+function toCartData(items: CartItem[]): CartData {
+  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0)
+  return { items, totalItems, totalAmount: 0 }
+}
+
 export function useGetCart(cartType: CartType = 'regular') {
   return useQuery({
     queryKey: [getCartKey(cartType)],
-    queryFn: () => {
-      const items = readCart(cartType)
-      const totalItems = items.reduce((sum, item) => sum + item.quantity, 0)
-      const totalAmount = 0 // Amount calculated in components with product data
-      return { items, totalItems, totalAmount }
-    },
+    queryFn: () => toCartData(readCart(cartType)),
   })
 }
 
@@ -76,6 +83,9 @@ export function useAddToCart(cartType: CartType = 'regular') {
         })
       }
       writeCart(cartType, items)
+      // Optimistically update the cache so the UI reflects the cart instantly,
+      // before any refetch completes.
+      queryClient.setQueryData([getCartKey(cartType)], toCartData(items))
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [getCartKey(cartType)] })
@@ -98,14 +108,19 @@ export function useUpdateCartItem(cartType: CartType = 'regular') {
       slotId?: number | null
       deliveryDate?: string | null
     }) => {
-      const items = readCart(cartType)
+      let items = readCart(cartType)
       const existing = items.find((i) => i.productId === productId)
-      if (existing) {
+      if (!existing) return
+      if (quantity <= 0) {
+        // Quantity hit 0 — remove the item from the cart entirely
+        items = items.filter((i) => i.productId !== productId)
+      } else {
         existing.quantity = quantity
         if (slotId !== undefined) existing.slotId = slotId
         if (deliveryDate !== undefined) existing.deliveryDate = deliveryDate
       }
       writeCart(cartType, items)
+      queryClient.setQueryData([getCartKey(cartType)], toCartData(items))
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [getCartKey(cartType)] })
@@ -121,6 +136,7 @@ export function useRemoveFromCart(cartType: CartType = 'regular') {
       let items = readCart(cartType)
       items = items.filter((i) => i.productId !== productId)
       writeCart(cartType, items)
+      queryClient.setQueryData([getCartKey(cartType)], toCartData(items))
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [getCartKey(cartType)] })
diff --git a/apps/web-ui/src/lib/query-client.ts b/apps/web-ui/src/lib/query-client.ts
index cb54ee1..47a05a1 100644
--- a/apps/web-ui/src/lib/query-client.ts
+++ b/apps/web-ui/src/lib/query-client.ts
@@ -1,13 +1,20 @@
 import { QueryClient } from '@tanstack/react-query'
 
+// Module-level singleton — shared across SSR hydration, tRPC, and all
+// components so mutations/invalidations hit the same cache.
+let queryClient: QueryClient | undefined
+
 export function getQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 30 * 1000,
-        retry: 2,
-        refetchOnWindowFocus: false,
+  if (!queryClient) {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 30 * 1000,
+          retry: 2,
+          refetchOnWindowFocus: false,
+        },
       },
-    },
-  })
+    })
+  }
+  return queryClient
 }
diff --git a/apps/web-ui/src/lib/trpc-client.ts b/apps/web-ui/src/lib/trpc-client.ts
index 9b0b055..1dd230e 100644
--- a/apps/web-ui/src/lib/trpc-client.ts
+++ b/apps/web-ui/src/lib/trpc-client.ts
@@ -4,7 +4,7 @@ import type { AppRouter } from '@backend/trpc/router'
 
 // const BASE_API_URL = 'http://192.168.100.111:8787'
 export const BASE_API_URL =
-  (import.meta.env?.VITE_API_URL as string | undefined) || 'http://localhost:8787'
+  (import.meta.env?.VITE_API_URL as string | undefined) || 'https://worker.freshyo.in'
 
 export const trpc = createTRPCReact<AppRouter>()
 
diff --git a/apps/web-ui/src/routes/cart.tsx b/apps/web-ui/src/routes/cart.tsx
index c34c851..c8f42ae 100644
--- a/apps/web-ui/src/routes/cart.tsx
+++ b/apps/web-ui/src/routes/cart.tsx
@@ -83,7 +83,7 @@ function CartPage() {
                       </div>
                     </div>
                     <div className="flex flex-col items-end gap-2">
-                      <p className="text-base font-extrabold text-brand-600">₹{price * item.quantity}</p>
+                      <p className="text-sm font-extrabold text-brand-600 sm:text-base">₹{price * item.quantity}</p>
                       <button
                         onClick={() => removeItem.mutate(item.productId)}
                         className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
diff --git a/apps/web-ui/src/routes/flash.tsx b/apps/web-ui/src/routes/flash.tsx
index ade6db0..a1a67c0 100644
--- a/apps/web-ui/src/routes/flash.tsx
+++ b/apps/web-ui/src/routes/flash.tsx
@@ -1,12 +1,14 @@
-import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
-import { useState, useMemo } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState, useMemo, useRef, useEffect } from 'react'
 import { MiniQuantifier } from 'web-components'
 import { useAllProducts, useStores } from '../hooks/prominent-api-hooks'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { useCentralSlotStore } from '../lib/stores/central-slot-store'
 import { useAddToCart, useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
+import { usePopulateCentralStores } from '../hooks/usePopulateCentralStores'
+import { usePopulateCentralProductStore } from '../hooks/usePopulateCentralProductStore'
 import { AppLayout } from '../components/AppLayout'
-import { Store, Grid3X3, Zap, ShoppingCart } from 'lucide-react'
+import { Zap, ShoppingCart } from 'lucide-react'
 
 export const Route = createFileRoute('/flash')({
   component: FlashDeliveryPage,
@@ -14,8 +16,10 @@ export const Route = createFileRoute('/flash')({
 
 function FlashDeliveryPage() {
   const navigate = useNavigate()
-  const search = useSearch({ from: '/flash' }) as { storeId?: string }
-  const storeId = search.storeId ? Number(search.storeId) : undefined
+
+  // Populate central stores so flash-eligible products resolve on direct load
+  usePopulateCentralStores()
+  usePopulateCentralProductStore()
 
   const { data: storesData } = useStores()
   const { productsById } = useCentralProductStore()
@@ -26,6 +30,36 @@ function FlashDeliveryPage() {
   const addToCart = useAddToCart('flash')
   const { data: cartData } = useGetCart('flash')
 
+  // Store tabs — one tab per store (same model as home's category tabs)
+  const storesWithFlash = useMemo(() => {
+    return stores.filter((store: any) =>
+      Object.values(productsById).some(
+        (p: any) =>
+          p?.storeId === store.id &&
+          productSlotsMap[p.id]?.isFlashAvailable &&
+          !productSlotsMap[p.id]?.isOutOfStock
+      )
+    )
+  }, [stores, productsById, productSlotsMap])
+
+  const [selectedStoreId, setSelectedStoreId] = useState<number | null>(null)
+  const activeStoreId = selectedStoreId ?? storesWithFlash[0]?.id ?? null
+
+  // Auto-scroll the active store tab into view (matches user-ui tab behavior)
+  const tabsScrollRef = useRef<HTMLDivElement>(null)
+  const tabPositions = useRef<number[]>([])
+  const activeTabIndex = Math.max(
+    0,
+    storesWithFlash.findIndex((s: any) => s.id === activeStoreId)
+  )
+
+  useEffect(() => {
+    const x = tabPositions.current[activeTabIndex]
+    if (x != null) {
+      tabsScrollRef.current?.scrollTo({ left: Math.max(0, x - 16), behavior: 'smooth' })
+    }
+  }, [activeTabIndex])
+
   // Get flash products from central store
   const allFlashProducts = useMemo(() => {
     return Object.values(productsById).filter(
@@ -36,15 +70,18 @@ function FlashDeliveryPage() {
     )
   }, [productsById, productSlotsMap])
 
-  // Filter by store if selected
-  const filteredProducts = storeId
-    ? allFlashProducts.filter((p: any) => p.storeId === storeId)
-    : allFlashProducts
+  // Products to show: active store's flash items, or all flash items when no stores
+  const filteredProducts = useMemo(() => {
+    if (activeStoreId != null) {
+      return allFlashProducts.filter((p: any) => p.storeId === activeStoreId)
+    }
+    return allFlashProducts
+  }, [activeStoreId, allFlashProducts])
 
   const handleAddToCart = (productId: number) => {
     const item = filteredProducts.find((p: any) => p.id === productId)
     addToCart.mutate(
-      { productId, quantity: 1, storeId: item?.storeId },
+      { productId, quantity: 1, storeId: item?.storeId ?? 0 },
       {
         onSuccess: () => {
           alert(`Added ${item?.name || 'item'} for 1 Hr Delivery`)
@@ -69,180 +106,90 @@ function FlashDeliveryPage() {
           </div>
         </div>
 
-        <div className="mx-auto flex w-full max-w-7xl gap-6 px-4 py-6 md:px-8">
-          {/* Store sidebar — desktop: vertical list; mobile: horizontal strip */}
-          <StoreSidebar
-            stores={stores}
-            storeId={storeId}
-            onStoreSelect={(newStoreId) =>
-              navigate({
-                to: '/flash',
-                search: { storeId: newStoreId },
-              })
-            }
-            onAllSelect={() =>
-              navigate({ to: '/flash' })
-            }
-          />
-
-          {/* Products Grid */}
-          <div className="min-w-0 flex-1">
-            {/* Info Banner */}
-            <div className="mb-4 rounded-xl border border-yellow-200 bg-yellow-50 p-3">
-              <p className="text-sm text-yellow-800">
-                Get these products delivered within 1 hour! Only available for select items.
-              </p>
-            </div>
-
-            <div className="mb-4 flex items-center justify-between">
-              <p className="text-lg font-extrabold text-gray-900">
-                {storeId
-                  ? stores.find((s: any) => s.id === storeId)?.name ||
-                    'Store Products'
-                  : 'All Products'}
-              </p>
-              <p className="text-sm text-gray-500">
-                {filteredProducts.length} items
-              </p>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-3 xl:grid-cols-4">
-              {filteredProducts.map((product: any) => (
-                <CompactProductCard
-                  key={product.id}
-                  item={product}
-                  handleAddToCart={handleAddToCart}
-                  onPress={() =>
-                    navigate({
-                      to: '/flash/product/$id',
-                      params: { id: String(product.id) },
-                    })
-                  }
-                />
-              ))}
-            </div>
-
-            {filteredProducts.length === 0 && (
-              <div className="py-10 text-center">
-                <p className="font-medium text-gray-400">
-                  {storeId
-                    ? 'No flash delivery products from this store.'
-                    : 'No flash delivery products available.'}
-                </p>
-              </div>
-            )}
+        <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8">
+          {/* Info Banner */}
+          <div className="mb-4 rounded-xl border border-yellow-200 bg-yellow-50 p-3">
+            <p className="text-sm text-yellow-800">
+              Get these products delivered within 1 hour! Only available for select items.
+            </p>
           </div>
+
+          {/* Store tabs — same model as home page tabs */}
+          {storesWithFlash.length > 0 && (
+            <div
+              ref={tabsScrollRef}
+              className="scrollbar-hide -mx-4 mb-5 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0"
+            >
+              {storesWithFlash.map((store: any, i: number) => {
+                const active = activeStoreId === store.id
+                return (
+                  <button
+                    key={store.id}
+                    ref={(el) => {
+                      tabPositions.current[i] = el?.offsetLeft ?? 0
+                    }}
+                    onClick={() => setSelectedStoreId(store.id)}
+                    className="shrink-0 cursor-pointer px-3 py-2"
+                  >
+                    <span
+                      className={`block text-sm font-bold ${
+                        active ? 'text-flash-600' : 'text-gray-500'
+                      }`}
+                    >
+                      {store.name.replace(/^The\s+/i, '')}
+                    </span>
+                    <span
+                      className={`mt-1 block h-1 rounded-full ${
+                        active ? 'bg-flash-500' : 'bg-transparent'
+                      }`}
+                    />
+                  </button>
+                )
+              })}
+            </div>
+          )}
+
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-lg font-extrabold text-gray-900">
+              {activeStoreId != null
+                ? stores.find((s: any) => s.id === activeStoreId)?.name.replace(/^The\s+/i, '') ||
+                  'Store Products'
+                : 'All Products'}
+            </p>
+            <p className="text-sm text-gray-500">
+              {filteredProducts.length} items
+            </p>
+          </div>
+
+          <div className="grid grid-cols-3 gap-3 sm:gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            {filteredProducts.map((product: any) => (
+              <CompactProductCard
+                key={product.id}
+                item={product}
+                handleAddToCart={handleAddToCart}
+                onPress={() =>
+                  navigate({
+                    to: '/flash/product/$id',
+                    params: { id: String(product.id) },
+                  })
+                }
+              />
+            ))}
+          </div>
+
+          {filteredProducts.length === 0 && (
+            <div className="py-10 text-center">
+              <p className="font-medium text-gray-400">
+                No flash delivery products available.
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </AppLayout>
   )
 }
 
-interface StoreSidebarProps {
-  stores: any[];
-  storeId?: number;
-  onStoreSelect: (storeId: number) => void;
-  onAllSelect: () => void;
-}
-
-function StoreSidebar({
-  stores,
-  storeId,
-  onStoreSelect,
-  onAllSelect,
-}: StoreSidebarProps) {
-  const allActive = !storeId
-
-  return (
-    <>
-      {/* Mobile: horizontal chip strip (always visible) */}
-      <div className="scrollbar-hide -mx-4 mb-4 flex gap-2 overflow-x-auto px-4 md:hidden">
-        <button
-          onClick={onAllSelect}
-          className={`shrink-0 rounded-full px-4 py-2 text-sm font-bold transition-colors ${
-            allActive ? 'bg-flash-500 text-white' : 'border border-gray-200 bg-white text-gray-700'
-          }`}
-        >
-          All
-        </button>
-        {stores.map((store: any) => {
-          const isActive = storeId === store.id
-          return (
-            <button
-              key={store.id}
-              onClick={() => onStoreSelect(store.id)}
-              className={`shrink-0 rounded-full px-4 py-2 text-sm font-bold transition-colors ${
-                isActive ? 'bg-flash-500 text-white' : 'border border-gray-200 bg-white text-gray-700'
-              }`}
-            >
-              {store.name.replace(/^The\s+/i, '')}
-            </button>
-          )
-        })}
-      </div>
-
-      {/* Desktop: vertical sidebar */}
-      <div className="hidden w-48 shrink-0 md:block">
-        <div className="sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto rounded-xl border border-gray-200 bg-white p-3">
-          <p className="mb-3 px-2 text-[10px] font-black uppercase tracking-[0.18em] text-gray-400">
-            Stores
-          </p>
-          <div className="flex flex-col gap-1.5">
-            {/* All Products Item */}
-            <button
-              onClick={onAllSelect}
-              className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ${
-                allActive
-                  ? 'bg-flash-500 text-white'
-                  : 'text-gray-700 hover:bg-gray-50'
-              }`}
-            >
-              <Grid3X3 className={`h-4 w-4 shrink-0 ${allActive ? 'text-white' : 'text-gray-400'}`} />
-              <span className="text-sm font-bold">All Stores</span>
-            </button>
-
-            <div className="my-1 h-px bg-gray-100" />
-
-            {/* Store Items */}
-            {stores.map((store: any) => {
-              const isActive = storeId === store.id;
-
-              return (
-                <button
-                  key={store.id}
-                  onClick={() => onStoreSelect(store.id)}
-                  className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors ${
-                    isActive
-                      ? 'bg-flash-25 text-flash-600'
-                      : 'text-gray-700 hover:bg-gray-50'
-                  }`}
-                >
-                  <div className={`h-8 w-8 shrink-0 overflow-hidden rounded-lg border ${isActive ? 'border-flash-200' : 'border-gray-100'} bg-gray-50`}>
-                    {store.signedImageUrl ? (
-                      <img
-                        src={store.signedImageUrl}
-                        alt={store.name}
-                        className="h-full w-full object-cover"
-                      />
-                    ) : (
-                      <div className="flex h-full w-full items-center justify-center">
-                        <Store className={`h-4 w-4 ${isActive ? 'text-flash-500' : 'text-gray-400'}`} />
-                      </div>
-                    )}
-                  </div>
-                  <span className="truncate text-sm font-semibold">
-                    {store.name.replace(/^The\s+/i, '')}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
 const formatQuantity = (
   quantity: number,
   unit: string,
@@ -330,21 +277,19 @@ function CompactProductCard({
       <div className="p-3">
         <p className="mb-1 line-clamp-2 text-xs font-bold text-gray-900">{item.name}</p>
 
-        <div className="flex items-center justify-between">
-          <div className="flex flex-wrap items-baseline">
-            <p className="text-sm font-extrabold text-flash-500">₹{price}</p>
-            {item.marketPrice && Number(item.marketPrice) > Number(item.price) && (
-              <p className="ml-1 text-xs text-gray-400 line-through">
-                ₹{item.marketPrice}
-              </p>
-            )}
-          </div>
-          <p className="text-xs text-gray-500">
-            <span className="font-semibold text-flash-500">
-              {formatQuantity(item.productQuantity || 1, item.unit || item.unitNotation).display}
-            </span>
-          </p>
+        <div className="flex flex-wrap items-baseline gap-x-1.5">
+          <p className="text-sm font-extrabold text-flash-500">₹{price}</p>
+          {item.marketPrice && Number(item.marketPrice) > Number(item.price) && (
+            <p className="text-[11px] text-gray-400 line-through">
+              ₹{item.marketPrice}
+            </p>
+          )}
         </div>
+        <p className="mt-0.5 text-[11px] text-gray-500">
+          <span className="font-semibold text-flash-500">
+            {formatQuantity(item.productQuantity || 1, item.unit || item.unitNotation).display}
+          </span>
+        </p>
       </div>
     </div>
   );
diff --git a/apps/web-ui/src/routes/home.cart.tsx b/apps/web-ui/src/routes/home.cart.tsx
index 9de2163..99f09da 100644
--- a/apps/web-ui/src/routes/home.cart.tsx
+++ b/apps/web-ui/src/routes/home.cart.tsx
@@ -83,7 +83,7 @@ function CartPage() {
                       </div>
                     </div>
                     <div className="flex flex-col items-end gap-2">
-                      <p className="text-base font-extrabold text-brand-600">₹{price * item.quantity}</p>
+                      <p className="text-sm font-extrabold text-brand-600 sm:text-base">₹{price * item.quantity}</p>
                       <button
                         onClick={() => removeItem.mutate(item.productId)}
                         className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
diff --git a/apps/web-ui/src/routes/home.index.tsx b/apps/web-ui/src/routes/home.index.tsx
index bab2a7d..b6dce6f 100644
--- a/apps/web-ui/src/routes/home.index.tsx
+++ b/apps/web-ui/src/routes/home.index.tsx
@@ -1,7 +1,6 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState, useEffect, useMemo, useRef } from 'react'
 import dayjs from 'dayjs'
-import { SearchBar } from 'web-components'
 import {
   useAllProducts,
   useStores,
@@ -16,7 +15,7 @@ import { ProductCard } from '../components/ProductCard'
 import AddToCartDialog from '../components/AddToCartDialog'
 import { useProductSlotIdentifier } from '../hooks/useProductSlotIdentifier'
 import { usePopulateCentralStores } from '../hooks/usePopulateCentralStores'
-import { Store, ImageOff, Loader2, Clock, Beef, Truck } from 'lucide-react'
+import { Store, ImageOff, Loader2, Clock, Truck } from 'lucide-react'
 
 // Scroll Indicator Component
 function ScrollIndicator({
@@ -115,6 +114,21 @@ function HomePage() {
     setExpandedByTagId((prev) => ({ ...prev, [tagId]: true }))
   }
 
+  // Auto-scroll the active tab into view (matches user-ui tab behavior)
+  const tabsScrollRef = useRef<HTMLDivElement>(null)
+  const tabPositions = useRef<number[]>([])
+  const activeTabIndex = Math.max(
+    0,
+    dashboardTags.findIndex((t: any) => t.id === activeTagId)
+  )
+
+  useEffect(() => {
+    const x = tabPositions.current[activeTabIndex]
+    if (x != null) {
+      tabsScrollRef.current?.scrollTo({ left: Math.max(0, x - 16), behavior: 'smooth' })
+    }
+  }, [activeTabIndex])
+
   const productsByTagId = useMemo(() => {
     const map: Record<number, any[]> = {}
     for (const tag of dashboardTags) {
@@ -201,10 +215,10 @@ function HomePage() {
         {/* Welcome band — desktop editorial opener */}
         <div className="flex flex-col gap-1 py-6 md:py-8">
           <p className="text-[11px] font-black uppercase tracking-[0.22em] text-brand-600">
-            Fresh cut, daily
+            Smiles delivered with
           </p>
           <h1 className="display-1 text-gray-900">
-            Butcher-fresh meat, delivered to your door
+            The best harvest, delivered to your door
           </h1>
           <p className="mt-1 max-w-2xl text-gray-600">
             Chicken, mutton, fish and more, cut to order from our own stores.
@@ -215,8 +229,12 @@ function HomePage() {
         {/* Download App Banner */}
         <div className="mb-8 overflow-hidden rounded-xl bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-4 md:flex md:items-center md:justify-between">
           <div className="flex items-center gap-4">
-            <div className="hidden h-12 w-12 items-center justify-center rounded-xl bg-white/20 md:flex">
-              <Beef className="h-6 w-6 text-white" />
+            <div className="hidden h-12 w-12 items-center justify-center overflow-hidden rounded-xl bg-white/20 md:flex">
+              <img
+                src="/freshyo-logo.png"
+                alt="Freshyo logo"
+                className="h-full w-full object-cover"
+              />
             </div>
             <div className="flex-1">
               <p className="text-lg font-bold text-white">Get the FreshYo App</p>
@@ -236,6 +254,89 @@ function HomePage() {
           </a>
         </div>
 
+        {/* Explore Products Section — first, matching user-ui home order */}
+        {dashboardTags.length > 0 && (
+          <section className="mb-10">
+            <div className="section-rule mb-5 flex items-end justify-between">
+              <div>
+                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-brand-600">
+                  Browse by Category
+                </p>
+                <h2 className="display-2 mt-1 text-gray-900">Explore Products</h2>
+              </div>
+            </div>
+
+            {/* Tab strip — flat, brand underline active (matches user-ui home) */}
+            <div
+              ref={tabsScrollRef}
+              className="scrollbar-hide -mx-4 mb-5 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0"
+            >
+              {dashboardTags.map((tag: any, i: number) => {
+                const active = activeTagId === tag.id
+                return (
+                  <button
+                    key={tag.id}
+                    ref={(el) => {
+                      tabPositions.current[i] = el?.offsetLeft ?? 0
+                    }}
+                    onClick={() => setSelectedTagId(tag.id)}
+                    className="shrink-0 cursor-pointer px-3 py-2"
+                  >
+                    <span
+                      className={`block text-sm font-bold ${
+                        active ? 'text-brand-600' : 'text-gray-500'
+                      }`}
+                    >
+                      {tag.tagName}
+                    </span>
+                    <span
+                      className={`mt-1 block h-1 rounded-full ${
+                        active ? 'bg-brand-500' : 'bg-transparent'
+                      }`}
+                    />
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* Active tag products — brand-tinted container (matches user-ui) */}
+            <div className="mb-2 rounded-[28px] border border-brand-100 bg-brand-25 px-3 pb-4 pt-3">
+              {activeTagProducts.length > 0 ? (
+                <>
+                  <div className="grid grid-cols-3 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+                    {activeTagProducts
+                      .slice(0, expandedByTagId[activeTagId] ? undefined : 6)
+                      .map((product: any) => (
+                        <ProductCard
+                          key={product.id}
+                          item={product}
+                          onPress={() => handleProductPress(product.id)}
+                          showDeliveryInfo={false}
+                          miniView={true}
+                          useAddToCartDialog={true}
+                        />
+                      ))}
+                  </div>
+                  {activeTagProducts.length > 6 && !expandedByTagId[activeTagId] && (
+                    <div className="mt-4 flex justify-center">
+                      <button
+                        onClick={() => handleToggleExpand(activeTagId)}
+                        className="rounded-full bg-brand-500 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-brand-600"
+                      >
+                        Show More
+                      </button>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <p className="py-6 text-center text-sm text-gray-500">
+                  No products in this category yet
+                </p>
+              )}
+            </div>
+          </section>
+        )}
+
         {/* Stores Section */}
         <section className="mb-10">
           <div className="section-rule mb-5 flex items-end justify-between">
@@ -274,83 +375,6 @@ function HomePage() {
           )}
         </section>
 
-        {/* Explore Products Section */}
-        {dashboardTags.length > 0 && (
-          <section className="mb-10">
-            <div className="section-rule mb-5 flex items-end justify-between">
-              <div>
-                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-brand-600">
-                  Browse by Category
-                </p>
-                <h2 className="display-2 mt-1 text-gray-900">Explore Products</h2>
-              </div>
-            </div>
-
-            {/* Tab strip — flat, brand underline active (matches user-ui home) */}
-            <div className="scrollbar-hide -mx-4 mb-5 flex gap-1 overflow-x-auto px-4 md:mx-0 md:px-0">
-              {dashboardTags.map((tag: any) => {
-                const active = activeTagId === tag.id
-                return (
-                  <button
-                    key={tag.id}
-                    onClick={() => setSelectedTagId(tag.id)}
-                    className="shrink-0 cursor-pointer px-3 py-2"
-                  >
-                    <span
-                      className={`block text-sm font-bold ${
-                        active ? 'text-brand-600' : 'text-gray-500'
-                      }`}
-                    >
-                      {tag.tagName}
-                    </span>
-                    <span
-                      className={`mt-1 block h-1 rounded-full ${
-                        active ? 'bg-brand-500' : 'bg-transparent'
-                      }`}
-                    />
-                  </button>
-                )
-              })}
-            </div>
-
-            {/* Active tag products — brand-tinted container (matches user-ui) */}
-            <div className="mb-2 rounded-[28px] border border-brand-100 bg-brand-25 px-3 pb-4 pt-3">
-              {activeTagProducts.length > 0 ? (
-                <>
-                  <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-                    {activeTagProducts
-                      .slice(0, expandedByTagId[activeTagId] ? undefined : 6)
-                      .map((product: any) => (
-                        <ProductCard
-                          key={product.id}
-                          item={product}
-                          onPress={() => handleProductPress(product.id)}
-                          showDeliveryInfo={false}
-                          miniView={true}
-                          useAddToCartDialog={true}
-                        />
-                      ))}
-                  </div>
-                  {activeTagProducts.length > 6 && !expandedByTagId[activeTagId] && (
-                    <div className="mt-4 flex justify-center">
-                      <button
-                        onClick={() => handleToggleExpand(activeTagId)}
-                        className="rounded-full bg-brand-500 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-brand-600"
-                      >
-                        Show More
-                      </button>
-                    </div>
-                  )}
-                </>
-              ) : (
-                <p className="py-6 text-center text-sm text-gray-500">
-                  No products in this category yet
-                </p>
-              )}
-            </div>
-          </section>
-        )}
-
         {/* Upcoming Delivery Slots Section */}
         <section className="mb-10">
           <div className="section-rule mb-5 flex items-end justify-between">
@@ -395,14 +419,14 @@ function HomePage() {
           {productsLoading ? (
             <SectionSpinner label="Loading products..." />
           ) : (
-            <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+            <div className="grid grid-cols-3 gap-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
               {sortedProducts.map((product) => (
                 <ProductCard
                   key={product.id}
                   item={product}
                   onPress={() => handleProductPress(product.id)}
                   showDeliveryInfo={true}
-                  miniView={false}
+                  miniView={true}
                   useAddToCartDialog={true}
                 />
               ))}
diff --git a/apps/web-ui/src/routes/login.tsx b/apps/web-ui/src/routes/login.tsx
index 2640a23..e5b3fb2 100644
--- a/apps/web-ui/src/routes/login.tsx
+++ b/apps/web-ui/src/routes/login.tsx
@@ -5,7 +5,6 @@ import { useAuth } from '../lib/auth-context'
 import { trpc } from '../lib/trpc-client'
 import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
 import { MyButton, pInput as PInput } from 'web-components'
-import { Beef } from 'lucide-react'
 
 export const Route = createFileRoute('/login')({ component: LoginPage })
 
@@ -131,8 +130,12 @@ function LoginPage() {
       {/* Brand panel — desktop only */}
       <div className="hidden w-[42%] flex-col justify-between bg-gradient-to-b from-brand-500 to-brand-700 p-12 lg:flex">
         <div className="flex items-center gap-3">
-          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/20">
-            <Beef className="h-6 w-6 text-white" />
+          <div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-xl">
+            <img
+              src="/freshyo-logo.png"
+              alt="Freshyo logo"
+              className="h-full w-full object-cover"
+            />
           </div>
           <div>
             <p className="font-display text-xl font-extrabold tracking-tight text-white">
@@ -162,8 +165,12 @@ function LoginPage() {
       <div className="flex flex-1 items-center justify-center p-6">
         <div className="w-full max-w-md">
           <div className="mb-8 flex items-center gap-3 lg:hidden">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-600">
-              <Beef className="h-5 w-5 text-white" />
+            <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl">
+              <img
+                src="/freshyo-logo.png"
+                alt="Freshyo logo"
+                className="h-full w-full object-cover"
+              />
             </div>
             <p className="font-display text-xl font-extrabold tracking-tight text-gray-900">
               Freshyo
diff --git a/apps/web-ui/src/styles.css b/apps/web-ui/src/styles.css
index 8f58834..e28c7a5 100644
--- a/apps/web-ui/src/styles.css
+++ b/apps/web-ui/src/styles.css
@@ -77,20 +77,22 @@ body {
   border-radius: 4px;
 }
 
-/* App shell — single column on mobile, sidebar + topbar grid at md+ */
+/* App shell — full-height flex column for content; sidebar rail at md+.
+   Sticky topbar/search live inside .shell-main so they can stick against
+   the viewport while scrolling. */
 .shell-grid {
   min-height: 100vh;
   display: grid;
-  grid-template-areas: "topbar" "content";
+  grid-template-areas: "main";
   grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: 64px minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
 }
 
 @media (min-width: 768px) {
   .shell-grid {
-    grid-template-areas: "sidebar topbar" "sidebar content";
-    grid-template-columns: 264px minmax(0, 1fr);
-    grid-template-rows: 64px minmax(0, 1fr);
+    grid-template-areas: "sidebar main";
+    grid-template-columns: 20vw minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
   }
 }
 
@@ -98,12 +100,21 @@ body {
   grid-area: sidebar;
 }
 
+/* Flex column so sticky header elements are bounded by the full column,
+   not a fixed grid row. */
+.shell-main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .shell-topbar {
-  grid-area: topbar;
+  flex-shrink: 0;
 }
 
 .shell-content {
-  grid-area: content;
+  flex: 1;
   min-width: 0;
 }
 
diff --git a/packages/web-components/src/components/dialog.tsx b/packages/web-components/src/components/dialog.tsx
index 6a72d59..15ab6b9 100644
--- a/packages/web-components/src/components/dialog.tsx
+++ b/packages/web-components/src/components/dialog.tsx
@@ -30,7 +30,7 @@ export function BottomDialog({
   if (!visible && !open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-[100] flex items-end justify-center md:items-center">
       <div
         className={`absolute inset-0 bg-black/30 transition-opacity duration-200 ${
           open ? 'opacity-100' : 'opacity-0'
@@ -38,7 +38,7 @@ export function BottomDialog({
         onClick={enableDismiss ? onClose : undefined}
       />
       <div
-        className={`relative w-full max-w-lg rounded-t-2xl bg-white p-6 shadow-lg transition-transform duration-200 ${
+        className={`relative w-full max-w-lg rounded-t-2xl bg-white p-6 pb-24 shadow-lg transition-transform duration-200 md:pb-6 ${
           open ? 'translate-y-0' : 'translate-y-full'
         }`}
         style={{ maxHeight: '85vh' }}
diff --git a/packages/web-components/src/components/quantifier.tsx b/packages/web-components/src/components/quantifier.tsx
index ec8efc1..904bf53 100644
--- a/packages/web-components/src/components/quantifier.tsx
+++ b/packages/web-components/src/components/quantifier.tsx
@@ -30,7 +30,10 @@ export function Quantifier({
   return (
     <div className="inline-flex items-center rounded-lg border border-gray-200">
       <button
-        onClick={decrease}
+        onClick={(e) => {
+          e.stopPropagation()
+          decrease()
+        }}
         disabled={value <= min}
         className="flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30"
       >
@@ -40,7 +43,10 @@ export function Quantifier({
         {value}
       </p>
       <button
-        onClick={increase}
+        onClick={(e) => {
+          e.stopPropagation()
+          increase()
+        }}
         disabled={value >= max}
         className="flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30"
       >
@@ -58,9 +64,12 @@ export function MiniQuantifier({
   max = 99,
 }: QuantifierProps) {
   return (
-    <div className="inline-flex items-center rounded-md border border-gray-200">
+    <div className="inline-flex items-center rounded-md border border-gray-200 bg-white shadow-sm">
       <button
-        onClick={() => value > min && setValue(value - step)}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (value > min) setValue(value - step)
+        }}
         disabled={value <= min}
         className="flex h-6 w-6 items-center justify-center text-gray-500 disabled:opacity-30"
       >
@@ -70,7 +79,10 @@ export function MiniQuantifier({
         {value}
       </p>
       <button
-        onClick={() => value < max && setValue(value + step)}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (value < max) setValue(value + step)
+        }}
         disabled={value >= max}
         className="flex h-6 w-6 items-center justify-center text-gray-500 disabled:opacity-30"
       >