diff --git a/client/src/App.jsx b/client/src/App.jsx
index 18d17a9..530a443 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -8,24 +8,16 @@ import {
   resetMenu,
   updateOrderStatus
 } from "./api.js";
-import logo from "../../assets/ranaze-logo-transparent.png";
-import heroCup from "../../assets/ranaze-bubble-tea-single-cup-transparent.png";
-
-const queueStatuses = ["new", "making", "ready"];
-const orderIdleTimeoutMs = 90_000;
-const adminUnlockPressMs = 3_000;
-const adminPassword = "admin";
-const tabLabels = {
-  queue: "Order Status",
-  menu: "Menu Admin"
-};
-const initialBuilder = (settings) => ({
-  size: settings.sizeOptions[0]?.name ?? "Regular",
-  sweetness: settings.sweetnessOptions[3] ?? settings.sweetnessOptions[0] ?? "100%",
-  ice: settings.iceOptions[2] ?? settings.iceOptions[0] ?? "Regular Ice",
-  toppings: [],
-  notes: ""
-});
+import AppHeader from "./components/AppHeader.jsx";
+import MenuPage from "./pages/MenuPage.jsx";
+import OrderPage from "./pages/OrderPage.jsx";
+import QueuePage from "./pages/QueuePage.jsx";
+import {
+  ADMIN_PASSWORD,
+  ADMIN_UNLOCK_PRESS_MS,
+  initialBuilder,
+  ORDER_IDLE_TIMEOUT_MS
+} from "./lib/order.js";
 
 export default function App() {
   const adminPressTimerRef = useRef(null);
@@ -73,13 +65,13 @@ export default function App() {
 
     let timeoutId = window.setTimeout(() => {
       setOrderMode(null);
-    }, orderIdleTimeoutMs);
+    }, ORDER_IDLE_TIMEOUT_MS);
 
     function resetIdleTimer() {
       window.clearTimeout(timeoutId);
       timeoutId = window.setTimeout(() => {
         setOrderMode(null);
-      }, orderIdleTimeoutMs);
+      }, ORDER_IDLE_TIMEOUT_MS);
     }
 
     const events = ["pointerdown", "keydown", "touchstart"];
@@ -138,6 +130,30 @@ export default function App() {
     }
   }
 
+  function startAdminPress() {
+    window.clearTimeout(adminPressTimerRef.current);
+    setLogoPressing(true);
+    adminPressTimerRef.current = window.setTimeout(() => {
+      if (adminUnlocked) {
+        setAdminUnlocked(false);
+        setView("order");
+      } else {
+        const password = window.prompt("Enter admin password");
+        if (password === ADMIN_PASSWORD) {
+          setAdminUnlocked(true);
+        } else if (password !== null && password !== "") {
+          window.alert("Incorrect password");
+        }
+      }
+      setLogoPressing(false);
+    }, ADMIN_UNLOCK_PRESS_MS);
+  }
+
+  function cancelAdminPress() {
+    window.clearTimeout(adminPressTimerRef.current);
+    setLogoPressing(false);
+  }
+
   if (loading) {
     return <div className="page-state">Loading POS...</div>;
   }
@@ -151,698 +167,74 @@ export default function App() {
     );
   }
 
