diff --git a/client/src/pages/OrderPage.jsx b/client/src/pages/OrderPage.jsx
index 5078f38..c6aca71 100644
--- a/client/src/pages/OrderPage.jsx
+++ b/client/src/pages/OrderPage.jsx
@@ -1,4 +1,3 @@
-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";
@@ -92,11 +91,6 @@ export default function OrderPage({
               <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
@@ -113,40 +107,6 @@ export default function OrderPage({
               ))}
             </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>
       )}
 
@@ -419,18 +379,3 @@ function getModeDetails(orderMode, selectedDrink) {
 
   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/vite.config.js b/client/vite.config.mjs
similarity index 100%
rename from client/vite.config.js
rename to client/vite.config.mjs
diff --git a/package.json b/package.json
index 79ce7f4..d4042b2 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev:client": "vite --config client/vite.config.js",
+    "dev:client": "vite --config client/vite.config.mjs",
     "dev:server": "dotnet run --project server/RanazePos.Api.csproj",
-    "build:client": "vite build --config client/vite.config.js",
+    "build:client": "vite build --config client/vite.config.mjs",
     "build:server": "dotnet build server/RanazePos.Api.csproj",
     "build": "npm run build:client && npm run build:server",
     "start": "dotnet run --project server/RanazePos.Api.csproj"