diff --git a/package-lock.json b/package-lock.json
index 2c7861b..207c674 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/npm": "^13.1.2",
+        "@tailwindcss/postcss": "^4.1.17",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
@@ -31,6 +32,7 @@
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
         "@vitest/ui": "^4.0.10",
+        "autoprefixer": "^10.4.22",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-react-hooks": "^7.0.1",
@@ -39,8 +41,10 @@
         "happy-dom": "^20.0.10",
         "husky": "^9.1.7",
         "jsdom": "^27.2.0",
+        "postcss": "^8.5.6",
         "prettier": "^3.6.2",
         "semantic-release": "^25.0.2",
+        "tailwindcss": "^4.1.17",
         "tsx": "^4.20.6",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.47.0",
@@ -101,6 +105,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@apollo/cache-control-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@apollo/cache-control-types/-/cache-control-types-1.0.3.tgz",
@@ -493,6 +510,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1130,6 +1148,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1173,6 +1192,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2026,6 +2046,7 @@
       "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^6.0.0",
         "@octokit/graphql": "^9.0.3",
@@ -3272,6 +3293,277 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-x64": "4.1.17",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.6.0",
+        "@emnapi/runtime": "^1.6.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.17"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -3367,8 +3659,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -3469,6 +3760,7 @@
       "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -3486,6 +3778,7 @@
       "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3496,6 +3789,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3553,6 +3847,7 @@
       "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.47.0",
         "@typescript-eslint/types": "8.47.0",
@@ -3889,6 +4184,7 @@
       "integrity": "sha512-oWtNM89Np+YsQO3ttT5i1Aer/0xbzQzp66NzuJn/U16bB7MnvSzdLKXgk1kkMLYyKSSzA2ajzqMkYheaE9opuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.0.10",
         "fflate": "^0.8.2",
@@ -3985,6 +4281,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4075,7 +4372,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4140,6 +4436,44 @@
         "retry": "0.13.1"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -4190,23 +4524,43 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz",