-  const categories = ["All", ...new Set(menu.map((item) => item.category))];
-  const visibleMenu = menu.filter((item) => {
-    return selectedCategory === "All" || item.category === selectedCategory;
-  });
-  const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
-  const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
-  const modeDetails = {
-    premade: {
-      stepLabel: "House favorite",
-      title: selectedDrink?.name || "Pick a house favorite",
-      description: "Choose one of our ready-to-enjoy drinks and add it in one tap.",
-      buttonLabel: "Add to my order"
-    },
-    simple: {
-      stepLabel: "Quick customize",
-      title: selectedDrink?.name || "Choose your drink",
-      description: "Pick your drink, then make a few simple choices like size and sweetness.",
-      buttonLabel: "Add to my order"
-    },
-    detailed: {
-      stepLabel: "Build it your way",
-      title: selectedDrink?.name || "Build your drink",
-      description: "Customize every detail, including ice, toppings, and special requests.",
-      buttonLabel: "Add to my order"
-    }
-  };
-  const activeMode = orderMode ? modeDetails[orderMode] : null;
-
-  function startAdminPress() {
-    window.clearTimeout(adminPressTimerRef.current);
-    setLogoPressing(true);
-    adminPressTimerRef.current = window.setTimeout(() => {
-      if (adminUnlocked) {
-        setAdminUnlocked(false);
-        setView("order");
-      } else {
-        const password = window.prompt("Enter admin password");
-        if (password === adminPassword) {
-          setAdminUnlocked(true);
-        } else if (password !== null && password !== "") {
-          window.alert("Incorrect password");
-        }
-      }
-      setLogoPressing(false);
-    }, adminUnlockPressMs);
-  }
-
-  function cancelAdminPress() {
-    window.clearTimeout(adminPressTimerRef.current);
-    setLogoPressing(false);
-  }
-
-  function addLineToTicket(drink, lineBuilder) {
-    setTicket((current) => [
-      ...current,
-      {
-        menuItemId: drink._id,
-        name: drink.name,
-        basePrice: drink.basePrice,
-        ...lineBuilder
-      }
-    ]);
-  }
-
   return (
     <div className="app-shell">
-      <header className="topbar">
-        <div className="brand-lockup">
-          <button
-            className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
-            onPointerDown={startAdminPress}
-            onPointerUp={cancelAdminPress}
-            onPointerLeave={cancelAdminPress}
-            onPointerCancel={cancelAdminPress}
-            onContextMenu={(event) => event.preventDefault()}
-            type="button"
-          >
-            <img src={logo} alt="Ranaze Bubble Tea & Slush" />
-          </button>
-          <div className="brand-copy">
-            <p className="eyebrow">Ranaze Bubble Tea & Slush</p>
-            <h1>Choose your drink</h1>
-            <p className="muted">
-              Fresh bubble tea, fruit slushes, and easy customizations made just the way you like them.
-            </p>
-          </div>
-        </div>
-        {adminUnlocked && (
-          <nav className="tabs">
-            {visibleTabs.map((tab) => (
-              <button
-                key={tab}
-                className={`tab ${view === tab ? "is-active" : ""}`}
-                onClick={() => setView(tab)}
-              >
-                {tabLabels[tab]}
-              </button>
-            ))}
-            <button
-              className="tab admin-lock-btn"
-              onClick={() => {
-                setAdminUnlocked(false);
-                setView("order");
-              }}
-            >
-              Hide Admin
-            </button>
-          </nav>
-        )}
-      </header>
+      <AppHeader
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={startAdminPress}
+        onLogoPointerUp={cancelAdminPress}
+        onLogoPointerLeave={cancelAdminPress}
+        onLogoPointerCancel={cancelAdminPress}
+        onHideAdmin={() => {
+          setAdminUnlocked(false);
+          setView("order");
+        }}
+        view={view}
+        setView={setView}
+      />
 
       {view === "order" && (
-        <section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
-          {orderMode && (
-            <div className="order-toolbar">
-              <button className="text-btn" onClick={() => {
-                setOrderMode(null);
-                setShowCart(false);
-              }}>
-                Back to drink options
-              </button>
-              <div className="order-toolbar-actions">
-                {ticket.length > 0 && (
-                  <button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
-                    View Order ({ticket.length})
-                  </button>
-                )}
-                <p className="muted order-toolbar-note">
-                  This screen returns to the drink menu after 90 seconds of inactivity.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {!orderMode && (
-            <section className="panel mode-launcher">
-              <div className="mode-launcher-copy">
-                <p className="eyebrow">Welcome to Ranaze</p>
-                <h2>How would you like to choose your drink?</h2>
-                <p className="muted">
-                  Start with a signature favorite, make a few quick changes, or fully customize your drink.
-                </p>
-              </div>
-              <div className="mode-hero">
-                <div className="mode-hero-copy">
-                  <p className="eyebrow">Freshly made for you</p>
-                  <h3>Bubble tea, fruit tea, and slushes with easy customization.</h3>
-                </div>
-                <img src={heroCup} alt="Ranaze signature bubble tea" className="mode-hero-image" />
-              </div>
-              <div className="mode-grid">
-                <button className="mode-card" onClick={() => setOrderMode("premade")}>
-                  <p className="eyebrow">Fastest</p>
-                  <h3>House Favorites</h3>
-                  <p className="muted">Perfect if you want one of our signature drinks with no extra steps.</p>
-                </button>
-                <button className="mode-card" onClick={() => setOrderMode("simple")}>
-                  <p className="eyebrow">Easy</p>
-                  <h3>Quick Customization</h3>
-                  <p className="muted">Choose your drink, then adjust size and sweetness in just a few taps.</p>
-                </button>
-                <button className="mode-card" onClick={() => setOrderMode("detailed")}>
-                  <p className="eyebrow">Flexible</p>
-                  <h3>Build It Your Way</h3>
-                  <p className="muted">Fine-tune ice, toppings, and special instructions for the exact drink you want.</p>
-                </button>
-              </div>
-            </section>
-          )}
-
-          {orderMode && !showCart && (
-          <div className="panel">
-            <div className="panel-header">
-              <div>
-                <p className="eyebrow">{activeMode.stepLabel}</p>
-                <h2>Choose a drink</h2>
-                <p className="muted builder-intro">{activeMode.description}</p>
-              </div>
-              <div className="builder-header-actions">
-                <button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
-                {ticket.length > 0 && (
-                  <button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
-                )}
-              </div>
-            </div>
-            <div className="chip-row">
-              {categories.map((category) => (
-                <button
-                  key={category}
-                  className={`chip ${selectedCategory === category ? "is-active" : ""}`}
-                  onClick={() => setSelectedCategory(category)}
-                >
-                  {category}
-                </button>
-              ))}
-            </div>
-            <div className="drink-grid">
-              {visibleMenu.map((drink) => (
-                <button
-                  key={drink._id}
-                  className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
-                  onClick={() => {
-                    if (orderMode === "premade") {
-                      addLineToTicket(drink, initialBuilder(settings));
-                      return;
-                    }
-                    setSelectedDrinkId(drink._id);
-                    setBuilder(initialBuilder(settings));
-                  }}
-                >
-                  <div className="drink-card-badge">
-                    <span>{categoryMonogram(drink.category)}</span>
-                  </div>
-                  <div className="drink-card-copy">
-                    <p className="eyebrow">{drink.category}</p>
-                    <h3>{drink.name}</h3>
-                    <p className="muted">{drink.description}</p>
-                  </div>
-                  <strong>{formatCurrency(drink.basePrice)}</strong>
-                </button>
-              ))}
-            </div>
-            {orderMode === "premade" && (
-              <div className="empty-state mode-note">
-                Tap any drink to add it to your order. Use the order button whenever you are ready to review.
-              </div>
-            )}
-          </div>
-          )}
-
-          {orderMode && !showCart && orderMode !== "premade" && (
-          <div className="panel">
-            {selectedDrink && builder ? (
-              <div className="inline-builder">
-                <div className="inline-builder-header">
-                  <div>
-                    <p className="eyebrow">Your drink</p>
-                    <h3>{activeMode.title}</h3>
-                  </div>
-                  <div className="line-price">
-                    {formatCurrency(lineTotal(selectedDrink, builder, settings))}
-                  </div>
-                </div>
-
-                {orderMode !== "premade" && (
-                  <OptionGroup
-                    label="Size"
-                    choices={settings.sizeOptions.map((option) => option.name)}
-                    value={builder.size}
-                    onChange={(size) => setBuilder((current) => ({ ...current, size }))}
-                  />
-                )}
-                {orderMode !== "premade" && (
-                  <OptionGroup
-                    label="Sweetness"
-                    choices={settings.sweetnessOptions}
-                    value={builder.sweetness}
-                    onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
-                  />
-                )}
-                {orderMode === "detailed" && (
-                  <OptionGroup
-                    label="Ice"
-                    choices={settings.iceOptions}
-                    value={builder.ice}
-                    onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
-                  />
-                )}
-                {orderMode === "detailed" && (
-                  <div className="field">
-                    <span className="field-label">Toppings</span>
-                    <div className="choice-grid">
-                      {settings.toppings.map((topping) => {
-                        const checked = builder.toppings.includes(topping.name);
-                        return (
-                          <label key={topping.name} className="checkbox-tile">
-                            <input
-                              type="checkbox"
-                              checked={checked}
-                              onChange={() => {
-                                setBuilder((current) => ({
-                                  ...current,
-                                  toppings: checked
-                                    ? current.toppings.filter((item) => item !== topping.name)
-                                    : [...current.toppings, topping.name]
-                                }));
-                              }}
-                            />
-                            <span>{topping.name} (+{formatCurrency(topping.price)})</span>
-                          </label>
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
-                {orderMode === "detailed" && (
-                  <label className="field">
-                    <span className="field-label">Special instructions</span>
-                    <textarea
-                      value={builder.notes}
-                      rows="3"
-                      onChange={(event) => {
-                        const notes = event.target.value;
-                        setBuilder((current) => ({ ...current, notes }));
-                      }}
-                    />
-                  </label>
-                )}
-                <div className="builder-actions">
-                  <button
-                    className="primary-btn"
-                    onClick={() => {
-                      addLineToTicket(selectedDrink, builder);
-                      setBuilder(initialBuilder(settings));
-                    }}
-                  >
-                    {activeMode.buttonLabel}
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
-            )}
-          </div>
-          )}
-
-          {orderMode && showCart && (
-          <div className="panel cart-panel">
-            <section className="ticket">
-              <div className="ticket-header">
-                <div>
-                  <p className="eyebrow">Your order</p>
-                  <h3>Review your drinks</h3>
-                </div>
-                <div className="ticket-header-actions">
-                  <button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
-                  <button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
-                </div>
-              </div>
-
-              <div className="ticket-lines">
-                {ticket.length === 0 && <div className="empty-state">Your order is empty.</div>}
-                {ticket.map((line, index) => (
-                  <article key={`${line.menuItemId}-${index}`} className="ticket-line">
-                    <header>
-                      <strong>{line.name}</strong>
-                      <button
-                        className="text-btn"
-                        onClick={() => {
-                          setTicket((current) => current.filter((_, lineIndex) => lineIndex !== index));
-                        }}
-                      >
-                        Remove
-                      </button>
-                    </header>
-                    <p>{line.size} • {line.sweetness} • {line.ice}</p>
-                    <p className="muted">{line.toppings.length ? line.toppings.join(", ") : "No extra toppings"}</p>
-                    {line.notes && <p className="muted">Special request: {line.notes}</p>}
-                    <div className="line-meta">
-                      <span>Drink total</span>
-                      <strong>{formatCurrency(lineTotal({ basePrice: line.basePrice }, line, settings))}</strong>
-                    </div>
-                  </article>
-                ))}
-              </div>
-
-              <div className="checkout-form">
-                <label className="field">
-                  <span className="field-label">Name for the order</span>
-                  <input
-                    placeholder="Optional"
-                    value={customerName}
-                    maxLength="40"
-                    onChange={(event) => setCustomerName(event.target.value)}
-                  />
-                </label>
-                <label className="field">
-                  <span className="field-label">How would you like to pay?</span>
-                  <select
-                    value={paymentMethod}
-                    onChange={(event) => setPaymentMethod(event.target.value)}
-                  >
-                    <option value="cash">Cash</option>
-                    <option value="tab">Store Tab</option>
-                    <option value="unpaid">Pay Later</option>
-                  </select>
-                </label>
-                <button
-                  className="primary-btn"
-                  disabled={ticket.length === 0}
-                  onClick={async () => {
-                    try {
-                      const payload = {
-                        customerName,
-                        paymentMethod,
-                        lines: ticket
-                      };
-                      const response = await createOrder(payload);
-                      setOrders((current) => [response.order, ...current]);
-                      setTicket([]);
-                      setCustomerName("");
-                      setPaymentMethod("cash");
-                      setShowCart(false);
-                      setOrderMode(null);
-                    } catch (requestError) {
-                      setError(requestError.message);
-                    }
-                  }}
-                >
-                  Place my order
-                </button>
-              </div>
-            </section>
-          </div>
-          )}
-        </section>
+        <OrderPage
+          menu={menu}
+          settings={settings}
+          selectedCategory={selectedCategory}
+          setSelectedCategory={setSelectedCategory}
+          selectedDrinkId={selectedDrinkId}
+          setSelectedDrinkId={setSelectedDrinkId}
+          builder={builder}
+          setBuilder={setBuilder}
+          ticket={ticket}
+          setTicket={setTicket}
+          orderMode={orderMode}
+          setOrderMode={setOrderMode}
+          showCart={showCart}
+          setShowCart={setShowCart}
+          customerName={customerName}
+          setCustomerName={setCustomerName}
+          paymentMethod={paymentMethod}
+          setPaymentMethod={setPaymentMethod}
+          createOrder={createOrder}
+          setOrders={setOrders}
+          setError={setError}
+        />
       )}
 
       {view === "queue" && (
-        <section className="queue-screen">
-          <div className="queue-summary">
-            <SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
-            <SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
-            <SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
-            <SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
-          </div>
-          <div className="queue-columns">
-            {queueStatuses.map((status) => (
-              <section key={status} className="queue-column">
-                <div className="column-head">
-                  <p className="eyebrow">{titleCase(status)}</p>
-                  <h3>{orders.filter((order) => order.status === status).length} orders</h3>
-                </div>
-                {orders.filter((order) => order.status === status).map((order) => (
-                  <article key={order._id} className="queue-card">
-                    <header>
-                      <div>
-                        <p className="eyebrow">Order #{order.number}</p>
-                        <h3>{order.customerName || "Walk-in"}</h3>
-                      </div>
-                      <strong>{formatCurrency(order.total)}</strong>
-                    </header>
-                    <p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
-                    <div>
-                      {order.lines.map((line, index) => (
-                        <p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
-                      ))}
-                    </div>
-                    <div className="status-actions">
-                      {nextStatusButton(order, async (newStatus) => {
-                        try {
-                          const response = await updateOrderStatus(order._id, newStatus);
-                          setOrders((current) => current.map((item) => {
-                            return item._id === response.order._id ? response.order : item;
-                          }));
-                        } catch (requestError) {
-                          setError(requestError.message);
-                        }
-                      })}
-                      <button
-                        className="status-btn danger"
-                        onClick={async () => {
-                          try {
-                            await deleteOrder(order._id);
-                            setOrders((current) => current.filter((item) => item._id !== order._id));
-                          } catch (requestError) {
-                            setError(requestError.message);
-                          }
-                        }}
-                      >
-                        Delete
-                      </button>
-                    </div>
-                  </article>
-                ))}
-                {orders.filter((order) => order.status === status).length === 0 && (
-                  <div className="empty-state">No orders in {status}.</div>
-                )}
-              </section>
-            ))}
-          </div>
-        </section>
+        <QueuePage
+          orders={orders}
+          updateOrderStatus={updateOrderStatus}
+          deleteOrder={deleteOrder}
+          setOrders={setOrders}
+          setError={setError}
+        />
       )}
 
       {view === "menu" && (
-        <section className="menu-screen">
-          <div className="panel">
-            <div className="panel-header">
-              <div>
-                <p className="eyebrow">Menu management</p>
-                <h2>Drinks and pricing</h2>
-              </div>
-            </div>
-            <div className="menu-form">
-              <label className="field">
-                <span className="field-label">Drink name</span>
-                <input
-                  value={menuForm.name}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, name: event.target.value }))}
-                />
-              </label>
-              <label className="field">
-                <span className="field-label">Category</span>
-                <input
-                  value={menuForm.category}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, category: event.target.value }))}
-                />
-              </label>
-              <label className="field">
-                <span className="field-label">Description</span>
-                <textarea
-                  rows="3"
-                  value={menuForm.description}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, description: event.target.value }))}
-                />
-              </label>
-              <label className="field">
-                <span className="field-label">Base price</span>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={menuForm.price}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, price: event.target.value }))}
-                />
-              </label>
-              <button
-                className="primary-btn"
-                onClick={async () => {
-                  try {
-                    const response = await createMenuItem({
-                      name: menuForm.name,
-                      category: menuForm.category,
-                      description: menuForm.description,
-                      basePrice: Number(menuForm.price)
-                    });
-                    setMenu((current) => [...current, response.menuItem]);
-                    setMenuForm({ name: "", category: "", description: "", price: "" });
-                  } catch (requestError) {
-                    setError(requestError.message);
-                  }
-                }}
-              >
-                Add drink
-              </button>
-            </div>
-          </div>
-
-          <div className="panel">
-            <div className="panel-header">
-              <div>
-                <p className="eyebrow">Saved in Mongo</p>
-                <h2>Current menu</h2>
-              </div>
-              <button
-                className="text-btn"
-                onClick={async () => {
-                  try {
-                    const response = await resetMenu();
-                    setMenu(response.menu);
-                    setSelectedDrinkId(response.menu[0]?._id ?? null);
-                    setBuilder(initialBuilder(settings));
-                  } catch (requestError) {
-                    setError(requestError.message);
-                  }
-                }}
-              >
-                Reset defaults
-              </button>
-            </div>
-            <div className="menu-list">
-              {menu.map((drink) => (
-                <article key={drink._id} className="menu-item">
-                  <div>
-                    <p className="eyebrow">{drink.category}</p>
-                    <h3>{drink.name} <span className="muted">{formatCurrency(drink.basePrice)}</span></h3>
-                    <p className="muted">{drink.description}</p>
-                  </div>
-                  <div className="menu-item-actions">
-                    <button
-                      className="text-btn"
-                      onClick={async () => {
-                        try {
-                          await deleteMenuItem(drink._id);
-                          setMenu((current) => current.filter((item) => item._id !== drink._id));
-                        } catch (requestError) {
-                          setError(requestError.message);
-                        }
-                      }}
-                    >
-                      Delete
-                    </button>
-                  </div>
-                </article>
-              ))}
-            </div>
-          </div>
-        </section>
+        <MenuPage
+          menu={menu}
+          menuForm={menuForm}
+          setMenuForm={setMenuForm}
+          createMenuItem={createMenuItem}
+          deleteMenuItem={deleteMenuItem}
+          resetMenu={resetMenu}
+          setMenu={setMenu}
+          setSelectedDrinkId={setSelectedDrinkId}
+          settings={settings}
+          setBuilder={setBuilder}
+          setError={setError}
+        />
       )}
     </div>
   );
 }
