diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..5317fce
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..5317fce
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000
diff --git a/package-lock.json b/package-lock.json
index ad91d9e..51f3a68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,25 +1,28 @@
 {
-  "name": "my-vue-app",
+  "name": "vending-machine-www",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-vue-app",
+      "name": "vending-machine-www",
       "version": "0.0.0",
       "dependencies": {
         "@lucide/vue": "^1.16.0",
         "@tailwindcss/vite": "^4.3.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "qrcode": "^1.5.4",
         "reka-ui": "^2.9.8",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.0",
         "vue": "^3.5.34",
-        "vue-router": "^5.0.7"
+        "vue-router": "^5.0.7",
+        "zod": "^4.4.3"
       },
       "devDependencies": {
         "@types/node": "^24.12.4",
+        "@types/qrcode": "^1.5.6",
         "@vitejs/plugin-vue": "^6.0.6",
         "@vue/tsconfig": "^0.9.1",
         "shadcn-vue": "^2.7.3",
@@ -1661,6 +1664,16 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@@ -2083,7 +2096,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2093,7 +2105,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -2409,6 +2420,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001793",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
@@ -2534,6 +2554,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2554,7 +2599,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2567,7 +2611,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/commander": {
@@ -2802,6 +2845,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decode-uri-component": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -2938,6 +2990,12 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -3074,7 +3132,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/encodeurl": {
@@ -3823,6 +3880,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
@@ -4203,7 +4269,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5411,6 +5476,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -5439,9 +5513,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -5555,6 +5627,15 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -5737,6 +5818,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
@@ -5881,6 +5979,15 @@
         "vue": ">= 3.4.0"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -5891,6 +5998,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/reserved-identifiers": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/reserved-identifiers/-/reserved-identifiers-1.2.0.tgz",
@@ -6138,6 +6251,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -6192,6 +6311,16 @@
         "shadcn-vue": "dist/index.js"
       }
     },
+    "node_modules/shadcn-vue/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6446,7 +6575,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -7271,6 +7399,12 @@
         "node": "^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7282,6 +7416,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -7305,6 +7467,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -7327,6 +7495,107 @@
         "url": "https://github.com/sponsors/eemeli"
       }
     },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -7371,10 +7640,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "dev": true,
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 73f1e3f..fec0408 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "my-vue-app",
+  "name": "vending-machine-www",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -13,14 +13,17 @@
     "@tailwindcss/vite": "^4.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "qrcode": "^1.5.4",
     "reka-ui": "^2.9.8",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.0",
     "vue": "^3.5.34",
-    "vue-router": "^5.0.7"
+    "vue-router": "^5.0.7",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@types/node": "^24.12.4",
+    "@types/qrcode": "^1.5.6",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vue/tsconfig": "^0.9.1",
     "shadcn-vue": "^2.7.3",
diff --git a/src/App.vue b/src/App.vue
index 388b05e..7c2aa3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <HelloWorld />
+  <RouterView />
 </template>
diff --git a/src/boot/app.ts b/src/boot/app.ts
index 85b7b3d..476e6e6 100644
--- a/src/boot/app.ts
+++ b/src/boot/app.ts
@@ -1,29 +1,25 @@
-import { App } from '../services/app'
+import { App } from '../services/app';
 
-import type { App as VueApp } from 'vue'
-import type { Router } from 'vue-router'
+import type { App as VueApp } from 'vue';
+import type { Router } from 'vue-router';
 
 export default async ({
   app: vueApp,
   router,
 }: {
-  app: VueApp
-  router: Router
+  app: VueApp;
+  router: Router;
 }): Promise<void> => {
-  console.log('booting app')
-
   try {
-    // Instantiate new app instance.
-    const app = await App.create(router, { apiUrl: 'http://localhost:3000' })
+    const app = await App.create(router, {
+      apiUrl: import.meta.env.VITE_API_URL ?? 'http://localhost:3000',
+    });
 
-    // Inject the app instance so that all children can access it.
-    vueApp.provide('app', app)
+    vueApp.provide('app', app);
   } catch (error) {
-    // Log the error to the console.
-    console.error(error)
-    // Create a dialog that never resolves so execution does not continue.
+    console.error(error);
     await new Promise(() => {
-      alert(`Failed to initialize app: ${error}`)
-    })
+      alert(`Failed to initialize app: ${error}`);
+    });
   }
-}
+};
diff --git a/src/components/InvitationQrCode.vue b/src/components/InvitationQrCode.vue
new file mode 100644
index 0000000..b547375
--- /dev/null
+++ b/src/components/InvitationQrCode.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import QRCode from 'qrcode';
+
+const props = defineProps<{
+  value: string;
+  /** Canvas size in CSS pixels. */
+  size?: number;
+}>();
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+async function renderQrCode(): Promise<void> {
+  const canvas = canvasRef.value;
+  if (!canvas || !props.value) {
+    return;
+  }
+
+  await QRCode.toCanvas(canvas, props.value, {
+    margin: 2,
+    width: props.size ?? 240,
+    errorCorrectionLevel: 'M',
+  });
+}
+
+onMounted(() => {
+  void renderQrCode();
+});
+
+watch(
+  () => props.value,
+  () => {
+    void renderQrCode();
+  },
+);
+</script>
+
+<template>
+  <canvas
+    ref="canvasRef"
+    class="rounded-lg border bg-white p-2"
+    :aria-label="`QR code for ${value}`"
+  />
+</template>
diff --git a/src/pages/CheckoutPage.vue b/src/pages/CheckoutPage.vue
new file mode 100644
index 0000000..d96c2eb
--- /dev/null
+++ b/src/pages/CheckoutPage.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Button } from '@/components/ui/button';
+import { useApp } from '@/services/app';
+
+const app = useApp();
+const router = useRouter();
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const lines = computed(() =>
+  app.catalog.cart.value.flatMap((line) => {
+    const item = app.catalog.items.value.get(line.itemId);
+    if (!item) {
+      return [];
+    }
+    return [{ ...item, quantity: line.quantity, lineTotal: item.price * line.quantity }];
+  }),
+);
+
+const total = computed(() => app.catalog.cartTotal);
+
+const confirmCheckout = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    await app.checkout();
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Checkout failed';
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-6">
+    <header>
+      <Button variant="ghost" @click="router.push('/')">← Back to catalog</Button>
+      <h1 class="mt-4 text-3xl font-semibold">Checkout</h1>
+    </header>
+
+    <section class="rounded-xl border bg-card p-6 shadow-sm">
+      <ul class="space-y-4">
+        <li
+          v-for="line in lines"
+          :key="line.id"
+          class="flex items-center justify-between border-b pb-3 last:border-b-0"
+        >
+          <div>
+            <p class="font-medium">{{ line.quantity }}× {{ line.name }}</p>
+            <p class="text-muted-foreground text-sm">{{ line.price }} sats each</p>
+          </div>
+          <span class="font-semibold">{{ line.lineTotal }} sats</span>
+        </li>
+      </ul>
+
+      <div class="mt-6 flex items-center justify-between text-lg font-semibold">
+        <span>Total</span>
+        <span>{{ total }} sats</span>
+      </div>
+    </section>
+
+    <p v-if="error" class="text-destructive text-sm">{{ error }}</p>
+
+    <Button :disabled="loading || lines.length === 0" @click="confirmCheckout">
+      {{ loading ? 'Creating order…' : 'Confirm & pay' }}
+    </Button>
+  </div>
+</template>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 924ff75..a6e37da 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,14 +1,60 @@
-
-<template>
-  <div class="home-page">
-
-  </div>
-</template>
-
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Button } from '@/components/ui/button';
+import { useApp } from '@/services/app';
+
+const app = useApp();
+const router = useRouter();
+
+const items = computed(() => Array.from(app.catalog.items.value.values()));
+const cartLines = computed(() => app.catalog.cart.value);
+const cartTotal = computed(() => app.catalog.cartTotal);
+
+function addToCart(itemId: string) {
+  app.catalog.addToCart(itemId, 1);
+}
+
+function goToCheckout() {
+  if (cartLines.value.length > 0) {
+    router.push('/checkout');
+  }
+}
 </script>
 