+      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
       "license": "MIT",
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
         "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
         "on-finished": "^2.4.1",
         "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
       },
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
+      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/bottleneck": {
@@ -4260,6 +4614,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4745,6 +5100,7 @@
       "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -4997,6 +5353,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5015,8 +5381,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/dot-prop": {
       "version": "5.3.0",
@@ -5091,6 +5456,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -5409,6 +5788,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6037,6 +6417,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -6312,6 +6706,7 @@
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.12.0.tgz",
       "integrity": "sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
@@ -6597,6 +6992,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -7046,83 +7442,344 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonparse": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
+      "dev": true,
+      "engines": [
+        "node >= 0.2.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/JSONStream": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
+      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+      "dev": true,
+      "license": "(MIT OR Apache-2.0)",
+      "dependencies": {
+        "jsonparse": "^1.2.0",
+        "through": ">=2.2.7 <3"
+      },
+      "bin": {
+        "JSONStream": "bin.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jsonfile": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
-      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
       },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/jsonparse": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "engines": [
-        "node >= 0.2.0"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
       ],
-      "license": "MIT"
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
-    "node_modules/JSONStream": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "(MIT OR Apache-2.0)",
-      "dependencies": {
-        "jsonparse": "^1.2.0",
-        "through": ">=2.2.7 <3"
-      },
-      "bin": {
-        "JSONStream": "bin.js"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": "*"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "json-buffer": "3.0.1"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lines-and-columns": {
@@ -7324,7 +7981,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -7363,6 +8019,7 @@
       "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -7673,6 +8330,16 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-url": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.1.0.tgz",
@@ -7687,9 +8354,9 @@
       }
     },
     "node_modules/npm": {
-      "version": "11.6.3",
-      "resolved": "https://registry.npmjs.org/npm/-/npm-11.6.3.tgz",
-      "integrity": "sha512-QIWnYxYuDjrNGaTp0jrTqgl45QHM+UfdcjPBKmia4LsBkHY8TvEjZpkAVrNO7EOJA//tOP3k+9cioXwqdAfukg==",
+      "version": "11.6.4",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-11.6.4.tgz",
+      "integrity": "sha512-ERjKtGoFpQrua/9bG0+h3xiv/4nVdGViCjUYA1AmlV24fFvfnSB7B7dIfZnySQ1FDLd0ZVrWPsLLp78dCtJdRQ==",
       "bundleDependencies": [
         "@isaacs/string-locale-compare",
         "@npmcli/arborist",
@@ -7769,37 +8436,37 @@
       ],
       "dependencies": {
         "@isaacs/string-locale-compare": "^1.1.0",
-        "@npmcli/arborist": "^9.1.7",
-        "@npmcli/config": "^10.4.3",
-        "@npmcli/fs": "^4.0.0",
-        "@npmcli/map-workspaces": "^5.0.1",
+        "@npmcli/arborist": "^9.1.8",
+        "@npmcli/config": "^10.4.4",
+        "@npmcli/fs": "^5.0.0",
+        "@npmcli/map-workspaces": "^5.0.3",
         "@npmcli/metavuln-calculator": "^9.0.3",
-        "@npmcli/package-json": "^7.0.2",
+        "@npmcli/package-json": "^7.0.4",
         "@npmcli/promise-spawn": "^9.0.1",
         "@npmcli/redact": "^4.0.0",
         "@npmcli/run-script": "^10.0.3",
         "@sigstore/tuf": "^4.0.0",
         "abbrev": "^4.0.0",
         "archy": "~1.0.0",
-        "cacache": "^20.0.2",
+        "cacache": "^20.0.3",
         "chalk": "^5.6.2",
         "ci-info": "^4.3.1",
         "cli-columns": "^4.0.0",
         "fastest-levenshtein": "^1.0.16",
         "fs-minipass": "^3.0.3",
-        "glob": "^11.0.3",
+        "glob": "^13.0.0",
         "graceful-fs": "^4.2.11",
         "hosted-git-info": "^9.0.2",
         "ini": "^6.0.0",
-        "init-package-json": "^8.2.3",
+        "init-package-json": "^8.2.4",
         "is-cidr": "^6.0.1",
         "json-parse-even-better-errors": "^5.0.0",
         "libnpmaccess": "^10.0.3",
-        "libnpmdiff": "^8.0.10",
-        "libnpmexec": "^10.1.9",
-        "libnpmfund": "^7.0.10",
+        "libnpmdiff": "^8.0.11",
+        "libnpmexec": "^10.1.10",
+        "libnpmfund": "^7.0.11",
         "libnpmorg": "^8.0.1",
-        "libnpmpack": "^9.0.10",
+        "libnpmpack": "^9.0.11",
         "libnpmpublish": "^11.1.3",
         "libnpmsearch": "^9.0.1",
         "libnpmteam": "^8.0.2",
@@ -7811,19 +8478,19 @@
         "ms": "^2.1.2",
         "node-gyp": "^12.1.0",
         "nopt": "^9.0.0",
-        "npm-audit-report": "^6.0.0",
+        "npm-audit-report": "^7.0.0",
         "npm-install-checks": "^8.0.0",
         "npm-package-arg": "^13.0.2",
         "npm-pick-manifest": "^11.0.3",
         "npm-profile": "^12.0.1",
         "npm-registry-fetch": "^19.1.1",
-        "npm-user-validate": "^3.0.0",
-        "p-map": "^7.0.3",
+        "npm-user-validate": "^4.0.0",
+        "p-map": "^7.0.4",
         "pacote": "^21.0.4",
         "parse-conflict-json": "^5.0.1",
-        "proc-log": "^6.0.0",
+        "proc-log": "^6.1.0",
         "qrcode-terminal": "^0.12.0",
-        "read": "^4.1.0",
+        "read": "^5.0.1",
         "semver": "^7.7.3",
         "spdx-expression-parse": "^4.0.0",
         "ssri": "^13.0.0",
@@ -7880,7 +8547,6 @@
     "node_modules/npm/node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "dev": true,
-      "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -7897,7 +8563,6 @@
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
       "version": "6.2.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -7909,13 +8574,11 @@
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -7932,7 +8595,6 @@
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
       "version": "7.1.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -7979,20 +8641,20 @@
       }
     },
     "node_modules/npm/node_modules/@npmcli/arborist": {
-      "version": "9.1.7",
+      "version": "9.1.8",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "@isaacs/string-locale-compare": "^1.1.0",
-        "@npmcli/fs": "^4.0.0",
+        "@npmcli/fs": "^5.0.0",
         "@npmcli/installed-package-contents": "^4.0.0",
         "@npmcli/map-workspaces": "^5.0.0",
         "@npmcli/metavuln-calculator": "^9.0.2",
         "@npmcli/name-from-folder": "^4.0.0",
         "@npmcli/node-gyp": "^5.0.0",
         "@npmcli/package-json": "^7.0.0",
-        "@npmcli/query": "^4.0.0",
+        "@npmcli/query": "^5.0.0",
         "@npmcli/redact": "^4.0.0",
         "@npmcli/run-script": "^10.0.0",
         "bin-links": "^6.0.0",
@@ -8002,7 +8664,7 @@
         "json-stringify-nice": "^1.1.4",
         "lru-cache": "^11.2.1",
         "minimatch": "^10.0.3",
-        "nopt": "^8.0.0",
+        "nopt": "^9.0.0",
         "npm-install-checks": "^8.0.0",
         "npm-package-arg": "^13.0.0",
         "npm-pick-manifest": "^11.0.1",
@@ -8010,7 +8672,7 @@
         "pacote": "^21.0.2",
         "parse-conflict-json": "^5.0.1",
         "proc-log": "^6.0.0",
-        "proggy": "^3.0.0",
+        "proggy": "^4.0.0",
         "promise-all-reject-late": "^1.0.0",
         "promise-call-limit": "^3.0.1",
         "semver": "^7.3.7",
@@ -8026,7 +8688,7 @@
       }
     },
     "node_modules/npm/node_modules/@npmcli/config": {
-      "version": "10.4.3",
+      "version": "10.4.4",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -8035,7 +8697,7 @@
         "@npmcli/package-json": "^7.0.0",
         "ci-info": "^4.0.0",
         "ini": "^6.0.0",
-        "nopt": "^8.1.0",
+        "nopt": "^9.0.0",
         "proc-log": "^6.0.0",
         "semver": "^7.3.5",
         "walk-up-path": "^4.0.0"
@@ -8045,7 +8707,7 @@
       }
     },
     "node_modules/npm/node_modules/@npmcli/fs": {
-      "version": "4.0.0",
+      "version": "5.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -8053,7 +8715,7 @@
         "semver": "^7.3.5"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/@npmcli/git": {
@@ -8092,14 +8754,14 @@
       }
     },
     "node_modules/npm/node_modules/@npmcli/map-workspaces": {
-      "version": "5.0.1",
+      "version": "5.0.3",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "@npmcli/name-from-folder": "^4.0.0",
         "@npmcli/package-json": "^7.0.0",
-        "glob": "^11.0.3",
+        "glob": "^13.0.0",
         "minimatch": "^10.0.3"
       },
       "engines": {
@@ -8141,13 +8803,13 @@
       }
     },
     "node_modules/npm/node_modules/@npmcli/package-json": {
-      "version": "7.0.2",
+      "version": "7.0.4",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "@npmcli/git": "^7.0.0",
-        "glob": "^11.0.3",
+        "glob": "^13.0.0",
         "hosted-git-info": "^9.0.0",
         "json-parse-even-better-errors": "^5.0.0",
         "proc-log": "^6.0.0",
@@ -8171,7 +8833,7 @@
       }
     },
     "node_modules/npm/node_modules/@npmcli/query": {
-      "version": "4.0.1",
+      "version": "5.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -8179,7 +8841,7 @@
         "postcss-selector-parser": "^7.0.0"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/@npmcli/redact": {
@@ -8358,7 +9020,6 @@
     "node_modules/npm/node_modules/ansi-styles": {
       "version": "6.2.3",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -8423,14 +9084,14 @@
       }
     },
     "node_modules/npm/node_modules/cacache": {
-      "version": "20.0.2",
+      "version": "20.0.3",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "@npmcli/fs": "^4.0.0",
+        "@npmcli/fs": "^5.0.0",
         "fs-minipass": "^3.0.0",
-        "glob": "^11.0.3",
+        "glob": "^13.0.0",
         "lru-cache": "^11.1.0",
         "minipass": "^7.0.3",
         "minipass-collect": "^2.0.1",
@@ -8438,7 +9099,7 @@
         "minipass-pipeline": "^1.2.4",
         "p-map": "^7.0.2",
         "ssri": "^13.0.0",
-        "unique-filename": "^4.0.0"
+        "unique-filename": "^5.0.0"
       },
       "engines": {
         "node": "^20.17.0 || >=22.9.0"
@@ -8517,7 +9178,6 @@
     "node_modules/npm/node_modules/color-convert": {
       "version": "2.0.1",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -8529,7 +9189,6 @@
     "node_modules/npm/node_modules/color-name": {
       "version": "1.1.4",
       "dev": true,
-      "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/common-ancestor-path": {
@@ -8541,7 +9200,6 @@
     "node_modules/npm/node_modules/cross-spawn": {
       "version": "7.0.6",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -8555,13 +9213,11 @@
     "node_modules/npm/node_modules/cross-spawn/node_modules/isexe": {
       "version": "2.0.0",
       "dev": true,
-      "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
       "version": "2.0.2",
       "dev": true,
-      "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -8614,7 +9270,6 @@
     "node_modules/npm/node_modules/eastasianwidth": {
       "version": "0.2.0",
       "dev": true,
-      "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/emoji-regex": {
@@ -8666,7 +9321,6 @@
     "node_modules/npm/node_modules/foreground-child": {
       "version": "3.3.1",
       "dev": true,
-      "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.6",
@@ -8692,21 +9346,15 @@
       }
     },
     "node_modules/npm/node_modules/glob": {
-      "version": "11.0.3",
+      "version": "13.0.0",
       "dev": true,
       "inBundle": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "foreground-child": "^3.3.1",
-        "jackspeak": "^4.1.1",
-        "minimatch": "^10.0.3",
+        "minimatch": "^10.1.1",
         "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
         "path-scurry": "^2.0.0"
       },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
       "engines": {
         "node": "20 || >=22"
       },
@@ -8808,15 +9456,15 @@
       }
     },
     "node_modules/npm/node_modules/init-package-json": {
-      "version": "8.2.3",
+      "version": "8.2.4",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
         "@npmcli/package-json": "^7.0.0",
         "npm-package-arg": "^13.0.0",
-        "promzard": "^2.0.0",
-        "read": "^4.0.0",
+        "promzard": "^3.0.1",
+        "read": "^5.0.1",
         "semver": "^7.7.2",
         "validate-npm-package-license": "^3.0.4",
         "validate-npm-package-name": "^7.0.0"
@@ -8879,7 +9527,6 @@
     "node_modules/npm/node_modules/jackspeak": {
       "version": "4.1.1",
       "dev": true,
-      "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -8944,13 +9591,13 @@
       }
     },
     "node_modules/npm/node_modules/libnpmdiff": {
-      "version": "8.0.10",
+      "version": "8.0.11",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "@npmcli/arborist": "^9.1.7",
-        "@npmcli/installed-package-contents": "^3.0.0",
+        "@npmcli/arborist": "^9.1.8",
+        "@npmcli/installed-package-contents": "^4.0.0",
         "binary-extensions": "^3.0.0",
         "diff": "^8.0.2",
         "minimatch": "^10.0.3",
@@ -8963,12 +9610,12 @@
       }
     },
     "node_modules/npm/node_modules/libnpmexec": {
-      "version": "10.1.9",
+      "version": "10.1.10",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "@npmcli/arborist": "^9.1.7",
+        "@npmcli/arborist": "^9.1.8",
         "@npmcli/package-json": "^7.0.0",
         "@npmcli/run-script": "^10.0.0",
         "ci-info": "^4.0.0",
@@ -8976,7 +9623,7 @@
         "pacote": "^21.0.2",
         "proc-log": "^6.0.0",
         "promise-retry": "^2.0.1",
-        "read": "^4.0.0",
+        "read": "^5.0.1",
         "semver": "^7.3.7",
         "signal-exit": "^4.1.0",
         "walk-up-path": "^4.0.0"
@@ -8986,12 +9633,12 @@
       }
     },
     "node_modules/npm/node_modules/libnpmfund": {
-      "version": "7.0.10",
+      "version": "7.0.11",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "@npmcli/arborist": "^9.1.7"
+        "@npmcli/arborist": "^9.1.8"
       },
       "engines": {
         "node": "^20.17.0 || >=22.9.0"
@@ -9011,12 +9658,12 @@
       }
     },
     "node_modules/npm/node_modules/libnpmpack": {
-      "version": "9.0.10",
+      "version": "9.0.11",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "@npmcli/arborist": "^9.1.7",
+        "@npmcli/arborist": "^9.1.8",
         "@npmcli/run-script": "^10.0.0",
         "npm-package-arg": "^13.0.0",
         "pacote": "^21.0.2"
@@ -9260,12 +9907,12 @@
       "license": "MIT"
     },
     "node_modules/npm/node_modules/mute-stream": {
-      "version": "2.0.0",
+      "version": "3.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/negotiator": {
@@ -9317,12 +9964,12 @@
       }
     },
     "node_modules/npm/node_modules/npm-audit-report": {
-      "version": "6.0.0",
+      "version": "7.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/npm-bundled": {
@@ -9434,16 +10081,16 @@
       }
     },
     "node_modules/npm/node_modules/npm-user-validate": {
-      "version": "3.0.0",
+      "version": "4.0.0",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/p-map": {
-      "version": "7.0.3",
+      "version": "7.0.4",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -9457,7 +10104,6 @@
     "node_modules/npm/node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "dev": true,
-      "inBundle": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/npm/node_modules/pacote": {
@@ -9508,7 +10154,6 @@
     "node_modules/npm/node_modules/path-key": {
       "version": "3.1.1",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9544,7 +10189,7 @@
       }
     },
     "node_modules/npm/node_modules/proc-log": {
-      "version": "6.0.0",
+      "version": "6.1.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -9553,12 +10198,12 @@
       }
     },
     "node_modules/npm/node_modules/proggy": {
-      "version": "3.0.0",
+      "version": "4.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/promise-all-reject-late": {
@@ -9593,15 +10238,15 @@
       }
     },
     "node_modules/npm/node_modules/promzard": {
-      "version": "2.0.0",
+      "version": "3.0.1",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "read": "^4.0.0"
+        "read": "^5.0.0"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/qrcode-terminal": {
@@ -9613,15 +10258,15 @@
       }
     },
     "node_modules/npm/node_modules/read": {
-      "version": "4.1.0",
+      "version": "5.0.1",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "mute-stream": "^2.0.0"
+        "mute-stream": "^3.0.0"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/read-cmd-shim": {
@@ -9664,7 +10309,6 @@
     "node_modules/npm/node_modules/shebang-command": {
       "version": "2.0.0",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -9676,7 +10320,6 @@
     "node_modules/npm/node_modules/shebang-regex": {
       "version": "3.0.0",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9821,7 +10464,6 @@
       "name": "string-width",
       "version": "4.2.3",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -9848,7 +10490,6 @@
       "name": "strip-ansi",
       "version": "6.0.1",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -9944,6 +10585,7 @@
       "dev": true,
       "inBundle": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9975,19 +10617,19 @@
       }
     },
     "node_modules/npm/node_modules/unique-filename": {
-      "version": "4.0.0",
+      "version": "5.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
-        "unique-slug": "^5.0.0"
+        "unique-slug": "^6.0.0"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/unique-slug": {
-      "version": "5.0.0",
+      "version": "6.0.0",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -9995,7 +10637,7 @@
         "imurmurhash": "^0.1.4"
       },
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/npm/node_modules/util-deprecate": {
@@ -10060,7 +10702,6 @@
     "node_modules/npm/node_modules/wrap-ansi": {
       "version": "8.1.0",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -10078,7 +10719,6 @@
       "name": "wrap-ansi",
       "version": "7.0.0",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -10095,7 +10735,6 @@
     "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -10110,7 +10749,6 @@
     "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
       "version": "6.2.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10122,13 +10760,11 @@
     "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
       "version": "9.2.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
       "version": "5.1.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -10145,7 +10781,6 @@
     "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
       "version": "7.1.2",
       "dev": true,
-      "inBundle": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -10645,6 +11280,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10654,6 +11290,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -10686,7 +11329,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -10866,6 +11508,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10875,6 +11518,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -10887,8 +11531,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.18.0",
@@ -11211,6 +11854,7 @@
       "integrity": "sha512-6qGjWccl5yoyugHt3jTgztJ9Y0JVzyH8/Voc/D8PlLat9pwxQYXz7W1Dpnq5h0/G5GCYGUaDSlYcyk3AMh5A6g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/error": "^4.0.0",
@@ -12332,6 +12976,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/temp-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-3.0.0.tgz",
@@ -12515,6 +13180,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12688,6 +13354,7 @@
       "integrity": "sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "~0.25.0",
         "get-tsconfig": "^4.7.5"
@@ -12772,6 +13439,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13000,6 +13668,7 @@
       "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -13093,6 +13762,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13106,6 +13776,7 @@
       "integrity": "sha512-2Fqty3MM9CDwOVet/jaQalYlbcjATZwPYGcqpiYQqgQ/dLC7GuHdISKgTYIVF/kaishKxLzleKWWfbSDklyIKg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.10",
         "@vitest/mocker": "4.0.10",
@@ -13497,6 +14168,7 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 9a97ed7..d920e14 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^13.1.2",
+    "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -38,6 +39,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/ui": "^4.0.10",
+    "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -46,8 +48,10 @@
     "happy-dom": "^20.0.10",
     "husky": "^9.1.7",
     "jsdom": "^27.2.0",
+    "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "semantic-release": "^25.0.2",
+    "tailwindcss": "^4.1.17",
     "tsx": "^4.20.6",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.47.0",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..fb8e0e3
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}
+
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 2479708..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,1264 +0,0 @@
-.shop {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 3rem clamp(1.25rem, 4vw, 3rem) 4rem;
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
-}
-
-.hero {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)),
-    var(--card);
-  border-radius: 32px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  overflow: hidden;
-  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.1);
-}
-
-.hero__content {
-  padding: clamp(2rem, 5vw, 4rem);
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.hero__media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  min-height: 320px;
-  filter: saturate(1.05);
-}
-
-.hero__eyebrow,
-.eyebrow {
-  font-size: 0.85rem;
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.hero__lead {
-  font-size: 1.1rem;
-  color: var(--muted-strong);
-  max-width: 32ch;
-}
-
-.hero__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.hero__meta {
-  display: flex;
-  gap: 1rem;
-  font-weight: 600;
-}
-
-.btn {
-  border: none;
-  border-radius: 999px;
-  padding: 0.85rem 1.6rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 200ms ease,
-    box-shadow 200ms ease,
-    background 200ms ease;
-}
-
-.btn--primary {
-  background: var(--accent);
-  color: #fff;
-  box-shadow: 0 12px 24px rgba(241, 84, 53, 0.25);
-}
-
-.btn--ghost {
-  background: transparent;
-  border: 1px solid rgba(15, 23, 42, 0.15);
-  color: var(--text);
-}
-
-.btn:hover {
-  transform: translateY(-2px);
-}
-
-.perks {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1.25rem;
-}
-
-.perks article {
-  background: var(--card);
-  padding: 1.5rem;
-  border-radius: 20px;
-  border: 1px solid var(--border);
-  min-height: 150px;
-}
-
-.perks h3 {
-  margin-bottom: 0.35rem;
-}
-
-.categories {
-  background: var(--card);
-  border-radius: 32px;
-  padding: clamp(2rem, 5vw, 3.5rem);
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  border: 1px solid var(--border);
-}
-
-.section-heading {
-  max-width: 520px;
-}
-
-.categories__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 1rem;
-}
-
-.categories__grid article {
-  background: rgba(15, 23, 42, 0.04);
-  border-radius: 20px;
-  padding: 1.25rem;
-  min-height: 130px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.products-page {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 1rem 2rem 2rem;
-}
-
-.product-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-}
-
-.product-grid__items {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 2rem;
-}
-
-@media (min-width: 1200px) {
-  .product-grid__items {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@media (min-width: 900px) and (max-width: 1199px) {
-  .product-grid__items {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.product-card {
-  background: var(--card);
-  border-radius: 28px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  transition:
-    transform 200ms ease,
-    box-shadow 200ms ease;
-  text-decoration: none;
-  color: inherit;
-  cursor: pointer;
-}
-
-.product-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
-}
-
-.product-card__media {
-  position: relative;
-  overflow: hidden;
-  aspect-ratio: 4 / 3;
-}
-
-.product-card__media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 300ms ease;
-}
-
-.product-card:hover .product-card__media img {
-  transform: scale(1.04);
-}
-
-.product-card__badge {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  background: rgba(0, 0, 0, 0.65);
-  color: #fff;
-  padding: 0.35rem 0.75rem;
-  border-radius: 999px;
-  font-size: 0.75rem;
-}
-
-.product-card__body {
-  padding: 1.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  flex: 1;
-}
-
-.product-card__category {
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.7rem;
-  color: var(--muted);
-}
-
-.product-card__description {
-  color: var(--muted-strong);
-  margin: 0;
-  flex: 1;
-}
-
-.product-card__meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 600;
-}
-
-.product-card__price {
-  font-size: 1.1rem;
-}
-
-.product-card__colors {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  font-size: 0.85rem;
-  color: var(--muted-strong);
-}
-
-.product-card__cta {
-  align-self: flex-start;
-  border-radius: 999px;
-  border: none;
-  background: rgba(15, 23, 42, 0.85);
-  color: #fff;
-  padding: 0.55rem 1.4rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.75rem;
-  transition:
-    transform 200ms ease,
-    box-shadow 200ms ease;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.product-card__cta--highlight {
-  animation: buttonColorFade 1200ms ease-out forwards;
-}
-
-.product-card--highlight {
-  animation: cardPulse 500ms ease;
-  box-shadow: 0 10px 20px rgba(241, 84, 53, 0.08);
-}
-
-.product-card__checkmark {
-  display: inline-flex;
-  align-items: center;
-  animation: checkmarkFade 1200ms ease-out forwards;
-  margin-right: -0.25rem;
-}
-
-.product-card__checkmark svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-}
-
-@keyframes cardPulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  30% {
-    transform: scale(1.004);
-    opacity: 0.98;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes checkmarkFade {
-  0% {
-    opacity: 0;
-    transform: translateX(-4px) scale(0.8);
-  }
-  20% {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-  70% {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(4px) scale(0.8);
-  }
-}
-
-@keyframes buttonColorFade {
-  0% {
-    background-color: rgba(15, 23, 42, 0.85);
-  }
-  15% {
-    background-color: rgba(34, 197, 94, 0.9);
-  }
-  50% {
-    background-color: rgba(34, 197, 94, 0.9);
-  }
-  70% {
-    background-color: rgba(34, 197, 94, 0.75);
-  }
-  85% {
-    background-color: rgba(34, 197, 94, 0.5);
-  }
-  100% {
-    background-color: rgba(15, 23, 42, 0.85);
-  }
-}
-
-.editorial {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 2rem;
-  align-items: center;
-  background: var(--card);
-  border-radius: 32px;
-  padding: clamp(2rem, 5vw, 3.5rem);
-  border: 1px solid var(--border);
-}
-
-.editorial__media img {
-  width: 100%;
-  border-radius: 24px;
-  object-fit: cover;
-  min-height: 320px;
-}
-
-.editorial__content ul {
-  padding-left: 1.2rem;
-  color: var(--muted-strong);
-  line-height: 1.8;
-}
-
-.editorial__content button {
-  margin-top: 1rem;
-}
-
-.cart-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--card);
-  border-radius: 28px;
-  padding: 1.5rem 2rem;
-  border: 1px solid var(--border);
-}
-
-.cart-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.65rem;
-  background: #0f172a;
-  color: #fff;
-  border: none;
-  border-radius: 999px;
-  padding: 0.75rem 1.3rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.cart-pill {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.cart-panel {
-  background: var(--card);
-  border-radius: 32px;
-  border: 1px solid var(--border);
-  padding: clamp(1.5rem, 4vw, 3rem);
-  display: grid;
-  gap: 1.5rem;
-}
-
-.cart-panel--open {
-  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
-}
-
-.cart-panel__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.cart-panel__note {
-  color: var(--muted-strong);
-}
-
-.cart-panel__empty {
-  padding: 1.5rem;
-  border-radius: 20px;
-  background: rgba(15, 23, 42, 0.04);
-  text-align: center;
-}
-
-.cart-panel__lines {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.cart-line {
-  border-radius: 24px;
-  border: 1px solid var(--border);
-  padding: 1.25rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.cart-line__info {
-  display: flex;
-  justify-content: space-between;
-  font-weight: 600;
-}
-
-.cart-line__controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.cart-line__quantity-group {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.quantity {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  overflow: hidden;
-}
-
-.quantity button {
-  border: none;
-  background: transparent;
-  padding: 0.35rem 0.9rem;
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-
-.quantity span {
-  min-width: 2rem;
-  text-align: center;
-  font-weight: 600;
-}
-
-.cart-line__remove {
-  border: none;
-  background: transparent;
-  color: var(--muted-strong);
-  cursor: pointer;
-  padding: 0.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  transition:
-    color 200ms ease,
-    background-color 200ms ease,
-    transform 200ms ease;
-}
-
-.cart-line__remove:hover {
-  color: var(--accent);
-  background-color: rgba(241, 84, 53, 0.1);
-  transform: scale(1.1);
-}
-
-.cart-line__remove:active {
-  transform: scale(0.95);
-}
-
-.cart-line__remove svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-}
-
-.cart-line__total {
-  font-weight: 600;
-}
-
-.cart-panel__summary {
-  border-top: 1px solid var(--border);
-  padding-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.cart-panel__summary-row {
-  display: flex;
-  justify-content: space-between;
-  color: var(--muted-strong);
-}
-
-.cart-panel__summary-row--total {
-  font-size: 1.1rem;
-  color: var(--text);
-  font-weight: 600;
-}
-
-.btn--small {
-  padding: 0.5rem 1.1rem;
-  font-size: 0.85rem;
-}
-
-.btn--full {
-  width: 100%;
-  text-align: center;
-}
-
-.product-page {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.product-page__back {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--muted-strong);
-  text-decoration: none;
-  margin-bottom: 2rem;
-  font-size: 0.9rem;
-  transition: color 200ms ease;
-}
-
-.product-page__back:hover {
-  color: var(--text);
-}
-
-.product-page__content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 3rem;
-  align-items: start;
-}
-
-.product-page__media {
-  position: relative;
-  border-radius: 32px;
-  overflow: hidden;
-  aspect-ratio: 4 / 3;
-  background: var(--card);
-  border: 1px solid var(--border);
-}
-
-.product-page__media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.product-page__details {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.product-page__category {
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.75rem;
-  color: var(--muted);
-  margin: 0;
-}
-
-.product-page__title {
-  font-size: clamp(2rem, 5vw, 3rem);
-  line-height: 1.2;
-  margin: 0;
-}
-
-.product-page__description {
-  font-size: 1.1rem;
-  line-height: 1.7;
-  color: var(--muted-strong);
-  margin: 0;
-}
-
-.product-page__meta {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.product-page__price {
-  color: var(--text);
-}
-
-.product-page__rating {
-  color: var(--muted-strong);
-  font-size: 1.1rem;
-}
-
-.product-page__colors {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.product-page__colors-label {
-  font-size: 0.9rem;
-  color: var(--muted-strong);
-  margin: 0;
-  font-weight: 600;
-}
-
-.product-page__colors-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.product-page__color-option {
-  padding: 0.6rem 1.2rem;
-  border: 1px solid var(--border);
-  background: var(--card);
-  border-radius: 999px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 200ms ease;
-  color: var(--text);
-}
-
-.product-page__color-option:hover {
-  border-color: var(--accent);
-  transform: translateY(-1px);
-}
-
-.product-page__color-option--selected {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
-}
-
-.product-page__cta {
-  align-self: flex-start;
-  border-radius: 999px;
-  border: none;
-  background: rgba(15, 23, 42, 0.85);
-  color: #fff;
-  padding: 0.75rem 2rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 200ms ease,
-    box-shadow 200ms ease;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.product-page__cta:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
-}
-
-.product-page__info {
-  margin-top: 1rem;
-  padding-top: 2rem;
-  border-top: 1px solid var(--border);
-}
-
-.product-page__info h3 {
-  font-size: 1.2rem;
-  margin: 0 0 1rem 0;
-}
-
-.product-page__info ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  color: var(--muted-strong);
-}
-
-.product-page__info li {
-  padding-left: 1.5rem;
-  position: relative;
-}
-
-.product-page__info li::before {
-  content: '•';
-  position: absolute;
-  left: 0;
-  color: var(--accent);
-  font-weight: bold;
-}
-
-.product-page__not-found {
-  text-align: center;
-  padding: 4rem 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  align-items: center;
-}
-
-.product-page__not-found h1 {
-  font-size: 2.5rem;
-  margin: 0;
-}
-
-.product-page__not-found p {
-  color: var(--muted-strong);
-  font-size: 1.1rem;
-  margin: 0;
-}
-
-.reviews {
-  margin-top: 4rem;
-  padding-top: 3rem;
-  border-top: 1px solid var(--border);
-}
-
-.reviews__title {
-  font-size: 2rem;
-  margin: 0 0 2rem 0;
-}
-
-.reviews__list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-}
-
-.review {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.review__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.review__header > div {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.review__name {
-  font-weight: 600;
-  margin: 0;
-  color: var(--text);
-}
-
-.review__date {
-  font-size: 0.85rem;
-  color: var(--muted-strong);
-}
-
-.review__text {
-  margin: 0;
-  line-height: 1.6;
-  color: var(--muted-strong);
-}
-
-.reviews__form {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.reviews__form-title {
-  font-size: 1.3rem;
-  margin: 0;
-}
-
-.reviews__form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.reviews__label {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.reviews__input,
-.reviews__textarea {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  font-size: 1rem;
-  font-family: inherit;
-  background: var(--bg);
-  color: var(--text);
-  transition:
-    border-color 200ms ease,
-    box-shadow 200ms ease;
-}
-
-.reviews__input:focus,
-.reviews__textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(241, 84, 53, 0.1);
-}
-
-.reviews__input:disabled,
-.reviews__textarea:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.reviews__textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-.reviews__input--captcha {
-  max-width: 120px;
-}
-
-.reviews__error {
-  color: var(--accent);
-  font-size: 0.9rem;
-  margin: 0;
-  padding: 0.75rem 1rem;
-  background: rgba(241, 84, 53, 0.1);
-  border-radius: 8px;
-  border: 1px solid rgba(241, 84, 53, 0.2);
-}
-
-.reviews__submit {
-  align-self: flex-start;
-  margin-top: 0.5rem;
-}
-
-.reviews__submit:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.star-rating {
-  display: inline-flex;
-  gap: 0.25rem;
-  align-items: center;
-}
-
-.star-rating__star {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 1.25rem;
-  color: rgba(15, 23, 42, 0.2);
-  cursor: default;
-  transition:
-    color 150ms ease,
-    transform 150ms ease;
-  line-height: 1;
-}
-
-.star-rating__star--filled {
-  color: #fbbf24;
-}
-
-.star-rating__star--interactive {
-  cursor: pointer;
-}
-
-.star-rating__star--interactive:hover {
-  transform: scale(1.15);
-}
-
-.star-rating__star:disabled {
-  cursor: default;
-}
-
-@media (max-width: 720px) {
-  .hero__actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .cart-line__info,
-  .cart-line__controls {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .cart-panel {
-    padding: 1.5rem;
-  }
-
-  .product-page {
-    padding: 1rem;
-  }
-
-  .product-page__content {
-    gap: 2rem;
-  }
-
-  .product-page__meta {
-    font-size: 1.2rem;
-  }
-
-  .products-page {
-    padding: 1rem;
-  }
-
-  .reviews {
-    margin-top: 2rem;
-    padding-top: 2rem;
-  }
-
-  .reviews__form {
-    padding: 1.5rem;
-  }
-
-  .review__header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-.checkout-page {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 1rem 2rem 2rem;
-}
-
-.checkout-page__empty {
-  text-align: center;
-  padding: 4rem 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  align-items: center;
-}
-
-.checkout-page__empty h1 {
-  font-size: 2.5rem;
-  margin: 0;
-}
-
-.checkout-page__empty p {
-  color: var(--muted-strong);
-  font-size: 1.1rem;
-  margin: 0;
-}
-
-.checkout-page__content {
-  display: grid;
-  grid-template-columns: 1fr 400px;
-  gap: 3rem;
-  margin-top: 2rem;
-}
-
-.checkout-page__title {
-  font-size: 2.5rem;
-  margin: 0 0 2rem 0;
-}
-
-.checkout-form {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.checkout-form__section {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.checkout-form__section-title {
-  font-size: 1.3rem;
-  margin: 0 0 0.5rem 0;
-  font-weight: 600;
-}
-
-.checkout-form__group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.checkout-form__row {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  gap: 1rem;
-}
-
-.checkout-form__label {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.checkout-form__input {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  font-size: 1rem;
-  font-family: inherit;
-  background: var(--bg);
-  color: var(--text);
-  transition:
-    border-color 200ms ease,
-    box-shadow 200ms ease;
-}
-
-.checkout-form__input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(241, 84, 53, 0.1);
-}
-
-.checkout-form__error {
-  background: rgba(241, 84, 53, 0.1);
-  border: 1px solid rgba(241, 84, 53, 0.2);
-  border-radius: 12px;
-  padding: 1rem;
-  color: var(--accent);
-}
-
-.checkout-form__error p {
-  margin: 0;
-}
-
-.checkout-form__submit {
-  margin-top: 1rem;
-}
-
-.checkout-page__summary {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  padding: 2rem;
-  height: fit-content;
-  position: sticky;
-  top: 2rem;
-}
-
-.checkout-page__summary-title {
-  font-size: 1.5rem;
-  margin: 0 0 1.5rem 0;
-  font-weight: 600;
-}
-
-.checkout-page__items {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 2rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.checkout-page__item {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.checkout-page__item-info {
-  flex: 1;
-}
-
-.checkout-page__item-info h3 {
-  font-size: 1rem;
-  margin: 0 0 0.25rem 0;
-  font-weight: 600;
-}
-
-.checkout-page__item-info p {
-  font-size: 0.85rem;
-  color: var(--muted-strong);
-  margin: 0;
-}
-
-.checkout-page__item-price {
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.checkout-page__totals {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.checkout-page__total-row {
-  display: flex;
-  justify-content: space-between;
-  color: var(--muted-strong);
-}
-
-.checkout-page__total-row--final {
-  font-size: 1.2rem;
-  color: var(--text);
-  font-weight: 600;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border);
-}
-
-.checkout-page__success {
-  text-align: center;
-  padding: 4rem 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.checkout-page__success-icon {
-  margin-bottom: 1rem;
-}
-
-.checkout-page__success-title {
-  font-size: 2.5rem;
-  margin: 0;
-  font-weight: 600;
-}
-
-.checkout-page__success-message {
-  font-size: 1.1rem;
-  color: var(--muted-strong);
-  margin: 0;
-  line-height: 1.6;
-}
-
-.checkout-page__success-details {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  padding: 2rem;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.checkout-page__success-detail {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.checkout-page__success-detail:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.checkout-page__success-label {
-  font-weight: 600;
-  color: var(--muted-strong);
-}
-
-.checkout-page__success-value {
-  font-weight: 600;
-  color: var(--text);
-}
-
-.checkout-page__success-actions {
-  margin-top: 1rem;
-}
-
-@media (max-width: 1024px) {
-  .checkout-page__content {
-    grid-template-columns: 1fr;
-  }
-
-  .checkout-page__summary {
-    position: static;
-  }
-
-  .checkout-form__row {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index ce5992b..e091ed2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Link, Route, Routes } from 'react-router-dom'
 import { useQuery } from '@apollo/client/react'
-import './App.css'
 import { type Product } from './data/products'
 import ProductPage from './ProductPage'
 import ProductsPage from './ProductsPage'
@@ -49,26 +48,35 @@ function CartLine({
   onRemove: () => void
 }) {
   return (
-    <li className="cart-line">
-      <div className="cart-line__info">
-        <p>{item.product.name}</p>
+    <li className="rounded-3xl border border-slate-200 p-5 flex flex-col gap-3">
+      <div className="flex justify-between font-semibold">
+        <p className="m-0">{item.product.name}</p>
         <span>{currency.format(item.product.price)}</span>
       </div>
-      <div className="cart-line__controls">
-        <div className="cart-line__quantity-group">
-          <div className="quantity" aria-label={`Quantity controls for ${item.product.name}`}>
+      <div className="flex justify-between items-center gap-4">
+        <div className="flex items-center gap-3">
+          <div
+            className="inline-flex items-center border border-slate-200 rounded-full overflow-hidden"
+            aria-label={`Quantity controls for ${item.product.name}`}
+          >
             <button
               type="button"
+              className="border-none bg-transparent px-3.5 py-1.5 text-xl cursor-pointer"
               aria-label={`Decrease quantity for ${item.product.name}`}
               onClick={onDecrement}
             >
               –
             </button>
-            <span data-testid={`cart-qty-${item.product.id}`} aria-live="polite">
+            <span
+              className="min-w-8 text-center font-semibold"
+              data-testid={`cart-qty-${item.product.id}`}
+              aria-live="polite"
+            >
               {item.quantity}
             </span>
             <button
               type="button"
+              className="border-none bg-transparent px-3.5 py-1.5 text-xl cursor-pointer"
               aria-label={`Increase quantity for ${item.product.name}`}
               onClick={onIncrement}
             >
@@ -77,7 +85,7 @@ function CartLine({
           </div>
           <button
             type="button"
-            className="cart-line__remove"
+            className="border-none bg-transparent text-slate-600 cursor-pointer p-2 inline-flex items-center justify-center rounded-lg transition-all hover:text-orange-500 hover:bg-orange-50 hover:scale-110 active:scale-95"
             aria-label={`Remove all ${item.product.name} from cart`}
             onClick={onRemove}
           >
@@ -87,6 +95,7 @@ function CartLine({
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
+              className="stroke-currentColor"
             >
               <path
                 d="M2 4h12M5.333 4V2.667a1.333 1.333 0 0 1 1.334-1.334h2.666a1.333 1.333 0 0 1 1.334 1.334V4m2 0v9.333a1.333 1.333 0 0 1-1.334 1.334H4.667a1.333 1.333 0 0 1-1.334-1.334V4h9.334ZM6.667 7.333v4M9.333 7.333v4"
@@ -98,9 +107,7 @@ function CartLine({
             </svg>
           </button>
         </div>
-        <span className="cart-line__total">
-          {currency.format(item.product.price * item.quantity)}
-        </span>
+        <span className="font-semibold">{currency.format(item.product.price * item.quantity)}</span>
       </div>
     </li>
   )
@@ -134,56 +141,45 @@ function Layout({
   const { isAuthenticated, user, logout } = useAuth()
 
   return (
-    <div className="shop">
-      <div className="cart-bar">
+    <div className="max-w-[1200px] mx-auto px-5 lg:px-12 py-12 pb-16 flex flex-col gap-12">
+      <div className="flex justify-between items-center bg-white rounded-3xl px-8 py-6 border border-slate-200">
         <div>
-          <p className="eyebrow">Your bag</p>
-          <p>{cartCount ? `${cartCount} item${cartCount > 1 ? 's' : ''}` : 'No items yet'}</p>
+          <p className="text-xs tracking-widest uppercase text-slate-400">Your bag</p>
+          <p className="m-0">
+            {cartCount ? `${cartCount} item${cartCount > 1 ? 's' : ''}` : 'No items yet'}
+          </p>
         </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <div className="flex items-center gap-4">
           {isAuthenticated ? (
             <>
-              <Link
-                to="/account/orders"
-                style={{
-                  color: 'inherit',
-                  textDecoration: 'none',
-                  fontSize: '0.875rem',
-                  marginRight: '0.5rem',
-                }}
-              >
+              <Link to="/account/orders" className="text-inherit no-underline text-sm mr-2">
                 {user?.email}
               </Link>
               <button
                 type="button"
-                className="btn btn--ghost btn--small"
+                className="rounded-full px-4 py-2 text-sm font-semibold cursor-pointer transition-all bg-transparent border border-slate-200 text-slate-900 hover:-translate-y-0.5"
                 onClick={logout}
-                style={{ fontSize: '0.875rem' }}
               >
                 Logout
               </button>
             </>
           ) : (
-            <Link
-              to="/login"
-              style={{
-                color: 'inherit',
-                textDecoration: 'none',
-                fontSize: '0.875rem',
-                marginRight: '0.5rem',
-              }}
-            >
+            <Link to="/login" className="text-inherit no-underline text-sm mr-2">
               Login
             </Link>
           )}
           <button
             type="button"
-            className="cart-toggle"
+            className="inline-flex items-center gap-2.5 bg-slate-900 text-white border-none rounded-full px-5 py-3 font-semibold cursor-pointer"
             onClick={toggleCart}
             data-testid="cart-toggle"
           >
             Bag
-            <span className="cart-pill" data-testid="cart-count" aria-live="polite">
+            <span
+              className="inline-flex justify-center items-center w-8 h-8 rounded-full bg-white/15"
+              data-testid="cart-count"
+              aria-live="polite"
+            >
               {cartCount}
             </span>
           </button>
@@ -191,21 +187,30 @@ function Layout({
       </div>
 
       {isCartOpen && (
-        <section className="cart-panel cart-panel--open" aria-live="polite">
-          <header className="cart-panel__header">
+        <section
+          className="bg-white rounded-3xl border border-slate-200 p-8 lg:p-12 grid gap-6 shadow-xl shadow-slate-900/10"
+          aria-live="polite"
+        >
+          <header className="flex justify-between items-center">
             <div>
-              <p className="eyebrow">Shopping bag</p>
-              <h2>Ready to ship</h2>
+              <p className="text-xs tracking-widest uppercase text-slate-400">Shopping bag</p>
+              <h2 className="m-0">Ready to ship</h2>
             </div>
-            <button type="button" className="btn btn--ghost btn--small" onClick={toggleCart}>
+            <button
+              type="button"
+              className="rounded-full px-4 py-2 text-sm font-semibold cursor-pointer transition-all bg-transparent border border-slate-200 text-slate-900 hover:-translate-y-0.5"
+              onClick={toggleCart}
+            >
               Hide
             </button>
           </header>
-          <p className="cart-panel__note">{freeShippingMessage}</p>
+          <p className="text-slate-600 m-0">{freeShippingMessage}</p>
           {cartItems.length === 0 ? (
-            <p className="cart-panel__empty">Your basket is empty – add your favorite finds.</p>
+            <p className="p-6 rounded-3xl bg-slate-50 text-center m-0">
+              Your basket is empty – add your favorite finds.
+            </p>
           ) : (
-            <ul className="cart-panel__lines">
+            <ul className="list-none m-0 p-0 flex flex-col gap-4">
               {cartItems.map((item) => (
                 <CartLine
                   key={item.product.id}
@@ -217,23 +222,22 @@ function Layout({
               ))}
             </ul>
           )}
-          <div className="cart-panel__summary">
-            <div className="cart-panel__summary-row">
+          <div className="border-t border-slate-200 pt-4 flex flex-col gap-3">
+            <div className="flex justify-between text-slate-600">
               <span>Subtotal</span>
               <span>{currency.format(subtotal)}</span>
             </div>
-            <div className="cart-panel__summary-row">
+            <div className="flex justify-between text-slate-600">
               <span>Shipping</span>
               <span>{shipping === 0 ? 'Complimentary' : currency.format(shipping)}</span>
             </div>
-            <div className="cart-panel__summary-row cart-panel__summary-row--total">
+            <div className="flex justify-between text-xl text-slate-900 font-semibold pt-3 border-t border-slate-200">
               <span>Total</span>
               <span>{currency.format(total)}</span>
             </div>
             <Link
               to="/checkout"
-              className="btn btn--primary btn--full"
-              style={{ textAlign: 'center', display: 'block', textDecoration: 'none' }}
+              className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 text-center block no-underline"
               onClick={toggleCart}
             >
               Proceed to checkout
@@ -269,20 +273,23 @@ function HomePage() {
 
   return (
     <>
-      <header className="hero">
-        <div className="hero__content">
-          <p className="hero__eyebrow">New season edit</p>
-          <h1>Meet the modern home shop</h1>
-          <p className="hero__lead">
+      <header className="bg-gradient-to-br from-white/80 to-white/10 rounded-3xl grid grid-cols-1 lg:grid-cols-[repeat(auto-fit,minmax(260px,1fr))] overflow-hidden shadow-2xl shadow-slate-900/10">
+        <div className="p-8 lg:p-16 flex flex-col gap-6">
+          <p className="text-xs tracking-widest uppercase text-slate-400">New season edit</p>
+          <h1 className="m-0">Meet the modern home shop</h1>
+          <p className="text-lg text-slate-600 max-w-[32ch] m-0">
             Curated furniture, lighting, and objects crafted in small batches and ready to ship.
           </p>
-          <div className="hero__actions">
-            <Link to="/products" className="btn btn--primary">
+          <div className="flex flex-wrap gap-3">
+            <Link
+              to="/products"
+              className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 no-underline"
+            >
               Shop the collection
             </Link>
             <button
               type="button"
-              className="btn btn--ghost"
+              className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-transparent border border-slate-200 text-slate-900 hover:-translate-y-0.5"
               onClick={() =>
                 document.querySelector('#editorial')?.scrollIntoView({ behavior: 'smooth' })
               }
@@ -290,58 +297,82 @@ function HomePage() {
               Studio story
             </button>
           </div>
-          <div className="hero__meta">
+          <div className="flex gap-4 font-semibold">
             <span>{currency.format(heroProduct.price)}</span>
             <span>{heroProduct.name}</span>
           </div>
         </div>
-        <div className="hero__media">
-          <img src={heroProduct.image} alt={heroProduct.name} loading="lazy" />
+        <div className="overflow-hidden">
+          <img
+            src={heroProduct.image}
+            alt={heroProduct.name}
+            loading="lazy"
+            className="w-full h-full object-cover min-h-80 saturate-105"
+          />
         </div>
       </header>
 
-      <section className="perks">
+      <section className="grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-5">
         {perks.map((perk) => (
-          <article key={perk.title}>
-            <h3>{perk.title}</h3>
-            <p>{perk.detail}</p>
+          <article
+            key={perk.title}
+            className="bg-white p-6 rounded-3xl border border-slate-200 min-h-[150px]"
+          >
+            <h3 className="mb-1.5 m-0">{perk.title}</h3>
+            <p className="m-0">{perk.detail}</p>
           </article>
         ))}
       </section>
 
-      <section className="categories">
-        <div className="section-heading">
-          <p className="eyebrow">Shop by room</p>
-          <h2>Spaces with intention</h2>
-          <p>Refresh a single corner or rethink your whole home with designer-backed palettes.</p>
+      <section className="bg-white rounded-3xl p-8 lg:p-14 flex flex-col gap-8 border border-slate-200">
+        <div className="max-w-[520px]">
+          <p className="text-xs tracking-widest uppercase text-slate-400">Shop by room</p>
+          <h2 className="m-0">Spaces with intention</h2>
+          <p className="m-0">
+            Refresh a single corner or rethink your whole home with designer-backed palettes.
+          </p>
         </div>
-        <div className="categories__grid">
+        <div className="grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4">
           {categorySummaries.map((category) => (
-            <article key={category.category}>
-              <h3>{category.category}</h3>
-              <p>{category.count} curated pieces</p>
+            <article
+              key={category.category}
+              className="bg-slate-50 rounded-3xl p-5 min-h-[130px] flex flex-col justify-between"
+            >
+              <h3 className="m-0">{category.category}</h3>
+              <p className="m-0">{category.count} curated pieces</p>
             </article>
           ))}
         </div>
       </section>
 
-      <section className="editorial" id="editorial">
-        <div className="editorial__media">
-          <img src={editorialHighlight.image} alt={editorialHighlight.name} loading="lazy" />
+      <section
+        className="grid grid-cols-1 lg:grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-8 items-center bg-white rounded-3xl p-8 lg:p-14 border border-slate-200"
+        id="editorial"
+      >
+        <div className="overflow-hidden">
+          <img
+            src={editorialHighlight.image}
+            alt={editorialHighlight.name}
+            loading="lazy"
+            className="w-full rounded-3xl object-cover min-h-80"
+          />
         </div>
-        <div className="editorial__content">
-          <p className="eyebrow">From the studio</p>
-          <h2>Layered neutrals, elevated silhouettes</h2>
-          <p>
+        <div>
+          <p className="text-xs tracking-widest uppercase text-slate-400">From the studio</p>
+          <h2 className="m-0">Layered neutrals, elevated silhouettes</h2>
+          <p className="m-0">
             We partner with small-batch workshops to produce timeless staples. Every stitch, weave,
             and finishing touch is considered so you can style once and enjoy for years.
           </p>
-          <ul>
+          <ul className="pl-5 text-slate-600 leading-relaxed list-disc">
             <li>Responsibly sourced materials and certified woods</li>
             <li>Color stories developed with interior stylists</li>
             <li>Transparent pricing and limited runs per season</li>
           </ul>
-          <button type="button" className="btn btn--primary">
+          <button
+            type="button"
+            className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 mt-4"
+          >
             Book a design consult
           </button>
         </div>
diff --git a/src/CheckoutPage.tsx b/src/CheckoutPage.tsx
index bc86a49..a67e1ad 100644
--- a/src/CheckoutPage.tsx
+++ b/src/CheckoutPage.tsx
@@ -1,15 +1,14 @@
 import { useState } from 'react'
 import type { FormEvent } from 'react'
-import { useNavigate, Link } from 'react-router-dom'
 import { useMutation } from '@apollo/client/react'
-import './App.css'
 import { CREATE_CHECKOUT } from './graphql/queries'
 import type { Product } from './data/products'
-
-const currency = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
+import ErrorMessage from './components/ErrorMessage'
+import PageContainer from './components/PageContainer'
+import EmptyCartState from './components/checkout/EmptyCartState'
+import ShippingAddressForm from './components/checkout/ShippingAddressForm'
+import PaymentMethodSelect from './components/checkout/PaymentMethodSelect'
+import OrderSummary from './components/checkout/OrderSummary'
 
 type CartLineItem = {
   product: Product
@@ -55,7 +54,6 @@ type CreateCheckoutMutationResult = {
 }
 
 export default function CheckoutPage({ cartItems, subtotal, shipping, total }: CheckoutPageProps) {
-  const navigate = useNavigate()
   const [createCheckout, { loading, error }] =
     useMutation<CreateCheckoutMutationResult>(CREATE_CHECKOUT)
   const [formData, setFormData] = useState({
@@ -112,14 +110,16 @@ export default function CheckoutPage({ cartItems, subtotal, shipping, total }: C
 
       if (data?.createCheckout) {
         // Navigate to checkout success page or show confirmation
-        navigate(`/checkout/${data.createCheckout.id}/success`)
+        window.location.href = `/checkout/${data.createCheckout.id}/success`
       }
     } catch (err) {
       console.error('Checkout error:', err)
     }
   }
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
+  ) => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value,
@@ -127,219 +127,33 @@ export default function CheckoutPage({ cartItems, subtotal, shipping, total }: C
   }
 
   if (cartItems.length === 0) {
-    return (
-      <div className="shop">
-        <div className="checkout-page">
-          <div className="checkout-page__empty">
-            <h1>Your cart is empty</h1>
-            <p>Add items to your cart before proceeding to checkout.</p>
-            <button
-              type="button"
-              className="btn btn--primary"
-              onClick={() => navigate('/products')}
-            >
-              Continue Shopping
-            </button>
-          </div>
-        </div>
-      </div>
-    )
+    return <EmptyCartState />
   }
 
   return (
-    <div className="shop">
-      <div className="checkout-page">
-        <Link to="/products" className="product-page__back">
-          ← Back to products
-        </Link>
-
-        <div className="checkout-page__content">
-          <div className="checkout-page__form-section">
-            <h1 className="checkout-page__title">Checkout</h1>
-
-            <form className="checkout-form" onSubmit={handleSubmit}>
-              <section className="checkout-form__section">
-                <h2 className="checkout-form__section-title">Shipping Address</h2>
-                <div className="checkout-form__row">
-                  <div className="checkout-form__group">
-                    <label htmlFor="firstName" className="checkout-form__label">
-                      First Name
-                    </label>
-                    <input
-                      id="firstName"
-                      name="firstName"
-                      type="text"
-                      className="checkout-form__input"
-                      value={formData.firstName}
-                      onChange={handleChange}
-                      required
-                    />
-                  </div>
-
-                  <div className="checkout-form__group">
-                    <label htmlFor="lastName" className="checkout-form__label">
-                      Last Name
-                    </label>
-                    <input
-                      id="lastName"
-                      name="lastName"
-                      type="text"
-                      className="checkout-form__input"
-                      value={formData.lastName}
-                      onChange={handleChange}
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="checkout-form__group">
-                  <label htmlFor="address" className="checkout-form__label">
-                    Street Address
-                  </label>
-                  <input
-                    id="address"
-                    name="address"
-                    type="text"
-                    className="checkout-form__input"
-                    value={formData.address}
-                    onChange={handleChange}
-                    required
-                  />
-                </div>
+    <PageContainer backLink={{ to: '/products', label: '← Back to products' }}>
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_400px] gap-12 mt-8">
+        <div>
+          <h1 className="text-4xl mb-8 m-0">Checkout</h1>
 
-                <div className="checkout-form__row">
-                  <div className="checkout-form__group">
-                    <label htmlFor="city" className="checkout-form__label">
-                      City
-                    </label>
-                    <input
-                      id="city"
-                      name="city"
-                      type="text"
-                      className="checkout-form__input"
-                      value={formData.city}
-                      onChange={handleChange}
-                      required
-                    />
-                  </div>
+          <form className="flex flex-col gap-8" onSubmit={handleSubmit}>
+            <ShippingAddressForm formData={formData} onChange={handleChange} />
+            <PaymentMethodSelect value={formData.paymentMethod} onChange={handleChange} />
 
-                  <div className="checkout-form__group">
-                    <label htmlFor="state" className="checkout-form__label">
-                      State
-                    </label>
-                    <input
-                      id="state"
-                      name="state"
-                      type="text"
-                      className="checkout-form__input"
-                      value={formData.state}
-                      onChange={handleChange}
-                      required
-                    />
-                  </div>
+            {error && <ErrorMessage message={`Error processing checkout: ${error.message}`} />}
 
-                  <div className="checkout-form__group">
-                    <label htmlFor="zipCode" className="checkout-form__label">
-                      ZIP Code
-                    </label>
-                    <input
-                      id="zipCode"
-                      name="zipCode"
-                      type="text"
-                      className="checkout-form__input"
-                      value={formData.zipCode}
-                      onChange={handleChange}
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="checkout-form__group">
-                  <label htmlFor="country" className="checkout-form__label">
-                    Country
-                  </label>
-                  <input
-                    id="country"
-                    name="country"
-                    type="text"
-                    className="checkout-form__input"
-                    value={formData.country}
-                    onChange={handleChange}
-                    required
-                  />
-                </div>
-              </section>
-
-              <section className="checkout-form__section">
-                <h2 className="checkout-form__section-title">Payment Method</h2>
-                <div className="checkout-form__group">
-                  <label htmlFor="paymentMethod" className="checkout-form__label">
-                    Payment Method
-                  </label>
-                  <select
-                    id="paymentMethod"
-                    name="paymentMethod"
-                    className="checkout-form__input"
-                    value={formData.paymentMethod}
-                    onChange={handleChange}
-                    required
-                  >
-                    <option value="CREDIT_CARD">Credit Card</option>
-                    <option value="DEBIT_CARD">Debit Card</option>
-                    <option value="PAYPAL">PayPal</option>
-                    <option value="BANK_TRANSFER">Bank Transfer</option>
-                  </select>
-                </div>
-              </section>
-
-              {error && (
-                <div className="checkout-form__error">
-                  <p>Error processing checkout: {error.message}</p>
-                </div>
-              )}
-
-              <button
-                type="submit"
-                className="btn btn--primary btn--full checkout-form__submit"
-                disabled={loading}
-              >
-                {loading ? 'Processing...' : 'Complete Order'}
-              </button>
-            </form>
-          </div>
-
-          <div className="checkout-page__summary">
-            <h2 className="checkout-page__summary-title">Order Summary</h2>
-            <div className="checkout-page__items">
-              {cartItems.map((item) => (
-                <div key={item.product.id} className="checkout-page__item">
-                  <div className="checkout-page__item-info">
-                    <h3>{item.product.name}</h3>
-                    <p>Quantity: {item.quantity}</p>
-                  </div>
-                  <div className="checkout-page__item-price">
-                    {currency.format(item.product.price * item.quantity)}
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div className="checkout-page__totals">
-              <div className="checkout-page__total-row">
-                <span>Subtotal</span>
-                <span>{currency.format(subtotal)}</span>
-              </div>
-              <div className="checkout-page__total-row">
-                <span>Shipping</span>
-                <span>{shipping === 0 ? 'Complimentary' : currency.format(shipping)}</span>
-              </div>
-              <div className="checkout-page__total-row checkout-page__total-row--final">
-                <span>Total</span>
-                <span>{currency.format(total)}</span>
-              </div>
-            </div>
-          </div>
+            <button
+              type="submit"
+              className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 w-full text-center mt-4 disabled:opacity-60 disabled:cursor-not-allowed"
+              disabled={loading}
+            >
+              {loading ? 'Processing...' : 'Complete Order'}
+            </button>
+          </form>
         </div>
+
+        <OrderSummary cartItems={cartItems} subtotal={subtotal} shipping={shipping} total={total} />
       </div>
-    </div>
+    </PageContainer>
   )
 }
diff --git a/src/CheckoutSuccessPage.tsx b/src/CheckoutSuccessPage.tsx
index fe66870..759fd95 100644
--- a/src/CheckoutSuccessPage.tsx
+++ b/src/CheckoutSuccessPage.tsx
@@ -1,8 +1,10 @@
 import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { useQuery } from '@apollo/client/react'
-import './App.css'
 import { GET_CHECKOUT } from './graphql/queries'
+import LoadingState from './components/LoadingState'
+import EmptyState from './components/EmptyState'
+import PageContainer from './components/PageContainer'
 
 const currency = new Intl.NumberFormat('en-US', {
   style: 'currency',
@@ -57,98 +59,76 @@ export default function CheckoutSuccessPage({ onClearCart }: CheckoutSuccessPage
   }, [])
 
   if (loading) {
-    return (
-      <div className="shop">
-        <div className="checkout-page">
-          <div className="checkout-page__empty">
-            <h1>Loading...</h1>
-          </div>
-        </div>
-      </div>
-    )
+    return <LoadingState />
   }
 
   const checkout = data?.checkout
 
   if (!checkout) {
     return (
-      <div className="shop">
-        <div className="checkout-page">
-          <div className="checkout-page__empty">
-            <h1>Checkout not found</h1>
-            <p>Sorry, we couldn't find your checkout information.</p>
-            <button
-              type="button"
-              className="btn btn--primary"
-              onClick={() => {
-                window.location.href = '/products'
-              }}
-            >
-              Continue Shopping
-            </button>
-          </div>
-        </div>
-      </div>
+      <EmptyState
+        title="Checkout not found"
+        message="Sorry, we couldn't find your checkout information."
+        actionLabel="Continue Shopping"
+        onAction={() => {
+          window.location.href = '/products'
+        }}
+      />
     )
   }
 
   return (
-    <div className="shop">
-      <div className="checkout-page">
-        <div className="checkout-page__success">
-          <div className="checkout-page__success-icon">
-            <svg
-              width="64"
-              height="64"
-              viewBox="0 0 64 64"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle cx="32" cy="32" r="32" fill="#22c55e" />
-              <path
-                d="M20 32L28 40L44 24"
-                stroke="white"
-                strokeWidth="4"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+    <PageContainer>
+      <div className="text-center py-16 px-8 flex flex-col items-center gap-8 max-w-2xl mx-auto">
+        <div className="mb-4">
+          <svg
+            width="64"
+            height="64"
+            viewBox="0 0 64 64"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="32" cy="32" r="32" fill="#22c55e" />
+            <path
+              d="M20 32L28 40L44 24"
+              stroke="white"
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+        <h1 className="text-4xl m-0 font-semibold">Order Confirmed!</h1>
+        <p className="text-lg text-slate-600 m-0 leading-relaxed">
+          Thank you for your order. We've received your payment and will begin processing your
+          shipment shortly.
+        </p>
+        <div className="bg-white border border-slate-200 rounded-3xl p-8 w-full flex flex-col gap-4">
+          <div className="flex justify-between items-center pb-4 border-b border-slate-200">
+            <span className="font-semibold text-slate-600">Order ID:</span>
+            <span className="font-semibold text-slate-900">{checkout.id}</span>
           </div>
-          <h1 className="checkout-page__success-title">Order Confirmed!</h1>
-          <p className="checkout-page__success-message">
-            Thank you for your order. We've received your payment and will begin processing your
-            shipment shortly.
-          </p>
-          <div className="checkout-page__success-details">
-            <div className="checkout-page__success-detail">
-              <span className="checkout-page__success-label">Order ID:</span>
-              <span className="checkout-page__success-value">{checkout.id}</span>
-            </div>
-            <div className="checkout-page__success-detail">
-              <span className="checkout-page__success-label">Total:</span>
-              <span className="checkout-page__success-value">
-                {currency.format(checkout.total)}
-              </span>
-            </div>
-            <div className="checkout-page__success-detail">
-              <span className="checkout-page__success-label">Status:</span>
-              <span className="checkout-page__success-value">{checkout.status}</span>
-            </div>
+          <div className="flex justify-between items-center pb-4 border-b border-slate-200">
+            <span className="font-semibold text-slate-600">Total:</span>
+            <span className="font-semibold text-slate-900">{currency.format(checkout.total)}</span>
           </div>
-          <div className="checkout-page__success-actions">
-            <button
-              type="button"
-              className="btn btn--primary"
-              onClick={() => {
-                // Direct navigation using window.location to ensure page updates
-                window.location.href = '/products'
-              }}
-            >
-              Continue Shopping
-            </button>
+          <div className="flex justify-between items-center">
+            <span className="font-semibold text-slate-600">Status:</span>
+            <span className="font-semibold text-slate-900">{checkout.status}</span>
           </div>
         </div>
+        <div className="mt-4">
+          <button
+            type="button"
+            className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5"
+            onClick={() => {
+              window.location.href = '/products'
+            }}
+          >
+            Continue Shopping
+          </button>
+        </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
diff --git a/src/LoginPage.tsx b/src/LoginPage.tsx
index d6c96da..142bbd3 100644
--- a/src/LoginPage.tsx
+++ b/src/LoginPage.tsx
@@ -1,7 +1,9 @@
 import { useState, type FormEvent } from 'react'
 import { useNavigate, Link, useLocation } from 'react-router-dom'
 import { useAuth } from './contexts/AuthContext'
-import './App.css'
+import FormField from './components/FormField'
+import ErrorMessage from './components/ErrorMessage'
+import PageContainer from './components/PageContainer'
 
 export default function LoginPage() {
   const navigate = useNavigate()
@@ -30,72 +32,51 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="shop">
-      <div className="checkout-page">
-        <div className="checkout-page__content">
-          <div
-            className="checkout-page__form-section"
-            style={{ maxWidth: '500px', margin: '0 auto' }}
-          >
-            <h1 className="checkout-page__title">Login</h1>
+    <PageContainer>
+      <div className="max-w-[500px] mx-auto">
+        <h1 className="text-4xl mb-8 m-0">Login</h1>
 
-            <form className="checkout-form" onSubmit={handleSubmit}>
-              {error && (
-                <div className="checkout-form__error">
-                  <p>{error}</p>
-                </div>
-              )}
+        <form className="flex flex-col gap-8" onSubmit={handleSubmit}>
+          {error && <ErrorMessage message={error} />}
 
-              <div className="checkout-form__group">
-                <label htmlFor="email" className="checkout-form__label">
-                  Email
-                </label>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  className="checkout-form__input"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  autoComplete="email"
-                />
-              </div>
+          <FormField
+            id="email"
+            name="email"
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+          />
 
-              <div className="checkout-form__group">
-                <label htmlFor="password" className="checkout-form__label">
-                  Password
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  className="checkout-form__input"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  autoComplete="current-password"
-                />
-              </div>
+          <FormField
+            id="password"
+            name="password"
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="current-password"
+          />
 
-              <button
-                type="submit"
-                className="btn btn--primary btn--full checkout-form__submit"
-                disabled={loading}
-              >
-                {loading ? 'Logging in...' : 'Login'}
-              </button>
+          <button
+            type="submit"
+            className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 w-full text-center mt-4 disabled:opacity-60 disabled:cursor-not-allowed"
+            disabled={loading}
+          >
+            {loading ? 'Logging in...' : 'Login'}
+          </button>
 
-              <p style={{ textAlign: 'center', marginTop: '1rem' }}>
-                Don't have an account?{' '}
-                <Link to="/register" style={{ color: 'inherit', textDecoration: 'underline' }}>
-                  Register here
-                </Link>
-              </p>
-            </form>
-          </div>
-        </div>
+          <p className="text-center mt-4">
+            Don't have an account?{' '}
+            <Link to="/register" className="text-inherit underline">
+              Register here
+            </Link>
+          </p>
+        </form>
       </div>
-    </div>
+    </PageContainer>
   )
 }
diff --git a/src/ProductCard.tsx b/src/ProductCard.tsx
index 37b0eec..647de8a 100644
--- a/src/ProductCard.tsx
+++ b/src/ProductCard.tsx
@@ -1,13 +1,10 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import './App.css'
 import { type Product } from './data/products'
 import { getAverageRating } from './utils/reviews'
-
-const currency = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
+import ProductImage from './components/product/ProductImage'
+import ProductMeta from './components/product/ProductMeta'
+import AddToCartButton from './components/product/AddToCartButton'
 
 type ProductCardProps = {
   product: Product
@@ -36,63 +33,46 @@ export default function ProductCard({ product, onAdd, isHighlighted }: ProductCa
     }
   }, [product.id])
 
-  const handleAddClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    onAdd()
-  }
-
   return (
     <Link
       to={`/product/${product.id}`}
-      className={`product-card ${isHighlighted ? 'product-card--highlight' : ''}`}
+      className={`bg-white rounded-3xl overflow-hidden border border-slate-200 flex flex-col min-h-full transition-all no-underline text-inherit cursor-pointer hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-900/10 ${
+        isHighlighted ? 'shadow-lg shadow-orange-500/10' : ''
+      }`}
       data-testid="product-card"
     >
-      <div className="product-card__media">
-        <img src={product.image} alt={product.name} loading="lazy" />
-        {product.badge && <span className="product-card__badge">{product.badge}</span>}
-      </div>
-      <div className="product-card__body">
-        <p className="product-card__category">{product.category}</p>
-        <h3>{product.name}</h3>
-        <p className="product-card__description">{product.description}</p>
-        <div className="product-card__meta">
-          <span className="product-card__price">{currency.format(product.price)}</span>
-          {averageRating !== null && (
-            <span className="product-card__rating">★ {averageRating.toFixed(1)}</span>
-          )}
-        </div>
-        <div className="product-card__colors">
+      <ProductImage
+        product={product}
+        className="relative overflow-hidden aspect-[4/3] group-hover:scale-105 transition-transform"
+      />
+      <div className="p-7 flex flex-col gap-3 flex-1">
+        <p className="uppercase tracking-widest text-xs text-slate-400">{product.category}</p>
+        <h3 className="m-0">{product.name}</h3>
+        <p className="text-slate-600 m-0 flex-1">{product.description}</p>
+        <ProductMeta
+          product={product}
+          averageRating={averageRating}
+          className="flex justify-between items-center font-semibold"
+          priceClassName="text-lg"
+          ratingClassName="text-amber-500"
+        />
+        <div className="flex flex-wrap gap-2 text-sm text-slate-600">
           {product.colors.map((color) => (
             <span key={color}>{color}</span>
           ))}
         </div>
-        <button
-          type="button"
-          className={`product-card__cta ${isHighlighted ? 'product-card__cta--highlight' : ''}`}
-          onClick={handleAddClick}
+        <div
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}
         >
-          Add to bag
-          {isHighlighted && (
-            <span className="product-card__checkmark" aria-label="Added to bag">
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M13.3333 4L6 11.3333L2.66667 8"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </span>
-          )}
-        </button>
+          <AddToCartButton
+            onClick={() => onAdd()}
+            isHighlighted={isHighlighted}
+            className="px-5 py-2 text-xs"
+          />
+        </div>
       </div>
     </Link>
   )
diff --git a/src/ProductPage.tsx b/src/ProductPage.tsx
index 99bb768..d5924ae 100644
--- a/src/ProductPage.tsx
+++ b/src/ProductPage.tsx
@@ -1,16 +1,15 @@
 import { useState, useEffect } from 'react'
-import { Link, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { useQuery } from '@apollo/client/react'
-import './App.css'
 import Reviews from './Reviews'
 import { getAverageRating } from './utils/reviews'
 import { GET_PRODUCT } from './graphql/queries'
 import type { Product } from './data/products'
-
-const currency = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
+import LoadingState from './components/LoadingState'
+import EmptyState from './components/EmptyState'
+import PageContainer from './components/PageContainer'
+import ProductImage from './components/product/ProductImage'
+import ProductDetails from './components/product/ProductDetails'
 
 type ProductPageProps = {
   onAddToCart: (productId: string) => void
@@ -67,30 +66,17 @@ export default function ProductPage({ onAddToCart, isHighlighted }: ProductPageP
   }, [product])
 
   if (loading) {
-    return (
-      <div className="shop">
-        <div className="product-page">
-          <div className="product-page__not-found">
-            <h1>Loading...</h1>
-          </div>
-        </div>
-      </div>
-    )
+    return <LoadingState />
   }
 
   if (error || !product) {
     return (
-      <div className="shop">
-        <div className="product-page">
-          <div className="product-page__not-found">
-            <h1>Product not found</h1>
-            <p>Sorry, we couldn't find the product you're looking for.</p>
-            <Link to="/products" className="btn btn--primary">
-              Back to products
-            </Link>
-          </div>
-        </div>
-      </div>
+      <EmptyState
+        title="Product not found"
+        message="Sorry, we couldn't find the product you're looking for."
+        actionLabel="Back to products"
+        actionTo="/products"
+      />
     )
   }
 
@@ -103,90 +89,20 @@ export default function ProductPage({ onAddToCart, isHighlighted }: ProductPageP
   }
 
   return (
-    <div className="shop">
-      <div className="product-page">
-        <Link to="/products" className="product-page__back">
-          ← Back to products
-        </Link>
-
-        <div className="product-page__content">
-          <div className="product-page__media">
-            <img src={product.image} alt={product.name} />
-            {product.badge && <span className="product-card__badge">{product.badge}</span>}
-          </div>
-
-          <div className="product-page__details">
-            <p className="product-page__category">{product.category}</p>
-            <h1 className="product-page__title">{product.name}</h1>
-            <p className="product-page__description">{product.description}</p>
-
-            <div className="product-page__meta">
-              <span className="product-page__price">{currency.format(product.price)}</span>
-              {averageRating !== null && (
-                <span className="product-page__rating">★ {averageRating.toFixed(1)}</span>
-              )}
-            </div>
-
-            <div className="product-page__colors">
-              <p className="product-page__colors-label">Available colors:</p>
-              <div className="product-page__colors-list">
-                {product.colors.map((color: string) => (
-                  <button
-                    key={color}
-                    type="button"
-                    className={`product-page__color-option ${
-                      selectedColor === color ? 'product-page__color-option--selected' : ''
-                    }`}
-                    onClick={() => handleColorSelect(color)}
-                    aria-label={`Select color ${color}`}
-                  >
-                    {color}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <button
-              type="button"
-              className={`product-page__cta ${isHighlighted(product.id) ? 'product-card__cta--highlight' : ''}`}
-              onClick={handleAddToCart}
-            >
-              Add to bag
-              {isHighlighted(product.id) && (
-                <span className="product-card__checkmark" aria-label="Added to bag">
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M13.3333 4L6 11.3333L2.66667 8"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </span>
-              )}
-            </button>
-
-            <div className="product-page__info">
-              <h3>Product details</h3>
-              <ul>
-                <li>Premium materials and craftsmanship</li>
-                <li>30-day return policy</li>
-                <li>Complimentary shipping on orders over $150</li>
-                <li>Design consultation available</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <Reviews productId={product.id} />
+    <PageContainer backLink={{ to: '/products', label: '← Back to products' }}>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+        <ProductImage product={product} />
+        <ProductDetails
+          product={product}
+          averageRating={averageRating}
+          selectedColor={selectedColor}
+          onColorSelect={handleColorSelect}
+          onAddToCart={handleAddToCart}
+          isHighlighted={isHighlighted(product.id)}
+        />
       </div>
-    </div>
+
+      <Reviews productId={product.id} />
+    </PageContainer>
   )
 }
diff --git a/src/ProductsPage.tsx b/src/ProductsPage.tsx
index eb0f97b..820cdb1 100644
--- a/src/ProductsPage.tsx
+++ b/src/ProductsPage.tsx
@@ -1,10 +1,12 @@
 import { useEffect } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useQuery } from '@apollo/client/react'
-import './App.css'
 import ProductCard from './ProductCard'
 import { GET_PRODUCTS } from './graphql/queries'
 import type { Product } from './data/products'
+import LoadingState from './components/LoadingState'
+import ErrorMessage from './components/ErrorMessage'
+import PageContainer from './components/PageContainer'
 
 type ProductsPageProps = {
   addToCart: (productId: string) => void
@@ -24,25 +26,22 @@ export default function ProductsPage({ addToCart, isHighlighted }: ProductsPageP
     window.scrollTo({ top: 0, behavior: 'smooth' })
   }, [location.pathname])
 
-  if (loading) return <div className="products-page">Loading products...</div>
-  if (error) return <div className="products-page">Error loading products: {error.message}</div>
+  if (loading) return <LoadingState message="Loading products..." />
+  if (error) return <ErrorMessage message={`Error loading products: ${error.message}`} />
 
   const products = data?.products || []
 
   return (
-    <div className="products-page">
-      <Link to="/" className="product-page__back">
-        ← Back to home
-      </Link>
-      <section className="product-grid">
-        <div className="section-heading">
-          <p className="eyebrow">Featured pieces</p>
-          <h2>Crafted to layer beautifully</h2>
-          <p>
+    <PageContainer backLink={{ to: '/', label: '← Back to home' }} innerClassName="py-8">
+      <section className="flex flex-col gap-10">
+        <div className="max-w-[520px]">
+          <p className="text-xs tracking-widest uppercase text-slate-400">Featured pieces</p>
+          <h2 className="m-0">Crafted to layer beautifully</h2>
+          <p className="m-0">
             Mix tactile fabrics, natural woods, and sculptural silhouettes for your signature look.
           </p>
         </div>
-        <div className="product-grid__items">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
           {products.map((product: Product) => (
             <ProductCard
               key={product.id}
@@ -53,6 +52,6 @@ export default function ProductsPage({ addToCart, isHighlighted }: ProductsPageP
           ))}
         </div>
       </section>
-    </div>
+    </PageContainer>
   )
 }
diff --git a/src/RegisterPage.tsx b/src/RegisterPage.tsx
index f5b6679..62d83a5 100644
--- a/src/RegisterPage.tsx
+++ b/src/RegisterPage.tsx
@@ -1,7 +1,9 @@
 import { useState, type FormEvent } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { useAuth } from './contexts/AuthContext'
-import './App.css'
+import FormField from './components/FormField'
+import ErrorMessage from './components/ErrorMessage'
+import PageContainer from './components/PageContainer'
 
 export default function RegisterPage() {
   const navigate = useNavigate()
@@ -35,108 +37,77 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="shop">
-      <div className="checkout-page">
-        <div className="checkout-page__content">
-          <div className="checkout-page__form-section" style={{ maxWidth: '500px', margin: '0 auto' }}>
-            <h1 className="checkout-page__title">Register</h1>
+    <PageContainer>
+      <div className="max-w-[500px] mx-auto">
+        <h1 className="text-4xl mb-8 m-0">Register</h1>
 
-            <form className="checkout-form" onSubmit={handleSubmit}>
-              {error && (
-                <div className="checkout-form__error">
-                  <p>{error}</p>
-                </div>
-              )}
+        <form className="flex flex-col gap-8" onSubmit={handleSubmit}>
+          {error && <ErrorMessage message={error} />}
 
-              <div className="checkout-form__row">
-                <div className="checkout-form__group">
-                  <label htmlFor="firstName" className="checkout-form__label">
-                    First Name
-                  </label>
-                  <input
-                    id="firstName"
-                    name="firstName"
-                    type="text"
-                    className="checkout-form__input"
-                    value={firstName}
-                    onChange={(e) => setFirstName(e.target.value)}
-                    required
-                    autoComplete="given-name"
-                  />
-                </div>
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              id="firstName"
+              name="firstName"
+              label="First Name"
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              required
+              autoComplete="given-name"
+            />
 
-                <div className="checkout-form__group">
-                  <label htmlFor="lastName" className="checkout-form__label">
-                    Last Name
-                  </label>
-                  <input
-                    id="lastName"
-                    name="lastName"
-                    type="text"
-                    className="checkout-form__input"
-                    value={lastName}
-                    onChange={(e) => setLastName(e.target.value)}
-                    required
-                    autoComplete="family-name"
-                  />
-                </div>
-              </div>
+            <FormField
+              id="lastName"
+              name="lastName"
+              label="Last Name"
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              required
+              autoComplete="family-name"
+            />
+          </div>
 
-              <div className="checkout-form__group">
-                <label htmlFor="email" className="checkout-form__label">
-                  Email
-                </label>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  className="checkout-form__input"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  autoComplete="email"
-                />
-              </div>
+          <FormField
+            id="email"
+            name="email"
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+          />
 
-              <div className="checkout-form__group">
-                <label htmlFor="password" className="checkout-form__label">
-                  Password
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  className="checkout-form__input"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  autoComplete="new-password"
-                  minLength={6}
-                />
-                <small style={{ display: 'block', marginTop: '0.25rem', color: '#666' }}>
-                  Must be at least 6 characters
-                </small>
-              </div>
+          <FormField
+            id="password"
+            name="password"
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+            minLength={6}
+            small="Must be at least 6 characters"
+          />
 
-              <button
-                type="submit"
-                className="btn btn--primary btn--full checkout-form__submit"
-                disabled={loading}
-              >
-                {loading ? 'Registering...' : 'Register'}
-              </button>
+          <button
+            type="submit"
+            className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 w-full text-center mt-4 disabled:opacity-60 disabled:cursor-not-allowed"
+            disabled={loading}
+          >
+            {loading ? 'Registering...' : 'Register'}
+          </button>
 
-              <p style={{ textAlign: 'center', marginTop: '1rem' }}>
-                Already have an account?{' '}
-                <Link to="/login" style={{ color: 'inherit', textDecoration: 'underline' }}>
-                  Login here
-                </Link>
-              </p>
-            </form>
-          </div>
-        </div>
+          <p className="text-center mt-4">
+            Already have an account?{' '}
+            <Link to="/login" className="text-inherit underline">
+              Login here
+            </Link>
+          </p>
+        </form>
       </div>
-    </div>
+    </PageContainer>
   )
 }
-
diff --git a/src/Reviews.tsx b/src/Reviews.tsx
index 85f8cf4..4b34f58 100644
--- a/src/Reviews.tsx
+++ b/src/Reviews.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
-import './App.css'
+import ReviewItem from './components/reviews/ReviewItem'
+import ReviewForm from './components/reviews/ReviewForm'
 
 type Review = {
   id: string
@@ -10,76 +11,12 @@ type Review = {
   date: string
 }
 
-type StarRatingProps = {
-  rating: number
-  onRatingChange?: (rating: number) => void
-  interactive?: boolean
-}
-
-function StarRating({ rating, onRatingChange, interactive = false }: StarRatingProps) {
-  const [hoverRating, setHoverRating] = useState(0)
-
-  const handleClick = (value: number) => {
-    if (interactive && onRatingChange) {
-      onRatingChange(value)
-    }
-  }
-
-  const handleMouseEnter = (value: number) => {
-    if (interactive) {
-      setHoverRating(value)
-    }
-  }
-
-  const handleMouseLeave = () => {
-    if (interactive) {
-      setHoverRating(0)
-    }
-  }
-
-  const displayRating = hoverRating || rating
-
-  return (
-    <div
-      className="star-rating"
-      role={interactive ? 'radiogroup' : 'img'}
-      aria-label={`Rating: ${rating} out of 5 stars`}
-    >
-      {[1, 2, 3, 4, 5].map((value) => (
-        <button
-          key={value}
-          type="button"
-          className={`star-rating__star ${value <= displayRating ? 'star-rating__star--filled' : ''} ${interactive ? 'star-rating__star--interactive' : ''}`}
-          onClick={() => handleClick(value)}
-          onMouseEnter={() => handleMouseEnter(value)}
-          onMouseLeave={handleMouseLeave}
-          disabled={!interactive}
-          aria-label={`${value} star${value !== 1 ? 's' : ''}`}
-        >
-          ★
-        </button>
-      ))}
-    </div>
-  )
-}
-
 type ReviewsProps = {
   productId: string
 }
 
-function generateCaptcha() {
-  const num1 = Math.floor(Math.random() * 10) + 1
-  const num2 = Math.floor(Math.random() * 10) + 1
-  return { question: `${num1} + ${num2}`, answer: num1 + num2 }
-}
-
 export default function Reviews({ productId }: ReviewsProps) {
   const [reviews, setReviews] = useState<Review[]>([])
-  const [name, setName] = useState('')
-  const [text, setText] = useState('')
-  const [rating, setRating] = useState(0)
-  const [captcha, setCaptcha] = useState(generateCaptcha())
-  const [captchaAnswer, setCaptchaAnswer] = useState('')
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -104,155 +41,53 @@ export default function Reviews({ productId }: ReviewsProps) {
     loadReviews()
   }, [productId])
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-
-    if (!name.trim()) {
-      setError('Please enter your name')
-      return
-    }
-
-    if (!text.trim()) {
-      setError('Please enter your review')
-      return
-    }
-
-    if (rating === 0) {
-      setError('Please select a rating')
-      return
-    }
-
-    const answer = parseInt(captchaAnswer, 10)
-    if (isNaN(answer) || answer !== captcha.answer) {
-      setError('Incorrect captcha answer. Please try again.')
-      setCaptcha(generateCaptcha())
-      setCaptchaAnswer('')
-      return
-    }
-
+  const handleSubmit = async (review: { name: string; text: string; rating: number }) => {
     setIsSubmitting(true)
+    setError('')
 
     // Simulate a brief delay for better UX
-    setTimeout(() => {
-      const newReview: Review = {
-        id: Date.now().toString(),
-        productId,
-        name: name.trim(),
-        text: text.trim(),
-        rating,
-        date: new Date().toISOString(),
-      }
-
-      const updatedReviews = [newReview, ...reviews]
-      setReviews(updatedReviews)
-      localStorage.setItem(`reviews-${productId}`, JSON.stringify(updatedReviews))
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        const newReview: Review = {
+          id: Date.now().toString(),
+          productId,
+          name: review.name,
+          text: review.text,
+          rating: review.rating,
+          date: new Date().toISOString(),
+        }
 
-      // Dispatch custom event to notify other components
-      window.dispatchEvent(new CustomEvent('reviewAdded', { detail: { productId } }))
+        const updatedReviews = [newReview, ...reviews]
+        setReviews(updatedReviews)
+        localStorage.setItem(`reviews-${productId}`, JSON.stringify(updatedReviews))
 
-      // Reset form
-      setName('')
-      setText('')
-      setRating(0)
-      setCaptchaAnswer('')
-      setCaptcha(generateCaptcha())
-      setIsSubmitting(false)
-      setError('')
-    }, 300)
-  }
+        // Dispatch custom event to notify other components
+        window.dispatchEvent(new CustomEvent('reviewAdded', { detail: { productId } }))
 
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
+        setIsSubmitting(false)
+        resolve()
+      }, 300)
     })
   }
 
   return (
-    <section className="reviews">
-      <h2 className="reviews__title">Customer Reviews</h2>
+    <section className="mt-16 pt-12 border-t border-slate-200">
+      <h2 className="text-3xl m-0 mb-8">Customer Reviews</h2>
 
       {reviews.length > 0 && (
-        <div className="reviews__list">
+        <div className="flex flex-col gap-6 mb-12">
           {reviews.map((review) => (
-            <article key={review.id} className="review">
-              <div className="review__header">
-                <div>
-                  <p className="review__name">{review.name}</p>
-                  <StarRating rating={review.rating} />
-                </div>
-                <time className="review__date" dateTime={review.date}>
-                  {formatDate(review.date)}
-                </time>
-              </div>
-              <p className="review__text">{review.text}</p>
-            </article>
+            <ReviewItem key={review.id} review={review} />
           ))}
         </div>
       )}
 
-      <form className="reviews__form" onSubmit={handleSubmit}>
-        <h3 className="reviews__form-title">Write a review</h3>
-
-        <div className="reviews__form-group">
-          <label htmlFor="review-name" className="reviews__label">
-            Your name
-          </label>
-          <input
-            id="review-name"
-            type="text"
-            className="reviews__input"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Enter your name"
-            disabled={isSubmitting}
-          />
-        </div>
-
-        <div className="reviews__form-group">
-          <label className="reviews__label">Your rating</label>
-          <StarRating rating={rating} onRatingChange={setRating} interactive />
-        </div>
-
-        <div className="reviews__form-group">
-          <label htmlFor="review-text" className="reviews__label">
-            Your review
-          </label>
-          <textarea
-            id="review-text"
-            className="reviews__textarea"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            placeholder="Share your thoughts about this product..."
-            rows={4}
-            disabled={isSubmitting}
-          />
-        </div>
-
-        <div className="reviews__form-group">
-          <label htmlFor="review-captcha" className="reviews__label">
-            Verification: What is {captcha.question}?
-          </label>
-          <input
-            id="review-captcha"
-            type="text"
-            className="reviews__input reviews__input--captcha"
-            value={captchaAnswer}
-            onChange={(e) => setCaptchaAnswer(e.target.value)}
-            placeholder="Enter answer"
-            disabled={isSubmitting}
-          />
-        </div>
-
-        {error && <p className="reviews__error">{error}</p>}
-
-        <button type="submit" className="btn btn--primary reviews__submit" disabled={isSubmitting}>
-          {isSubmitting ? 'Submitting...' : 'Submit Review'}
-        </button>
-      </form>
+      <ReviewForm
+        onSubmit={handleSubmit}
+        isSubmitting={isSubmitting}
+        error={error}
+        onError={setError}
+      />
     </section>
   )
 }
diff --git a/src/UserOrdersPage.tsx b/src/UserOrdersPage.tsx
index c68f1c5..8769439 100644
--- a/src/UserOrdersPage.tsx
+++ b/src/UserOrdersPage.tsx
@@ -1,14 +1,11 @@
-import { Link } from 'react-router-dom'
 import { useEffect } from 'react'
 import { useQuery } from '@apollo/client/react'
 import { useAuth } from './contexts/AuthContext'
 import { MY_ORDERS } from './graphql/queries'
-import './App.css'
-
-const currency = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
+import LoadingState from './components/LoadingState'
+import EmptyState from './components/EmptyState'
+import PageContainer from './components/PageContainer'
+import OrderCard from './components/orders/OrderCard'
 
 type OrderItem = {
   productId: string
@@ -30,27 +27,6 @@ type MyOrdersQueryResult = {
   myOrders: Order[]
 }
 
-function getStatusColor(status: string): string {
-  switch (status) {
-    case 'completed':
-      return '#22c55e'
-    case 'processing':
-      return '#3b82f6'
-    case 'pending':
-      return '#f59e0b'
-    case 'failed':
-      return '#ef4444'
-    case 'cancelled':
-      return '#6b7280'
-    default:
-      return '#6b7280'
-  }
-}
-
-function getStatusLabel(status: string): string {
-  return status.charAt(0).toUpperCase() + status.slice(1)
-}
-
 export default function UserOrdersPage() {
   const { isAuthenticated, token } = useAuth()
   const { loading, error, data } = useQuery<MyOrdersQueryResult>(MY_ORDERS, {
@@ -69,15 +45,7 @@ export default function UserOrdersPage() {
   }, [isAuthenticated, token])
 
   if (loading) {
-    return (
-      <div className="shop">
-        <div className="checkout-page">
-          <div className="checkout-page__empty">
-            <h1>Loading your orders...</h1>
-          </div>
-        </div>
-      </div>
-    )
+    return <LoadingState message="Loading your orders..." />
   }
 
   if (error) {
@@ -87,32 +55,21 @@ export default function UserOrdersPage() {
       networkError?: { message: string }
       graphQLErrors?: Array<{ message: string }>
     }
+    const errorMessage = [
+      apolloError.message,
+      apolloError.networkError?.message,
+      ...(apolloError.graphQLErrors?.map((err) => err.message) || []),
+    ]
+      .filter(Boolean)
+      .join('. ')
+
     return (
-      <div className="shop">
-        <div className="checkout-page">
-          <div className="checkout-page__empty">
-            <h1>Error loading orders</h1>
-            <p>{apolloError.message}</p>
-            {apolloError.networkError && (
-              <p style={{ color: '#ef4444', marginTop: '0.5rem' }}>
-                Network error: {apolloError.networkError.message}
-              </p>
-            )}
-            {apolloError.graphQLErrors && apolloError.graphQLErrors.length > 0 && (
-              <div style={{ marginTop: '0.5rem' }}>
-                {apolloError.graphQLErrors.map((err: { message: string }, idx: number) => (
-                  <p key={idx} style={{ color: '#ef4444' }}>
-                    {err.message}
-                  </p>
-                ))}
-              </div>
-            )}
-            <Link to="/products" className="btn btn--primary" style={{ marginTop: '1rem' }}>
-              Continue Shopping
-            </Link>
-          </div>
-        </div>
-      </div>
+      <EmptyState
+        title="Error loading orders"
+        message={errorMessage}
+        actionLabel="Continue Shopping"
+        actionTo="/products"
+      />
     )
   }
 
@@ -120,114 +77,26 @@ export default function UserOrdersPage() {
 
   if (orders.length === 0) {
     return (
-      <div className="shop">
-        <div className="checkout-page">
-          <div className="checkout-page__empty">
-            <h1>No orders yet</h1>
-            <p>You haven't placed any orders yet. Start shopping to see your orders here.</p>
-            <Link to="/products" className="btn btn--primary">
-              Start Shopping
-            </Link>
-          </div>
-        </div>
-      </div>
+      <EmptyState
+        title="No orders yet"
+        message="You haven't placed any orders yet. Start shopping to see your orders here."
+        actionLabel="Start Shopping"
+        actionTo="/products"
+      />
     )
   }
 
   return (
-    <div className="shop">
-      <div className="checkout-page">
-        <Link to="/products" className="product-page__back">
-          ← Back to products
-        </Link>
-
-        <div className="checkout-page__content">
-          <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
-            <h1 className="checkout-page__title">My Orders</h1>
-
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-              {orders.map((order) => (
-                <div
-                  key={order.id}
-                  style={{
-                    border: '1px solid #e5e7eb',
-                    borderRadius: '8px',
-                    padding: '1.5rem',
-                    backgroundColor: '#fff',
-                  }}
-                >
-                  <div
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'flex-start',
-                      marginBottom: '1rem',
-                    }}
-                  >
-                    <div>
-                      <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.125rem' }}>
-                        Order #{order.id.slice(0, 8)}
-                      </h3>
-                      <p style={{ margin: 0, color: '#6b7280', fontSize: '0.875rem' }}>
-                        {new Date(order.createdAt).toLocaleDateString('en-US', {
-                          year: 'numeric',
-                          month: 'long',
-                          day: 'numeric',
-                        })}
-                      </p>
-                    </div>
-                    <div style={{ textAlign: 'right' }}>
-                      <div
-                        style={{
-                          display: 'inline-block',
-                          padding: '0.25rem 0.75rem',
-                          borderRadius: '9999px',
-                          backgroundColor: getStatusColor(order.status) + '20',
-                          color: getStatusColor(order.status),
-                          fontSize: '0.875rem',
-                          fontWeight: '500',
-                          marginBottom: '0.5rem',
-                        }}
-                      >
-                        {getStatusLabel(order.status)}
-                      </div>
-                      <div style={{ fontSize: '1.25rem', fontWeight: '600' }}>
-                        {currency.format(order.total)}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div style={{ marginBottom: '1rem' }}>
-                    <p style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', color: '#6b7280' }}>
-                      Items:
-                    </p>
-                    <ul style={{ margin: 0, paddingLeft: '1.25rem', listStyle: 'disc' }}>
-                      {order.items.map((item, index) => (
-                        <li key={index} style={{ marginBottom: '0.25rem' }}>
-                          {item.name} × {item.quantity} -{' '}
-                          {currency.format(item.price * item.quantity)}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-
-                  <Link
-                    to={`/checkout/${order.id}/success`}
-                    style={{
-                      display: 'inline-block',
-                      color: 'inherit',
-                      textDecoration: 'underline',
-                      fontSize: '0.875rem',
-                    }}
-                  >
-                    View order details →
-                  </Link>
-                </div>
-              ))}
-            </div>
-          </div>
+    <PageContainer backLink={{ to: '/products', label: '← Back to products' }}>
+      <div className="w-full max-w-3xl mx-auto">
+        <h1 className="text-4xl mb-8 m-0">My Orders</h1>
+
+        <div className="flex flex-col gap-6">
+          {orders.map((order) => (
+            <OrderCard key={order.id} order={order} />
+          ))}
         </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }
diff --git a/src/components/BackLink.tsx b/src/components/BackLink.tsx
new file mode 100644
index 0000000..ed6f115
--- /dev/null
+++ b/src/components/BackLink.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom'
+
+type BackLinkProps = {
+  to: string
+  label?: string
+  className?: string
+}
+
+export default function BackLink({
+  to,
+  label = '← Back',
+  className = '',
+}: BackLinkProps) {
+  return (
+    <Link to={to} className={`inline-flex items-center gap-2 text-slate-600 no-underline mb-8 text-sm transition-colors hover:text-slate-900 ${className}`}>
+      {label}
+    </Link>
+  )
+}
+
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
new file mode 100644
index 0000000..12ba30c
--- /dev/null
+++ b/src/components/EmptyState.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom'
+
+type EmptyStateProps = {
+  title: string
+  message?: string
+  actionLabel?: string
+  actionTo?: string
+  onAction?: () => void
+  className?: string
+}
+
+export default function EmptyState({
+  title,
+  message,
+  actionLabel,
+  actionTo,
+  onAction,
+  className = '',
+}: EmptyStateProps) {
+  return (
+    <div className="max-w-[1400px] mx-auto px-8 py-16 flex flex-col gap-12">
+      <div className="max-w-[1400px] mx-auto px-8 py-8">
+        <div className={`text-center py-16 px-8 flex flex-col gap-6 items-center ${className}`}>
+          <h1 className="text-4xl m-0">{title}</h1>
+          {message && <p className="text-slate-600 text-lg m-0">{message}</p>}
+          {actionLabel && (
+            <>
+              {actionTo ? (
+                <Link
+                  to={actionTo}
+                  className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5"
+                >
+                  {actionLabel}
+                </Link>
+              ) : onAction ? (
+                <button
+                  type="button"
+                  className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5"
+                  onClick={onAction}
+                >
+                  {actionLabel}
+                </button>
+              ) : null}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
new file mode 100644
index 0000000..947f69d
--- /dev/null
+++ b/src/components/ErrorMessage.tsx
@@ -0,0 +1,13 @@
+type ErrorMessageProps = {
+  message: string
+  className?: string
+}
+
+export default function ErrorMessage({ message, className = '' }: ErrorMessageProps) {
+  return (
+    <div className={`bg-orange-50 border border-orange-200 rounded-xl p-4 text-orange-600 ${className}`}>
+      <p className="m-0">{message}</p>
+    </div>
+  )
+}
+
diff --git a/src/components/FormField.tsx b/src/components/FormField.tsx
new file mode 100644
index 0000000..c5a4306
--- /dev/null
+++ b/src/components/FormField.tsx
@@ -0,0 +1,62 @@
+import type { ChangeEvent } from 'react'
+
+type FormFieldProps = {
+  id: string
+  name: string
+  label: string
+  type?: string
+  value: string
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void
+  required?: boolean
+  placeholder?: string
+  autoComplete?: string
+  disabled?: boolean
+  minLength?: number
+  rows?: number
+  className?: string
+  small?: React.ReactNode
+}
+
+export default function FormField({
+  id,
+  name,
+  label,
+  type = 'text',
+  value,
+  onChange,
+  required = false,
+  placeholder,
+  autoComplete,
+  disabled = false,
+  minLength,
+  rows,
+  className = '',
+  small,
+}: FormFieldProps) {
+  const isTextarea = type === 'textarea'
+  const InputComponent = isTextarea ? 'textarea' : 'input'
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label htmlFor={id} className="text-sm font-semibold text-slate-900">
+        {label}
+      </label>
+      <InputComponent
+        id={id}
+        name={name}
+        type={isTextarea ? undefined : type}
+        className={`px-4 py-3 border border-slate-200 rounded-xl text-base font-inherit bg-white text-slate-900 transition-colors focus:outline-none focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:opacity-60 disabled:cursor-not-allowed ${className}`}
+        value={value}
+        onChange={onChange}
+        required={required}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        disabled={disabled}
+        minLength={minLength}
+        rows={rows}
+      />
+      {small && <small className="block mt-1 text-slate-500">{small}</small>}
+    </div>
+  )
+}
+
diff --git a/src/components/LoadingState.tsx b/src/components/LoadingState.tsx
new file mode 100644
index 0000000..b8179d8
--- /dev/null
+++ b/src/components/LoadingState.tsx
@@ -0,0 +1,19 @@
+type LoadingStateProps = {
+  message?: string
+  className?: string
+}
+
+export default function LoadingState({
+  message = 'Loading...',
+  className = '',
+}: LoadingStateProps) {
+  return (
+    <div className="max-w-[1400px] mx-auto px-8 py-16 flex flex-col gap-12">
+      <div className="max-w-[1400px] mx-auto px-8 py-8">
+        <div className={`text-center py-16 px-8 flex flex-col gap-6 items-center ${className}`}>
+          <h1 className="text-4xl m-0">{message}</h1>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
new file mode 100644
index 0000000..8fef245
--- /dev/null
+++ b/src/components/PageContainer.tsx
@@ -0,0 +1,28 @@
+import BackLink from './BackLink'
+
+type PageContainerProps = {
+  children: React.ReactNode
+  backLink?: {
+    to: string
+    label: string
+  }
+  className?: string
+  innerClassName?: string
+}
+
+export default function PageContainer({
+  children,
+  backLink,
+  className = '',
+  innerClassName = '',
+}: PageContainerProps) {
+  return (
+    <div className={`max-w-[1400px] mx-auto px-8 py-16 flex flex-col gap-12 ${className}`}>
+      <div className={`max-w-[1400px] mx-auto px-8 py-8 ${innerClassName}`}>
+        {backLink && <BackLink to={backLink.to} label={backLink.label} />}
+        {children}
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/checkout/EmptyCartState.tsx b/src/components/checkout/EmptyCartState.tsx
new file mode 100644
index 0000000..2b5bdb9
--- /dev/null
+++ b/src/components/checkout/EmptyCartState.tsx
@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom'
+import EmptyState from '../EmptyState'
+
+export default function EmptyCartState() {
+  const navigate = useNavigate()
+
+  return (
+    <EmptyState
+      title="Your cart is empty"
+      message="Add items to your cart before proceeding to checkout."
+      actionLabel="Continue Shopping"
+      onAction={() => navigate('/products')}
+    />
+  )
+}
+
diff --git a/src/components/checkout/OrderSummary.tsx b/src/components/checkout/OrderSummary.tsx
new file mode 100644
index 0000000..e426a4b
--- /dev/null
+++ b/src/components/checkout/OrderSummary.tsx
@@ -0,0 +1,53 @@
+import type { Product } from '../../data/products'
+
+const currency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+})
+
+type CartLineItem = {
+  product: Product
+  quantity: number
+}
+
+type OrderSummaryProps = {
+  cartItems: CartLineItem[]
+  subtotal: number
+  shipping: number
+  total: number
+}
+
+export default function OrderSummary({ cartItems, subtotal, shipping, total }: OrderSummaryProps) {
+  return (
+    <div className="bg-white border border-slate-200 rounded-3xl p-8 h-fit sticky top-8">
+      <h2 className="text-2xl mb-6 font-semibold">Order Summary</h2>
+      <div className="flex flex-col gap-4 mb-8 pb-8 border-b border-slate-200">
+        {cartItems.map((item) => (
+          <div key={item.product.id} className="flex justify-between items-start gap-4">
+            <div className="flex-1">
+              <h3 className="text-base mb-1 font-semibold">{item.product.name}</h3>
+              <p className="text-sm text-slate-600 m-0">Quantity: {item.quantity}</p>
+            </div>
+            <div className="font-semibold text-base">
+              {currency.format(item.product.price * item.quantity)}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-col gap-3">
+        <div className="flex justify-between text-slate-600">
+          <span>Subtotal</span>
+          <span>{currency.format(subtotal)}</span>
+        </div>
+        <div className="flex justify-between text-slate-600">
+          <span>Shipping</span>
+          <span>{shipping === 0 ? 'Complimentary' : currency.format(shipping)}</span>
+        </div>
+        <div className="flex justify-between text-xl text-slate-900 font-semibold pt-3 border-t border-slate-200">
+          <span>Total</span>
+          <span>{currency.format(total)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/checkout/PaymentMethodSelect.tsx b/src/components/checkout/PaymentMethodSelect.tsx
new file mode 100644
index 0000000..cb406b4
--- /dev/null
+++ b/src/components/checkout/PaymentMethodSelect.tsx
@@ -0,0 +1,32 @@
+import type { ChangeEvent } from 'react'
+
+type PaymentMethodSelectProps = {
+  value: string
+  onChange: (e: ChangeEvent<HTMLSelectElement>) => void
+}
+
+export default function PaymentMethodSelect({ value, onChange }: PaymentMethodSelectProps) {
+  return (
+    <section className="bg-white border border-slate-200 rounded-3xl p-8 flex flex-col gap-6">
+      <h2 className="text-xl mb-2 font-semibold">Payment Method</h2>
+      <div className="flex flex-col gap-2">
+        <label htmlFor="paymentMethod" className="text-sm font-semibold text-slate-900">
+          Payment Method
+        </label>
+        <select
+          id="paymentMethod"
+          name="paymentMethod"
+          className="px-4 py-3 border border-slate-200 rounded-xl text-base font-inherit bg-white text-slate-900 transition-colors focus:outline-none focus:border-orange-500 focus:ring-2 focus:ring-orange-100"
+          value={value}
+          onChange={onChange}
+          required
+        >
+          <option value="CREDIT_CARD">Credit Card</option>
+          <option value="DEBIT_CARD">Debit Card</option>
+          <option value="PAYPAL">PayPal</option>
+          <option value="BANK_TRANSFER">Bank Transfer</option>
+        </select>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/checkout/ShippingAddressForm.tsx b/src/components/checkout/ShippingAddressForm.tsx
new file mode 100644
index 0000000..7c19b0e
--- /dev/null
+++ b/src/components/checkout/ShippingAddressForm.tsx
@@ -0,0 +1,94 @@
+import type { ChangeEvent } from 'react'
+import FormField from '../FormField'
+
+type ShippingAddressFormProps = {
+  formData: {
+    firstName: string
+    lastName: string
+    address: string
+    city: string
+    state: string
+    zipCode: string
+    country: string
+  }
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void
+}
+
+export default function ShippingAddressForm({ formData, onChange }: ShippingAddressFormProps) {
+  return (
+    <section className="bg-white border border-slate-200 rounded-3xl p-8 flex flex-col gap-6">
+      <h2 className="text-xl mb-2 font-semibold">Shipping Address</h2>
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
+        <FormField
+          id="firstName"
+          name="firstName"
+          label="First Name"
+          type="text"
+          value={formData.firstName}
+          onChange={onChange}
+          required
+        />
+        <FormField
+          id="lastName"
+          name="lastName"
+          label="Last Name"
+          type="text"
+          value={formData.lastName}
+          onChange={onChange}
+          required
+        />
+      </div>
+
+      <FormField
+        id="address"
+        name="address"
+        label="Street Address"
+        type="text"
+        value={formData.address}
+        onChange={onChange}
+        required
+      />
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <FormField
+          id="city"
+          name="city"
+          label="City"
+          type="text"
+          value={formData.city}
+          onChange={onChange}
+          required
+        />
+        <FormField
+          id="state"
+          name="state"
+          label="State"
+          type="text"
+          value={formData.state}
+          onChange={onChange}
+          required
+        />
+        <FormField
+          id="zipCode"
+          name="zipCode"
+          label="ZIP Code"
+          type="text"
+          value={formData.zipCode}
+          onChange={onChange}
+          required
+        />
+      </div>
+
+      <FormField
+        id="country"
+        name="country"
+        label="Country"
+        type="text"
+        value={formData.country}
+        onChange={onChange}
+        required
+      />
+    </section>
+  )
+}
+
diff --git a/src/components/orders/OrderCard.tsx b/src/components/orders/OrderCard.tsx
new file mode 100644
index 0000000..eaefd87
--- /dev/null
+++ b/src/components/orders/OrderCard.tsx
@@ -0,0 +1,75 @@
+import { Link } from 'react-router-dom'
+import StatusBadge from './StatusBadge'
+
+const currency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+})
+
+type OrderItem = {
+  productId: string
+  name: string
+  quantity: number
+  price: number
+}
+
+type Order = {
+  id: string
+  status: string
+  total: number
+  items: OrderItem[]
+  paymentMethod: string
+  createdAt: string
+}
+
+type OrderCardProps = {
+  order: Order
+}
+
+export default function OrderCard({ order }: OrderCardProps) {
+  return (
+    <div className="border border-slate-200 rounded-lg p-6 bg-white">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="m-0 mb-2 text-lg">
+            Order #{order.id.slice(0, 8)}
+          </h3>
+          <p className="m-0 text-sm text-slate-500">
+            {new Date(order.createdAt).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </p>
+        </div>
+        <div className="text-right">
+          <StatusBadge status={order.status} />
+          <div className="text-xl font-semibold">
+            {currency.format(order.total)}
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <p className="m-0 mb-2 text-sm text-slate-500">
+          Items:
+        </p>
+        <ul className="m-0 pl-5 list-disc">
+          {order.items.map((item, index) => (
+            <li key={index} className="mb-1">
+              {item.name} × {item.quantity} - {currency.format(item.price * item.quantity)}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <Link
+        to={`/checkout/${order.id}/success`}
+        className="inline-block text-inherit underline text-sm"
+      >
+        View order details →
+      </Link>
+    </div>
+  )
+}
+
diff --git a/src/components/orders/StatusBadge.tsx b/src/components/orders/StatusBadge.tsx
new file mode 100644
index 0000000..9579e3d
--- /dev/null
+++ b/src/components/orders/StatusBadge.tsx
@@ -0,0 +1,28 @@
+type StatusBadgeProps = {
+  status: string
+}
+
+function getStatusLabel(status: string): string {
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+
+export default function StatusBadge({ status }: StatusBadgeProps) {
+  const label = getStatusLabel(status)
+  
+  const statusClasses: Record<string, string> = {
+    completed: 'bg-green-100 text-green-600',
+    processing: 'bg-blue-100 text-blue-600',
+    pending: 'bg-amber-100 text-amber-600',
+    failed: 'bg-red-100 text-red-600',
+    cancelled: 'bg-slate-100 text-slate-600',
+  }
+
+  return (
+    <div className={`inline-block px-3 py-1 rounded-full text-sm font-medium mb-2 ${
+      statusClasses[status] || statusClasses.cancelled
+    }`}>
+      {label}
+    </div>
+  )
+}
+
diff --git a/src/components/product/AddToCartButton.tsx b/src/components/product/AddToCartButton.tsx
new file mode 100644
index 0000000..149b7f1
--- /dev/null
+++ b/src/components/product/AddToCartButton.tsx
@@ -0,0 +1,48 @@
+type AddToCartButtonProps = {
+  onClick: () => void
+  isHighlighted: boolean
+  className?: string
+  highlightClassName?: string
+  checkmarkClassName?: string
+}
+
+export default function AddToCartButton({
+  onClick,
+  isHighlighted,
+  className = '',
+  highlightClassName = '',
+  checkmarkClassName = '',
+}: AddToCartButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`self-start rounded-full border-none bg-slate-900 text-white px-8 py-3 uppercase tracking-wider text-sm font-semibold cursor-pointer transition-all inline-flex items-center gap-2 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-900/20 ${
+        isHighlighted ? 'bg-green-500' : ''
+      } ${className} ${isHighlighted ? highlightClassName : ''}`}
+      onClick={onClick}
+    >
+      Add to bag
+      {isHighlighted && (
+        <span className={`inline-flex items-center -mr-1 ${checkmarkClassName}`} aria-label="Added to bag">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="stroke-currentColor"
+          >
+            <path
+              d="M13.3333 4L6 11.3333L2.66667 8"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+      )}
+    </button>
+  )
+}
+
diff --git a/src/components/product/ColorSelector.tsx b/src/components/product/ColorSelector.tsx
new file mode 100644
index 0000000..f383bda
--- /dev/null
+++ b/src/components/product/ColorSelector.tsx
@@ -0,0 +1,43 @@
+type ColorSelectorProps = {
+  colors: string[]
+  selectedColor: string | null
+  onColorSelect: (color: string) => void
+  className?: string
+  labelClassName?: string
+  listClassName?: string
+  optionClassName?: string
+}
+
+export default function ColorSelector({
+  colors,
+  selectedColor,
+  onColorSelect,
+  className = '',
+  labelClassName = '',
+  listClassName = '',
+  optionClassName = '',
+}: ColorSelectorProps) {
+  return (
+    <div className={`flex flex-col gap-4 ${className}`}>
+      <p className={`text-sm text-slate-600 m-0 font-semibold ${labelClassName}`}>Available colors:</p>
+      <div className={`flex flex-wrap gap-3 ${listClassName}`}>
+        {colors.map((color: string) => (
+          <button
+            key={color}
+            type="button"
+            className={`px-5 py-2.5 border rounded-full text-sm cursor-pointer transition-all text-slate-900 ${
+              selectedColor === color
+                ? 'bg-orange-500 text-white border-orange-500'
+                : 'bg-white border-slate-200 hover:border-orange-500 hover:-translate-y-0.5'
+            } ${optionClassName}`}
+            onClick={() => onColorSelect(color)}
+            aria-label={`Select color ${color}`}
+          >
+            {color}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/product/ProductDetails.tsx b/src/components/product/ProductDetails.tsx
new file mode 100644
index 0000000..9d46b86
--- /dev/null
+++ b/src/components/product/ProductDetails.tsx
@@ -0,0 +1,59 @@
+import type { Product } from '../../data/products'
+import ProductMeta from './ProductMeta'
+import ColorSelector from './ColorSelector'
+import AddToCartButton from './AddToCartButton'
+
+type ProductDetailsProps = {
+  product: Product
+  averageRating: number | null
+  selectedColor: string | null
+  onColorSelect: (color: string) => void
+  onAddToCart: () => void
+  isHighlighted: boolean
+}
+
+export default function ProductDetails({
+  product,
+  averageRating,
+  selectedColor,
+  onColorSelect,
+  onAddToCart,
+  isHighlighted,
+}: ProductDetailsProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      <p className="uppercase tracking-widest text-xs text-slate-400 m-0">{product.category}</p>
+      <h1 className="text-4xl lg:text-5xl leading-tight m-0">{product.name}</h1>
+      <p className="text-lg leading-relaxed text-slate-600 m-0">{product.description}</p>
+
+      <ProductMeta product={product} averageRating={averageRating} />
+
+      <ColorSelector
+        colors={product.colors}
+        selectedColor={selectedColor}
+        onColorSelect={onColorSelect}
+      />
+
+      <AddToCartButton onClick={onAddToCart} isHighlighted={isHighlighted} />
+
+      <div className="mt-4 pt-8 border-t border-slate-200">
+        <h3 className="text-xl mb-4 m-0">Product details</h3>
+        <ul className="list-none p-0 m-0 flex flex-col gap-3 text-slate-600">
+          <li className="pl-6 relative before:content-['•'] before:absolute before:left-0 before:text-orange-500 before:font-bold">
+            Premium materials and craftsmanship
+          </li>
+          <li className="pl-6 relative before:content-['•'] before:absolute before:left-0 before:text-orange-500 before:font-bold">
+            30-day return policy
+          </li>
+          <li className="pl-6 relative before:content-['•'] before:absolute before:left-0 before:text-orange-500 before:font-bold">
+            Complimentary shipping on orders over $150
+          </li>
+          <li className="pl-6 relative before:content-['•'] before:absolute before:left-0 before:text-orange-500 before:font-bold">
+            Design consultation available
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/product/ProductImage.tsx b/src/components/product/ProductImage.tsx
new file mode 100644
index 0000000..02dd8de
--- /dev/null
+++ b/src/components/product/ProductImage.tsx
@@ -0,0 +1,20 @@
+import type { Product } from '../../data/products'
+
+type ProductImageProps = {
+  product: Product
+  className?: string
+}
+
+export default function ProductImage({ product, className = '' }: ProductImageProps) {
+  return (
+    <div className={`relative rounded-3xl overflow-hidden aspect-[4/3] bg-white border border-slate-200 ${className}`}>
+      <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
+      {product.badge && (
+        <span className="absolute top-4 left-4 bg-black/65 text-white px-3 py-1.5 rounded-full text-xs">
+          {product.badge}
+        </span>
+      )}
+    </div>
+  )
+}
+
diff --git a/src/components/product/ProductMeta.tsx b/src/components/product/ProductMeta.tsx
new file mode 100644
index 0000000..ac4689d
--- /dev/null
+++ b/src/components/product/ProductMeta.tsx
@@ -0,0 +1,32 @@
+import type { Product } from '../../data/products'
+
+const currency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+})
+
+type ProductMetaProps = {
+  product: Product
+  averageRating: number | null
+  className?: string
+  priceClassName?: string
+  ratingClassName?: string
+}
+
+export default function ProductMeta({
+  product,
+  averageRating,
+  className = '',
+  priceClassName = '',
+  ratingClassName = '',
+}: ProductMetaProps) {
+  return (
+    <div className={`flex items-center gap-6 text-2xl font-semibold ${className}`}>
+      <span className={`text-slate-900 ${priceClassName}`}>{currency.format(product.price)}</span>
+      {averageRating !== null && (
+        <span className={`text-slate-600 text-lg ${ratingClassName}`}>★ {averageRating.toFixed(1)}</span>
+      )}
+    </div>
+  )
+}
+
diff --git a/src/components/reviews/ReviewForm.tsx b/src/components/reviews/ReviewForm.tsx
new file mode 100644
index 0000000..9febd14
--- /dev/null
+++ b/src/components/reviews/ReviewForm.tsx
@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import StarRating from './StarRating'
+import ErrorMessage from '../ErrorMessage'
+
+function generateCaptcha() {
+  const num1 = Math.floor(Math.random() * 10) + 1
+  const num2 = Math.floor(Math.random() * 10) + 1
+  return { question: `${num1} + ${num2}`, answer: num1 + num2 }
+}
+
+type ReviewFormProps = {
+  onSubmit: (review: { name: string; text: string; rating: number }) => Promise<void>
+  isSubmitting: boolean
+  error: string
+  onError: (error: string) => void
+}
+
+export default function ReviewForm({ onSubmit, isSubmitting, error, onError }: ReviewFormProps) {
+  const [name, setName] = useState('')
+  const [text, setText] = useState('')
+  const [rating, setRating] = useState(0)
+  const [captcha, setCaptcha] = useState(generateCaptcha())
+  const [captchaAnswer, setCaptchaAnswer] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    onError('')
+
+    if (!name.trim()) {
+      onError('Please enter your name')
+      return
+    }
+
+    if (!text.trim()) {
+      onError('Please enter your review')
+      return
+    }
+
+    if (rating === 0) {
+      onError('Please select a rating')
+      return
+    }
+
+    const answer = parseInt(captchaAnswer, 10)
+    if (isNaN(answer) || answer !== captcha.answer) {
+      onError('Incorrect captcha answer. Please try again.')
+      setCaptcha(generateCaptcha())
+      setCaptchaAnswer('')
+      return
+    }
+
+    try {
+      await onSubmit({ name: name.trim(), text: text.trim(), rating })
+      // Reset form on success
+      setName('')
+      setText('')
+      setRating(0)
+      setCaptchaAnswer('')
+      setCaptcha(generateCaptcha())
+    } catch {
+      // Error handling is done by parent component
+    }
+  }
+
+  return (
+    <form
+      className="bg-white border border-slate-200 rounded-3xl p-8 flex flex-col gap-6"
+      onSubmit={handleSubmit}
+    >
+      <h3 className="text-xl m-0">Write a review</h3>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="review-name" className="text-sm font-semibold text-slate-900">
+          Your name
+        </label>
+        <input
+          id="review-name"
+          type="text"
+          className="px-4 py-3 border border-slate-200 rounded-xl text-base font-inherit bg-white text-slate-900 transition-colors focus:outline-none focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:opacity-60 disabled:cursor-not-allowed"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Enter your name"
+          disabled={isSubmitting}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label className="text-sm font-semibold text-slate-900">Your rating</label>
+        <StarRating rating={rating} onRatingChange={setRating} interactive />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="review-text" className="text-sm font-semibold text-slate-900">
+          Your review
+        </label>
+        <textarea
+          id="review-text"
+          className="px-4 py-3 border border-slate-200 rounded-xl text-base font-inherit bg-white text-slate-900 transition-colors focus:outline-none focus:border-orange-500 focus:ring-3 focus:ring-orange-100 disabled:opacity-60 disabled:cursor-not-allowed resize-y min-h-[100px]"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Share your thoughts about this product..."
+          rows={4}
+          disabled={isSubmitting}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="review-captcha" className="text-sm font-semibold text-slate-900">
+          Verification: What is {captcha.question}?
+        </label>
+        <input
+          id="review-captcha"
+          type="text"
+          className="px-4 py-3 border border-slate-200 rounded-xl text-base font-inherit bg-white text-slate-900 transition-colors focus:outline-none focus:border-orange-500 focus:ring-3 focus:ring-orange-100 disabled:opacity-60 disabled:cursor-not-allowed max-w-[120px]"
+          value={captchaAnswer}
+          onChange={(e) => setCaptchaAnswer(e.target.value)}
+          placeholder="Enter answer"
+          disabled={isSubmitting}
+        />
+      </div>
+
+      {error && <ErrorMessage message={error} />}
+
+      <button
+        type="submit"
+        className="rounded-full px-6 py-3.5 text-sm font-semibold cursor-pointer transition-all bg-orange-500 text-white shadow-lg shadow-orange-500/25 hover:-translate-y-0.5 self-start mt-2 disabled:opacity-60 disabled:cursor-not-allowed"
+        disabled={isSubmitting}
+      >
+        {isSubmitting ? 'Submitting...' : 'Submit Review'}
+      </button>
+    </form>
+  )
+}
diff --git a/src/components/reviews/ReviewItem.tsx b/src/components/reviews/ReviewItem.tsx
new file mode 100644
index 0000000..9aff753
--- /dev/null
+++ b/src/components/reviews/ReviewItem.tsx
@@ -0,0 +1,41 @@
+import StarRating from './StarRating'
+
+type Review = {
+  id: string
+  productId: string
+  name: string
+  text: string
+  rating: number
+  date: string
+}
+
+type ReviewItemProps = {
+  review: Review
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+export default function ReviewItem({ review }: ReviewItemProps) {
+  return (
+    <article className="bg-white border border-slate-200 rounded-3xl p-6 flex flex-col gap-3">
+      <div className="flex justify-between items-start gap-4 flex-wrap">
+        <div className="flex flex-col gap-2">
+          <p className="font-semibold m-0 text-slate-900">{review.name}</p>
+          <StarRating rating={review.rating} />
+        </div>
+        <time className="text-sm text-slate-600" dateTime={review.date}>
+          {formatDate(review.date)}
+        </time>
+      </div>
+      <p className="m-0 leading-relaxed text-slate-600">{review.text}</p>
+    </article>
+  )
+}
+
diff --git a/src/components/reviews/StarRating.tsx b/src/components/reviews/StarRating.tsx
new file mode 100644
index 0000000..3f81c99
--- /dev/null
+++ b/src/components/reviews/StarRating.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react'
+
+type StarRatingProps = {
+  rating: number
+  onRatingChange?: (rating: number) => void
+  interactive?: boolean
+}
+
+export default function StarRating({ rating, onRatingChange, interactive = false }: StarRatingProps) {
+  const [hoverRating, setHoverRating] = useState(0)
+
+  const handleClick = (value: number) => {
+    if (interactive && onRatingChange) {
+      onRatingChange(value)
+    }
+  }
+
+  const handleMouseEnter = (value: number) => {
+    if (interactive) {
+      setHoverRating(value)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (interactive) {
+      setHoverRating(0)
+    }
+  }
+
+  const displayRating = hoverRating || rating
+
+  return (
+    <div
+      className="inline-flex gap-1 items-center"
+      role={interactive ? 'radiogroup' : 'img'}
+      aria-label={`Rating: ${rating} out of 5 stars`}
+    >
+      {[1, 2, 3, 4, 5].map((value) => (
+        <button
+          key={value}
+          type="button"
+          className={`bg-none border-none p-0 text-xl leading-none transition-all ${
+            value <= displayRating ? 'text-amber-400' : 'text-slate-200'
+          } ${interactive ? 'cursor-pointer hover:scale-110' : 'cursor-default'}`}
+          onClick={() => handleClick(value)}
+          onMouseEnter={() => handleMouseEnter(value)}
+          onMouseLeave={handleMouseLeave}
+          disabled={!interactive}
+          aria-label={`${value} star${value !== 1 ? 's' : ''}`}
+        >
+          ★
+        </button>
+      ))}
+    </div>
+  )
+}
+
diff --git a/src/index.css b/src/index.css
index 615ab8a..81aaed3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,47 +1,44 @@
-:root {
-  font-family: 'Inter', 'Soehne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  line-height: 1.6;
-  font-weight: 400;
-  color: #0f172a;
-  background-color: #f7f4ef;
-  --text: #0f172a;
-  --muted: #94a3b8;
-  --muted-strong: #475569;
-  --card: #fff;
-  --border: rgba(15, 23, 42, 0.08);
-  --accent: #f15435;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@import 'tailwindcss';
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-body {
-  margin: 0;
-  min-height: 100vh;
-  background: #f7f4ef;
-}
+  body {
+    margin: 0;
+    min-height: 100vh;
+    background-color: #fafaf9;
+    font-family:
+      'Inter',
+      'Soehne',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      sans-serif;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 600;
-  margin: 0;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+    margin: 0;
+  }
 
-p {
-  margin: 0;
-}
+  p {
+    margin: 0;
+  }
 
-a {
-  color: inherit;
+  a {
+    color: inherit;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..d37737f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+