diff --git a/frontend/README.md b/frontend/README.md
index 7c08e40..f9b8ede 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -37,12 +37,45 @@ A modern, minimal web app for ShopLyft, built with **React 19**, **TypeScript**,
 
 ## Project Structure
 
+```
+frontend/src/
+├── main.tsx                    # React app entry point with root rendering
+├── App.tsx                     # Main app component with view state management
+├── index.css                   # Global styles and Tailwind CSS imports
+├── assets/                     # Static assets (images, icons, etc.)
+└── components/                 # Component library organized by feature
+    ├── types/
+    │   └── index.ts            # Shared TypeScript interfaces and types
+    ├── shared/                 # Reusable components across features
+    │   ├── ui/
+    │   │   └── StepContainer.tsx    # Motion wrapper for form steps
+    │   ├── forms/
+    │   │   ├── StepHeader.tsx       # Title and description component
+    │   │   └── NavigationButtons.tsx # Back/Continue navigation buttons
+    │   └── layout/
+    │       └── CardContainer.tsx    # Responsive card wrapper component
+    └── features/               # Feature-specific components
+        ├── landing/            # Landing page feature
+        │   └── LandingPage/
+        │       ├── LandingPage.tsx      # Main landing page container
+        │       ├── AnimatedHeadline.tsx # Cycling headline animation
+        │       ├── DesktopLandingView.tsx # Desktop layout with text-first
+        │       ├── MobileLandingView.tsx  # Mobile layout with icon-first
+        │       ├── LandingContent.tsx     # Description text component
+        │       └── GetStartedButton.tsx   # CTA button with variants
+        └── shopping/           # Shopping list feature
+            ├── ShoppingListForm.tsx    # Main multi-step form container
+            ├── ItemSelectionGrid.tsx   # Grid for common item selection
+            ├── CustomInputToggle.tsx   # Toggle with textarea for custom input
+            ├── ItemDetailsForm.tsx     # Quantity and notes input form
+            ├── LocationSelector.tsx    # Location selection with geolocation
+            ├── ShoppingListTable.tsx   # Editable shopping list table
+            ├── LoadingAnimation.tsx    # Loading state with animated cart
+            ├── PlanLayout.tsx          # Final plan display component
+            └── ShoppingCartIcon.tsx    # Animated shopping cart icon
+```
+
 - `public/` — Static files (e.g., favicon)
-- `src/` — Source code
-  - `main.tsx` — Entry point
-  - `App.tsx` — Main app logic, animated transitions
-  - `LandingPage.tsx` — Animated hero section
-  - `index.css` — Tailwind import
 - `tailwind.config.js` — TailwindCSS config (custom color schema)
 - `vite.config.ts` — Vite config with Tailwind plugin
 
@@ -74,25 +107,39 @@ A modern, minimal web app for ShopLyft, built with **React 19**, **TypeScript**,
 
 ---
 
-## Component Breakdown
-
-- `App` — Main app logic, animated transitions between views
-- `LandingPage` — Animated hero section, cycling headlines, Get Started button
-- `CardContainer` — Shopping list input form (currently inline in App)
-- *(Planned/Upcoming)*
-  - `Header`
-  - `ShoppingForm`
-  - `LocationAutocomplete`
-  - `PreferencesPanel`
-  - `StoreFilter`
-  - `ResultsPage`
-  - `StoreCard`
-  - `BasketList`
-  - `SavingsHeadline`
-  - `SummarySection`
-  - `AssumptionsWarnings`
-  - `ClickCollectButton`
-  - `DownloadPlanButton`
+## Component Architecture
+
+### **Shared Components** (Reusable across features)
+
+- `StepContainer` — Motion wrapper with consistent animations for form steps
+- `StepHeader` — Standardized title and description layout
+- `NavigationButtons` — Back/Continue buttons with consistent styling
+- `CardContainer` — Responsive card wrapper with mobile/desktop variants
+
+### **Landing Page Feature**
+
+- `LandingPage` — Main container with responsive view switching
+- `AnimatedHeadline` — Cycling headline animation with typewriter effect
+- `DesktopLandingView` — Desktop layout (text-first, icon-second)
+- `MobileLandingView` — Mobile layout (icon-first, text-second)
+- `LandingContent` — Description text with alignment variants
+- `GetStartedButton` — CTA button with size variants
+
+### **Shopping List Feature**
+
+- `ShoppingListForm` — Multi-step form container with state management
+- `ItemSelectionGrid` — Grid layout for common grocery item selection
+- `CustomInputToggle` — Toggle switch with expandable textarea
+- `ItemDetailsForm` — Form for editing quantities and notes
+- `LocationSelector` — Location input with geolocation support
+- `ShoppingListTable` — Editable table with add/edit/remove functionality
+- `LoadingAnimation` — Loading state with animated shopping cart
+- `PlanLayout` — Final plan display with store cards and savings
+- `ShoppingCartIcon` — Animated cart icon with size variants
+
+### **Type Definitions**
+
+- `types/index.ts` — Centralized TypeScript interfaces for all components
 
 ---
 
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c42ba39..cc8341b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,27 +1,73 @@
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import LandingPage from "./components/LandingPage/LandingPage";
-import ShoppingListForm from "./components/ShoppingListForm/ShoppingListForm";
+import LandingPage from "./components/features/landing/LandingPage/LandingPage";
+import ShoppingListForm from "./components/features/shopping/ShoppingListForm";
+import TemplateTest from "./components/features/shopping/TemplateTest";
 
 function App() {
-  const [showLanding, setShowLanding] = useState(true);
+  const [currentView, setCurrentView] = useState<
+    "landing" | "shopping" | "test"
+  >("landing");
+
+  const renderView = () => {
+    switch (currentView) {
+      case "landing":
+        return <LandingPage onGetStarted={() => setCurrentView("shopping")} />;
+      case "shopping":
+        return <ShoppingListForm />;
+      case "test":
+        return <TemplateTest />;
+      default:
+        return <LandingPage onGetStarted={() => setCurrentView("shopping")} />;
+    }
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-primary-light via-neutral to-orange-300 flex flex-col ">
+      {/* Test Navigation */}
+      <div className="fixed top-4 right-4 z-50 flex gap-2">
+        <button
+          onClick={() => setCurrentView("landing")}
+          className={`px-3 py-1 rounded text-sm ${
+            currentView === "landing"
+              ? "bg-orange-500 text-white"
+              : "bg-white text-orange-500"
+          }`}
+        >
+          Landing
+        </button>
+        <button
+          onClick={() => setCurrentView("shopping")}
+          className={`px-3 py-1 rounded text-sm ${
+            currentView === "shopping"
+              ? "bg-orange-500 text-white"
+              : "bg-white text-orange-500"
+          }`}
+        >
+          Shopping
+        </button>
+        <button
+          onClick={() => setCurrentView("test")}
+          className={`px-3 py-1 rounded text-sm ${
+            currentView === "test"
+              ? "bg-orange-500 text-white"
+              : "bg-white text-orange-500"
+          }`}
+        >
+          Test Template
+        </button>
+      </div>
+
       <AnimatePresence mode="wait">
-        {showLanding ? (
-          <motion.div
-            key="landing"
-            initial={{ opacity: 1, y: 0 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -80 }}
-            transition={{ duration: 0.7 }}
-          >
-            <LandingPage onGetStarted={() => setShowLanding(false)} />
-          </motion.div>
-        ) : (
-          <ShoppingListForm key="shopping" />
-        )}
+        <motion.div
+          key={currentView}
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -80 }}
+          transition={{ duration: 0.7 }}
+        >
+          {renderView()}
+        </motion.div>
       </AnimatePresence>
     </div>
   );
