diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..7b467cd
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,37 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- `src/main.ts` bootstraps the Vue app, mounts `App.vue`, and registers Pinia + router.
+- `src/App.vue` hosts the layout shell; global theme styles live in `src/assets/main.css`.
+- `src/pages` holds route-level views (e.g., `HomePage.vue`), wired in `src/router/index.ts`.
+- `src/components` contains shareable UI (`Randomizer.vue`); aim to keep these presentational.
+- `src/stores` stores state and side effects (e.g., `randomData.ts` for `/api/randomize` and localStorage prefs); static datasets sit in `src/data`.
+- `public` serves static assets as-is; `vite.config.ts` configures aliases (`@` → `src`) and plugins.
+
+## Build, Test, and Development Commands
+- `npm run dev` — start Vite dev server with hot reload.
+- `npm run build` — type-check via `vue-tsc`, then produce the production bundle.
+- `npm run build-only` — production bundle without type-check (useful for quick iteration).
+- `npm run preview` — serve the built assets locally to verify production output.
+- `npm run type-check` — standalone TS/SFC type validation.
+
+## Coding Style & Naming Conventions
+- Vue 3 + TypeScript with `<script setup>`; keep logic typed and colocated with templates/styles.
+- Use 2-space indentation, single quotes for strings, and omit semicolons to match existing files.
+- Components/pages use PascalCase filenames; route-level views use a `Page` suffix.
+- Prefer `@/` alias imports over deep relatives; group imports by library/local.
+- Keep styles inside SFC blocks or `src/assets/main.css`; reuse existing CSS variables where possible.
+
+## Testing Guidelines
+- No automated tests exist yet; before pushing, run `npm run type-check` and `npm run build` to catch regressions.
+- Manual QA: exercise the randomizer flow (toggle skills/aspects, adjust item count, observe loading/error states).
+- When adding tests, favor Vitest + Vue Test Utils and mirror component filenames (e.g., `Randomizer.spec.ts`).
+
+## Commit & Pull Request Guidelines
+- Git history is minimal; use concise, imperative messages (prefer Conventional Commits such as `feat: add randomizer store`) that describe intent.
+- PRs should include: summary of changes, impacted areas (UI/store/API), steps to reproduce/test, and screenshots for UI-facing updates.
+- Link to relevant issues, keep PRs small and focused, and call out any API or config assumptions (backend `/api/randomize` endpoint, localStorage usage).
+
+## Environment & API Notes
+- The frontend expects an `/api/randomize` POST endpoint; if running locally without the backend, configure a mock or Vite proxy.
+- Avoid storing secrets in the repo; prefer runtime env vars and document any required values in the PR description.
diff --git a/API.md b/API.md
new file mode 100644
index 0000000..b2c77fb
--- /dev/null
+++ b/API.md
@@ -0,0 +1,52 @@
+# API Endpoints for Frontend Compatibility
+
+This document defines the minimal backend surface expected by the Vue frontend. Default base path is `/api`; responses are JSON with `Content-Type: application/json`.
+
+## POST /api/randomize
+- **Purpose:** Produce a randomized Dota 2 build and optionally return the full data sets used for rendering.
+- **Request body:**
+  - `includeSkills` (boolean) — include a skill build suggestion.
+  - `includeAspect` (boolean) — include an aspect suggestion.
+  - `itemsCount` (number) — how many items to return (UI offers 3–6).
+- **Response 200 body:**
+  - `hero` — object `{ id: string; name: string; primary: string; }`.
+  - `items` — array of `{ id: string; name: string; }` with length `itemsCount` (also used to hydrate cached items if you return the full pool).
+  - `skillBuild` (optional) — `{ id: string; name: string; description?: string; }` when `includeSkills` is true.
+  - `aspect` (optional) — string when `includeAspect` is true.
+  - `heroes` (optional) — full hero list to cache client-side; same shape as `hero`.
+  - `skillBuilds` (optional) — full skill build list; same shape as `skillBuild`.
+  - `aspects` (optional) — array of strings.
+- **Example request:**
+```json
+{
+  "includeSkills": true,
+  "includeAspect": false,
+  "itemsCount": 6
+}
+```
+- **Example response:**
+```json
+{
+  "hero": { "id": "pudge", "name": "Pudge", "primary": "strength" },
+  "items": [
+    { "id": "blink", "name": "Blink Dagger" },
+    { "id": "bkb", "name": "Black King Bar" }
+  ],
+  "skillBuild": { "id": "hookdom", "name": "Hook/Rot Max", "description": "Max hook, then rot; early Flesh Heap." },
+  "heroes": [{ "id": "axe", "name": "Axe", "primary": "strength" }],
+  "skillBuilds": [{ "id": "support", "name": "Support" }],
+  "aspects": ["Heroic Might"]
+}
+```
+
+## Error Handling
+- Use standard HTTP status codes (400 invalid input, 500 server error).
+- Error payload shape:
+```json
+{ "message": "Failed to load random build" }
+```
+- The UI surfaces `message` directly; keep it user-friendly.
+
+## Implementation Notes
+- Ensure deterministic constraints: unique `id` per entity and avoid empty arrays when `includeSkills`/`includeAspect` are true.
+- If backing data is static, you may return `heroes/items/skillBuilds/aspects` once per request; the frontend caches them after the first successful call.
diff --git a/package-lock.json b/package-lock.json
index d52fe75..8474b50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "dota-random-builds-front",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.13.2",
         "pinia": "^3.0.4",
         "vue": "^3.5.25",
         "vue-router": "^4.6.3"