-
-function OptionGroup({ label, choices, value, onChange }) {
-  return (
-    <div className="field">
-      <span className="field-label">{label}</span>
-      <div className="choice-row">
-        {choices.map((choice) => (
-          <button
-            key={choice}
-            className={`choice-btn ${choice === value ? "is-active" : ""}`}
-            onClick={() => onChange(choice)}
-          >
-            {choice}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function SummaryCard({ label, value }) {
-  return (
-    <article className="summary-card">
-      <p className="eyebrow">{label}</p>
-      <strong>{value}</strong>
-    </article>
-  );
-}
-
-function categoryMonogram(category) {
-  const map = {
-    "Milk Tea": "MT",
-    "Fruit Tea": "FT",
-    Specialty: "SP"
-  };
-
-  return map[category] || category.slice(0, 2).toUpperCase();
-}
-
-function nextStatusButton(order, onAdvance) {
-  const map = {
-    new: "making",
-    making: "ready",
-    ready: "completed"
-  };
-  const next = map[order.status];
-  if (!next) {
-    return null;
-  }
-
-  return (
-    <button className="status-btn" onClick={() => onAdvance(next)}>
-      {next === "making" ? "Start making" : next === "ready" ? "Mark ready" : "Complete"}
-    </button>
-  );
-}
-
-function toppingTotal(toppings, settings) {
-  return toppings.reduce((sum, toppingName) => {
-    const topping = settings.toppings.find((item) => item.name === toppingName);
-    return sum + (topping?.price ?? 0);
-  }, 0);
-}
-
-function sizeDelta(size, settings) {
-  return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
-}
-
-function lineTotal(drink, builder, settings) {
-  return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
-}
-
-function ticketTotal(ticket, settings) {
-  return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
-}
-
-function formatCurrency(value) {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD"
-  }).format(value);
-}
-
-function formatTime(value) {
-  return new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit"
-  }).format(new Date(value));
-}
-
-function titleCase(value) {
-  return value.charAt(0).toUpperCase() + value.slice(1);
-}
diff --git a/client/src/components/AppHeader.jsx b/client/src/components/AppHeader.jsx
new file mode 100644
index 0000000..006bd14
--- /dev/null
+++ b/client/src/components/AppHeader.jsx
@@ -0,0 +1,62 @@
+import logo from "../../../assets/ranaze-logo-transparent.png";
+
+const tabLabels = {
+  queue: "Order Status",
+  menu: "Menu Admin"
+};
+
+export default function AppHeader({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView
+}) {
+  const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
+
+  return (
+    <header className="topbar">
+      <div className="brand-lockup">
+        <button
+          className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
+          onPointerDown={onLogoPointerDown}
+          onPointerUp={onLogoPointerUp}
+          onPointerLeave={onLogoPointerLeave}
+          onPointerCancel={onLogoPointerCancel}
+          onContextMenu={(event) => event.preventDefault()}
+          type="button"
+        >
+          <img src={logo} alt="Ranaze Bubble Tea & Slush" />
+        </button>
+        <div className="brand-copy">
+          <p className="eyebrow">Ranaze Bubble Tea & Slush</p>
+          <h1>Choose your drink</h1>
+          <p className="muted">
+            Fresh drinks.
+            Made your way.
+          </p>
+        </div>
+      </div>
+      {adminUnlocked && (
+        <nav className="tabs">
+          {visibleTabs.map((tab) => (
+            <button
+              key={tab}
+              className={`tab ${view === tab ? "is-active" : ""}`}
+              onClick={() => setView(tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+          <button className="tab admin-lock-btn" onClick={onHideAdmin}>
+            Hide Admin
+          </button>
+        </nav>
+      )}
+    </header>
+  );
+}
diff --git a/client/src/components/OptionGroup.jsx b/client/src/components/OptionGroup.jsx
new file mode 100644
index 0000000..004c3e6
--- /dev/null
+++ b/client/src/components/OptionGroup.jsx
@@ -0,0 +1,18 @@
+export default function OptionGroup({ label, choices, value, onChange }) {
+  return (
+    <div className="field">
+      <span className="field-label">{label}</span>
+      <div className="choice-row">
+        {choices.map((choice) => (
+          <button
+            key={choice}
+            className={`choice-btn ${choice === value ? "is-active" : ""}`}
+            onClick={() => onChange(choice)}
+          >
+            {choice}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/SummaryCard.jsx b/client/src/components/SummaryCard.jsx
new file mode 100644
index 0000000..d75d9c6
--- /dev/null
+++ b/client/src/components/SummaryCard.jsx
@@ -0,0 +1,8 @@
+export default function SummaryCard({ label, value }) {
+  return (
+    <article className="summary-card">
+      <p className="eyebrow">{label}</p>
+      <strong>{value}</strong>
+    </article>
+  );
+}
diff --git a/client/src/lib/formatters.js b/client/src/lib/formatters.js
new file mode 100644
index 0000000..e91fc1c
--- /dev/null
+++ b/client/src/lib/formatters.js
@@ -0,0 +1,17 @@
+export function formatCurrency(value) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(value);
+}
+
+export function formatTime(value) {
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(new Date(value));
+}
+
+export function titleCase(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
diff --git a/client/src/lib/order.js b/client/src/lib/order.js
new file mode 100644
index 0000000..3d88873
--- /dev/null
+++ b/client/src/lib/order.js
@@ -0,0 +1,48 @@
+export const ORDER_IDLE_TIMEOUT_MS = 90_000;
+export const ADMIN_UNLOCK_PRESS_MS = 3_000;
+export const ADMIN_PASSWORD = "admin";
+
+export const HERO_CATEGORIES = [
+  { label: "Milk Tea", asset: "milk-tea", displayLabel: "Milk Tea" },
+  { label: "Fruit Tea", asset: "fruit-tea", displayLabel: "Fruit Tea" },
+  { label: "Specialty", asset: "slush", displayLabel: "Slush" }
+];
+
+export function initialBuilder(settings) {
+  return {
+    size: settings.sizeOptions[0]?.name ?? "Regular",
+    sweetness: settings.sweetnessOptions[3] ?? settings.sweetnessOptions[0] ?? "100%",
+    ice: settings.iceOptions[2] ?? settings.iceOptions[0] ?? "Regular Ice",
+    toppings: [],
+    notes: ""
+  };
+}
+
+export function toppingTotal(toppings, settings) {
+  return toppings.reduce((sum, toppingName) => {
+    const topping = settings.toppings.find((item) => item.name === toppingName);
+    return sum + (topping?.price ?? 0);
+  }, 0);
+}
+
+export function sizeDelta(size, settings) {
+  return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
+}
+
+export function lineTotal(drink, builder, settings) {
+  return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
+}
+
+export function ticketTotal(ticket, settings) {
+  return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
+}
+
+export function categoryMonogram(category) {
+  const map = {
+    "Milk Tea": "MT",
+    "Fruit Tea": "FT",
+    Specialty: "SP"
+  };
+
+  return map[category] || category.slice(0, 2).toUpperCase();
+}
diff --git a/client/src/pages/MenuPage.jsx b/client/src/pages/MenuPage.jsx
new file mode 100644
index 0000000..c0a5edd
--- /dev/null
+++ b/client/src/pages/MenuPage.jsx
@@ -0,0 +1,132 @@
+import { formatCurrency } from "../lib/formatters.js";
+import { initialBuilder } from "../lib/order.js";
+
+export default function MenuPage({
+  menu,
+  menuForm,
+  setMenuForm,
+  createMenuItem,
+  deleteMenuItem,
+  resetMenu,
+  setMenu,
+  setSelectedDrinkId,
+  settings,
+  setBuilder,
+  setError
+}) {
+  return (
+    <section className="menu-screen">
+      <div className="panel">
+        <div className="panel-header">
+          <div>
+            <p className="eyebrow">Menu management</p>
+            <h2>Drinks and pricing</h2>
+          </div>
+        </div>
+        <div className="menu-form">
+          <label className="field">
+            <span className="field-label">Drink name</span>
+            <input
+              value={menuForm.name}
+              onChange={(event) => setMenuForm((current) => ({ ...current, name: event.target.value }))}
+            />
+          </label>
+          <label className="field">
+            <span className="field-label">Category</span>
+            <input
+              value={menuForm.category}
+              onChange={(event) => setMenuForm((current) => ({ ...current, category: event.target.value }))}
+            />
+          </label>
+          <label className="field">
+            <span className="field-label">Description</span>
+            <textarea
+              rows="3"
+              value={menuForm.description}
+              onChange={(event) => setMenuForm((current) => ({ ...current, description: event.target.value }))}
+            />
+          </label>
+          <label className="field">
+            <span className="field-label">Base price</span>
+            <input
+              type="number"
+              min="0"
+              step="0.01"
+              value={menuForm.price}
+              onChange={(event) => setMenuForm((current) => ({ ...current, price: event.target.value }))}
+            />
+          </label>
+          <button
+            className="primary-btn"
+            onClick={async () => {
+              try {
+                const response = await createMenuItem({
+                  name: menuForm.name,
+                  category: menuForm.category,
+                  description: menuForm.description,
+                  basePrice: Number(menuForm.price)
+                });
+                setMenu((current) => [...current, response.menuItem]);
+                setMenuForm({ name: "", category: "", description: "", price: "" });
+              } catch (requestError) {
+                setError(requestError.message);
+              }
+            }}
+          >
+            Add drink
+          </button>
+        </div>
+      </div>
+
+      <div className="panel">
+        <div className="panel-header">
+          <div>
+            <p className="eyebrow">Saved in Mongo</p>
+            <h2>Current menu</h2>
+          </div>
+          <button
+            className="text-btn"
+            onClick={async () => {
+              try {
+                const response = await resetMenu();
+                setMenu(response.menu);
+                setSelectedDrinkId(response.menu[0]?._id ?? null);
+                setBuilder(initialBuilder(settings));
+              } catch (requestError) {
+                setError(requestError.message);
+              }
+            }}
+          >
+            Reset defaults
+          </button>
+        </div>
+        <div className="menu-list">
+          {menu.map((drink) => (
+            <article key={drink._id} className="menu-item">
+              <div>
+                <p className="eyebrow">{drink.category}</p>
+                <h3>{drink.name} <span className="muted">{formatCurrency(drink.basePrice)}</span></h3>
+                <p className="muted">{drink.description}</p>
+              </div>
+              <div className="menu-item-actions">
+                <button
+                  className="text-btn"
+                  onClick={async () => {
+                    try {
+                      await deleteMenuItem(drink._id);
+                      setMenu((current) => current.filter((item) => item._id !== drink._id));
+                    } catch (requestError) {
+                      setError(requestError.message);
+                    }
+                  }}
+                >
+                  Delete
+                </button>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/client/src/pages/OrderPage.jsx b/client/src/pages/OrderPage.jsx
new file mode 100644
index 0000000..5078f38
--- /dev/null
+++ b/client/src/pages/OrderPage.jsx
@@ -0,0 +1,436 @@
+import heroCup from "../../../assets/ranaze-bubble-tea-single-cup-transparent.png";
+import milkTeaBadge from "../../../assets/milk-tea-badge.png";
+import fruitTeaBadge from "../../../assets/fruit-tea-badge-transparent.png";
+import slushBadge from "../../../assets/slush-badge.png";
+import OptionGroup from "../components/OptionGroup.jsx";
+import {
+  categoryMonogram,
+  HERO_CATEGORIES,
+  initialBuilder,
+  lineTotal,
+  ticketTotal
+} from "../lib/order.js";
+import { formatCurrency } from "../lib/formatters.js";
+
+const heroCategoryImages = {
+  "milk-tea": milkTeaBadge,
+  "fruit-tea": fruitTeaBadge,
+  slush: slushBadge
+};
+
+export default function OrderPage({
+  menu,
+  settings,
+  selectedCategory,
+  setSelectedCategory,
+  selectedDrinkId,
+  setSelectedDrinkId,
+  builder,
+  setBuilder,
+  ticket,
+  setTicket,
+  orderMode,
+  setOrderMode,
+  showCart,
+  setShowCart,
+  customerName,
+  setCustomerName,
+  paymentMethod,
+  setPaymentMethod,
+  createOrder,
+  setOrders,
+  setError
+}) {
+  const categories = ["All", ...new Set(menu.map((item) => item.category))];
+  const visibleMenu = menu.filter((item) => {
+    return selectedCategory === "All" || item.category === selectedCategory;
+  });
+  const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
+  const activeMode = getModeDetails(orderMode, selectedDrink);
+
+  function addLineToTicket(drink, lineBuilder) {
+    setTicket((current) => [
+      ...current,
+      {
+        menuItemId: drink._id,
+        name: drink.name,
+        basePrice: drink.basePrice,
+        ...lineBuilder
+      }
+    ]);
+  }
+
+  return (
+    <section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
+      {orderMode && (
+        <div className="order-toolbar">
+          <button className="text-btn" onClick={() => {
+            setOrderMode(null);
+            setShowCart(false);
+          }}>
+            Back to drink options
+          </button>
+          <div className="order-toolbar-actions">
+            {ticket.length > 0 && (
+              <button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
+                View Order ({ticket.length})
+              </button>
+            )}
+            <p className="muted order-toolbar-note">
+              This screen returns to the drink menu after 90 seconds of inactivity.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {!orderMode && (
+        <section className="panel mode-launcher">
+          <div className="mode-launcher-copy">
+            <p className="eyebrow">Welcome to Ranaze</p>
+            <h2>Choose your drink.</h2>
+            <div className="hero-copy-list muted">
+              <p>Start fast.</p>
+              <p>Customize if you want.</p>
+            </div>
+            <div className="hero-cta-row">
+              <button className="primary-btn hero-primary-btn" onClick={() => setOrderMode("premade")}>
+                Start Order
+              </button>
+            </div>
+            <div className="hero-category-row">
+              {HERO_CATEGORIES.map((category) => (
+                <button
+                  key={category.label}
+                  className="hero-category-btn"
+                  onClick={() => {
+                    setSelectedCategory(category.label);
+                    setOrderMode("premade");
+                  }}
+                >
+                  <img src={heroCategoryImages[category.asset]} alt="" />
+                  <span>{category.displayLabel}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="mode-hero">
+            <div className="mode-hero-copy">
+              <p className="eyebrow">Freshly made for you</p>
+              <div className="hero-copy-list muted">
+                <p>Bubble tea.</p>
+                <p>Fruit tea.</p>
+                <p>Slushes.</p>
+              </div>
+            </div>
+            <img src={heroCup} alt="Ranaze signature bubble tea" className="mode-hero-image" />
+          </div>
+          <div className="mode-grid">
+            <ModeCard
+              eyebrow="Fastest"
+              title="House Favorites"
+              lines={["Signature drinks.", "No extra steps."]}
+              cta="Choose favorites"
+              onClick={() => setOrderMode("premade")}
+            />
+            <ModeCard
+              eyebrow="Easy"
+              title="Quick Customization"
+              lines={["Pick your drink.", "Adjust a few basics."]}
+              cta="Start customizing"
+              onClick={() => setOrderMode("simple")}
+            />
+            <ModeCard
+              eyebrow="Flexible"
+              title="Build It Your Way"
+              lines={["Full control.", "Every detail matters."]}
+              cta="Build my drink"
+              onClick={() => setOrderMode("detailed")}
+            />
+          </div>
+        </section>
+      )}
+
+      {orderMode && !showCart && (
+        <div className="panel">
+          <div className="panel-header">
+            <div>
+              <p className="eyebrow">{activeMode.stepLabel}</p>
+              <h2>Choose a drink</h2>
+              <p className="muted builder-intro">{activeMode.description}</p>
+            </div>
+            <div className="builder-header-actions">
+              <button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
+              {ticket.length > 0 && (
+                <button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
+              )}
+            </div>
+          </div>
+          <div className="chip-row">
+            {categories.map((category) => (
+              <button
+                key={category}
+                className={`chip ${selectedCategory === category ? "is-active" : ""}`}
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+          <div className="drink-grid">
+            {visibleMenu.map((drink) => (
+              <button
+                key={drink._id}
+                className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
+                onClick={() => {
+                  if (orderMode === "premade") {
+                    addLineToTicket(drink, initialBuilder(settings));
+                    return;
+                  }
+                  setSelectedDrinkId(drink._id);
+                  setBuilder(initialBuilder(settings));
+                }}
+              >
+                <div className="drink-card-badge">
+                  <span>{categoryMonogram(drink.category)}</span>
+                </div>
+                <div className="drink-card-copy">
+                  <p className="eyebrow">{drink.category}</p>
+                  <h3>{drink.name}</h3>
+                  <p className="muted">{drink.description}</p>
+                </div>
+                <strong>{formatCurrency(drink.basePrice)}</strong>
+              </button>
+            ))}
+          </div>
+          {orderMode === "premade" && (
+            <div className="empty-state mode-note">
+              Tap any drink to add it to your order. Use the order button whenever you are ready to review.
+            </div>
+          )}
+        </div>
+      )}
+
+      {orderMode && !showCart && orderMode !== "premade" && (
+        <div className="panel">
+          {selectedDrink && builder ? (
+            <div className="inline-builder">
+              <div className="inline-builder-header">
+                <div>
+                  <p className="eyebrow">Your drink</p>
+                  <h3>{activeMode.title}</h3>
+                </div>
+                <div className="line-price">
+                  {formatCurrency(lineTotal(selectedDrink, builder, settings))}
+                </div>
+              </div>
+
+              <OptionGroup
+                label="Size"
+                choices={settings.sizeOptions.map((option) => option.name)}
+                value={builder.size}
+                onChange={(size) => setBuilder((current) => ({ ...current, size }))}
+              />
+              <OptionGroup
+                label="Sweetness"
+                choices={settings.sweetnessOptions}
+                value={builder.sweetness}
+                onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
+              />
+              {orderMode === "detailed" && (
+                <OptionGroup
+                  label="Ice"
+                  choices={settings.iceOptions}
+                  value={builder.ice}
+                  onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
+                />
+              )}
+              {orderMode === "detailed" && (
+                <div className="field">
+                  <span className="field-label">Toppings</span>
+                  <div className="choice-grid">
+                    {settings.toppings.map((topping) => {
+                      const checked = builder.toppings.includes(topping.name);
+                      return (
+                        <label key={topping.name} className="checkbox-tile">
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={() => {
+                              setBuilder((current) => ({
+                                ...current,
+                                toppings: checked
+                                  ? current.toppings.filter((item) => item !== topping.name)
+                                  : [...current.toppings, topping.name]
+                              }));
+                            }}
+                          />
+                          <span>{topping.name} (+{formatCurrency(topping.price)})</span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+              {orderMode === "detailed" && (
+                <label className="field">
+                  <span className="field-label">Special instructions</span>
+                  <textarea
+                    value={builder.notes}
+                    rows="3"
+                    onChange={(event) => {
+                      const notes = event.target.value;
+                      setBuilder((current) => ({ ...current, notes }));
+                    }}
+                  />
+                </label>
+              )}
+              <div className="builder-actions">
+                <button
+                  className="primary-btn"
+                  onClick={() => {
+                    addLineToTicket(selectedDrink, builder);
+                    setBuilder(initialBuilder(settings));
+                  }}
+                >
+                  {activeMode.buttonLabel}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
+          )}
+        </div>
+      )}
+
+      {orderMode && showCart && (
+        <div className="panel cart-panel">
+          <section className="ticket">
+            <div className="ticket-header">
+              <div>
+                <p className="eyebrow">Your order</p>
+                <h3>Review your drinks</h3>
+              </div>
+              <div className="ticket-header-actions">
+                <button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
+                <button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
+              </div>
+            </div>
+
+            <div className="ticket-lines">
+              {ticket.length === 0 && <div className="empty-state">Your order is empty.</div>}
+              {ticket.map((line, index) => (
+                <article key={`${line.menuItemId}-${index}`} className="ticket-line">
+                  <header>
+                    <strong>{line.name}</strong>
+                    <button
+                      className="text-btn"
+                      onClick={() => {
+                        setTicket((current) => current.filter((_, lineIndex) => lineIndex !== index));
+                      }}
+                    >
+                      Remove
+                    </button>
+                  </header>
+                  <p>{line.size} • {line.sweetness} • {line.ice}</p>
+                  <p className="muted">{line.toppings.length ? line.toppings.join(", ") : "No extra toppings"}</p>
+                  {line.notes && <p className="muted">Special request: {line.notes}</p>}
+                  <div className="line-meta">
+                    <span>Drink total</span>
+                    <strong>{formatCurrency(lineTotal({ basePrice: line.basePrice }, line, settings))}</strong>
+                  </div>
+                </article>
+              ))}
+            </div>
+
+            <div className="checkout-form">
+              <label className="field">
+                <span className="field-label">Name for the order</span>
+                <input
+                  placeholder="Optional"
+                  value={customerName}
+                  maxLength="40"
+                  onChange={(event) => setCustomerName(event.target.value)}
+                />
+              </label>
+              <label className="field">
+                <span className="field-label">How would you like to pay?</span>
+                <select
+                  value={paymentMethod}
+                  onChange={(event) => setPaymentMethod(event.target.value)}
+                >
+                  <option value="cash">Cash</option>
+                  <option value="tab">Store Tab</option>
+                  <option value="unpaid">Pay Later</option>
+                </select>
+              </label>
+              <button
+                className="primary-btn"
+                disabled={ticket.length === 0}
+                onClick={async () => {
+                  try {
+                    const payload = {
+                      customerName,
+                      paymentMethod,
+                      lines: ticket
+                    };
+                    const response = await createOrder(payload);
+                    setOrders((current) => [response.order, ...current]);
+                    setTicket([]);
+                    setCustomerName("");
+                    setPaymentMethod("cash");
+                    setShowCart(false);
+                    setOrderMode(null);
+                  } catch (requestError) {
+                    setError(requestError.message);
+                  }
+                }}
+              >
+                Place my order
+              </button>
+            </div>
+          </section>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function getModeDetails(orderMode, selectedDrink) {
+  const modeDetails = {
+    premade: {
+      stepLabel: "House favorite",
+      title: selectedDrink?.name || "Pick a house favorite",
+      description: "Ready to enjoy. One quick tap.",
+      buttonLabel: "Add to my order"
+    },
+    simple: {
+      stepLabel: "Quick customize",
+      title: selectedDrink?.name || "Choose your drink",
+      description: "Pick your drink. Choose size and sweetness.",
+      buttonLabel: "Add to my order"
+    },
+    detailed: {
+      stepLabel: "Build it your way",
+      title: selectedDrink?.name || "Build your drink",
+      description: "Customize it all. Ice, toppings, and special requests.",
+      buttonLabel: "Add to my order"
+    }
+  };
+
+  return modeDetails[orderMode];
+}
+
+function ModeCard({ eyebrow, title, lines, cta, onClick }) {
+  return (
+    <button className="mode-card" onClick={onClick}>
+      <p className="eyebrow">{eyebrow}</p>
+      <h3>{title}</h3>
+      <div className="mode-card-list muted">
+        {lines.map((line) => (
+          <p key={line}>{line}</p>
+        ))}
+      </div>
+      <span className="mode-card-cta">{cta}</span>
+    </button>
+  );
+}
diff --git a/client/src/pages/QueuePage.jsx b/client/src/pages/QueuePage.jsx
new file mode 100644
index 0000000..effe795
--- /dev/null
+++ b/client/src/pages/QueuePage.jsx
@@ -0,0 +1,100 @@
+import SummaryCard from "../components/SummaryCard.jsx";
+import { formatCurrency, formatTime, titleCase } from "../lib/formatters.js";
+
+const queueStatuses = ["new", "making", "ready"];
+
+export default function QueuePage({
+  orders,
+  updateOrderStatus,
+  deleteOrder,
+  setOrders,
+  setError
+}) {
+  return (
+    <section className="queue-screen">
+      <div className="queue-summary">
+        <SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
+        <SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
+        <SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
+        <SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
+      </div>
+      <div className="queue-columns">
+        {queueStatuses.map((status) => (
+          <section key={status} className="queue-column">
+            <div className="column-head">
+              <p className="eyebrow">{titleCase(status)}</p>
+              <h3>{orders.filter((order) => order.status === status).length} orders</h3>
+            </div>
+            {orders.filter((order) => order.status === status).map((order) => (
+              <article key={order._id} className="queue-card">
+                <header>
+                  <div>
+                    <p className="eyebrow">Order #{order.number}</p>
+                    <h3>{order.customerName || "Walk-in"}</h3>
+                  </div>
+                  <strong>{formatCurrency(order.total)}</strong>
+                </header>
+                <p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
+                <div>
+                  {order.lines.map((line, index) => (
+                    <p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
+                  ))}
+                </div>
+                <div className="status-actions">
+                  <NextStatusButton
+                    order={order}
+                    onAdvance={async (newStatus) => {
+                      try {
+                        const response = await updateOrderStatus(order._id, newStatus);
+                        setOrders((current) => current.map((item) => {
+                          return item._id === response.order._id ? response.order : item;
+                        }));
+                      } catch (requestError) {
+                        setError(requestError.message);
+                      }
+                    }}
+                  />
+                  <button
+                    className="status-btn danger"
+                    onClick={async () => {
+                      try {
+                        await deleteOrder(order._id);
+                        setOrders((current) => current.filter((item) => item._id !== order._id));
+                      } catch (requestError) {
+                        setError(requestError.message);
+                      }
+                    }}
+                  >
+                    Delete
+                  </button>
+                </div>
+              </article>
+            ))}
+            {orders.filter((order) => order.status === status).length === 0 && (
+              <div className="empty-state">No orders in {status}.</div>
+            )}
+          </section>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function NextStatusButton({ order, onAdvance }) {
+  const map = {
+    new: "making",
+    making: "ready",
+    ready: "completed"
+  };
+  const next = map[order.status];
+
+  if (!next) {
+    return null;
+  }
+
+  return (
+    <button className="status-btn" onClick={() => onAdvance(next)}>
+      {next === "making" ? "Start making" : next === "ready" ? "Mark ready" : "Complete"}
+    </button>
+  );
+}
diff --git a/client/src/styles.css b/client/src/styles.css
index fb11a99..8c9c9aa 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -2,8 +2,8 @@
   --bg: #f5eedf;
   --panel: rgba(255, 251, 244, 0.92);
   --panel-strong: #f8ecda;
-  --ink: #171717;
-  --muted: #6f6657;
+  --ink: #111111;
+  --muted: #4f4f4f;
   --accent: #101010;
   --accent-soft: #f4ddae;
   --warm: #f6b33e;
@@ -19,11 +19,13 @@ body::before {
   position: fixed;
   inset: 0;
   background:
-    linear-gradient(180deg, rgba(255, 249, 239, 0.88), rgba(245, 231, 208, 0.94)),
-    radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.15), transparent 18%),
-    radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.22), transparent 20%),
-    radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.16), transparent 18%),
-    radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.12), transparent 18%);
+    radial-gradient(circle at center, rgba(255, 252, 247, 0.82) 0%, rgba(255, 252, 247, 0.9) 32%, rgba(255, 252, 247, 0) 58%),
+    linear-gradient(180deg, rgba(255, 249, 239, 0.92), rgba(245, 231, 208, 0.95)),
+    radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.09), transparent 20%),
+    radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.13), transparent 22%),
+    radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.1), transparent 20%),
+    radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.07), transparent 20%);
+  filter: blur(10px);
   pointer-events: none;
   z-index: -1;
 }
@@ -35,9 +37,10 @@ body::before {
 body {
   margin: 0;
   color: var(--ink);
+  line-height: 1.5;
   background:
-    radial-gradient(circle at top left, rgba(246, 179, 62, 0.22), transparent 28%),
-    radial-gradient(circle at right center, rgba(244, 221, 174, 0.38), transparent 22%),
+    radial-gradient(circle at top left, rgba(246, 179, 62, 0.14), transparent 28%),
+    radial-gradient(circle at right center, rgba(244, 221, 174, 0.22), transparent 22%),
     linear-gradient(180deg, #fbf6ee, #f3e7d4 52%, #eedcc1);
 }
 
@@ -54,16 +57,16 @@ button {
 
 .app-shell {
   min-height: 100vh;
-  padding: 1.25rem;
+  padding: 0.9rem 1rem 1rem;
 }
 
 .topbar {
   display: flex;
   justify-content: space-between;
-  gap: 1.5rem;
+  gap: 1rem;
   align-items: center;
-  margin-bottom: 1.25rem;
-  padding: 1.1rem 1.35rem;
+  margin-bottom: 0.85rem;
+  padding: 0.85rem 1.05rem;
   border: 1px solid rgba(16, 16, 16, 0.08);
   border-radius: 30px;
   background:
@@ -78,6 +81,23 @@ button {
   font-family: Georgia, "Times New Roman", serif;
 }
 
+.topbar h1 {
+  font-weight: 800;
+}
+
+.panel h2 {
+  font-weight: 600;
+}
+
+p,
+label,
+input,
+select,
+textarea,
+button {
+  font-weight: 400;
+}
+
 .brand-lockup {
   display: flex;
   align-items: center;
@@ -86,8 +106,8 @@ button {
 }
 
 .brand-mark {
-  width: 120px;
-  height: 120px;
+  width: 96px;
+  height: 96px;
   flex: 0 0 auto;
   border-radius: 32px;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 248, 232, 0.72));
@@ -133,6 +153,17 @@ button {
   max-width: 30rem;
 }
 
+.hero-copy-list,
+.mode-card-list {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.hero-copy-list p,
+.mode-card-list p {
+  margin: 0;
+}
+
 .eyebrow {
   margin: 0;
   color: var(--muted);
@@ -214,8 +245,8 @@ button {
 .mode-launcher {
   grid-column: 1 / -1;
   display: grid;
-  gap: 1.25rem;
-  padding: 1.4rem;
+  gap: 0.85rem;
+  padding: 1rem 1.05rem;
   background:
     radial-gradient(circle at top right, rgba(246, 179, 62, 0.17), transparent 24%),
     linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(249, 235, 205, 0.98));
@@ -224,26 +255,82 @@ button {
 .mode-launcher-copy {
   max-width: 48rem;
   display: grid;
-  gap: 0.45rem;
+  gap: 0.3rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.6);
 }
 
 .mode-launcher-copy h2 {
-  font-size: clamp(2rem, 3.4vw, 3.3rem);
-  line-height: 0.96;
+  font-size: clamp(1.65rem, 2.8vw, 2.45rem);
+  line-height: 0.98;
+}
+
+.hero-cta-row {
+  margin-top: 0.35rem;
+}
+
+.hero-primary-btn {
+  min-width: 220px;
+  padding: 18px 28px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #171311, #2a201a);
+  color: #ffffff;
+  box-shadow: 0 18px 34px rgba(23, 19, 17, 0.24);
+}
+
+.hero-category-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: 0.2rem;
+}
+
+.hero-category-btn {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 0.65rem;
+  min-height: 148px;
+  padding: 1rem;
+  border: 1px solid rgba(17, 17, 17, 0.1);
+  border-radius: 22px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 235, 209, 0.96));
+  color: #111111;
+  box-shadow: 0 14px 28px rgba(83, 61, 24, 0.1);
+  text-align: center;
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+}
+
+.hero-category-btn:hover {
+  transform: translateY(-3px);
+  border-color: rgba(23, 19, 17, 0.24);
+  box-shadow: 0 20px 34px rgba(83, 61, 24, 0.16);
+}
+
+.hero-category-btn img {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+}
+
+.hero-category-btn span {
+  font-weight: 800;
+  letter-spacing: 0.02em;
 }
 
 .mode-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
+  gap: 0.8rem;
 }
 
 .mode-hero {
   display: grid;
-  grid-template-columns: 1fr 220px;
-  gap: 1rem;
+  grid-template-columns: 1fr 150px;
+  gap: 0.75rem;
   align-items: center;
-  padding: 1.1rem 1.25rem;
+  padding: 0.7rem 0.9rem;
   border-radius: 26px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(247, 221, 161, 0.36));
   border: 1px solid rgba(16, 16, 16, 0.06);
@@ -252,17 +339,18 @@ button {
 .mode-hero-copy {
   display: grid;
   gap: 0.4rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.6);
 }
 
-.mode-hero-copy h3 {
+.mode-hero-copy p {
   margin: 0;
-  font-size: clamp(1.2rem, 2vw, 1.8rem);
-  line-height: 1.05;
 }
 
 .mode-hero-image {
   width: 100%;
-  max-height: 220px;
+  max-height: 150px;
   object-fit: contain;
   justify-self: end;
   filter: drop-shadow(0 22px 24px rgba(83, 61, 24, 0.16));
@@ -272,20 +360,21 @@ button {
   display: grid;
   gap: 0.65rem;
   align-content: start;
-  padding: 1.25rem;
-  min-height: 200px;
+  padding: 1rem;
+  min-height: 150px;
   border: 1px solid rgba(16, 16, 16, 0.08);
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.9);
   text-align: left;
   box-shadow: 0 12px 28px rgba(83, 61, 24, 0.08);
-  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
 }
 
 .mode-card:hover {
-  transform: translateY(-2px);
+  transform: translateY(-4px) scale(1.01);
   border-color: rgba(246, 179, 62, 0.5);
-  box-shadow: 0 16px 32px rgba(83, 61, 24, 0.14);
+  box-shadow: 0 22px 38px rgba(83, 61, 24, 0.18);
+  background: rgba(255, 255, 255, 0.98);
 }
 
 .mode-card h3,
@@ -293,6 +382,20 @@ button {
   margin: 0;
 }
 
+.mode-card-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+  min-height: 46px;
+  padding: 0.8rem 1rem;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #171311, #2a201a);
+  color: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 12px 24px rgba(23, 19, 17, 0.18);
+}
+
 .panel-header,
 .queue-card header,
 .menu-form,
@@ -306,7 +409,7 @@ button {
 .panel-header {
   grid-template-columns: 1fr auto;
   align-items: start;
-  margin-bottom: 1rem;
+  margin-bottom: 0.7rem;
 }
 
 .builder-header-actions {
@@ -565,6 +668,7 @@ select {
   .topbar,
   .screen,
   .mode-hero,
+  .hero-category-row,
   .mode-grid,
   .queue-columns,
   .menu-item,