diff --git a/frontend/src/assets/aldi.png b/frontend/src/assets/aldi.png
new file mode 100644
index 0000000..d14ef64
Binary files /dev/null and b/frontend/src/assets/aldi.png differ
diff --git a/frontend/src/assets/coles.png b/frontend/src/assets/coles.png
new file mode 100644
index 0000000..3db2c2f
Binary files /dev/null and b/frontend/src/assets/coles.png differ
diff --git a/frontend/src/assets/woolworth.png b/frontend/src/assets/woolworth.png
new file mode 100644
index 0000000..c774d74
Binary files /dev/null and b/frontend/src/assets/woolworth.png differ
diff --git a/frontend/src/components/ShoppingListForm/ShoppingListForm.tsx b/frontend/src/components/ShoppingListForm/ShoppingListForm.tsx
deleted file mode 100644
index 1412913..0000000
--- a/frontend/src/components/ShoppingListForm/ShoppingListForm.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import CardContainer from "../CardContainer";
-
-// Sample grocery items - in a real app, this would come from an API
-const availableItems = [
-  "Milk",
-  "Eggs",
-  "Bread",
-  "Butter",
-  "Cheese",
-  "Yogurt",
-  "Chicken",
-  "Beef",
-  "Fish",
-  "Rice",
-  "Pasta",
-  "Tomatoes",
-  "Onions",
-  "Carrots",
-  "Potatoes",
-  "Apples",
-  "Bananas",
-  "Oranges",
-  "Spinach",
-  "Lettuce",
-  "Cucumber",
-  "Olive Oil",
-  "Salt",
-  "Pepper",
-  "Garlic",
-  "Ginger",
-  "Lemon",
-  "Lime",
-  "Cereal",
-  "Oats",
-  "Nuts",
-  "Coffee",
-  "Tea",
-  "Sugar",
-  "Flour",
-  "Honey",
-];
-
-function ShoppingListForm() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
-
-  const filteredItems = availableItems.filter((item) =>
-    item.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  const toggleItem = (item: string) => {
-    setSelectedItems((prev) =>
-      prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
-    );
-  };
-
-  const handleSubmit = () => {
-    if (selectedItems.length === 0) {
-      alert("Please select at least one item for your shopping list.");
-      return;
-    }
-    console.log("Selected items:", selectedItems);
-    // Here you would typically send the data to your backend
-    alert(`Shopping list created with ${selectedItems.length} items!`);
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center py-8 px-4">
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -40 }}
-        transition={{ duration: 0.7 }}
-        className="w-full max-w-4xl"
-      >
-        <CardContainer variant="desktop" maxWidth="full">
-          <div className="space-y-6">
-            <div className="text-center">
-              <h2 className="text-3xl font-bold mb-2 text-orange-600">
-                Create Your Shopping List
-              </h2>
-              <p className="text-orange-700">
-                Search and select items you need to buy
-              </p>
-            </div>
-
-            {/* Search Input */}
-            <div className="relative">
-              <input
-                type="text"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder="Search for items..."
-                className="w-full border border-orange-300 rounded-lg p-4 pr-12 text-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
-              />
-              <div className="absolute right-4 top-1/2 transform -translate-y-1/2 text-orange-400">
-                🔍
-              </div>
-            </div>
-
-            {/* Selected Items Count */}
-            {selectedItems.length > 0 && (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                className="bg-orange-100 rounded-lg p-3 text-center"
-              >
-                <span className="text-orange-700 font-medium">
-                  {selectedItems.length} item
-                  {selectedItems.length !== 1 ? "s" : ""} selected
-                </span>
-              </motion.div>
-            )}
-
-            {/* Items Grid */}
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 max-h-96 overflow-y-auto">
-              <AnimatePresence>
-                {filteredItems.map((item) => {
-                  const isSelected = selectedItems.includes(item);
-                  return (
-                    <motion.button
-                      key={item}
-                      initial={{ opacity: 0, scale: 0.8 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.8 }}
-                      whileTap={{ scale: 0.95 }}
-                      onClick={() => toggleItem(item)}
-                      className={`
-                        p-3 rounded-lg border-2 transition-all duration-200 text-sm font-medium
-                        ${
-                          isSelected
-                            ? "bg-orange-500 border-orange-500 text-white shadow-lg"
-                            : "bg-white border-orange-200 text-orange-700 hover:border-orange-300 hover:bg-orange-50"
-                        }
-                      `}
-                    >
-                      <div className="flex items-center justify-center space-x-2">
-                        {isSelected && <span>✓</span>}
-                        <span className="truncate">{item}</span>
-                      </div>
-                    </motion.button>
-                  );
-                })}
-              </AnimatePresence>
-            </div>
-
-            {/* No Results */}
-            {filteredItems.length === 0 && searchTerm && (
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="text-center py-8 text-orange-600"
-              >
-                <p>No items found for "{searchTerm}"</p>
-                <p className="text-sm mt-2">Try a different search term</p>
-              </motion.div>
-            )}
-
-            {/* Submit Button */}
-            <div className="flex justify-center pt-4">
-              <motion.button
-                onClick={handleSubmit}
-                disabled={selectedItems.length === 0}
-                whileTap={{ scale: 0.95 }}
-                className={`
-                  px-8 py-4 rounded-xl font-bold text-lg shadow-lg transition-all duration-200
-                  ${
-                    selectedItems.length === 0
-                      ? "bg-gray-300 text-gray-500 cursor-not-allowed"
-                      : "bg-orange-500 hover:bg-orange-600 text-white hover:shadow-xl"
-                  }
-                `}
-              >
-                Create Shopping List ({selectedItems.length})
-              </motion.button>
-            </div>
-          </div>
-        </CardContainer>
-      </motion.div>
-    </div>
-  );
-}
-
-export default ShoppingListForm;
diff --git a/frontend/src/components/LandingPage/AnimatedHeadline.tsx b/frontend/src/components/features/landing/LandingPage/AnimatedHeadline.tsx
similarity index 100%
rename from frontend/src/components/LandingPage/AnimatedHeadline.tsx
rename to frontend/src/components/features/landing/LandingPage/AnimatedHeadline.tsx
diff --git a/frontend/src/components/LandingPage/DesktopLandingView.tsx b/frontend/src/components/features/landing/LandingPage/DesktopLandingView.tsx
similarity index 94%
rename from frontend/src/components/LandingPage/DesktopLandingView.tsx
rename to frontend/src/components/features/landing/LandingPage/DesktopLandingView.tsx
index aba32fe..1902153 100644
--- a/frontend/src/components/LandingPage/DesktopLandingView.tsx
+++ b/frontend/src/components/features/landing/LandingPage/DesktopLandingView.tsx
@@ -1,5 +1,5 @@
 import AnimatedHeadline from "./AnimatedHeadline";
-import ShoppingCartIcon from "../ShoppingListForm/ShoppingCartIcon";
+import ShoppingCartIcon from "../../shopping/ShoppingCartIcon";
 import LandingContent from "./LandingContent";
 import GetStartedButton from "./GetStartedButton";
 
diff --git a/frontend/src/components/LandingPage/GetStartedButton.tsx b/frontend/src/components/features/landing/LandingPage/GetStartedButton.tsx
similarity index 100%
rename from frontend/src/components/LandingPage/GetStartedButton.tsx
rename to frontend/src/components/features/landing/LandingPage/GetStartedButton.tsx
diff --git a/frontend/src/components/LandingPage/LandingContent.tsx b/frontend/src/components/features/landing/LandingPage/LandingContent.tsx
similarity index 100%
rename from frontend/src/components/LandingPage/LandingContent.tsx
rename to frontend/src/components/features/landing/LandingPage/LandingContent.tsx
diff --git a/frontend/src/components/LandingPage/LandingPage.tsx b/frontend/src/components/features/landing/LandingPage/LandingPage.tsx
similarity index 100%
rename from frontend/src/components/LandingPage/LandingPage.tsx
rename to frontend/src/components/features/landing/LandingPage/LandingPage.tsx
diff --git a/frontend/src/components/LandingPage/MobileLandingView.tsx b/frontend/src/components/features/landing/LandingPage/MobileLandingView.tsx
similarity index 91%
rename from frontend/src/components/LandingPage/MobileLandingView.tsx
rename to frontend/src/components/features/landing/LandingPage/MobileLandingView.tsx
index 26bd02d..b905f9d 100644
--- a/frontend/src/components/LandingPage/MobileLandingView.tsx
+++ b/frontend/src/components/features/landing/LandingPage/MobileLandingView.tsx
@@ -1,6 +1,6 @@
-import CardContainer from "../CardContainer";
+import CardContainer from "../../../shared/layout/CardContainer";
 import AnimatedHeadline from "./AnimatedHeadline";
-import ShoppingCartIcon from "../ShoppingListForm/ShoppingCartIcon";
+import ShoppingCartIcon from "../../shopping/ShoppingCartIcon";
 import LandingContent from "./LandingContent";
 import GetStartedButton from "./GetStartedButton";
 