@@ -1577,6 +1578,23 @@
         "node": ">=14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.8.32",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.32.tgz",
@@ -1642,6 +1660,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001757",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
@@ -1662,6 +1693,18 @@
         }
       ]
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1779,6 +1822,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.262",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.262.tgz",
@@ -1805,6 +1871,51 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -1877,6 +1988,42 @@
         }
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1891,6 +2038,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -1900,6 +2056,94 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -2035,6 +2279,15 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2044,6 +2297,27 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
@@ -2254,6 +2528,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/read-package-json-fast": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz",
diff --git a/package.json b/package.json
index ced7a67..a1575c5 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "pinia": "^3.0.4",
     "vue": "^3.5.25",
     "vue-router": "^4.6.3"
diff --git a/src/components/Randomizer.vue b/src/components/Randomizer.vue
index 68d9fab..f133251 100644
--- a/src/components/Randomizer.vue
+++ b/src/components/Randomizer.vue
@@ -3,6 +3,15 @@
     <h2>Random Dota 2 Build</h2>
 
     <div class="controls">
+      <label>
+        Hero:
+        <select v-model="selectedHeroId">
+          <option :value="null">Random</option>
+          <option v-for="hero in heroes" :key="hero.id" :value="hero.id">
+            {{ hero.name }}
+          </option>
+        </select>
+      </label>
       <label><input type="checkbox" v-model="includeSkills" /> Include skill build</label>
       <label><input type="checkbox" v-model="includeAspect" /> Include aspect</label>
       <label>
@@ -14,9 +23,13 @@
           <option :value="6">6</option>
         </select>
       </label>
-      <button @click="randomize">Randomize</button>
+      <button @click="requestRandomize" :disabled="!canRandomize">
+        {{ loading ? 'Loading...' : 'Randomize' }}
+      </button>
     </div>
 
+    <p v-if="error" class="error">Не удалось загрузить данные: {{ error }}</p>
+
     <div v-if="result" class="result">
       <div>
         <h3>Hero</h3>
@@ -32,13 +45,23 @@
 
         <div v-if="includeSkills">
           <h3>Skill Build</h3>
-          <div>{{ result?.skillBuild?.name }}</div>
-          <div class="muted">{{ result?.skillBuild?.description }}</div>
+          <div v-if="result?.skillBuild" class="skill-build">
+            <div v-for="level in skillLevels" :key="level" class="skill-level">
+              <span class="level-num">{{ level }}</span>
+              <span class="skill-key" :class="getSkillClass(result.skillBuild[String(level)])">
+                {{ formatSkill(result.skillBuild[String(level)]) }}
+              </span>
+            </div>
+          </div>
+          <div v-else class="warning">Скилл билд не был выбран, сгенерируйте челлендж заново.</div>
         </div>
 
         <div v-if="includeAspect">
           <h3>Aspect</h3>
-          <div>{{ result.aspect }}</div>
+          <div v-if="result.aspect">
+            {{ result.aspect }}
+          </div>
+          <div v-else class="warning">Аспект не был выбран, сгенерируйте челлендж заново.</div>
         </div>
       </div>
     </div>
