diff --git a/connect_frontend/menu-app/index.html b/connect_frontend/menu-app/index.html
index ef9743b..f554d8e 100644
--- a/connect_frontend/menu-app/index.html
+++ b/connect_frontend/menu-app/index.html
@@ -6,7 +6,7 @@
     <title>Menu</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
diff --git a/connect_frontend/menu-app/src/components/primitives.jsx b/connect_frontend/menu-app/src/components/primitives.jsx
index dbc7537..550fbab 100644
--- a/connect_frontend/menu-app/src/components/primitives.jsx
+++ b/connect_frontend/menu-app/src/components/primitives.jsx
@@ -163,10 +163,10 @@ export function Price({ product, large }) {
   return (
     <div className="flex items-baseline gap-1.5">
       {discounted && (
-        <span className="font-display text-[15px] text-[#b3aa97] line-through">{eur(base)}</span>
+        <span className="font-display text-[13px] text-[#b3aa97] line-through">{eur(base)}</span>
       )}
       <span
-        className={`font-display ${large ? 'text-[22px]' : 'text-[19px]'} font-semibold ${discounted ? 'text-[#c2602f]' : 'text-[#2d3b2d]'}`}
+        className={`font-display ${large ? 'text-[18px]' : 'text-[16px]'} font-semibold ${discounted ? 'text-[#c2602f]' : 'text-[#2d3b2d]'}`}
       >
         {eur(now)}
       </span>
diff --git a/connect_frontend/menu-app/src/pages/MenuPage.jsx b/connect_frontend/menu-app/src/pages/MenuPage.jsx
index b0af314..7f33ba0 100644
--- a/connect_frontend/menu-app/src/pages/MenuPage.jsx
+++ b/connect_frontend/menu-app/src/pages/MenuPage.jsx
@@ -102,7 +102,7 @@ function Sheet({ open, onClose, children, maxH = '88vh' }) {
         onClick={onClose}
       />
       <div
-        className="relative z-10 w-full max-w-[480px] animate-slideup overflow-hidden rounded-t-[24px] bg-[#faf7f0] shadow-[0_-12px_40px_-12px_rgba(45,42,31,0.4)]"
+        className="relative z-10 w-full sm:max-w-[960px] animate-slideup overflow-hidden rounded-t-[24px] bg-[#faf7f0] shadow-[0_-12px_40px_-12px_rgba(45,42,31,0.4)]"
         style={{ maxHeight: maxH }}
       >
         {children}
@@ -271,7 +271,7 @@ function ProductCard({ product, category, lang, t, onOpen, onAdd, qty }) {
             {desc}
           </p>
 
-          <div className="mt-auto flex items-center justify-between gap-3 border-t border-[#ece4d2] pt-2.5">
+          <div className="mt-auto flex items-center justify-between gap-3 border-t border-[#ece4d2] pt-3 mt-3">
             <div className="flex items-center gap-2">
               <Price product={product} large />
               <DiscountFlag product={product} t={t} />
@@ -279,7 +279,7 @@ function ProductCard({ product, category, lang, t, onOpen, onAdd, qty }) {
             <button
               onClick={e => { e.stopPropagation(); if (!unavailable) onAdd(product) }}
               aria-label={t.add}
-              className="flex h-9 items-center gap-1 rounded-full bg-[#2d3b2d] pl-3 pr-3.5 text-[13px] font-semibold text-[#f0e9d6] shadow-sm transition active:scale-95 hover:bg-[#26331f]"
+              className="flex h-8 items-center gap-1 rounded-full bg-[#2d3b2d] pl-2.5 pr-3 text-[12px] font-semibold text-[#f0e9d6] shadow-sm transition active:scale-95 hover:bg-[#26331f]"
             >
               <Plus className="h-4 w-4" strokeWidth={2.4} />
               {qty > 0 ? <span className="tabular-nums">{qty}</span> : t.add}
@@ -299,7 +299,7 @@ function Section({ category, lang, t, onOpen, onAdd, cart, sectionRef }) {
     <section ref={sectionRef} data-section={category.id} className="scroll-mt-[64px] px-3 pt-3">
       <div
         className="rounded-[22px] px-3 pb-3 pt-2.5"
-        style={{ background: `linear-gradient(180deg, hsl(${hue} 44% 90% / 0.85) 0%, hsl(${hue} 40% 90% / 0) 62%)` }}
+        style={{ background: `linear-gradient(180deg, hsl(${hue} 44% 90% / 0.65) 0%, hsl(${hue} 40% 90% / 0) 62%)` }}
       >
         <div className="mb-2.5 flex items-baseline justify-between px-2 pt-1">
           <h2 className="font-sans text-[21px] font-semibold tracking-[-0.01em] text-[#2a2a2a]">{label}</h2>
@@ -352,14 +352,16 @@ function ProductSheet({ product, category, lang, t, onClose, onAdd, qty, onInc,
       <div className="max-h-[82vh] overflow-y-auto px-5 pb-5">
         {/* Hero art */}
         {product.image_url ? (
-          <img
-            src={product.image_url}
-            alt={name}
-            className="mt-2 h-44 w-full rounded-2xl object-cover"
-          />
+          <div className="mt-2 aspect-square w-full overflow-hidden rounded-2xl">
+            <img
+              src={product.image_url}
+              alt={name}
+              className="h-full w-full object-cover"
+            />
+          </div>
         ) : (
           <div
-            className="mt-2 flex h-44 items-center justify-center overflow-hidden rounded-2xl"
+            className="mt-2 aspect-square w-full flex items-center justify-center overflow-hidden rounded-2xl"
             style={{ background: `linear-gradient(135deg, hsl(${hue} 34% 90%), hsl(${hue} 30% 80%))` }}
           >
             <GlyphIcon
@@ -452,7 +454,7 @@ function SearchOverlay({ open, onClose, categories, lang, t, onOpen, onAdd, cart
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-50 mx-auto flex max-w-[480px] flex-col bg-[#faf7f0] animate-fade">
+    <div className="fixed inset-0 z-50 mx-auto flex w-full sm:max-w-[960px] flex-col bg-[#faf7f0] animate-fade">
       <div className="flex items-center gap-2 px-3 py-3">
         <div className="flex flex-1 items-center gap-2 rounded-full bg-white px-3.5 py-2.5 ring-1 ring-[#e8e1d1]">
           <Search className="h-[18px] w-[18px] text-[#b3aa90]" strokeWidth={1.9} />
@@ -720,7 +722,7 @@ function CartButton({ count, total, t, onClick }) {
 
   if (count === 0) return null
   return (
-    <div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 mx-auto max-w-[480px] px-4 pb-4">
+    <div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 mx-auto w-full sm:max-w-[960px] px-4 pb-4">
       <button
         onClick={onClick}
         className={`pointer-events-auto flex h-14 w-full items-center justify-between rounded-full bg-[#2d3b2d] px-5 text-[#f0e9d6] shadow-cart transition active:scale-[0.98] ${bump ? 'animate-pop' : ''}`}
@@ -845,7 +847,7 @@ export default function MenuPage() {
   )
 
   return (
-    <div className="relative mx-auto min-h-dvh max-w-[480px] bg-[#faf7f0] shadow-[0_0_60px_-20px_rgba(45,42,31,0.3)]">
+    <div className="relative mx-auto min-h-dvh w-full sm:max-w-[960px] bg-[#faf7f0] sm:shadow-[0_0_60px_-20px_rgba(45,42,31,0.3)]">
       <Hero lang={lang} setLang={setLang} restaurant={restaurant} />
       <CategoryBar
         categories={categories}
diff --git a/connect_frontend/menu-app/tailwind.config.js b/connect_frontend/menu-app/tailwind.config.js
index f011f5c..394fdab 100644
--- a/connect_frontend/menu-app/tailwind.config.js
+++ b/connect_frontend/menu-app/tailwind.config.js
@@ -4,8 +4,8 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        display: ['Bricolage Grotesque', 'serif'],
-        sans: ['Hanken Grotesk', 'system-ui', 'sans-serif'],
+        display: ['Bricolage Grotesque', 'Noto Sans', 'system-ui', 'sans-serif'],
+        sans: ['Hanken Grotesk', 'Noto Sans', 'system-ui', 'sans-serif'],
       },
       colors: {
         brand: {