diff --git a/frontend/src/components/features/shopping/CustomInputToggle.tsx b/frontend/src/components/features/shopping/CustomInputToggle.tsx
new file mode 100644
index 0000000..6f724a2
--- /dev/null
+++ b/frontend/src/components/features/shopping/CustomInputToggle.tsx
@@ -0,0 +1,64 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { type CustomInputToggleProps } from "../../types";
+
+export default function CustomInputToggle({
+  showDetails,
+  onToggle,
+  customInput,
+  onInputChange,
+  placeholder = "e.g., 2L milk, 1kg chicken (organic), bananas (free-range), bread...",
+  tip = '💡 Tip: Include quantities, sizes, and use (parentheses) for notes. Example: "2L milk, 1kg chicken (organic), bananas (free-range)"',
+}: CustomInputToggleProps) {
+  return (
+    <div className="space-y-4">
+      {/* Toggle */}
+      <div className="flex items-center justify-center space-x-3">
+        <button
+          type="button"
+          onClick={() => onToggle(!showDetails)}
+          className={`
+            relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none border-0
+            ${showDetails ? "bg-orange-500" : "bg-gray-300"}
+          `}
+        >
+          <span
+            className={`
+              inline-block h-4 w-4 transform rounded-full bg-white transition-transform
+              ${showDetails ? "translate-x-6" : "translate-x-1"}
+            `}
+          />
+        </button>
+        <label className="text-base text-orange-700 font-semibold">
+          Add items by yourself?
+        </label>
+      </div>
+
+      {/* Input Field */}
+      <AnimatePresence>
+        {showDetails && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3 }}
+            className="space-y-4"
+          >
+            <div>
+              <label className="block text-sm font-medium text-orange-700 mb-2">
+                Add specific items with quantities
+              </label>
+              <textarea
+                value={customInput}
+                onChange={(e) => onInputChange(e.target.value)}
+                placeholder={placeholder}
+                className="w-full border border-orange-300 rounded-lg p-4 text-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent resize-none"
+                rows={3}
+              />
+              <p className="text-sm text-orange-600 mt-2">{tip}</p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/shopping/ItemDetailsForm.tsx b/frontend/src/components/features/shopping/ItemDetailsForm.tsx
new file mode 100644
index 0000000..05aa6dc
--- /dev/null
+++ b/frontend/src/components/features/shopping/ItemDetailsForm.tsx
@@ -0,0 +1,66 @@
+import { motion } from "framer-motion";
+import { type ShoppingListItem } from "../../types";
+
+interface ItemDetailsFormProps {
+  items: Array<{ name: string; quantity?: string; notes?: string }>;
+  detailsItems: ShoppingListItem[];
+  onUpdateItem: (name: string, updates: Partial<ShoppingListItem>) => void;
+}
+
+export default function ItemDetailsForm({
+  items,
+  detailsItems,
+  onUpdateItem,
+}: ItemDetailsFormProps) {
+  return (
+    <div className="space-y-4">
+      {items.map((item, index) => {
+        // Find the corresponding details item or create a new one
+        const detailsItem = detailsItems.find((d) => d.name === item.name) || {
+          id: `${item.name}-${index}`,
+          name: item.name,
+          quantity: item.quantity || "",
+          notes: item.notes || "",
+        };
+
+        return (
+          <motion.div
+            key={`${item.name}-${index}`}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
+            className="bg-orange-50 rounded-lg p-4"
+          >
+            <div className="mb-3">
+              <span className="font-medium text-orange-800">{item.name}</span>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <input
+                type="text"
+                placeholder="Quantity (e.g., 2L, 1kg)"
+                value={detailsItem.quantity}
+                onChange={(e) => {
+                  onUpdateItem(item.name, {
+                    quantity: e.target.value,
+                  });
+                }}
+                className="px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 text-sm"
+              />
+              <input
+                type="text"
+                placeholder="Notes (e.g., organic, free-range)"
+                value={detailsItem.notes}
+                onChange={(e) => {
+                  onUpdateItem(item.name, {
+                    notes: e.target.value,
+                  });
+                }}
+                className="px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 text-sm"
+              />
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/shopping/ItemSelectionGrid.tsx b/frontend/src/components/features/shopping/ItemSelectionGrid.tsx
new file mode 100644
index 0000000..e7c85c9
--- /dev/null
+++ b/frontend/src/components/features/shopping/ItemSelectionGrid.tsx
@@ -0,0 +1,42 @@
+import { motion } from "framer-motion";
+import { type ItemSelectionGridProps } from "../../types";
+
+export default function ItemSelectionGrid({
+  items,
+  selectedItems,
+  onToggleItem,
+  label = "Quick Select Items",
+}: ItemSelectionGridProps) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-orange-700 mb-3">
+        {label}
+      </label>
+      <div className="grid grid-cols-3 md:grid-cols-5 gap-2 max-h-48 overflow-y-auto">
+        {items.map((item) => {
+          const isSelected = selectedItems.includes(item);
+          return (
+            <motion.button
+              key={item}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => onToggleItem(item)}
+              className={`
+                p-2 rounded-lg border-2 transition-all duration-200 text-xs font-medium
+                ${
+                  isSelected
+                    ? "bg-orange-500 border-orange-500 text-white shadow-lg"
+                    : "bg-white border-orange-200 text-orange-700 hover:border-orange-300 hover:bg-orange-50"
+                }
+              `}
+            >
+              <div className="flex items-center justify-center space-x-1">
+                {isSelected && <span>✓</span>}
+                <span className="truncate">{item}</span>
+              </div>
+            </motion.button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/shopping/LoadingAnimation.tsx b/frontend/src/components/features/shopping/LoadingAnimation.tsx
new file mode 100644
index 0000000..e587b35
--- /dev/null
+++ b/frontend/src/components/features/shopping/LoadingAnimation.tsx
@@ -0,0 +1,92 @@
+import { motion } from "framer-motion";
+
+interface LoadingAnimationProps {
+  message?: string;
+}
+
+function LoadingAnimation({
+  message = "Generating your optimal shopping plan...",
+}: LoadingAnimationProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="flex flex-col items-center justify-center py-12"
+    >
+      {/* Animated shopping cart */}
+      <motion.div
+        animate={{
+          y: [0, -10, 0],
+          rotate: [0, 5, -5, 0],
+        }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+        className="text-6xl mb-6"
+      >
+        🛒
+      </motion.div>
+
+      {/* Loading dots */}
+      <div className="flex space-x-2 mb-4">
+        {[0, 1, 2].map((i) => (
+          <motion.div
+            key={i}
+            animate={{
+              scale: [1, 1.2, 1],
+              opacity: [0.5, 1, 0.5],
+            }}
+            transition={{
+              duration: 1.5,
+              repeat: Infinity,
+              delay: i * 0.2,
+            }}
+            className="w-3 h-3 bg-orange-500 rounded-full"
+          />
+        ))}
+      </div>
+
+      {/* Loading message */}
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5 }}
+        className="text-lg text-orange-700 text-center max-w-md"
+      >
+        {message}
+      </motion.p>
+
+      {/* Progress steps */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1 }}
+        className="mt-6 space-y-2 text-sm text-orange-600"
+      >
+        <motion.div
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 2, repeat: Infinity }}
+        >
+          ✓ Analyzing your shopping list
+        </motion.div>
+        <motion.div
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+        >
+          ✓ Finding best prices across stores
+        </motion.div>
+        <motion.div
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 1 }}
+        >
+          ✓ Optimizing your route
+        </motion.div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export default LoadingAnimation;
diff --git a/frontend/src/components/features/shopping/LocationSelector.tsx b/frontend/src/components/features/shopping/LocationSelector.tsx
new file mode 100644
index 0000000..70d17cc
--- /dev/null
+++ b/frontend/src/components/features/shopping/LocationSelector.tsx
@@ -0,0 +1,97 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { type LocationSelectorProps } from "../../types";
+
+export default function LocationSelector({
+  useCurrentLocation,
+  onLocationOptionChange,
+  currentLocation,
+  manualLocation,
+  onManualLocationChange,
+}: LocationSelectorProps) {
+  return (
+    <div className="space-y-4">
+      {/* Current Location Option */}
+      <button
+        onClick={() => onLocationOptionChange(true)}
+        className={`w-full p-4 rounded-lg border-2 transition-colors ${
+          useCurrentLocation
+            ? "border-orange-500 bg-orange-50 text-orange-700"
+            : "border-orange-200 bg-white text-orange-600 hover:border-orange-300"
+        }`}
+      >
+        <div className="flex items-center space-x-3">
+          <div
+            className={`w-4 h-4 rounded-full border-2 ${
+              useCurrentLocation
+                ? "border-orange-500 bg-orange-500"
+                : "border-orange-300"
+            }`}
+          >
+            {useCurrentLocation && (
+              <div className="w-2 h-2 bg-white rounded-full m-0.5"></div>
+            )}
+          </div>
+          <div className="text-left">
+            <div className="font-medium">📍 Use my current location</div>
+            {currentLocation && (
+              <div className="text-sm text-orange-600">
+                Location detected: {currentLocation.lat.toFixed(4)},{" "}
+                {currentLocation.lng.toFixed(4)}
+              </div>
+            )}
+          </div>
+        </div>
+      </button>
+
+      {/* Manual Location Option */}
+      <button
+        onClick={() => onLocationOptionChange(false)}
+        className={`w-full p-4 rounded-lg border-2 transition-colors ${
+          !useCurrentLocation
+            ? "border-orange-500 bg-orange-50 text-orange-700"
+            : "border-orange-200 bg-white text-orange-600 hover:border-orange-300"
+        }`}
+      >
+        <div className="flex items-center space-x-3">
+          <div
+            className={`w-4 h-4 rounded-full border-2 ${
+              !useCurrentLocation
+                ? "border-orange-500 bg-orange-500"
+                : "border-orange-300"
+            }`}
+          >
+            {!useCurrentLocation && (
+              <div className="w-2 h-2 bg-white rounded-full m-0.5"></div>
+            )}
+          </div>
+          <div className="text-left">
+            <div className="font-medium">✏️ Enter my postcode or suburb</div>
+            <div className="text-sm text-orange-600">
+              Type your location manually
+            </div>
+          </div>
+        </div>
+      </button>
+
+      {/* Manual Location Input */}
+      <AnimatePresence>
+        {!useCurrentLocation && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <input
+              type="text"
+              value={manualLocation}
+              onChange={(e) => onManualLocationChange(e.target.value)}
+              placeholder="e.g., 2000, Sydney CBD, Bondi Junction"
+              className="w-full border border-orange-300 rounded-lg p-3 text-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/shopping/PlanLayout.tsx b/frontend/src/components/features/shopping/PlanLayout.tsx
new file mode 100644
index 0000000..beecf9a
--- /dev/null
+++ b/frontend/src/components/features/shopping/PlanLayout.tsx
@@ -0,0 +1,248 @@
+import { motion } from "framer-motion";
+import { useEffect, useRef } from "react";
+import { type PlanData, TEMPLATE_PLAN } from "./planTemplate";
+import SupermarketIcon from "./SupermarketIcon";
+
+interface PlanLayoutProps {
+  planData?: PlanData;
+  isLoading?: boolean;
+}
+
+function PlanLayout({
+  planData = TEMPLATE_PLAN,
+  isLoading = false,
+}: PlanLayoutProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Ensure scroll starts at the beginning when component mounts
+  useEffect(() => {
+    if (scrollContainerRef.current && !isLoading) {
+      scrollContainerRef.current.scrollLeft = 0;
+    }
+  }, [isLoading]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="h-full flex flex-col p-4"
+    >
+      {/* Header */}
+      <div className="text-center mb-4">
+        <h2 className="text-2xl font-bold text-orange-600 mb-1">
+          Your Shopping Route
+        </h2>
+        <p className="text-orange-700 text-sm">
+          Optimized for savings and efficiency
+        </p>
+      </div>
+
+      {/* Savings and Summary Row */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4">
+        {/* Savings Highlight */}
+        <motion.div
+          initial={{ scale: 0.9 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2 }}
+          className="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 rounded-xl p-3 text-center"
+        >
+          <div className="text-2xl font-bold text-green-600 mb-1">
+            {isLoading ? "..." : `$${planData.total_savings.toFixed(2)}`}
+          </div>
+          <div className="text-green-700 font-medium text-sm">
+            Total Savings
+          </div>
+        </motion.div>
+
+        {/* Time Summary */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          className="bg-orange-50 border border-orange-200 rounded-xl p-3"
+        >
+          <div className="text-center">
+            <div className="text-2xl font-bold text-orange-600 mb-1">
+              {isLoading ? "..." : `${planData.total_time} min`}
+            </div>
+            <div className="text-orange-700 font-medium text-sm">
+              Total Time
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Cost Summary */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4 }}
+          className="bg-blue-50 border border-blue-200 rounded-xl p-3"
+        >
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600 mb-1">
+              {isLoading ? "..." : `$${planData.total_cost.toFixed(2)}`}
+            </div>
+            <div className="text-blue-700 font-medium text-sm">Total Cost</div>
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Route Visualization */}
+      <div className="flex-1 overflow-hidden">
+        {isLoading ? (
+          // Loading skeleton
+          <div className="flex items-center justify-center h-full">
+            <div className="animate-pulse flex space-x-12 px-4">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex items-center">
+                  <div className="bg-orange-200 rounded-lg p-6 w-96 h-64"></div>
+                  {i < 3 && (
+                    <div className="w-14 h-14 bg-orange-200 rounded-full ml-6"></div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          // Route with stores and arrows
+          <div
+            ref={scrollContainerRef}
+            className="flex items-center justify-start h-full overflow-x-auto scroll-smooth"
+          >
+            <div className="flex items-center space-x-8 min-w-max px-4 pr-8">
+              {/* Starting Point */}
+              <motion.div
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.2 }}
+                className="bg-gray-100 border-2 border-gray-300 rounded-lg p-6 text-center min-w-[320px] h-[40vh] flex flex-col justify-center"
+              >
+                <div className="w-14 h-14 bg-gray-400 rounded-full mx-auto mb-3 flex items-center justify-center">
+                  <span className="text-white text-xl font-bold">🏠</span>
+                </div>
+                <h3 className="font-semibold text-gray-700 text-base mb-2">
+                  Starting Point
+                </h3>
+                <p className="text-sm text-gray-600">
+                  {planData.starting_location.address}
+                </p>
+              </motion.div>
+
+              {/* Route Segments and Stores */}
+              {planData.stores.map((store, index) => {
+                const routeSegment = planData.route_segments[index];
+                return (
+                  <div
+                    key={store.store_info.store_id}
+                    className="flex items-center"
+                  >
+                    {/* Arrow and Route Info */}
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ delay: 0.3 + index * 0.1 }}
+                      className="flex flex-col items-center mx-6"
+                    >
+                      <div className="flex items-center">
+                        <div className="w-14 h-14 bg-orange-500 rounded-full flex items-center justify-center shadow-lg">
+                          <svg
+                            className="w-7 h-7 text-white"
+                            fill="currentColor"
+                            viewBox="0 0 20 20"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div className="text-center mt-4 bg-white rounded-lg p-4 shadow-sm border border-orange-100 min-w-[120px] h-[100px] flex flex-col justify-center">
+                        <div className="text-base font-semibold text-orange-600 mb-1">
+                          {routeSegment.distance_km}km
+                        </div>
+                        <div className="text-base text-orange-500 mb-1">
+                          {routeSegment.travel_time_min}min
+                        </div>
+                        <div className="text-sm text-gray-500 capitalize">
+                          {routeSegment.travel_method}
+                        </div>
+                      </div>
+                    </motion.div>
+
+                    {/* Store Card */}
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.4 + index * 0.1 }}
+                      className="bg-white border border-orange-200 rounded-lg p-6 min-w-[360px] max-w-[360px] shadow-lg h-[40vh] flex flex-col"
+                    >
+                      {/* Store Header with Icon */}
+                      <div className="flex items-center mb-4 h-12">
+                        <div className="flex items-center space-x-3 flex-1 min-w-0">
+                          <SupermarketIcon
+                            retailerId={store.store_info.retailer_id}
+                            size="md"
+                          />
+                          <h3 className="text-base font-semibold text-orange-800 truncate">
+                            {store.store_info.name}
+                          </h3>
+                        </div>
+                      </div>
+
+                      {/* Items List */}
+                      <div className="space-y-2 text-sm text-orange-700 mb-4 flex-1 overflow-y-auto">
+                        {store.items.map((item, itemIndex) => (
+                          <div
+                            key={itemIndex}
+                            className="flex justify-between items-center py-1"
+                          >
+                            <span className="truncate flex-1">
+                              • {item.product_name} ({item.quantity}x)
+                            </span>
+                            <span className="font-medium ml-2">
+                              ${item.line_total.toFixed(2)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+
+                      {/* Footer */}
+                      <div className="flex justify-between items-center pt-3 border-t border-orange-100 mt-auto">
+                        {/* Add to Cart Button */}
+                        <button className="bg-orange-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors shadow-md">
+                          Add to Cart
+                        </button>
+                        {/* Status Badge */}
+                        <span
+                          className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap ${
+                            store.click_collect_available && store.min_spend_met
+                              ? "bg-green-100 text-green-700"
+                              : "bg-orange-100 text-orange-700"
+                          }`}
+                        >
+                          {store.click_collect_available && store.min_spend_met
+                            ? "Click & Collect"
+                            : "In-store Only"}
+                        </span>
+
+                        {/* Total - Right aligned */}
+                        <span className="text-lg font-bold text-orange-800">
+                          ${store.subtotal.toFixed(2)}
+                        </span>
+                      </div>
+                    </motion.div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+export default PlanLayout;
diff --git a/frontend/src/components/ShoppingListForm/ShoppingCartIcon.tsx b/frontend/src/components/features/shopping/ShoppingCartIcon.tsx
similarity index 100%
rename from frontend/src/components/ShoppingListForm/ShoppingCartIcon.tsx
rename to frontend/src/components/features/shopping/ShoppingCartIcon.tsx
diff --git a/frontend/src/components/features/shopping/ShoppingListForm.tsx b/frontend/src/components/features/shopping/ShoppingListForm.tsx
new file mode 100644
index 0000000..d271d88
--- /dev/null
+++ b/frontend/src/components/features/shopping/ShoppingListForm.tsx
@@ -0,0 +1,548 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import CardContainer from "../../shared/layout/CardContainer";
+import StepContainer from "../../shared/ui/StepContainer";
+import StepHeader from "../../shared/forms/StepHeader";
+import NavigationButtons from "../../shared/forms/NavigationButtons";
+import ItemSelectionGrid from "./ItemSelectionGrid";
+import CustomInputToggle from "./CustomInputToggle";
+import ItemDetailsForm from "./ItemDetailsForm";
+import LocationSelector from "./LocationSelector";
+import ShoppingListTable from "./ShoppingListTable";
+import LoadingAnimation from "./LoadingAnimation";
+import PlanLayout from "./PlanLayout";
+import {
+  type ShoppingListItem,
+  type FormStep,
+  type LocationData,
+} from "../../types";
+import { TEMPLATE_PLAN } from "./planTemplate";
+
+// Common grocery items for quick selection
+const commonItems = [
+  "Milk",
+  "Eggs",
+  "Bread",
+  "Butter",
+  "Cheese",
+  "Chicken",
+  "Rice",
+  "Pasta",
+  "Tomatoes",
+  "Potatoes",
+  "Apples",
+  "Bananas",
+  "Toilet Paper",
+  "Coffee",
+  "Yogurt",
+  "Orange Juice",
+  "Cereal",
+  "Spinach",
+  "Carrots",
+  "Onions",
+];
+
+function ShoppingListForm() {
+  const [currentStep, setCurrentStep] = useState<FormStep>("items");
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const [showDetails, setShowDetails] = useState(false);
+  const [customInput, setCustomInput] = useState("");
+  const [shoppingList, setShoppingList] = useState<ShoppingListItem[]>([]);
+  const [location, setLocation] = useState("");
+  const [useCurrentLocation, setUseCurrentLocation] = useState(false);
+  const [, setIsLoading] = useState(false);
+  const [detailsItems, setDetailsItems] = useState<ShoppingListItem[]>([]);
+  const [currentLocation, setCurrentLocation] = useState<LocationData | null>(
+    null
+  );
+
+  const toggleItem = (item: string) => {
+    const isCurrentlySelected = selectedItems.includes(item);
+
+    if (isCurrentlySelected) {
+      // Remove item from selection
+      setSelectedItems((prev) => prev.filter((i) => i !== item));
+
+      // Remove from custom input
+      setCustomInput((prev) => {
+        const escapedItem = item.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        // Handle both cases: item at start (no comma) and item in middle/end (with comma)
+        const itemPattern = new RegExp(`(^|,\\s*)${escapedItem}(?=,|$)`, "g");
+        return prev
+          .replace(itemPattern, "")
+          .replace(/^,\s*/, "")
+          .replace(/,\s*$/, "")
+          .trim();
+      });
+    } else {
+      // Add item to selection
+      setSelectedItems((prev) => [...prev, item]);
+
+      // Add to custom input
+      setCustomInput((prev) => {
+        const trimmed = prev.trim();
+        return trimmed ? `${trimmed}, ${item}` : item;
+      });
+    }
+  };
+
+  const handleCustomInputChange = (value: string) => {
+    setCustomInput(value);
+
+    // Check if any selected items are no longer in the input
+    const inputLower = value.toLowerCase();
+    const itemsToRemove = selectedItems.filter(
+      (item) => !inputLower.includes(item.toLowerCase())
+    );
+
+    if (itemsToRemove.length > 0) {
+      setSelectedItems((prev) =>
+        prev.filter((item) => !itemsToRemove.includes(item))
+      );
+    }
+  };
+
+  const handleNextStep = () => {
+    if (currentStep === "items") {
+      if (selectedItems.length === 0 && !customInput.trim()) {
+        alert(
+          "Please select at least one item or add custom items to continue."
+        );
+        return;
+      }
+      setCurrentStep("details");
+    } else if (currentStep === "details") {
+      // Use the current detailsItems (which have been updated by user input)
+      // If detailsItems is empty, fall back to getAllItemsForDetails()
+      const itemsToUse =
+        detailsItems.length > 0
+          ? detailsItems
+          : getAllItemsForDetails().map((item, index) => ({
+              id: `${item.name}-${index}`,
+              name: item.name,
+              quantity: item.quantity || "",
+              notes: item.notes || "",
+            }));
+
+      setShoppingList(itemsToUse);
+      setCurrentStep("confirm");
+    } else if (currentStep === "confirm") {
+      setCurrentStep("location");
+    } else if (currentStep === "location") {
+      // Log the final payload before sending
+      const finalPayload = createPayload();
+      console.log("Sending payload to server:", finalPayload);
+
+      setCurrentStep("loading");
+      setIsLoading(true);
+
+      // Simulate API call
+      setTimeout(() => {
+        setIsLoading(false);
+        setCurrentStep("plan");
+      }, 3000);
+    }
+  };
+
+  const handleBackStep = () => {
+    if (currentStep === "details") {
+      setCurrentStep("items");
+    } else if (currentStep === "confirm") {
+      // Sync shoppingList back to detailsItems when going back to Step 2
+      setDetailsItems(shoppingList);
+      setCurrentStep("details");
+    } else if (currentStep === "location") {
+      setCurrentStep("confirm");
+    }
+  };
+
+  // Parse custom input into items with quantities and notes
+  const parseCustomInput = (
+    input: string
+  ): Array<{ name: string; quantity?: string; notes?: string }> => {
+    if (!input.trim()) return [];
+
+    const items = input
+      .split(",")
+      .map((item) => item.trim())
+      .filter((item) => item);
+    return items.map((item) => {
+      // Try to extract quantity and notes from the item
+      // Look for patterns like "2L milk", "1kg chicken (organic)", "organic bananas"
+
+      // First check for quantity + name + notes pattern: "1kg Chicken (organic)"
+      const quantityWithNotesMatch = item.match(
+        /^(\d+(?:\.\d+)?\s*(?:kg|l|ml|g|lb|oz|pack|dozen|doz)?)\s+(.+?)\s*\(([^)]+)\)$/i
+      );
+      if (quantityWithNotesMatch) {
+        return {
+          name: quantityWithNotesMatch[2].trim(),
+          quantity: quantityWithNotesMatch[1],
+          notes: quantityWithNotesMatch[3].trim(),
+        };
+      }
+
+      // Then check for quantity + name pattern: "2L milk", "1kg chicken"
+      const quantityMatch = item.match(
+        /^(\d+(?:\.\d+)?\s*(?:kg|l|ml|g|lb|oz|pack|dozen|doz)?)\s+(.+)$/i
+      );
+      if (quantityMatch) {
+        return {
+          name: quantityMatch[2],
+          quantity: quantityMatch[1],
+          notes: "",
+        };
+      }
+
+      // Look for notes patterns in parentheses like "(organic)", "(free-range)"
+      const notesMatch = item.match(/^(.+?)\s*\(([^)]+)\)$/i);
+      if (notesMatch) {
+        return {
+          name: notesMatch[1].trim(),
+          quantity: "",
+          notes: notesMatch[2].trim(),
+        };
+      }
+
+      // Look for notes patterns like "organic", "free-range", "wholemeal" (fallback)
+      const notesMatchFallback = item.match(
+        /^(.+?)\s+(organic|free-range|wholemeal|fresh|frozen|dried|low-fat|full-cream|skim|unsalted|salted|extra-virgin|pure|natural|sugar-free|diet|light|regular|large|small|medium|jumbo|premium|budget|store-brand|brand-name)$/i
+      );
+      if (notesMatchFallback) {
+        return {
+          name: notesMatchFallback[1],
+          quantity: "",
+          notes: notesMatchFallback[2],
+        };
+      }
+
+      // Default: just the item name
+      return {
+        name: item,
+        quantity: "",
+        notes: "",
+      };
+    });
+  };
+
+  // Get all items for the details step - use shoppingList if available, otherwise parse input
+  const getAllItemsForDetails = () => {
+    // If we have a shoppingList (from Step 3), use that
+    if (shoppingList.length > 0) {
+      return shoppingList.map((item) => ({
+        name: item.name,
+        quantity: item.quantity || "",
+        notes: item.notes || "",
+      }));
+    }
+
+    // Otherwise, parse the custom input
+    const customItemsList = parseCustomInput(customInput);
+
+    // If no custom input, fall back to selected items
+    if (customItemsList.length === 0) {
+      return selectedItems.map((item) => ({
+        name: item,
+        quantity: "",
+        notes: "",
+      }));
+    }
+
+    return customItemsList;
+  };
+
+  // Initialize detailsItems when entering details step
+  useEffect(() => {
+    if (currentStep === "details" && detailsItems.length === 0) {
+      // Use shoppingList if available, otherwise parse from input
+      let itemsToUse;
+
+      if (shoppingList.length > 0) {
+        itemsToUse = shoppingList.map((item) => ({
+          name: item.name,
+          quantity: item.quantity || "",
+          notes: item.notes || "",
+        }));
+      } else {
+        const customItemsList = parseCustomInput(customInput);
+        itemsToUse =
+          customItemsList.length === 0
+            ? selectedItems.map((item) => ({
+                name: item,
+                quantity: "",
+                notes: "",
+              }))
+            : customItemsList;
+      }
+
+      const initialItems = itemsToUse.map((item, index) => ({
+        id: `${item.name}-${index}`,
+        name: item.name,
+        quantity: item.quantity || "",
+        notes: item.notes || "",
+      }));
+      setDetailsItems(initialItems);
+    }
+  }, [
+    currentStep,
+    customInput,
+    selectedItems,
+    detailsItems.length,
+    shoppingList,
+  ]);
+
+  const updateItem = (id: string, updates: Partial<ShoppingListItem>) => {
+    setShoppingList((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, ...updates } : item))
+    );
+    setDetailsItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, ...updates } : item))
+    );
+  };
+
+  // Update details item by name (for Step 2)
+  const updateDetailsItemByName = (
+    name: string,
+    updates: Partial<ShoppingListItem>
+  ) => {
+    setDetailsItems((prev) =>
+      prev.map((item) => (item.name === name ? { ...item, ...updates } : item))
+    );
+  };
+
+  const removeItem = (id: string) => {
+    setShoppingList((prev) => prev.filter((item) => item.id !== id));
+    setDetailsItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  // Create JSON payload for the backend
+  const createPayload = () => {
+    const payload = {
+      shopping_list: shoppingList
+        .map((item) =>
+          [item.name, item.quantity, item.notes].filter(Boolean).join(" ")
+        )
+        .join(", "),
+      location: useCurrentLocation
+        ? currentLocation
+          ? `${currentLocation.lat},${currentLocation.lng}`
+          : "current_location"
+        : location.trim() || "Sydney CBD",
+      location_type: useCurrentLocation ? "coordinates" : "text",
+      timestamp: new Date().toISOString(),
+      source: "web_form",
+    };
+
+    console.log("Final payload to send to server:", payload);
+    return payload;
+  };
+
+  // Get user's current location
+  const getCurrentLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setCurrentLocation({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          });
+        },
+        (error) => {
+          console.error("Error getting location:", error);
+          alert("Unable to get your location. Please enter it manually.");
+        }
+      );
+    } else {
+      alert(
+        "Geolocation is not supported by this browser. Please enter your location manually."
+      );
+    }
+  };
+
+  // Handle location option change
+  const handleLocationOptionChange = (useCurrent: boolean) => {
+    setUseCurrentLocation(useCurrent);
+    if (useCurrent && !currentLocation) {
+      getCurrentLocation();
+    }
+  };
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case "items":
+        return (
+          <StepContainer>
+            <StepHeader
+              title="What do you need to buy?"
+              description="Select common items or add your own"
+            />
+
+            <ItemSelectionGrid
+              items={commonItems}
+              selectedItems={selectedItems}
+              onToggleItem={toggleItem}
+              label="Quick Select Common Items"
+            />
+
+            {/* Selected Items Count */}
+            {selectedItems.length > 0 && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="bg-orange-100 rounded-lg p-3 text-center"
+              >
+                <span className="text-orange-700 font-medium">
+                  {selectedItems.length} item
+                  {selectedItems.length !== 1 ? "s" : ""} selected
+                </span>
+              </motion.div>
+            )}
+
+            <CustomInputToggle
+              showDetails={showDetails}
+              onToggle={setShowDetails}
+              customInput={customInput}
+              onInputChange={handleCustomInputChange}
+            />
+
+            <NavigationButtons
+              onNext={handleNextStep}
+              nextText="Continue"
+              nextDisabled={selectedItems.length === 0}
+              showBack={false}
+            />
+          </StepContainer>
+        );
+
+      case "details":
+        return (
+          <StepContainer>
+            <StepHeader
+              title="Add Details"
+              description="Specify quantities and any special requirements"
+            />
+
+            <ItemDetailsForm
+              items={getAllItemsForDetails()}
+              detailsItems={detailsItems}
+              onUpdateItem={updateDetailsItemByName}
+            />
+
+            <NavigationButtons
+              onBack={handleBackStep}
+              onNext={handleNextStep}
+              backText="Back"
+              nextText="Review List"
+            />
+          </StepContainer>
+        );
+
+      case "confirm":
+        return (
+          <StepContainer>
+            <StepHeader
+              title="Review Your List"
+              description="Make sure everything looks correct"
+            />
+
+            <ShoppingListTable
+              items={shoppingList}
+              onUpdateItem={updateItem}
+              onRemoveItem={removeItem}
+              onAddItem={() => {
+                const newItem = {
+                  id: `custom-${Date.now()}`,
+                  name: "",
+                  quantity: "",
+                  notes: "",
+                };
+                setShoppingList((prev) => [...prev, newItem]);
+                setDetailsItems((prev) => [...prev, newItem]);
+              }}
+            />
+
+            <NavigationButtons
+              onBack={handleBackStep}
+              onNext={handleNextStep}
+              backText="Back"
+              nextText="Set Location"
+              nextDisabled={shoppingList.length === 0}
+            />
+          </StepContainer>
+        );
+
+      case "location":
+        return (
+          <StepContainer>
+            <StepHeader
+              title="Your Location"
+              description="Help us find the best stores near you"
+            />
+
+            <LocationSelector
+              useCurrentLocation={useCurrentLocation}
+              onLocationOptionChange={handleLocationOptionChange}
+              currentLocation={currentLocation}
+              manualLocation={location}
+              onManualLocationChange={setLocation}
+            />
+
+            <NavigationButtons
+              onBack={handleBackStep}
+              onNext={handleNextStep}
+              backText="Back"
+              nextText="Generate Plan"
+            />
+          </StepContainer>
+        );
+
+      case "loading":
+        return (
+          <motion.div
+            key="loading"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <LoadingAnimation />
+          </motion.div>
+        );
+
+      case "plan":
+        return (
+          <motion.div
+            key="plan"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            transition={{ duration: 0.3 }}
+            className="h-full"
+          >
+            <PlanLayout planData={TEMPLATE_PLAN} isLoading={false} />
+          </motion.div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center py-8 px-4">
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -40 }}
+        transition={{ duration: 0.7 }}
+        className="w-full max-w-6xl"
+      >
+        <CardContainer variant="desktop" maxWidth="full">
+          <AnimatePresence mode="wait">{renderStep()}</AnimatePresence>
+        </CardContainer>
+      </motion.div>
+    </div>
+  );
+}
+
+export default ShoppingListForm;
diff --git a/frontend/src/components/features/shopping/ShoppingListTable.tsx b/frontend/src/components/features/shopping/ShoppingListTable.tsx
new file mode 100644
index 0000000..def40c6
--- /dev/null
+++ b/frontend/src/components/features/shopping/ShoppingListTable.tsx
@@ -0,0 +1,210 @@
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+
+interface ShoppingListItem {
+  id: string;
+  name: string;
+  quantity?: string;
+  size?: string;
+  notes?: string;
+}
+
+interface ShoppingListTableProps {
+  items: ShoppingListItem[];
+  onUpdateItem: (id: string, updates: Partial<ShoppingListItem>) => void;
+  onRemoveItem: (id: string) => void;
+  onAddItem: () => void;
+}
+
+function ShoppingListTable({
+  items,
+  onUpdateItem,
+  onRemoveItem,
+  onAddItem,
+}: ShoppingListTableProps) {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [originalItem, setOriginalItem] = useState<ShoppingListItem | null>(
+    null
+  );
+
+  const handleAddItem = () => {
+    onAddItem();
+  };
+
+  // Auto-edit newly added items (empty name)
+  useEffect(() => {
+    const newItem = items.find((item) => item.name === "");
+    if (newItem && editingId !== newItem.id) {
+      setEditingId(newItem.id);
+    }
+  }, [items, editingId]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="bg-white rounded-lg border border-orange-200 overflow-hidden"
+    >
+      <div className="bg-orange-50 px-4 py-3 border-b border-orange-200">
+        <h3 className="text-lg font-semibold text-orange-800">
+          Your Shopping List
+        </h3>
+        <p className="text-sm text-orange-600">
+          Review and edit your items before generating your plan
+        </p>
+      </div>
+
+      <div className="max-h-96 overflow-y-auto">
+        {items.length === 0 ? (
+          <div className="p-8 text-center text-orange-600">
+            <p>No items in your shopping list yet.</p>
+            <button
+              onClick={handleAddItem}
+              className="mt-2 text-orange-500 hover:text-orange-600 font-medium"
+            >
+              Add your first item
+            </button>
+          </div>
+        ) : (
+          <div className="divide-y divide-orange-100">
+            {items.map((item, index) => (
+              <motion.div
+                key={item.id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: index * 0.025 }}
+                className="p-4 hover:bg-orange-25 transition-colors"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex-1">
+                    {editingId === item.id ? (
+                      <div className="space-y-2">
+                        <input
+                          type="text"
+                          value={item.name}
+                          onChange={(e) =>
+                            onUpdateItem(item.id, { name: e.target.value })
+                          }
+                          className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
+                          placeholder="Item name"
+                          autoFocus
+                        />
+                        <div className="flex space-x-2">
+                          <input
+                            type="text"
+                            value={item.quantity || ""}
+                            onChange={(e) =>
+                              onUpdateItem(item.id, {
+                                quantity: e.target.value,
+                              })
+                            }
+                            className="flex-1 px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
+                            placeholder="Quantity (e.g., 2L, 1kg)"
+                          />
+                          <input
+                            type="text"
+                            value={item.notes || ""}
+                            onChange={(e) =>
+                              onUpdateItem(item.id, { notes: e.target.value })
+                            }
+                            className="flex-1 px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
+                            placeholder="Notes (e.g., organic, free-range)"
+                          />
+                        </div>
+                        <div className="flex space-x-2">
+                          <button
+                            onClick={() => {
+                              setEditingId(null);
+                              setOriginalItem(null);
+                            }}
+                            className="px-3 py-1 bg-orange-500 text-white rounded-md text-sm hover:bg-orange-600"
+                          >
+                            Save
+                          </button>
+                          <button
+                            onClick={() => {
+                              // If item has no name, remove it when canceling
+                              if (!item.name.trim()) {
+                                onRemoveItem(item.id);
+                              } else if (originalItem) {
+                                // Revert to original values
+                                onUpdateItem(item.id, {
+                                  name: originalItem.name,
+                                  quantity: originalItem.quantity,
+                                  notes: originalItem.notes,
+                                });
+                              }
+                              setEditingId(null);
+                              setOriginalItem(null);
+                            }}
+                            className="px-3 py-1 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400"
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div>
+                        <div className="flex items-center space-x-2">
+                          <span className="font-medium text-orange-800">
+                            {item.name}
+                          </span>
+                          {item.quantity && (
+                            <span className="text-sm text-orange-600 bg-orange-100 px-2 py-1 rounded">
+                              {item.quantity}
+                            </span>
+                          )}
+                        </div>
+                        {item.notes && (
+                          <p className="text-sm text-orange-600 mt-1">
+                            {item.notes}
+                          </p>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {editingId !== item.id && (
+                    <div className="flex space-x-2">
+                      <button
+                        onClick={() => {
+                          setOriginalItem({ ...item });
+                          setEditingId(item.id);
+                        }}
+                        className="p-2 text-orange-500 hover:text-orange-600 hover:bg-orange-50 rounded-md"
+                        title="Edit item"
+                      >
+                        ✏️
+                      </button>
+                      <button
+                        onClick={() => onRemoveItem(item.id)}
+                        className="p-2 text-red-500 hover:text-red-600 hover:bg-red-50 rounded-md"
+                        title="Remove item"
+                      >
+                        🗑️
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {items.length > 0 && (
+        <div className="p-4 border-t border-orange-200 bg-orange-25">
+          <button
+            onClick={handleAddItem}
+            className="w-full py-2 border-2 border-dashed border-orange-300 text-orange-600 rounded-md hover:border-orange-400 hover:text-orange-700 transition-colors"
+          >
+            + Add another item
+          </button>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+export default ShoppingListTable;
diff --git a/frontend/src/components/features/shopping/SupermarketIcon.tsx b/frontend/src/components/features/shopping/SupermarketIcon.tsx
new file mode 100644
index 0000000..b2721bc
--- /dev/null
+++ b/frontend/src/components/features/shopping/SupermarketIcon.tsx
@@ -0,0 +1,88 @@
+interface SupermarketIconProps {
+  retailerId: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+function SupermarketIcon({
+  retailerId,
+  size = "md",
+  className = "",
+}: SupermarketIconProps) {
+  const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-12 h-12",
+    lg: "w-14 h-14",
+  };
+
+  const getRetailerIcon = () => {
+    const baseClasses = `${sizeClasses[size]} rounded-lg flex items-center justify-center shadow-md ${className}`;
+
+    switch (retailerId.toLowerCase()) {
+      case "woolworths":
+        return (
+          <div
+            className={`${baseClasses} bg-gradient-to-br from-green-500 to-green-600`}
+          >
+            <img
+              src="/src/assets/woolworth.png"
+              alt="Woolworths"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        );
+      case "coles":
+        return (
+          <div
+            className={`${baseClasses} bg-gradient-to-br from-red-500 to-red-600`}
+          >
+            <img
+              src="/src/assets/coles.png"
+              alt="Coles"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        );
+      case "aldi":
+        return (
+          <div
+            className={`${baseClasses} bg-gradient-to-br from-blue-500 to-blue-600`}
+          >
+            <img
+              src="/src/assets/aldi.png"
+              alt="ALDI"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        );
+      case "iga":
+        return (
+          <div
+            className={`${baseClasses} bg-gradient-to-br from-purple-500 to-purple-600`}
+          >
+            <span className="text-white text-lg font-bold">I</span>
+          </div>
+        );
+      case "foodland":
+        return (
+          <div
+            className={`${baseClasses} bg-gradient-to-br from-yellow-500 to-yellow-600`}
+          >
+            <span className="text-white text-lg font-bold">F</span>
+          </div>
+        );
+      default:
+        return (
+          <div
+            className={`${baseClasses} bg-gradient-to-br from-gray-500 to-gray-600`}
+          >
+            <span className="text-white text-lg font-bold">?</span>
+          </div>
+        );
+    }
+  };
+
+  return getRetailerIcon();
+}
+
+export default SupermarketIcon;
diff --git a/frontend/src/components/features/shopping/TemplateTest.tsx b/frontend/src/components/features/shopping/TemplateTest.tsx
new file mode 100644
index 0000000..be27f79
--- /dev/null
+++ b/frontend/src/components/features/shopping/TemplateTest.tsx
@@ -0,0 +1,43 @@
+import { TEMPLATE_PLAN } from "./planTemplate";
+import PlanLayout from "./PlanLayout";
+
+// Test component to verify template rendering
+function TemplateTest() {
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-800 mb-8 text-center">
+          Plan Template Test
+        </h1>
+
+        {/* Test with template data */}
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-700 mb-4">
+            Template Data Preview
+          </h2>
+          <PlanLayout planData={TEMPLATE_PLAN} isLoading={false} />
+        </div>
+
+        {/* Test with loading state */}
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold text-gray-700 mb-4">
+            Loading State Preview
+          </h2>
+          <PlanLayout planData={TEMPLATE_PLAN} isLoading={true} />
+        </div>
+
+        {/* Raw data display */}
+        <div className="bg-white rounded-lg p-6 border border-gray-200">
+          <h2 className="text-xl font-semibold text-gray-700 mb-4">
+            Raw Template Data
+          </h2>
+          <pre className="bg-gray-100 p-4 rounded text-sm overflow-auto">
+            {JSON.stringify(TEMPLATE_PLAN, null, 2)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TemplateTest;
diff --git a/frontend/src/components/features/shopping/planTemplate.ts b/frontend/src/components/features/shopping/planTemplate.ts
new file mode 100644
index 0000000..e87fce6
--- /dev/null
+++ b/frontend/src/components/features/shopping/planTemplate.ts
@@ -0,0 +1,203 @@
+// Template plan data structure based on meta-agent output
+export interface PlanItem {
+  product_name: string;
+  quantity: number;
+  unit_price: number;
+  line_total: number;
+  item_requested: string;
+}
+
+export interface StoreBasket {
+  store_info: {
+    store_id: string;
+    name: string;
+    address: string;
+    retailer_id: string;
+  };
+  items: PlanItem[];
+  subtotal: number;
+  click_collect_available: boolean;
+  min_spend_met: boolean;
+}
+
+export interface RouteSegment {
+  from_store_id?: string;
+  to_store_id: string;
+  distance_km: number;
+  travel_time_min: number;
+  travel_method: "walking" | "driving" | "public_transport";
+}
+
+export interface PlanData {
+  total_cost: number;
+  total_time: number;
+  travel_time: number;
+  shopping_time: number;
+  total_savings: number;
+  route_score: number;
+  starting_location: {
+    address: string;
+    coordinates: { lat: number; lng: number };
+  };
+  stores: StoreBasket[];
+  route_segments: RouteSegment[];
+  optimization_details: {
+    price_component: number;
+    time_component: number;
+    total_items: number;
+    stores_count: number;
+  };
+}
+
+// Realistic template plan with 3 stores and diverse categories
+export const TEMPLATE_PLAN: PlanData = {
+  total_cost: 47.85,
+  total_time: 42,
+  travel_time: 18,
+  shopping_time: 24,
+  total_savings: 12.5,
+  route_score: 0.8472,
+  starting_location: {
+    address: "100 Market Street, Sydney NSW 2000",
+    coordinates: { lat: -33.8688, lng: 151.2093 },
+  },
+  route_segments: [
+    {
+      to_store_id: "store_001",
+      distance_km: 0.8,
+      travel_time_min: 6,
+      travel_method: "walking",
+    },
+    {
+      from_store_id: "store_001",
+      to_store_id: "store_002",
+      distance_km: 0.5,
+      travel_time_min: 4,
+      travel_method: "walking",
+    },
+    {
+      from_store_id: "store_002",
+      to_store_id: "store_003",
+      distance_km: 0.7,
+      travel_time_min: 8,
+      travel_method: "walking",
+    },
+  ],
+  stores: [
+    {
+      store_info: {
+        store_id: "store_001",
+        name: "Woolworths Sydney CBD",
+        address: "123 George Street, Sydney NSW 2000",
+        retailer_id: "woolworths",
+      },
+      items: [
+        {
+          product_name: "Woolworths Full Cream Milk 2L",
+          quantity: 2,
+          unit_price: 3.6,
+          line_total: 7.2,
+          item_requested: "2L milk",
+        },
+        {
+          product_name: "Woolworths Wholemeal Bread",
+          quantity: 1,
+          unit_price: 2.5,
+          line_total: 2.5,
+          item_requested: "wholemeal bread",
+        },
+        {
+          product_name: "Woolworths Free Range Eggs 12pk",
+          quantity: 1,
+          unit_price: 4.2,
+          line_total: 4.2,
+          item_requested: "12 free-range eggs",
+        },
+      ],
+      subtotal: 13.9,
+      click_collect_available: true,
+      min_spend_met: true,
+    },
+    {
+      store_info: {
+        store_id: "store_002",
+        name: "Coles Pitt Street",
+        address: "456 Pitt Street, Sydney NSW 2000",
+        retailer_id: "coles",
+      },
+      items: [
+        {
+          product_name: "Coles Chicken Breast 1kg",
+          quantity: 1,
+          unit_price: 8.5,
+          line_total: 8.5,
+          item_requested: "1kg chicken breast",
+        },
+        {
+          product_name: "Coles Basmati Rice 1kg",
+          quantity: 1,
+          unit_price: 3.2,
+          line_total: 3.2,
+          item_requested: "1kg rice",
+        },
+        {
+          product_name: "Coles Tomatoes 500g",
+          quantity: 1,
+          unit_price: 2.8,
+          line_total: 2.8,
+          item_requested: "tomatoes",
+        },
+      ],
+      subtotal: 14.5,
+      click_collect_available: true,
+      min_spend_met: true,
+    },
+    {
+      store_info: {
+        store_id: "store_003",
+        name: "ALDI Martin Place",
+        address: "789 Martin Place, Sydney NSW 2000",
+        retailer_id: "aldi",
+      },
+      items: [
+        {
+          product_name: "ALDI Organic Bananas 1kg",
+          quantity: 1,
+          unit_price: 2.9,
+          line_total: 2.9,
+          item_requested: "organic bananas",
+        },
+        {
+          product_name: "ALDI Greek Yogurt 1kg",
+          quantity: 1,
+          unit_price: 4.5,
+          line_total: 4.5,
+          item_requested: "greek yogurt",
+        },
+        {
+          product_name: "ALDI Olive Oil 500ml",
+          quantity: 1,
+          unit_price: 5.95,
+          line_total: 5.95,
+          item_requested: "olive oil",
+        },
+        {
+          product_name: "ALDI Pasta 500g",
+          quantity: 2,
+          unit_price: 1.2,
+          line_total: 2.4,
+          item_requested: "pasta",
+        },
+      ],
+      subtotal: 15.75,
+      click_collect_available: false,
+      min_spend_met: false,
+    },
+  ],
+  optimization_details: {
+    price_component: 0.7234,
+    time_component: 0.1238,
+    total_items: 10,
+    stores_count: 3,
+  },
+};
diff --git a/frontend/src/components/shared/forms/NavigationButtons.tsx b/frontend/src/components/shared/forms/NavigationButtons.tsx
new file mode 100644
index 0000000..67305e3
--- /dev/null
+++ b/frontend/src/components/shared/forms/NavigationButtons.tsx
@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+import { type NavigationButtonsProps } from "../../types";
+
+export default function NavigationButtons({
+  onBack,
+  onNext,
+  backText = "Back",
+  nextText,
+  nextDisabled = false,
+  showBack = true,
+}: NavigationButtonsProps) {
+  return (
+    <div className="flex justify-between pt-4">
+      {showBack && onBack ? (
+        <motion.button
+          onClick={onBack}
+          whileTap={{ scale: 0.95 }}
+          className="flex items-center space-x-2 px-6 py-3 border border-orange-300 text-orange-700 rounded-lg hover:bg-orange-50 transition-colors"
+        >
+          <span className="text-xl">←</span>
+          <span>{backText}</span>
+        </motion.button>
+      ) : (
+        <div></div>
+      )}
+
+      <motion.button
+        onClick={onNext}
+        disabled={nextDisabled}
+        whileTap={{ scale: 0.95 }}
+        className={`
+          flex items-center space-x-2 px-6 py-3 rounded-lg transition-colors
+          ${
+            nextDisabled
+              ? "bg-gray-300 text-gray-500 cursor-not-allowed"
+              : "bg-orange-500 text-white hover:bg-orange-600"
+          }
+        `}
+      >
+        <span>{nextText}</span>
+        <span className="text-xl">→</span>
+      </motion.button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/shared/forms/StepHeader.tsx b/frontend/src/components/shared/forms/StepHeader.tsx
new file mode 100644
index 0000000..140f153
--- /dev/null
+++ b/frontend/src/components/shared/forms/StepHeader.tsx
@@ -0,0 +1,10 @@
+import { type StepHeaderProps } from "../../types";
+
+export default function StepHeader({ title, description }: StepHeaderProps) {
+  return (
+    <div className="text-center">
+      <h2 className="text-3xl font-bold mb-2 text-orange-600">{title}</h2>
+      <p className="text-orange-700">{description}</p>
+    </div>
+  );
+}
diff --git a/frontend/src/components/CardContainer.tsx b/frontend/src/components/shared/layout/CardContainer.tsx
similarity index 100%
rename from frontend/src/components/CardContainer.tsx
rename to frontend/src/components/shared/layout/CardContainer.tsx
diff --git a/frontend/src/components/shared/ui/StepContainer.tsx b/frontend/src/components/shared/ui/StepContainer.tsx
new file mode 100644
index 0000000..6187c78
--- /dev/null
+++ b/frontend/src/components/shared/ui/StepContainer.tsx
@@ -0,0 +1,24 @@
+import { motion } from "framer-motion";
+import { type ReactNode } from "react";
+
+interface StepContainerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function StepContainer({
+  children,
+  className = "",
+}: StepContainerProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, x: -20 }}
+      transition={{ duration: 0.3 }}
+      className={`space-y-6 ${className}`}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
new file mode 100644
index 0000000..73fc2d0
--- /dev/null
+++ b/frontend/src/components/types/index.ts
@@ -0,0 +1,58 @@
+export interface ShoppingListItem {
+  id: string;
+  name: string;
+  quantity?: string;
+  size?: string;
+  notes?: string;
+}
+
+export type FormStep =
+  | "items"
+  | "details"
+  | "confirm"
+  | "location"
+  | "loading"
+  | "plan";
+
+export interface LocationData {
+  lat: number;
+  lng: number;
+}
+
+export interface StepHeaderProps {
+  title: string;
+  description: string;
+}
+
+export interface NavigationButtonsProps {
+  onBack?: () => void;
+  onNext: () => void;
+  backText?: string;
+  nextText: string;
+  nextDisabled?: boolean;
+  showBack?: boolean;
+}
+
+export interface ItemSelectionGridProps {
+  items: string[];
+  selectedItems: string[];
+  onToggleItem: (item: string) => void;
+  label?: string;
+}
+
+export interface CustomInputToggleProps {
+  showDetails: boolean;
+  onToggle: (show: boolean) => void;
+  customInput: string;
+  onInputChange: (value: string) => void;
+  placeholder?: string;
+  tip?: string;
+}
+
+export interface LocationSelectorProps {
+  useCurrentLocation: boolean;
+  onLocationOptionChange: (useCurrent: boolean) => void;
+  currentLocation: LocationData | null;
+  manualLocation: string;
+  onManualLocationChange: (value: string) => void;
+}