@@ -46,82 +69,71 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { heroes } from '../data/heroes'
-import { items } from '../data/items'
-import { skillBuilds } from '../data/skills'
-import { aspects } from '../data/aspects'
+import { computed, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRandomDataStore } from '@/stores/randomData'
 
-type Hero = (typeof heroes)[number]
-type Item = (typeof items)[number]
-type Skill = (typeof skillBuilds)[number]
+const randomDataStore = useRandomDataStore()
+const { prefs, result, loading, error, heroes } = storeToRefs(randomDataStore)
 
-type Result = {
-  hero: Hero
-  items: Item[]
-  skillBuild?: Skill
-  aspect?: string
+const skillLevels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 25]
+
+function formatSkill(skill: string | undefined): string {
+  if (!skill) return '-'
+  const map: Record<string, string> = {
+    q: 'Q',
+    w: 'W',
+    e: 'E',
+    r: 'R',
+    left_talent: 'L',
+    right_talent: 'R'
+  }
+  return map[skill] ?? skill
 }
 
-const includeSkills = ref(false)
-const includeAspect = ref(false)
-const itemsCount = ref(6)
-const result = ref<Result | null>(null)
-
-function pickRandom<T>(arr: T[]): T {
-  if (arr.length === 0) throw new Error('pickRandom: empty array')
-  return arr[Math.floor(Math.random() * arr.length)]!
+function getSkillClass(skill: string | undefined): string {
+  if (!skill) return ''
+  if (skill === 'r') return 'skill-ult'
+  if (skill === 'left_talent' || skill === 'right_talent') return 'skill-talent'
+  return 'skill-basic'
 }
 
-function pickUnique<T>(arr: T[], count: number): T[] {
-  const copy = [...arr]
-  const out: T[] = []
-  while (out.length < count && copy.length) {
-    const i = Math.floor(Math.random() * copy.length)
-    const v = copy.splice(i, 1)[0] as T
-    out.push(v)
-  }
-  return out
+const includeSkills = computed({
+  get: () => prefs.value.includeSkills,
+  set: (val: boolean) => randomDataStore.setPrefs({ includeSkills: val })
+})
+
+const includeAspect = computed({
+  get: () => prefs.value.includeAspect,
+  set: (val: boolean) => randomDataStore.setPrefs({ includeAspect: val })
+})
+
+const itemsCount = computed({
+  get: () => prefs.value.itemsCount,
+  set: (val: number) => randomDataStore.setPrefs({ itemsCount: val })
+})
+
+const selectedHeroId = computed({
+  get: () => prefs.value.heroId ?? null,
+  set: (val: number | null) => randomDataStore.setPrefs({ heroId: val })
+})
+
+const canRandomize = computed(() => !loading.value)
+
+function requestRandomize() {
+  randomDataStore.randomize({
+    includeSkills: includeSkills.value,
+    includeAspect: includeAspect.value,
+    itemsCount: itemsCount.value,
+    heroId: selectedHeroId.value
+  })
 }
 
-function dublicatesFind() {
-
-  for (let [num, item] of items.entries()) {
-    let foundCount = 0
-    for (let itemFound of items) {
-      if (itemFound.id === item.id) {
-        foundCount++
-        if (foundCount > 1) {
-          console.log(item, num)
-        }
-      }
-    }
-  }
-}
-
-function randomize() {
-  const hero = pickRandom(heroes)
-  const pickedItems = pickUnique(items, itemsCount.value)
-
-  const res: Result = {
-    hero,
-    items: pickedItems
-  }
-
-  if (includeSkills.value) {
-    res.skillBuild = pickRandom(skillBuilds)
-  }
-
-  if (includeAspect.value) {
-    res.aspect = pickRandom(aspects)
-  }
-
-  result.value = res
-}
-
-// initial
-randomize()
-dublicatesFind()
+onMounted(() => {
+  randomDataStore.loadPrefs()
+  randomDataStore.loadHeroes()
+  randomDataStore.randomize()
+})
 </script>
 
 <style scoped>
@@ -240,6 +252,24 @@ dublicatesFind()
   opacity: 0.8;
 }
 
+.controls button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.error {
+  color: #f87171;
+  margin: 0 0 12px;
+}
+
+.warning {
+  color: #fbbf24;
+  font-weight: 600;
+  margin: 4px 0;
+}
+
 /* RESULT PANEL -------------------------------------------------- */
 .result {
   margin-top: 12px;
@@ -325,6 +355,52 @@ h3 {
   font-size: 0.9em;
 }
 
+/* SKILL BUILD -------------------------------------------------- */
+.skill-build {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 10px 0;
+}
+
+.skill-level {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 32px;
+}
+
+.level-num {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 2px;
+}
+
+.skill-key {
+  background: rgba(255, 255, 255, 0.08);
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.skill-basic {
+  color: #8bc34a;
+}
+
+.skill-ult {
+  color: #ffd54f;
+  background: rgba(255, 213, 79, 0.15);
+  border-color: rgba(255, 213, 79, 0.3);
+}
+
+.skill-talent {
+  color: #4fc3f7;
+  background: rgba(79, 195, 247, 0.15);
+  border-color: rgba(79, 195, 247, 0.3);
+}
+
 /* MOBILE -------------------------------------------------- */
 @media (max-width: 720px) {
   .result {
diff --git a/src/stores/randomData.ts b/src/stores/randomData.ts
new file mode 100644
index 0000000..403471a
--- /dev/null
+++ b/src/stores/randomData.ts
@@ -0,0 +1,112 @@
+import axios from 'axios'
+import { defineStore } from 'pinia'
+
+export interface Hero {
+  id: number
+  name: string
+  primary: string
+}
+
+export interface Item {
+  id: number
+  name: string
+}
+
+export type SkillBuild = Record<string, string>
+
+export interface RandomizeResult {
+  hero: Hero
+  items: Item[]
+  skillBuild?: SkillBuild
+  aspect?: string
+}
+
+type RandomizePayload = {
+  includeSkills: boolean
+  includeAspect: boolean
+  itemsCount: number
+  heroId?: number | null
+}
+
+const PREFS_KEY = 'randomizer:prefs'
+const BASE_URL = 'http://127.0.0.1:8000'
+
+export const useRandomDataStore = defineStore('randomData', {
+  state: () => ({
+    heroes: [] as Hero[],
+    result: null as RandomizeResult | null,
+    loading: false,
+    error: null as string | null,
+    prefs: {
+      includeSkills: false,
+      includeAspect: false,
+      itemsCount: 6,
+      heroId: null as number | null
+    } as RandomizePayload
+  }),
+
+  actions: {
+    loadPrefs() {
+      try {
+        const raw = localStorage.getItem(PREFS_KEY)
+        if (!raw) return
+        const parsed = JSON.parse(raw)
+        this.prefs = {
+          includeSkills: Boolean(parsed.includeSkills),
+          includeAspect: Boolean(parsed.includeAspect),
+          itemsCount: Number(parsed.itemsCount) || 6,
+          heroId: parsed.heroId ?? null
+        }
+      } catch (err) {
+        console.warn('Failed to load prefs', err)
+      }
+    },
+
+    async loadHeroes() {
+      try {
+        const { data } = await axios.get<Hero[]>(`${BASE_URL}/api/heroes`)
+        this.heroes = data
+      } catch (err) {
+        console.warn('Failed to load heroes', err)
+      }
+    },
+
+    savePrefs() {
+      try {
+        localStorage.setItem(PREFS_KEY, JSON.stringify(this.prefs))
+      } catch (err) {
+        console.warn('Failed to save prefs', err)
+      }
+    },
+
+    setPrefs(patch: Partial<RandomizePayload>) {
+      this.prefs = { ...this.prefs, ...patch }
+      this.savePrefs()
+    },
+
+    async randomize(overrides?: Partial<RandomizePayload>) {
+      if (this.loading) return
+      this.loading = true
+      this.error = null
+
+      const payload: RandomizePayload = {
+        ...this.prefs,
+        ...overrides
+      }
+
+      // sync prefs with overrides so UI reflects latest choice
+      this.prefs = payload
+      this.savePrefs()
+
+      try {
+        const { data } = await axios.post<RandomizeResult>(`${BASE_URL}/api/randomize`, { ...payload })
+        this.result = data
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to load random build'
+        this.error = message
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+})