-<style scoped>
+<template>
+  <div class="mx-auto flex min-h-screen max-w-5xl flex-col gap-8 p-6">
+    <header class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-semibold tracking-tight">XO Vending Machine</h1>
+        <p class="text-muted-foreground mt-1">Select items and pay with XO Cash</p>
+      </div>
+      <Button :disabled="cartLines.length === 0" @click="goToCheckout">
+        Cart ({{ app.catalog.cartQuantity }}) — {{ cartTotal }} sats
+      </Button>
+    </header>
 
-</style>
+    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <article
+        v-for="item in items"
+        :key="item.id"
+        class="rounded-xl border bg-card p-4 shadow-sm"
+      >
+        <h2 class="text-lg font-medium">{{ item.name }}</h2>
+        <p class="text-muted-foreground mt-1 text-sm">{{ item.description }}</p>
+        <div class="mt-4 flex items-center justify-between">
+          <span class="font-semibold">{{ item.price }} sats</span>
+          <span class="text-muted-foreground text-sm">Stock: {{ item.quantity }}</span>
+        </div>
+        <Button
+          class="mt-4 w-full"
+          :disabled="item.quantity < 1"
+          @click="addToCart(item.id)"
+        >
+          Add to cart
+        </Button>
+      </article>
+    </section>
+  </div>
+</template>
diff --git a/src/pages/OrderPage.vue b/src/pages/OrderPage.vue
new file mode 100644
index 0000000..6950e0c
--- /dev/null
+++ b/src/pages/OrderPage.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import InvitationQrCode from '@/components/InvitationQrCode.vue';
+import { Button } from '@/components/ui/button';
+import { useApp } from '@/services/app';
+import { InvitationSyncClient } from '@/services/invitation-sync-client';
+import { OrderInvitation } from '@/services/modals/invitation';
+import {
+  buildInvitationSyncFetchUrl,
+  buildXoInvitationImportUrl,
+} from '@/utils/invitation-import-url';
+
+const app = useApp();
+const route = useRoute();
+const router = useRouter();
+
+const orderInvitation = ref<OrderInvitation | null>(null);
+const copiedField = ref<string | null>(null);
+const error = ref<string | null>(null);
+
+const orderId = computed(() => String(route.params.id));
+
+const status = computed(() => orderInvitation.value?.state.order.status ?? 'loading');
+const receipt = computed(() => orderInvitation.value?.state.receipt ?? null);
+const invitation = computed(() => orderInvitation.value?.state.invitation ?? '');
+const syncServerUrl = computed(() => orderInvitation.value?.state.syncServerUrl ?? '');
+const invitationIdentifier = computed(
+  () => orderInvitation.value?.state.order.invitation_identifier ?? '',
+);
+
+/** Wallet import link bundling sync server + invitation ID for QR scan. */
+const walletImportUrl = computed(() => {
+  if (!syncServerUrl.value || !invitationIdentifier.value) {
+    return '';
+  }
+  return buildXoInvitationImportUrl(syncServerUrl.value, invitationIdentifier.value);
+});
+
+/** Direct sync-server fetch URL (alternative import path). */
+const syncFetchUrl = computed(() => {
+  if (!syncServerUrl.value || !invitationIdentifier.value) {
+    return '';
+  }
+  return buildInvitationSyncFetchUrl(syncServerUrl.value, invitationIdentifier.value);
+});
+
+const canPay = computed(
+  () =>
+    (status.value === 'pending' || status.value === 'paid') &&
+    Boolean(invitation.value || invitationIdentifier.value),
+);
+
+onMounted(async () => {
+  const active = app.activeOrder.value;
+  if (active?.state.order.id === orderId.value) {
+    orderInvitation.value = active;
+    return;
+  }
+
+  try {
+    const order = await app.apiClient.getOrder(orderId.value);
+    let invitationText = '';
+
+    if (order.invitation_identifier) {
+      const syncClient = new InvitationSyncClient(order.syncServerUrl);
+      invitationText =
+        (await syncClient.fetchSerialized(order.invitation_identifier)) ?? '';
+    }
+
+    orderInvitation.value = await OrderInvitation.create(
+      { apiClient: app.apiClient },
+      {
+        order,
+        invitation: invitationText,
+        syncServerUrl: order.syncServerUrl,
+        receipt: {
+          summary: `Order ${order.id}`,
+          lineItems: [],
+        },
+      },
+    );
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load order';
+  }
+});
+
+onUnmounted(async () => {
+  const current = orderInvitation.value;
+  const active = app.activeOrder.value;
+  if (current !== null && current !== active) {
+    await current.stop();
+  }
+});
+
+async function copyText(field: string, text: string): Promise<void> {
+  if (!text) {
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+  copiedField.value = field;
+  setTimeout(() => {
+    copiedField.value = null;
+  }, 2000);
+}
+
+function copyLabel(field: string, defaultLabel: string): string {
+  return copiedField.value === field ? 'Copied!' : defaultLabel;
+}
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 p-6">
+    <header>
+      <Button variant="ghost" @click="router.push('/')">← Back to catalog</Button>
+      <h1 class="mt-4 text-3xl font-semibold">Order {{ orderId }}</h1>
+      <p class="text-muted-foreground mt-1 capitalize">Status: {{ status }}</p>
+    </header>
+
+    <p v-if="error" class="text-destructive">{{ error }}</p>
+
+    <section v-if="receipt" class="rounded-xl border bg-card p-6 shadow-sm">
+      <h2 class="text-lg font-medium">Receipt</h2>
+      <p class="text-muted-foreground mt-2">{{ receipt.summary }}</p>
+      <ul class="mt-4 space-y-2">
+        <li
+          v-for="line in receipt.lineItems"
+          :key="line.id"
+          class="flex justify-between text-sm"
+        >
+          <span>{{ line.quantity }}× {{ line.name }}</span>
+          <span>{{ line.price * line.quantity }} sats</span>
+        </li>
+      </ul>
+      <div class="mt-4 flex justify-between border-t pt-4 font-semibold">
+        <span>Total</span>
+        <span>{{ receipt.totalSatoshis }} sats</span>
+      </div>
+    </section>
+
+    <section v-if="canPay" class="rounded-xl border bg-card p-6 shadow-sm">
+      <h2 class="text-lg font-medium">Pay with XO</h2>
+      <p class="text-muted-foreground mt-2 text-sm">
+        Scan the QR code in XO Wallet, or copy the import link below. The serialized
+        invitation is also available for manual import — it does not include sync-server
+        info on its own, so use the QR/link when importing into a wallet.
+      </p>
+
+      <div v-if="walletImportUrl" class="mt-6 flex flex-col items-center gap-4">
+        <InvitationQrCode :value="walletImportUrl" :size="240" />
+        <p class="text-muted-foreground text-center text-xs">Scan to import with sync server</p>
+      </div>
+
+      <div class="mt-6 space-y-4">
+        <div>
+          <label class="text-sm font-medium">State sync server</label>
+          <div class="mt-2 flex gap-2">
+            <input
+              class="flex-1 rounded-md border bg-background px-3 py-2 font-mono text-xs"
+              readonly
+              :value="syncServerUrl"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!syncServerUrl"
+              @click="copyText('sync', syncServerUrl)"
+            >
+              {{ copyLabel('sync', 'Copy') }}
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium">Invitation ID</label>
+          <div class="mt-2 flex gap-2">
+            <input
+              class="flex-1 rounded-md border bg-background px-3 py-2 font-mono text-xs"
+              readonly
+              :value="invitationIdentifier"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!invitationIdentifier"
+              @click="copyText('id', invitationIdentifier)"
+            >
+              {{ copyLabel('id', 'Copy') }}
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium">Wallet import link</label>
+          <p class="text-muted-foreground mt-1 text-xs">
+            Includes sync server + invitation ID (<code>xo-invitation:</code> URL)
+          </p>
+          <div class="mt-2 flex gap-2">
+            <input
+              class="flex-1 rounded-md border bg-background px-3 py-2 font-mono text-xs"
+              readonly
+              :value="walletImportUrl"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!walletImportUrl"
+              @click="copyText('import', walletImportUrl)"
+            >
+              {{ copyLabel('import', 'Copy') }}
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium">Sync server fetch URL</label>
+          <p class="text-muted-foreground mt-1 text-xs">
+            Direct link to fetch this invitation from the state-sync server
+          </p>
+          <div class="mt-2 flex gap-2">
+            <input
+              class="flex-1 rounded-md border bg-background px-3 py-2 font-mono text-xs"
+              readonly
+              :value="syncFetchUrl"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="!syncFetchUrl"
+              @click="copyText('fetch', syncFetchUrl)"
+            >
+              {{ copyLabel('fetch', 'Copy') }}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-6 border-t pt-6">
+        <label class="text-sm font-medium">Serialized invitation</label>
+        <p class="text-muted-foreground mt-1 text-xs">
+          Full invitation payload (no sync-server metadata)
+        </p>
+        <textarea
+          class="mt-2 h-40 w-full rounded-md border bg-background p-3 font-mono text-xs"
+          readonly
+          :value="invitation"
+        />
+        <Button
+          class="mt-4"
+          variant="outline"
+          :disabled="!invitation"
+          @click="copyText('invitation', invitation)"
+        >
+          {{ copyLabel('invitation', 'Copy invitation') }}
+        </Button>
+      </div>
+    </section>
+
+    <section
+      v-if="status === 'completed'"
+      class="rounded-xl border border-green-500/40 bg-green-500/10 p-6 text-center"
+    >
+      <h2 class="text-xl font-semibold text-green-700">Enjoy your snack!</h2>
+      <p class="text-muted-foreground mt-2">Mock dispense complete.</p>
+    </section>
+  </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 23f2f46..e97b53a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,25 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
+import CheckoutPage from '@/pages/CheckoutPage.vue';
 import HomePage from '@/pages/HomePage.vue';
+import OrderPage from '@/pages/OrderPage.vue';
 
-/**
- * Application routes.
- */
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomePage,
-  },
-];
-
-/**
- * Vue Router instance.
- */
 const router = createRouter({
   history: createWebHistory(),
-  routes,
+  routes: [
+    { path: '/', component: HomePage },
+    { path: '/checkout', component: CheckoutPage },
+    { path: '/orders/:id', component: OrderPage },
+  ],
 });
 
 export default router;
