diff --git a/src/App.tsx b/src/App.tsx
index afaa2ad..74669c9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,10 +11,6 @@ import { ProductList } from './components/ProductList';
 import { ProductForm } from './components/ProductForm';
 import { Loader2 } from 'lucide-react';
 
-const BarcodeScanner = lazy(() =>
-  import('./components/BarcodeScanner').then((m) => ({ default: m.BarcodeScanner }))
-);
-
 const Settings = lazy(() =>
   import('./components/Settings').then((m) => ({ default: m.Settings }))
 );
@@ -41,12 +37,6 @@ function PageContent() {
       return <ProductList />;
     case 'add':
       return <ProductForm />;
-    case 'scanner':
-      return (
-        <Suspense fallback={<LazyFallback />}>
-          <BarcodeScanner />
-        </Suspense>
-      );
     case 'settings':
       return (
         <Suspense fallback={<LazyFallback />}>
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 5ded77e..21468a1 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -8,7 +8,6 @@ import type { ProductCategory } from '../types';
 import { StatRing } from './StatRing';
 import {
   Package,
-  ScanBarcode,
   PlusCircle,
   TrendingDown,
   ChevronRight,
@@ -32,6 +31,7 @@ const URGENT_TEXT_COLORS: Record<string, string> = {
 
 export function Dashboard() {
   const setPage = useAppStore((s) => s.setPage);
+  const setEditingProductId = useAppStore((s) => s.setEditingProductId);
   const products = useLiveQuery(() => db.products.toArray()) ?? [];
   const { t } = useTranslation();
 
@@ -73,13 +73,9 @@ export function Dashboard() {
         <p className="mt-5 text-xl font-semibold text-gray-200">{t('dashboard.noProducts')}</p>
         <p className="mt-2 max-w-xs text-sm text-gray-400">{t('dashboard.noProductsDesc')}</p>
         <div className="mt-6 flex gap-3">
-          <button onClick={() => setPage('scanner')} className="flex items-center gap-2 rounded-xl bg-green-600 px-5 py-3 font-medium text-white hover:bg-green-500 active:scale-[0.98] transition-transform">
-            <ScanBarcode size={18} />
-            {t('dashboard.scan')}
-          </button>
-          <button onClick={() => setPage('add')} className="flex items-center gap-2 rounded-xl border border-primary-600 px-5 py-3 font-medium text-gray-300 hover:bg-primary-700">
+          <button onClick={() => { setEditingProductId(null); setPage('add'); }} className="flex items-center gap-2 rounded-xl bg-green-600 px-5 py-3 font-medium text-white hover:bg-green-500 active:scale-[0.98] transition-transform">
             <PlusCircle size={18} />
-            {t('dashboard.manual')}
+            {t('nav.add')}
           </button>
         </div>
       </div>
@@ -98,12 +94,12 @@ export function Dashboard() {
       </div>
 
       <div className="grid grid-cols-2 gap-3">
-        <button onClick={() => setPage('scanner')} className="flex items-center gap-3 rounded-xl border border-primary-700 bg-primary-800/60 p-4 text-start hover:bg-primary-700/50 active:scale-[0.98] transition-transform">
+        <button onClick={() => { setEditingProductId(null); setPage('add'); }} className="flex items-center gap-3 rounded-xl border border-primary-700 bg-primary-800/60 p-4 text-start hover:bg-primary-700/50 active:scale-[0.98] transition-transform">
           <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-600/20">
-            <ScanBarcode size={20} className="text-green-400" />
+            <PlusCircle size={20} className="text-green-400" />
           </div>
           <div>
-            <p className="text-sm font-medium text-gray-200">{t('dashboard.scan')}</p>
+            <p className="text-sm font-medium text-gray-200">{t('nav.add')}</p>
             <p className="text-[0.65rem] text-gray-400">{t('dashboard.scanBarcode')}</p>
           </div>
         </button>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 9096903..fbe72dc 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -3,17 +3,17 @@ import { useAppStore } from '../store/useAppStore';
 import {
   LayoutDashboard,
   Package,
-  PlusCircle,
-  ScanBarcode,
+  Plus,
   Settings,
   BarChart3,
 } from 'lucide-react';
 
-const NAV_ITEMS = [
+const LEFT_ITEMS = [
   { id: 'dashboard' as const, labelKey: 'nav.dashboard', icon: LayoutDashboard },
   { id: 'products' as const, labelKey: 'nav.products', icon: Package },
-  { id: 'add' as const, labelKey: 'nav.add', icon: PlusCircle },
-  { id: 'scanner' as const, labelKey: 'nav.scanner', icon: ScanBarcode },
+];
+
+const RIGHT_ITEMS = [
   { id: 'stats' as const, labelKey: 'nav.stats', icon: BarChart3 },
   { id: 'settings' as const, labelKey: 'nav.settings', icon: Settings },
 ];
@@ -21,17 +21,57 @@ const NAV_ITEMS = [
 export function Navigation() {
   const { currentPage, setPage, setEditingProductId } = useAppStore();
   const { t } = useTranslation();
+  const isAddActive = currentPage === 'add';
 
   return (
     <nav className="fixed bottom-0 left-0 right-0 z-40 border-t border-primary-700 bg-primary-800/95 backdrop-blur-sm safe-bottom">
       <div className="mx-auto flex max-w-lg items-center justify-around">
-        {NAV_ITEMS.map(({ id, labelKey, icon: Icon }) => {
+        {/* Left nav items */}
+        {LEFT_ITEMS.map(({ id, labelKey, icon: Icon }) => {
+          const isActive = currentPage === id;
+          const label = t(labelKey);
+          return (
+            <button
+              key={id}
+              onClick={() => setPage(id)}
+              className={`flex min-w-[3rem] flex-col items-center gap-0.5 px-2 py-2 text-xs transition-colors ${
+                isActive
+                  ? 'text-green-400'
+                  : 'text-gray-300 hover:text-gray-200'
+              }`}
+              aria-label={label}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              <Icon size={22} strokeWidth={isActive ? 2.5 : 2} />
+              <span className="leading-none">{label}</span>
+            </button>
+          );
+        })}
+
+        {/* Center FAB button */}
+        <div className="relative flex items-center justify-center">
+          <button
+            onClick={() => { setEditingProductId(null); setPage('add'); }}
+            className={`-mt-7 flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all active:scale-95 ${
+              isAddActive
+                ? 'bg-green-500 shadow-green-500/30'
+                : 'bg-green-600 shadow-green-600/20 hover:bg-green-500 hover:shadow-green-500/30'
+            }`}
+            aria-label={t('nav.add')}
+            aria-current={isAddActive ? 'page' : undefined}
+          >
+            <Plus size={28} strokeWidth={2.5} className="text-white" />
+          </button>
+        </div>
+
+        {/* Right nav items */}
+        {RIGHT_ITEMS.map(({ id, labelKey, icon: Icon }) => {
           const isActive = currentPage === id;
           const label = t(labelKey);
           return (
             <button
               key={id}
-              onClick={() => { if (id === 'add') setEditingProductId(null); setPage(id); }}
+              onClick={() => setPage(id)}
               className={`flex min-w-[3rem] flex-col items-center gap-0.5 px-2 py-2 text-xs transition-colors ${
                 isActive
                   ? 'text-green-400'
diff --git a/src/components/ProductForm.tsx b/src/components/ProductForm.tsx
index 62895d6..efbd023 100644
--- a/src/components/ProductForm.tsx
+++ b/src/components/ProductForm.tsx
@@ -1,15 +1,32 @@
-import { useState, useEffect, useRef, type FormEvent } from 'react';
+import { useState, useEffect, useRef, useCallback, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { db, addProduct, updateProduct } from '../lib/db';
 import { useAppStore } from '../store/useAppStore';
-import { compressImage, fetchAndCompressImage } from '../lib/utils';
+import { compressImage, fetchAndCompressImage, lookupBarcode, formatDate, getDaysUntilExpiry, formatDaysUntil, getExpiryStatus, getStatusBadgeColor } from '../lib/utils';
+import { useOnlineStatus } from '../hooks/useOnlineStatus';
 import {
   DEFAULT_UNITS,
   type Product,
   type ProductCategory,
 } from '../types';
-import { Camera, Upload, X, Save, ArrowLeft } from 'lucide-react';
+import {
+  Camera,
+  Upload,
+  X,
+  Save,
+  ArrowLeft,
+  ScanBarcode,
+  CameraOff,
+  Loader2,
+  AlertCircle,
+  Package,
+  MapPin,
+  Calendar,
+  Layers,
+  PlusCircle,
+  ChevronDown,
+} from 'lucide-react';
 
 const FORM_STORAGE_KEY = 'preptrack-form-draft';
 
@@ -64,6 +81,286 @@ function clearFormDraft() {
   sessionStorage.removeItem(FORM_STORAGE_KEY);
 }
 
+function vibrate(pattern: number | number[]) {
+  if ('vibrate' in navigator) {
+    navigator.vibrate(pattern);
+  }
+}
+
+type ScanState =
+  | { type: 'idle' }
+  | { type: 'scanning' }
+  | { type: 'loading'; barcode: string }
+  | { type: 'duplicate'; barcode: string; existing: Product[]; apiName?: string }
+  | { type: 'error'; message: string }
+  | { type: 'success'; barcode: string; name?: string };
+
+function InlineScanner({ onScanned }: { onScanned: (data: { barcode: string; name?: string; imageUrl?: string }) => void }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const controlsRef = useRef<{ stop: () => void } | null>(null);
+  const processedRef = useRef(false);
+  const [scanState, setScanState] = useState<ScanState>({ type: 'idle' });
+  const [cameraActive, setCameraActive] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const isOnline = useOnlineStatus();
+  const isOnlineRef = useRef(isOnline);
+  isOnlineRef.current = isOnline;
+  const { t } = useTranslation();
+
+  const stopCamera = useCallback(() => {
+    controlsRef.current?.stop();
+    controlsRef.current = null;
+    if (videoRef.current?.srcObject) {
+      const stream = videoRef.current.srcObject as MediaStream;
+      stream.getTracks().forEach((tr) => tr.stop());
+      videoRef.current.srcObject = null;
+    }
+    setCameraActive(false);
+  }, []);
+
+  const startCamera = useCallback(async () => {
+    try {
+      // Dynamically import @zxing/browser only when needed
+      const { BrowserMultiFormatReader } = await import('@zxing/browser');
+      stopCamera();
+      processedRef.current = false;
+      setScanState({ type: 'scanning' });
+      setExpanded(true);
+      const reader = new BrowserMultiFormatReader();
+
+      if (!videoRef.current) {
+        setScanState({ type: 'error', message: t('scanner.cameraError') });
+        return;
+      }
+
+      const controls = await reader.decodeFromConstraints(
+        { video: { facingMode: 'environment' } },
+        videoRef.current,
+        async (result) => {
+          if (result && !processedRef.current) {
+            processedRef.current = true;
+            const barcode = result.getText();
+            stopCamera();
+            vibrate(100);
+            setScanState({ type: 'loading', barcode });
+
+            // Check for duplicates
+            const existing = await db.products
+              .where('barcode')
+              .equals(barcode)
+              .filter((p) => !p.archived)
+              .toArray();
+
+            if (existing.length > 0) {
+              let apiName: string | undefined;
+              if (isOnlineRef.current) {
+                const apiResult = await lookupBarcode(barcode);
+                apiName = apiResult?.name;
+              }
+              setScanState({ type: 'duplicate', barcode, existing, apiName });
+              return;
+            }
+
+            // No duplicate — look up online
+            if (isOnlineRef.current) {
+              const product = await lookupBarcode(barcode);
+              setScanState({ type: 'success', barcode, name: product?.name });
+              onScanned({ barcode, name: product?.name, imageUrl: product?.imageUrl });
+            } else {
+              setScanState({ type: 'success', barcode });
+              onScanned({ barcode });
+            }
+          }
+        }
+      );
+
+      controlsRef.current = controls;
+      setCameraActive(true);
+    } catch (err) {
+      const message =
+        err instanceof DOMException && err.name === 'NotAllowedError'
+          ? t('scanner.cameraNoAccess')
+          : t('scanner.cameraError');
+      setScanState({ type: 'error', message });
+    }
+  }, [stopCamera, onScanned, t]);
+
+  useEffect(() => {
+    return () => { stopCamera(); };
+  }, [stopCamera]);
+
+  function reset() {
+    processedRef.current = false;
+    setScanState({ type: 'idle' });
+  }
+
+  // Collapsed state — just a button
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        onClick={() => { setExpanded(true); startCamera(); }}
+        className="flex w-full items-center justify-center gap-3 rounded-xl border border-dashed border-green-500/40 bg-green-500/5 px-4 py-4 text-green-400 transition-colors hover:border-green-500/60 hover:bg-green-500/10"
+      >
+        <ScanBarcode size={24} />
+        <span className="font-medium">{t('scanner.startCamera')}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="space-y-3 rounded-xl border border-primary-600 bg-primary-800/50 p-3">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm font-medium text-gray-300">
+          <ScanBarcode size={16} />
+          {t('scanner.title')}
+        </div>
+        <button
+          type="button"
+          onClick={() => { stopCamera(); reset(); setExpanded(false); }}
+          className="rounded-lg p-1 text-gray-400 hover:bg-primary-700 hover:text-gray-200"
+        >
+          <ChevronDown size={18} />
+        </button>
+      </div>
+
+      {/* Camera View */}
+      <div className="relative overflow-hidden rounded-lg border border-primary-700 bg-black">
+        <video
+          ref={videoRef}
+          className={`aspect-[4/3] w-full object-cover ${cameraActive ? '' : 'hidden'}`}
+          autoPlay
+          playsInline
+          muted
+        />
+        {!cameraActive && scanState.type !== 'scanning' && scanState.type !== 'loading' && (
+          <div className="flex aspect-[4/3] items-center justify-center bg-primary-900">
+            <CameraOff size={36} className="text-gray-600" />
+          </div>
+        )}
+        {cameraActive && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-1/3 w-3/4 rounded-lg border-2 border-green-400/60 shadow-[0_0_0_9999px_rgba(0,0,0,0.3)]" />
+            <div className="scan-line" />
+          </div>
+        )}
+      </div>
+
+      {/* Scan controls & status */}
+      {scanState.type === 'idle' && (
+        <button
+          type="button"
+          onClick={startCamera}
+          className="flex w-full items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-green-500 active:scale-[0.98] transition-transform"
+        >
+          <Camera size={18} />
+          {t('scanner.startCamera')}
+        </button>
+      )}
+
+      {scanState.type === 'scanning' && (
+        <div className="flex items-center justify-center gap-2 rounded-lg border border-primary-600 bg-primary-800 px-4 py-2.5 text-sm">
+          <Loader2 size={16} className="animate-spin text-green-400" />
+          <span className="text-gray-300">{t('scanner.searching')}</span>
+          <button type="button" onClick={() => { stopCamera(); reset(); }} className="ms-auto text-gray-400 hover:text-gray-200">
+            <X size={16} />
+          </button>
+        </div>
+      )}
+
+      {scanState.type === 'loading' && (
+        <div className="flex items-center justify-center gap-2 rounded-lg border border-primary-600 bg-primary-800 px-4 py-2.5 text-sm">
+          <Loader2 size={16} className="animate-spin text-blue-400" />
+          <span className="text-gray-300">{t('scanner.loadingProduct', { barcode: scanState.barcode })}</span>
+        </div>
+      )}
+
+      {scanState.type === 'success' && (
+        <div className="flex items-center gap-2 rounded-lg border border-green-500/30 bg-green-500/10 px-4 py-2.5 text-sm text-green-300">
+          <Package size={16} />
+          <span>{scanState.name || scanState.barcode}</span>
+          <button type="button" onClick={() => { reset(); startCamera(); }} className="ms-auto text-xs text-gray-400 hover:text-gray-200">
+            {t('scanner.scanAgain')}
+          </button>
+        </div>
+      )}
+
+      {/* Duplicate found */}
+      {scanState.type === 'duplicate' && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Package size={16} className="text-orange-400" />
+            <p className="text-sm font-semibold text-orange-300">{t('scanner.duplicateFound')}</p>
+          </div>
+          <p className="text-xs text-gray-400">
+            Barcode: {scanState.barcode}{scanState.apiName ? ` · ${scanState.apiName}` : ''}
+          </p>
+          <div className="space-y-1.5">
+            {scanState.existing.map((product) => {
+              const status = getExpiryStatus(product.expiryDate);
+              const daysLeft = getDaysUntilExpiry(product.expiryDate);
+              return (
+                <div key={product.id} className="rounded-lg border border-primary-700 bg-primary-800 p-2.5 text-xs">
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="font-medium text-gray-200">{product.name}</p>
+                    <span className={`shrink-0 rounded-full px-2 py-0.5 text-xs font-semibold ${getStatusBadgeColor(status)}`}>
+                      {t(`status.${status}`)}
+                    </span>
+                  </div>
+                  <div className="mt-1.5 grid grid-cols-2 gap-x-3 gap-y-0.5 text-gray-400">
+                    <div className="flex items-center gap-1"><MapPin size={10} />{product.storageLocation}</div>
+                    <div className="flex items-center gap-1"><Layers size={10} />{product.quantity} {product.unit}</div>
+                    <div className="flex items-center gap-1"><Calendar size={10} />{formatDate(product.expiryDate, product.expiryPrecision)}</div>
+                    <div className={`flex items-center gap-1 font-semibold ${
+                      status === 'expired' || status === 'critical' ? 'text-red-400' :
+                      status === 'warning' ? 'text-orange-400' :
+                      status === 'soon' ? 'text-yellow-400' : 'text-green-400'
+                    }`}>{formatDaysUntil(daysLeft)}</div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                const name = scanState.apiName || scanState.existing[0]?.name;
+                setScanState({ type: 'success', barcode: scanState.barcode, name });
+                onScanned({ barcode: scanState.barcode, name });
+              }}
+              className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-green-600 px-3 py-2 text-xs font-medium text-white hover:bg-green-500 active:scale-[0.98] transition-transform"
+            >
+              <PlusCircle size={14} />
+              {t('scanner.addAnyway')}
+            </button>
+            <button
+              type="button"
+              onClick={() => { reset(); startCamera(); }}
+              className="flex-1 rounded-lg border border-primary-600 px-3 py-2 text-xs text-gray-300 hover:bg-primary-700"
+            >
+              {t('scanner.scanAgain')}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {scanState.type === 'error' && (
+        <div className="space-y-2">
+          <div className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3">
+            <AlertCircle size={16} className="shrink-0 text-red-400 mt-0.5" />
+            <p className="text-xs text-gray-300">{scanState.message}</p>
+          </div>
+          <button type="button" onClick={() => { reset(); startCamera(); }} className="w-full text-xs text-gray-400 hover:text-gray-300">
+            {t('scanner.retry')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ProductForm() {
   const { editingProductId, setPage, setEditingProductId, scannedData, setScannedData } = useAppStore();
   const locations = useLiveQuery(() => db.storageLocations.toArray()) ?? [];
@@ -119,7 +416,6 @@ export function ProductForm() {
     populatedRef.current = false;
     if (!editingProductId) {
       setForm((prev) => {
-        // Only reset if the form was populated with editing data
         if (prev.name && !restoredRef.current) {
           return { ...defaultForm, storageLocation: prev.storageLocation || '' };
         }
@@ -151,6 +447,19 @@ export function ProductForm() {
     setForm((prev) => ({ ...prev, [key]: value }));
   }
 
+  const handleScanned = useCallback((data: { barcode: string; name?: string; imageUrl?: string }) => {
+    setForm((prev) => ({
+      ...prev,
+      barcode: data.barcode || prev.barcode,
+      name: data.name || prev.name,
+    }));
+    if (data.imageUrl) {
+      fetchAndCompressImage(data.imageUrl).then((base64) => {
+        if (base64) setForm((prev) => ({ ...prev, photo: base64 }));
+      });
+    }
+  }, []);
+
   function handleCameraClick() {
     saveFormDraft(form, editingProductId);
     cameraInputRef.current?.click();
@@ -214,6 +523,11 @@ export function ProductForm() {
         </h2>
       </div>
 
+      {/* Inline Barcode Scanner — only when adding new products */}
+      {!editingProductId && (
+        <InlineScanner onScanned={handleScanned} />
+      )}
+
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
           <label className="mb-1 block text-sm font-medium text-gray-300">{t('form.photo')}</label>
diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts
index 2e1f587..3c97a1d 100644
--- a/src/store/useAppStore.ts
+++ b/src/store/useAppStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-type Page = 'dashboard' | 'products' | 'add' | 'scanner' | 'settings' | 'stats';
+type Page = 'dashboard' | 'products' | 'add' | 'settings' | 'stats';
 
 interface FilterState {
   search: string;