-
diff --git a/src/services/api-client.ts b/src/services/api-client.ts
index 4220850..9193b0e 100644
--- a/src/services/api-client.ts
+++ b/src/services/api-client.ts
@@ -1,213 +1,110 @@
-import { EventEmitter } from "../utils/event-emitter";
-import { z } from "zod";
+import { z } from 'zod';
 
-export interface ApiClientOptions {
-  baseUrl: string;
-  tokens: AuthTokens;
+export class ApiError extends Error {
+  public readonly status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+  }
 }
 
-export type AuthTokens = {
-  accessToken: string;
-  accessTokenExpiresAt: number;
-  refreshToken: string;
-  refreshTokenExpiresAt: number;
-}
+export const ItemSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  description: z.string(),
+  price: z.number(),
+  quantity: z.number(),
+  image: z.string(),
+  created_at: z.number(),
+  updated_at: z.number(),
+});
 
-export type ApiClientEventMap = {
-  'tokens-refreshed': AuthTokens;
-}
+export type Item = z.infer<typeof ItemSchema>;
 
-export class ApiClient extends EventEmitter<ApiClientEventMap> {
-  static AUTH_TOKENS_SCHEMA = z.object({
-    accessToken: z.string(),
-    accessTokenExpiresAt: z.number(),
-    refreshToken: z.string(),
-    refreshTokenExpiresAt: z.number(),
-  })
+export const OrderSchema = z.object({
+  id: z.string(),
+  status: z.string(),
+  total_price: z.number(),
+  total_quantity: z.number(),
+  items: z.array(z.object({ id: z.string(), quantity: z.number() })),
+  invitation_identifier: z.string().nullable(),
+  created_at: z.number(),
+  updated_at: z.number(),
+});
 
-  /**
-   * API responses for token refresh can omit `accessTokenExpiresAt` today, so
-   * this schema intentionally keeps the expiration optional and lets us derive it
-   * from the token payload when needed.
-   */
-  private static AUTH_TOKEN_REFRESH_RESPONSE_SCHEMA = z.object({
-    accessToken: z.string(),
-    accessTokenExpiresAt: z.number().optional(),
-    refreshToken: z.string().optional(),
-    refreshTokenExpiresAt: z.number().optional(),
-  })
+export type Order = z.infer<typeof OrderSchema>;
 
-  private baseUrl: string;
-  private tokens: AuthTokens;
+export const OrderDetailSchema = OrderSchema.extend({
+  syncServerUrl: z.string(),
+});
 
-  constructor(options: ApiClientOptions) {
-    super();
+export type OrderDetail = z.infer<typeof OrderDetailSchema>;
 
-    // validate the tokens
-    const { refreshToken, refreshTokenExpiresAt } = options.tokens;
-    const accessTokenExpiresAt = ApiClient.resolveAccessTokenExpiresAt(
-      options.tokens.accessToken,
-      options.tokens.accessTokenExpiresAt,
-    );
+export const CreateOrderResponseSchema = z.object({
+  order: OrderSchema,
+  invitation: z.string(),
+  syncServerUrl: z.string(),
+  receipt: z.object({
+    summary: z.string(),
+    lineItems: z.array(
+      z.object({
+        id: z.string(),
+        name: z.string(),
+        quantity: z.number(),
+        price: z.number(),
+      }),
+    ),
+  }),
+});
 
-    if (typeof accessTokenExpiresAt !== "number" || Number.isNaN(accessTokenExpiresAt)) {
-      throw new Error("Failed to resolve access token expiration from token payload");
-    }
-    
-    // If we have no refresh token or its expired, don't create the client
-    if (!refreshToken || !refreshTokenExpiresAt || refreshTokenExpiresAt < Date.now()) {
-      throw new Error('No refresh token found for user during creation');
-    }
+export type CreateOrderResponse = z.infer<typeof CreateOrderResponseSchema>;
 
-    // Create the client
-    this.baseUrl = options.baseUrl;
-    this.tokens = {
-      ...options.tokens,
-      accessTokenExpiresAt,
-    };
+export class ApiClient {
+  private readonly baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
   }
 
-  /**
-   * Send a JSON request to the API and return the parsed response.
-   * @param path - The path to the API endpoint.
-   * @param options - The options for the request.
-   * @returns The parsed response.
-   */
-  public async request<T>(path: string, options: RequestInit = {}): Promise<T> {
-    const headers: Record<string, any> = {
-      ...(options.headers || {}),
-    }
+  async getItems(): Promise<Item[]> {
+    const data = await this.request<unknown>('/items');
+    return z.array(ItemSchema).parse(data);
+  }
+
+  async getOrder(id: string): Promise<OrderDetail> {
+    const data = await this.request<unknown>(`/orders/${id}`);
+    return OrderDetailSchema.parse(data);
+  }
+
+  async createOrder(items: Array<{ id: string; quantity: number }>): Promise<CreateOrderResponse> {
+    const data = await this.request<unknown>('/orders', {
+      method: 'POST',
+      body: JSON.stringify({ items }),
+    });
+    return CreateOrderResponseSchema.parse(data);
+  }
+
+  private async request<T>(path: string, options: RequestInit = {}): Promise<T> {
+    const headers: Record<string, string> = {
+      ...(options.headers as Record<string, string> | undefined),
+    };
 
     if (options.body !== undefined && options.body !== null && options.body !== '') {
       headers['Content-Type'] = 'application/json';
     }
 
-    const response = await this.requestRaw(path, {
+    const response = await fetch(`${this.baseUrl.replace(/\/$/, '')}${path}`, {
       ...options,
       headers,
     });
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new ApiError(text || response.statusText, response.status);
+    }
+
     return response.json() as Promise<T>;
   }
-
-  /**
-   * Send a request to the API and return the raw response.
-   * @param path - The path to the API endpoint.
-   * @param options - The options for the request.
-   * @returns The raw response.
-   */
-  public async requestRaw(path: string, options: RequestInit = {}): Promise<Response> {
-    // First, we are going to check if we need to refresh the tokens
-    if (this.tokens.accessTokenExpiresAt < Date.now()) {
-      console.log('Access Token Expired At:', new Date(this.tokens.accessTokenExpiresAt).toLocaleString('en-AU'));
-      await this.refreshTokens();
-    }
-
-    if (options.headers && options.headers instanceof Headers) {
-      options.headers = Object.fromEntries(options.headers.entries());
-    }
-
-    // Make the request
-    const response = await fetch(`${this.baseUrl}${path}`, {
-      ...options,
-      headers: {
-        ...options.headers,
-        'Authorization': `Bearer ${this.tokens.accessToken}`,
-      },
-    });
-
-    return response;
-  }
-
-  /**
-   * Refresh the tokens for the API client.
-   * @returns The new tokens.
-   */
-  public async refreshTokens(): Promise<AuthTokens> {
-    // We need to refresh the tokens
-    const response = await fetch(`${this.baseUrl}/users/refresh`, {
-      method: 'POST',
-      body: JSON.stringify({ refreshToken: this.tokens.refreshToken }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    // If the response is not ok, throw an error
-    if (!response.ok) {
-      throw new Error(`API request failed (${response.status} ${response.statusText}): ${await response.text()}`);
-    }
-
-    // Parse the response
-    const data = ApiClient.AUTH_TOKEN_REFRESH_RESPONSE_SCHEMA.parse(await response.json());
-
-    const accessTokenExpiresAt = ApiClient.resolveAccessTokenExpiresAt(
-      data.accessToken,
-      data.accessTokenExpiresAt,
-    );
-    if (typeof accessTokenExpiresAt !== "number" || Number.isNaN(accessTokenExpiresAt)) {
-      throw new Error("Failed to resolve access token expiration from token refresh response");
-    }
-
-    // Update the tokens
-    this.tokens = {
-      accessToken: data.accessToken,
-      accessTokenExpiresAt,
-      refreshToken: data.refreshToken ?? this.tokens.refreshToken,
-      refreshTokenExpiresAt: data.refreshTokenExpiresAt ?? this.tokens.refreshTokenExpiresAt,
-    };
-    this.emit('tokens-refreshed', this.tokens);
-    return this.tokens;
-  }
-
-  /**
-   * Resolve the access token expiration timestamp.
-   *
-   * If `accessTokenExpiresAt` is missing, we parse the token payload from the
-   * first segment and read `expiresAt`.
-   *
-   * @param accessToken - Signed token in `payload.signature` format.
-   * @param accessTokenExpiresAt - Optional explicit expiresAt value from API payload.
-   * @returns The parsed expiration timestamp in milliseconds.
-   */
-  private static resolveAccessTokenExpiresAt(
-    accessToken: string,
-    accessTokenExpiresAt?: number,
-  ): number | undefined {
-    if (typeof accessTokenExpiresAt === "number") {
-      return accessTokenExpiresAt;
-    }
-
-    return ApiClient.parseAccessTokenExpiresAt(accessToken);
-  }
-
-  /**
-   * Read the `expiresAt` field from the base64url payload of the token.
-   *
-   * The token format is `base64urlPayload.base64PayloadSignature`.
-   *
-   * @param accessToken - Signed access token.
-   * @returns The expiresAt value from payload, when parseable.
-   */
-  private static parseAccessTokenExpiresAt(accessToken: string): number | undefined {
-    const [encodedPayload] = accessToken.split(".");
-    if (!encodedPayload) {
-      return undefined;
-    }
-
-    const normalizedPayload = encodedPayload
-      .replace(/-/g, '+')
-      .replace(/_/g, '/');
-    const paddedPayload = normalizedPayload + "=".repeat((4 - (normalizedPayload.length % 4)) % 4);
-
-    try {
-      const payloadJson = atob(paddedPayload);
-      const payload = JSON.parse(payloadJson) as { expiresAt?: number };
-      if (typeof payload.expiresAt !== "number") {
-        return undefined;
-      }
-      return payload.expiresAt;
-    } catch {
-      return undefined;
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/src/services/app.ts b/src/services/app.ts
index 4dda40c..2429562 100644
--- a/src/services/app.ts
+++ b/src/services/app.ts
@@ -1,34 +1,52 @@
-import { inject } from 'vue';
-import { type Router } from 'vue-router';
+import { inject, ref, type Ref } from 'vue';
+import type { Router } from 'vue-router';
 
-export type AppDependencies = {
-  router: Router;
+import { ApiClient } from './api-client.js';
+import { Catalog } from './modals/catalog.js';
+import { OrderInvitation } from './modals/invitation.js';
+
+export type AppConfig = {
   apiUrl: string;
 };
 
+export type AppDependencies = {
+  router: Router;
+  apiClient: ApiClient;
+  catalog: Catalog;
+};
+
 export class App {
-  //---------------------------------------------------------------------------
-  // Initialization
-  //---------------------------------------------------------------------------
-
   public router: Router;
-  public apiUrl: string;
+  public apiClient: ApiClient;
+  public catalog: Catalog;
+  public activeOrder: Ref<OrderInvitation | null> = ref(null);
 
-  constructor(
-    dependencies: AppDependencies
-  ) {
+  constructor(dependencies: AppDependencies) {
     this.router = dependencies.router;
-    this.apiUrl = dependencies.apiUrl;
+    this.apiClient = dependencies.apiClient;
+    this.catalog = dependencies.catalog;
   }
 
-  static async create(router: Router, { apiUrl }: { apiUrl: string }) {
-    // Create new instance of app.
-    return new this(
-      {
-        router,
-        apiUrl,
-      }
-    );
+  static async create(router: Router, config: AppConfig): Promise<App> {
+    const apiClient = new ApiClient(config.apiUrl);
+    const catalog = await Catalog.create({ apiClient });
+
+    return new App({ router, apiClient, catalog });
+  }
+
+  async checkout(): Promise<OrderInvitation> {
+    const items = this.catalog.cart.value.map((line) => ({
+      id: line.itemId,
+      quantity: line.quantity,
+    }));
+
+    const response = await this.apiClient.createOrder(items);
+    const orderInvitation = await OrderInvitation.create({ apiClient: this.apiClient }, response);
+
+    this.activeOrder.value = orderInvitation;
+    this.catalog.clearCart();
+    await this.router.push(`/orders/${response.order.id}`);
+    return orderInvitation;
   }
 }
 
@@ -36,8 +54,10 @@ export class App {
 // Composition API
 // Boilerplate for Vue3, so we can call useApp() to get the app instance inside a component.
 // -----------------------------------------------------------------------------
-export function useApp() {
+export function useApp(): App {
   const app = inject<App>('app');
-  if (!app) throw new Error('App not properly initialized');
+  if (!app) {
+    throw new Error('App not properly initialized');
+  }
   return app;
 }
diff --git a/src/services/invitation-sync-client.ts b/src/services/invitation-sync-client.ts
new file mode 100644
index 0000000..76854e6
--- /dev/null
+++ b/src/services/invitation-sync-client.ts
@@ -0,0 +1,122 @@
+import { SSESession, type SSEvent } from '../utils/sse-session.js';
+
+export type InvitationSyncListeners = {
+  onInvitationUpdated?: (invitation: unknown) => void;
+  onConnected?: () => void;
+  onError?: (error: Error) => void;
+  onDisconnected?: () => void;
+};
+
+export class InvitationSyncSubscription {
+  public readonly invitationIdentifier: string;
+  private sse: SSESession;
+  private listeners: InvitationSyncListeners;
+
+  constructor(
+    invitationIdentifier: string,
+    baseUrl: string,
+    listeners: InvitationSyncListeners,
+  ) {
+    this.invitationIdentifier = invitationIdentifier;
+    this.listeners = listeners;
+
+    const url = `${baseUrl.replace(/\/$/, '')}/invitations?invitationIdentifier=${encodeURIComponent(invitationIdentifier)}`;
+
+    this.sse = new SSESession(url, {
+      headers: { Accept: 'text/event-stream' },
+      onConnected: () => this.listeners.onConnected?.(),
+      onDisconnected: () => this.listeners.onDisconnected?.(),
+      onError: (error) =>
+        this.listeners.onError?.(
+          error instanceof Error ? error : new Error(String(error)),
+        ),
+      onMessage: (event) => this.handleMessage(event),
+    });
+  }
+
+  async connect(): Promise<void> {
+    await this.sse.connect();
+  }
+
+  close(): void {
+    this.sse.close();
+  }
+
+  private handleMessage(event: SSEvent): void {
+    const payload = parseSsePayload(event);
+    if (payload !== undefined) {
+      this.listeners.onInvitationUpdated?.(payload);
+    }
+  }
+}
+
+export class InvitationSyncClient {
+  private readonly baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  get url(): string {
+    return this.baseUrl;
+  }
+
+  subscribe(
+    invitationIdentifier: string,
+    listeners: InvitationSyncListeners,
+  ): InvitationSyncSubscription {
+    return new InvitationSyncSubscription(invitationIdentifier, this.baseUrl, listeners);
+  }
+
+  /**
+   * Fetch the serialized invitation snapshot for display (e.g. page reload).
+   */
+  async fetchSerialized(invitationIdentifier: string): Promise<string | undefined> {
+    const response = await fetch(
+      `${this.baseUrl.replace(/\/$/, '')}/invitations?invitationIdentifier=${encodeURIComponent(invitationIdentifier)}`,
+      { headers: { Accept: 'application/json' } },
+    );
+
+    if (response.status === 404) {
+      return undefined;
+    }
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch invitation: ${response.status} ${response.statusText}`);
+    }
+
+    return response.text();
+  }
+}
+
+/**
+ * Parse the payload from an SSE event.
+ * @param event - The SSE event to parse.
+ * @returns The parsed payload, or undefined if the event is invalid.
+ */
+function parseSsePayload(event: SSEvent): unknown | undefined {
+  if (!event.data) {
+    return undefined;
+  }
+
+  try {
+    if (event.event === 'invitation-updated') {
+      // TODO: Use extended JSON decode to parse the invitation data
+      const parsed = JSON.parse(event.data) as unknown;
+      if (parsed && typeof parsed === 'object' && 'topic' in parsed && 'data' in parsed) {
+        return (parsed as { data: unknown }).data;
+      }
+      return parsed;
+    }
+
+    // TODO: Use extended JSON decode to parse the invitation data
+    const parsed = JSON.parse(event.data) as { topic?: string; data?: unknown };
+    if (parsed.topic === 'invitation-updated') {
+      return parsed.data;
+    }
+  } catch {
+    return undefined;
+  }
+
+  return undefined;
+}
diff --git a/src/services/modals/catalog.ts b/src/services/modals/catalog.ts
index 5499878..c9ddc3d 100644
--- a/src/services/modals/catalog.ts
+++ b/src/services/modals/catalog.ts
@@ -1,181 +1,116 @@
-import { EventEmitter } from "../utils/event-emitter.js";
-import z from "zod";
-import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from "vue";
+import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from 'vue';
 
-export type MessageEventMap = {
-  'deleted': void;
-}
+import { EventEmitter } from '../../utils/event-emitter.js';
+import { ApiClient, ItemSchema, type Item } from '../api-client.js';
 
-export type MessageDependencies = {
-  apiClient: ApiClient
-}
+export type CartLine = {
+  itemId: string;
+  quantity: number;
+};
 
-export type MessageCreateOptions = {
-  hydratePartsFromStorage?: boolean
-}
+export type CatalogEventMap = {
+  'items-loaded': Item[];
+  'cart-changed': CartLine[];
+};
 
-export type MessageSchema = z.infer<typeof Message.MESSAGE_SCHEMA>
+export type CatalogDeps = {
+  apiClient: ApiClient;
+};
 
-export class Message extends EventEmitter<MessageEventMap> {
-  static MESSAGE_SCHEMA = z.object({
-    id: z.string(),
-    chatId: z.string(),
-    branchId: z.string().nullable().optional(),
-    branchOrdinal: z.number().nullable().optional(),
-    parentMessageId: z.string().nullable().optional(),
-    role: z.enum(["user", "assistant", "system", "tool"]),
-    status: z.string().nullable().optional(),
-    createdAt: z.number(),
-    updatedAt: z.number().optional(),
+export class Catalog extends EventEmitter<CatalogEventMap> {
+  static ItemSchema = ItemSchema;
 
-    contentParts: z.array(MessagePart.MESSAGE_PART_SCHEMA).optional(),
-  })
-
-  /**
-   * Async generator that yields messages one-by-one in reverse chronological
-   * order (newest first). Raw message data is bulk-loaded and sorted upfront
-   * (fast), then each Message instance is created and yielded individually so
-   * the consumer can render recent messages immediately.
-   */
-  static async *fromStorage(deps: MessageDependencies): AsyncGenerator<Message> {
-    const { storage } = deps
-    const messageIds = await storage.keys()
-    if (messageIds.length === 0) return
-
-    // Bulk-load raw message data so we can sort before creating instances.
-    // IndexedDB reads are fast; the expensive work is creating Message
-    // instances and loading their parts.
-    const rawMessages = (await Promise.all(
-      messageIds.map(async (messageId) => storage.get<MessageSchema>(messageId))
-    )).filter((m): m is MessageSchema => m !== null)
-
-    // Sort newest-first so the most recent messages are yielded first
-    rawMessages.sort((a, b) => b.createdAt - a.createdAt)
-
-    for (const message of rawMessages) {
-      yield await Message.create(deps, message)
-    }
+  static async create(deps: CatalogDeps): Promise<Catalog> {
+    const catalog = new Catalog(deps);
+    await catalog.load();
+    return catalog;
   }
 
-  static async create(
-    deps: MessageDependencies,
-    message: MessageSchema,
-    options: MessageCreateOptions = {},
-  ): Promise<Message> {
-    const { storage } = deps
+  public items: ShallowRef<Map<string, Item>> = shallowRef(new Map());
+  public cart: Ref<CartLine[]> = ref([]);
 
-    const messageStore = storage.child(message.id)
+  private deps: CatalogDeps;
 
-    const messageInstance = new Message({ ...deps, storage: messageStore }, message)
-    if (message.contentParts?.length) {
-      await messageInstance.mergeInitialParts(message.contentParts)
-    }
-
-    if (options.hydratePartsFromStorage === false) {
-      await messageInstance.saveToStorage()
-      return messageInstance
-    }
-
-    await messageInstance.start();
-    return messageInstance;
-  }
-
-  private deps: MessageDependencies;
-
-  public data: Ref<MessageSchema> = ref<MessageSchema>({
-    id: '',
-    chatId: '',
-    branchId: null,
-    branchOrdinal: null,
-    parentMessageId: null,
-    role: 'user',
-    status: 'pending',
-    createdAt: Date.now(),
-    updatedAt: Date.now(),
-  })
-
-  public parts: ShallowRef<ExtMap<MessagePart>> = shallowRef<ExtMap<MessagePart>>(new ExtMap<MessagePart>())
-
-  constructor(deps: MessageDependencies, message: MessageSchema) {
+  private constructor(deps: CatalogDeps) {
     super();
     this.deps = deps;
-
-    const messageData: MessageSchema = { ...message }
-    delete messageData.contentParts
-    // Set the message's data
-    this.data.value = messageData;
   }
 
-  async start(): Promise<void> {
-    // Load all parts in parallel but merge each one as soon as its data
-    // resolves. This is faster than sequential iteration (parts per message
-    // are few) while still triggering reactivity incrementally.
-    const partsStorage = this.deps.storage.child('message-parts')
-    const partIds = await partsStorage.keys()
-
-    await Promise.all(partIds.map(async (partId) => {
-      const partData = await partsStorage.get<MessagePartSchema>(partId)
-      if (!partData) return
-      await this.mergePart(partData)
-    }))
-
-    this.saveToStorage();
-  }
-
-  private async mergeInitialParts(parts: MessagePartSchema[]): Promise<void> {
-    for (const part of parts) {
-      await this.mergePart(part)
+  async load(): Promise<void> {
+    const items = await this.deps.apiClient.getItems();
+    const map = new Map<string, Item>();
+    for (const item of items) {
+      map.set(item.id, item);
     }
+    this.items.value = map;
+    triggerRef(this.items);
+    this.emit('items-loaded', items);
   }
 
-  public async saveToStorage(): Promise<void> {
-    await this.deps.storage.set(this.data.value);
-  }
+  addToCart(itemId: string, quantity = 1): void {
+    const item = this.items.value.get(itemId);
+    if (!item || item.quantity < 1) {
+      return;
+    }
 
-  private async mergePart(part: MessagePartSchema): Promise<void> {
-    const existing = this.parts.value.get(part.id);
+    const existing = this.cart.value.find((line) => line.itemId === itemId);
     if (existing) {
-      existing.data.value = part;
-      await existing.saveToStorage();
+      existing.quantity = Math.min(existing.quantity + quantity, item.quantity);
     } else {
-      const partInstance = await MessagePart.create({ ...this.deps, storage: this.deps.storage.child('message-parts') }, part);
-      this.parts.value.set(partInstance.data.value.id, partInstance);
-
-      partInstance.on('deleted', () => this.removePart(partInstance.data.value));
+      this.cart.value.push({ itemId, quantity: Math.min(quantity, item.quantity) });
     }
 
-    triggerRef(this.parts);
+    this.emit('cart-changed', [...this.cart.value]);
   }
 
-  public async addPart(part: MessagePartSchema): Promise<void> {
-    await this.mergePart(part);
-    triggerRef(this.parts);
+  removeFromCart(itemId: string): void {
+    this.cart.value = this.cart.value.filter((line) => line.itemId !== itemId);
+    this.emit('cart-changed', [...this.cart.value]);
   }
 
-  public async updatePart(part: MessagePartSchema): Promise<void> {
-    await this.mergePart(part);
-    triggerRef(this.parts);
-  }
-  
-  public removePart(part: MessagePartSchema): void {
-    this.parts.value.delete(part.id);
-    this.deps.storage
-      .child('message-parts')
-      .child(part.id)
-      .clear()
-      .catch((error) => console.error('Failed to clear deleted message part from storage:', error));
-    triggerRef(this.parts);
+  updateCartQuantity(itemId: string, quantity: number): void {
+    const item = this.items.value.get(itemId);
+    if (!item) {
+      return;
+    }
+
+    if (quantity <= 0) {
+      this.removeFromCart(itemId);
+      return;
+    }
+
+    const line = this.cart.value.find((entry) => entry.itemId === itemId);
+    if (line) {
+      line.quantity = Math.min(quantity, item.quantity);
+      this.emit('cart-changed', [...this.cart.value]);
+    }
   }
 
-  public async delete(): Promise<void> {
-    await this.deps.apiClient.requestRaw(`/messages/${this.data.value.id}`, {
-      method: 'DELETE',
+  clearCart(): void {
+    this.cart.value = [];
+    this.emit('cart-changed', []);
+  }
+
+  // TODO: Do we want getters here? Maybe computed properties?
+  get cartTotal(): number {
+    return this.cart.value.reduce((total, line) => {
+      const item = this.items.value.get(line.itemId);
+      return total + (item ? item.price * line.quantity : 0);
+    }, 0);
+  }
+
+  // TODO: Do we want getters here? Maybe computed properties?
+  get cartQuantity(): number {
+    return this.cart.value.reduce((total, line) => total + line.quantity, 0);
+  }
+
+  getCartLineItems(): Array<{ id: string; name: string; quantity: number; price: number }> {
+    return this.cart.value.flatMap((line) => {
+      const item = this.items.value.get(line.itemId);
+      if (!item) {
+        return [];
+      }
+      return [{ id: item.id, name: item.name, quantity: line.quantity, price: item.price }];
     });
-    await this.deps.storage.delete();
-    this.parts.value.forEach(part => part.delete());
-    this.parts.value.clear();
-    triggerRef(this.parts);
-
-    this.emit('deleted', undefined);
   }
 }
diff --git a/src/services/modals/invitation.ts b/src/services/modals/invitation.ts
index 876c579..d9ac677 100644
--- a/src/services/modals/invitation.ts
+++ b/src/services/modals/invitation.ts
@@ -1,188 +1,134 @@
-import { EventEmitter } from "../utils/event-emitter.js";
-import z from "zod";
-import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from "vue";
+import { reactive, type UnwrapNestedRefs } from 'vue';
 
-import type { BaseStore } from "./storage/base-store.js";
-import type { ApiClient } from "./api-client.js";
+import { EventEmitter } from '../../utils/event-emitter.js';
+import {
+  ApiClient,
+  CreateOrderResponseSchema,
+  type CreateOrderResponse,
+  type Order,
+} from '../api-client.js';
+import {
+  InvitationSyncClient,
+  type InvitationSyncSubscription,
+} from '../invitation-sync-client.js';
 
-import { ExtMap } from "../utils/ext-map.js";
-import { MessagePart, type MessagePartSchema } from './message-part.js';
+export type OrderInvitationEventMap = {
+  'status-changed': Order;
+  'invitation-updated': unknown;
+  completed: Order;
+  error: Error;
+};
 
-export type MessageEventMap = {
-  'deleted': void;
-}
+export type OrderInvitationDeps = {
+  apiClient: ApiClient;
+};
 
-export type MessageDependencies = {
-  storage: BaseStore
-  apiClient: ApiClient
-}
+export type OrderInvitationBootstrap = {
+  order: Order;
+  invitation: string;
+  syncServerUrl: string;
+  receipt: {
+    summary: string;
+    lineItems: Array<{ id: string; name: string; quantity: number; price: number }>;
+  };
+};
 
-export type MessageCreateOptions = {
-  hydratePartsFromStorage?: boolean
-}
+export type Receipt = {
+  summary: string;
+  lineItems: Array<{ id: string; name: string; quantity: number; price: number }>;
+  totalSatoshis: number;
+  orderId: string;
+};
 
-export type MessageSchema = z.infer<typeof Message.MESSAGE_SCHEMA>
+export type OrderInvitationState = UnwrapNestedRefs<{
+  order: Order;
+  invitation: string;
+  syncServerUrl: string;
+  receipt: Receipt;
+}>;
 
-export class Message extends EventEmitter<MessageEventMap> {
-  static MESSAGE_SCHEMA = z.object({
-    id: z.string(),
-    chatId: z.string(),
-    branchId: z.string().nullable().optional(),
-    branchOrdinal: z.number().nullable().optional(),
-    parentMessageId: z.string().nullable().optional(),
-    role: z.enum(["user", "assistant", "system", "tool"]),
-    status: z.string().nullable().optional(),
-    createdAt: z.number(),
-    updatedAt: z.number().optional(),
-
-    contentParts: z.array(MessagePart.MESSAGE_PART_SCHEMA).optional(),
-  })
-
-  /**
-   * Async generator that yields messages one-by-one in reverse chronological
-   * order (newest first). Raw message data is bulk-loaded and sorted upfront
-   * (fast), then each Message instance is created and yielded individually so
-   * the consumer can render recent messages immediately.
-   */
-  static async *fromStorage(deps: MessageDependencies): AsyncGenerator<Message> {
-    const { storage } = deps
-    const messageIds = await storage.keys()
-    if (messageIds.length === 0) return
-
-    // Bulk-load raw message data so we can sort before creating instances.
-    // IndexedDB reads are fast; the expensive work is creating Message
-    // instances and loading their parts.
-    const rawMessages = (await Promise.all(
-      messageIds.map(async (messageId) => storage.get<MessageSchema>(messageId))
-    )).filter((m): m is MessageSchema => m !== null)
-
-    // Sort newest-first so the most recent messages are yielded first
-    rawMessages.sort((a, b) => b.createdAt - a.createdAt)
-
-    for (const message of rawMessages) {
-      yield await Message.create(deps, message)
-    }
-  }
+export class OrderInvitation extends EventEmitter<OrderInvitationEventMap> {
+  static CreateOrderResponseSchema = CreateOrderResponseSchema;
 
   static async create(
-    deps: MessageDependencies,
-    message: MessageSchema,
-    options: MessageCreateOptions = {},
-  ): Promise<Message> {
-    const { storage } = deps
-
-    const messageStore = storage.child(message.id)
-
-    const messageInstance = new Message({ ...deps, storage: messageStore }, message)
-    if (message.contentParts?.length) {
-      await messageInstance.mergeInitialParts(message.contentParts)
-    }
-
-    if (options.hydratePartsFromStorage === false) {
-      await messageInstance.saveToStorage()
-      return messageInstance
-    }
-
-    await messageInstance.start();
-    return messageInstance;
+    deps: OrderInvitationDeps,
+    response: CreateOrderResponse | OrderInvitationBootstrap,
+  ): Promise<OrderInvitation> {
+    const instance = new OrderInvitation(deps, response);
+    await instance.start();
+    return instance;
   }
 
-  private deps: MessageDependencies;
+  public state: OrderInvitationState;
 
-  public data: Ref<MessageSchema> = ref<MessageSchema>({
-    id: '',
-    chatId: '',
-    branchId: null,
-    branchOrdinal: null,
-    parentMessageId: null,
-    role: 'user',
-    status: 'pending',
-    createdAt: Date.now(),
-    updatedAt: Date.now(),
-  })
+  private deps: OrderInvitationDeps;
+  private syncClient: InvitationSyncClient;
+  private subscription: InvitationSyncSubscription | null = null;
 
-  public parts: ShallowRef<ExtMap<MessagePart>> = shallowRef<ExtMap<MessagePart>>(new ExtMap<MessagePart>())
-
-  constructor(deps: MessageDependencies, message: MessageSchema) {
+  private constructor(
+    deps: OrderInvitationDeps,
+    response: CreateOrderResponse | OrderInvitationBootstrap,
+  ) {
     super();
     this.deps = deps;
-
-    const messageData: MessageSchema = { ...message }
-    delete messageData.contentParts
-    // Set the message's data
-    this.data.value = messageData;
+    this.syncClient = new InvitationSyncClient(response.syncServerUrl);
+    this.state = reactive({
+      order: response.order,
+      invitation: response.invitation,
+      syncServerUrl: response.syncServerUrl,
+      receipt: {
+        summary: response.receipt.summary,
+        lineItems: response.receipt.lineItems,
+        totalSatoshis: response.order.total_price,
+        orderId: response.order.id,
+      },
+    });
   }
 
   async start(): Promise<void> {
-    // Load all parts in parallel but merge each one as soon as its data
-    // resolves. This is faster than sequential iteration (parts per message
-    // are few) while still triggering reactivity incrementally.
-    const partsStorage = this.deps.storage.child('message-parts')
-    const partIds = await partsStorage.keys()
-
-    await Promise.all(partIds.map(async (partId) => {
-      const partData = await partsStorage.get<MessagePartSchema>(partId)
-      if (!partData) return
-      await this.mergePart(partData)
-    }))
-
-    this.saveToStorage();
-  }
-
-  private async mergeInitialParts(parts: MessagePartSchema[]): Promise<void> {
-    for (const part of parts) {
-      await this.mergePart(part)
-    }
-  }
-
-  public async saveToStorage(): Promise<void> {
-    await this.deps.storage.set(this.data.value);
-  }
-
-  private async mergePart(part: MessagePartSchema): Promise<void> {
-    const existing = this.parts.value.get(part.id);
-    if (existing) {
-      existing.data.value = part;
-      await existing.saveToStorage();
-    } else {
-      const partInstance = await MessagePart.create({ ...this.deps, storage: this.deps.storage.child('message-parts') }, part);
-      this.parts.value.set(partInstance.data.value.id, partInstance);
-
-      partInstance.on('deleted', () => this.removePart(partInstance.data.value));
+    const invitationId = this.state.order.invitation_identifier;
+    if (!invitationId) {
+      return;
     }
 
-    triggerRef(this.parts);
-  }
-
-  public async addPart(part: MessagePartSchema): Promise<void> {
-    await this.mergePart(part);
-    triggerRef(this.parts);
-  }
-
-  public async updatePart(part: MessagePartSchema): Promise<void> {
-    await this.mergePart(part);
-    triggerRef(this.parts);
-  }
-  
-  public removePart(part: MessagePartSchema): void {
-    this.parts.value.delete(part.id);
-    this.deps.storage
-      .child('message-parts')
-      .child(part.id)
-      .clear()
-      .catch((error) => console.error('Failed to clear deleted message part from storage:', error));
-    triggerRef(this.parts);
-  }
-
-  public async delete(): Promise<void> {
-    await this.deps.apiClient.requestRaw(`/messages/${this.data.value.id}`, {
-      method: 'DELETE',
+    this.subscription = this.syncClient.subscribe(invitationId, {
+      onInvitationUpdated: (invitation) => {
+        this.emit('invitation-updated', invitation);
+        // Backend order status (paid/completed) is updated when the sync server
+        // broadcasts invitation changes — refresh once per SSE event, not on a timer.
+        void this.refreshOrderFromBackend();
+      },
+      onError: (error) => this.emit('error', error),
     });
-    await this.deps.storage.delete();
-    this.parts.value.forEach(part => part.delete());
-    this.parts.value.clear();
-    triggerRef(this.parts);
 
-    this.emit('deleted', undefined);
+    try {
+      await this.subscription.connect();
+    } catch (error) {
+      this.emit('error', error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+
+  async stop(): Promise<void> {
+    this.subscription?.close();
+    this.subscription = null;
+  }
+
+  private async refreshOrderFromBackend(): Promise<void> {
+    try {
+      const order = await this.deps.apiClient.getOrder(this.state.order.id);
+      const previousStatus = this.state.order.status;
+      this.state.order = order;
+
+      if (previousStatus !== order.status) {
+        this.emit('status-changed', order);
+      }
+
+      if (order.status === 'completed') {
+        this.emit('completed', order);
+        await this.stop();
+      }
+    } catch (error) {
+      this.emit('error', error instanceof Error ? error : new Error(String(error)));
+    }
   }
 }
diff --git a/src/style.css b/src/style.css
index 0c8ccf2..910851c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -8,6 +8,31 @@
 
 @theme inline {
   --font-heading: var(--font-serif);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+}
+
+:root {
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
 }
 
 @layer base {
diff --git a/src/utils/invitation-import-url.ts b/src/utils/invitation-import-url.ts
new file mode 100644
index 0000000..0654451
--- /dev/null
+++ b/src/utils/invitation-import-url.ts
@@ -0,0 +1,30 @@
+/** Custom URL protocol for XO Wallet invitation import (includes sync server). */
+export const XO_INVITATION_PROTOCOL = 'xo-invitation';
+
+/**
+ * Build a wallet-import URL that bundles the invitation ID and sync server.
+ *
+ * Wallets can parse this to connect to the correct state-sync server before
+ * fetching or accepting the invitation. The serialized invitation alone does
+ * not yet carry sync-server metadata.
+ */
+export function buildXoInvitationImportUrl(
+  syncServerUrl: string,
+  invitationIdentifier: string,
+): string {
+  const url = new URL(`${XO_INVITATION_PROTOCOL}:`);
+  url.searchParams.set('id', invitationIdentifier);
+  url.searchParams.set('sync', syncServerUrl.replace(/\/$/, ''));
+  return url.toString();
+}
+
+/**
+ * Direct HTTP URL on the sync server for fetching this invitation snapshot.
+ */
+export function buildInvitationSyncFetchUrl(
+  syncServerUrl: string,
+  invitationIdentifier: string,
+): string {
+  const base = syncServerUrl.replace(/\/$/, '');
+  return `${base}/invitations?invitationIdentifier=${encodeURIComponent(invitationIdentifier)}`;
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 20a2e73..306b594 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -9,7 +9,6 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": [
         "./src/*"
diff --git a/vite.config.ts b/vite.config.ts
index 01de06d..18793e6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,4 +10,14 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  // TODO: Figure out what the fuck this is doing?
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })