feat: initial release — Windows ISO Downloader v3

2026-04-10 20:15:46 +05:30 · 2026-04-10 20:15:46 +05:30 · 7d847f8dd1
commit 7d847f8dd1
45 changed files with 2896 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,54 @@
+# ── Node / npm ────────────────────────────────────────
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.pnpm-store/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# ── Frontend build outputs ─────────────────────────────
+frontend/dist/
+frontend/.vite/
+frontend/build/
+
+# ── Environment files ──────────────────────────────────
+.env
+.env.local
+.env.*.local
+*.env
+
+# ── Go build outputs ───────────────────────────────────
+backend/main
+backend/*.exe
+backend/tmp/
+go.sum
+
+# ── OS files ───────────────────────────────────────────
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+Desktop.ini
+ehthumbs.db
+
+# ── Editor / IDE ───────────────────────────────────────
+.vscode/
+.idea/
+*.swp
+*.swo
+*.suo
+*.user
+*.sublime-workspace
+*.sublime-project
+
+# ── Logs ──────────────────────────────────────────────
+logs/
+*.log
+
+# ── Misc ──────────────────────────────────────────────
+.cache/
+.temp/
+tmp/
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TechLatest (https://tech-latest.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,196 @@
+# windows-iso-downloader
+
+> A clean, open-source tool for obtaining official Windows ISO files directly from Microsoft's CDN — without a Windows machine, the Media Creation Tool, or browser restrictions.
+
+**Live:** [msdl.tech-latest.com](https://msdl.tech-latest.com) · **By:** [TechLatest](https://tech-latest.com)
+
+![License](https://img.shields.io/github/license/starkSV/windows-iso-downloader)
+![Stars](https://img.shields.io/github/stars/starkSV/windows-iso-downloader)
+
+---
+
+## What it does
+
+MSDL replicates the session flow that Microsoft uses to serve ISO download links — identical to the approach used by [Rufus/Fido](https://github.com/pbatard/Fido). You get the exact same signed CDN URL Microsoft would give you, just without the browser requirement.
+
+- ✅ Direct Microsoft CDN links — no proxying of actual file data
+- ✅ 38 languages per release
+- ✅ ARM64 + x64 + x86 support
+- ✅ No account, no browser lock, no ads, no tracking
+- ✅ Links expire in 24 hours (Microsoft's standard behaviour, not a limitation)
+
+---
+
+## Screenshot
+
+> _Coming soon_
+
+---
+
+## Project Structure
+
+```
+windows-iso-downloader/
+├── frontend/      # React 19 + TypeScript + Vite + Tailwind v4
+├── backend/       # Go proxy server (recommended for production)
+└── README.md
+```
+
+---
+
+## How It Works
+
+```
+Browser → Backend Proxy → Microsoft Download API → Signed CDN URL
+                               ↓
+               1. Register session (Microsoft tracking endpoint)
+               2. Parse MDT fingerprint script
+               3. Fetch SKU list (available languages)
+               4. Fetch signed CDN download URL
+```
+
+The flow mirrors [Fido.ps1](https://github.com/pbatard/Fido) by Pete Batard — the same script bundled with Rufus.
+
+---
+
+## Running Locally
+
+### Backend (Go)
+
+```bash
+cd backend
+go run main.go
+# Runs on http://localhost:3002
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+# Runs on http://localhost:5173
+```
+
+Create `frontend/.env.local`:
+
+```env
+VITE_API_URL=http://localhost:3002
+```
+
+---
+
+## API Reference
+
+### `GET /skuinfo?product_id=<id>`
+
+Returns available languages for a product.
+
+```json
+{
+  "Skus": [
+    {
+      "Id": "0x0409",
+      "Language": "en-US",
+      "LocalizedLanguage": "English (United States)"
+    }
+  ]
+}
+```
+
+### `GET /proxy?product_id=<id>&sku_id=<sku>`
+
+Returns signed download links from Microsoft's CDN.
+
+```json
+{
+  "ProductDownloadOptions": [
+    {
+      "Uri": "https://software.download.prss.microsoft.com/...",
+      "Architecture": "x64"
+    }
+  ]
+}
+```
+
+---
+
+## Supported Products
+
+| Product | ID | Architecture |
+|---|---|---|
+| Windows 11 25H2 | 3262 | x64 |
+| Windows 11 25H2 | 3265 | ARM64 |
+| Windows 11 25H2 (updated) | 3321 | x64 |
+| Windows 11 25H2 (updated) | 3324 | ARM64 |
+| Windows 11 24H2 | 3113 | x64 |
+| Windows 11 24H2 | 3131 | ARM64 |
+| Windows 10 22H2 | 2618 | x64 / x86 |
+| Windows 10 22H2 Home China | 2378 | x64 |
+| Windows 8.1 | 52 | x64 / x86 |
+| Windows 8.1 Single Language | 48 | x64 / x86 |
+
+---
+
+## Tech Stack
+
+### Frontend (`frontend/`)
+
+| | |
+|---|---|
+| Framework | React 19 + TypeScript |
+| Build tool | Vite 8 |
+| Styling | Tailwind CSS v4 |
+| Animation | Motion (Framer Motion v12) |
+| UI primitives | Radix UI |
+| Toast | Sonner |
+| Font | Geist |
+| Router | React Router v7 |
+
+### Backend (`backend/`)
+
+| | |
+|---|---|
+| Language | Go 1.22+ |
+| HTTP | `net/http` (stdlib, no framework) |
+| Session cache | `sync.RWMutex` in-memory · 15 min TTL |
+| UUID | `github.com/google/uuid` |
+| MDT parsing | `regexp` (stdlib) |
+
+---
+
+## Deployment
+
+> ⚠️ **Deploy the backend to a standard VPS** (Hetzner, DigitalOcean, Linode, etc.) — **not** serverless platforms like Vercel, Cloudflare Workers, or AWS Lambda. Microsoft rate-limits known datacenter IP ranges.
+
+Recommended setup:
+
+| Component | Platform |
+|---|---|
+| Frontend | Cloudflare Pages / Vercel (static) |
+| Backend | VPS with a non-datacenter IP |
+
+---
+
+## Contributing
+
+Pull requests welcome. To add a new Windows release:
+
+1. Find the product ID on `www.microsoft.com/software-download-connector/api/`
+2. Add it to `frontend/public/data/products.json`
+3. Add related metadata in `ProductDetailPage.tsx` (`PRODUCT_META`, `RELATED_GROUPS`)
+4. Update the product table in this README
+
+---
+
+## Disclaimer
+
+This project is **not affiliated with, endorsed by, or sponsored by Microsoft Corporation**.
+Windows is a registered trademark of Microsoft Corporation.
+All ISO files are served directly from Microsoft's official CDN — this project does not host any files.
+
+---
+
+## License
+
+[MIT](./LICENSE) © [TechLatest](https://tech-latest.com)
--- a/backend/go.mod
+++ b/backend/go.mod
@ -0,0 +1,5 @@
+module msdl-backend-go
+
+go 1.25.6
+
+require github.com/google/uuid v1.6.0 // indirect
--- a/backend/main.go
+++ b/backend/main.go
@ -0,0 +1,380 @@
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io"
+	"log"
+	"net/http"
+	"regexp"
+	"strconv"
+	"sync"
+	"time"
+
+	"github.com/google/uuid"
+)
+
+const (
+	UA          = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+	PROFILE     = "606624d44113"
+	LOCALE      = "en-US"
+	ORG_ID      = "y6jn8c31"
+	CUSTOMER_ID = "560dc9f3-1aa5-4a2f-b63c-9e18f8d0e175"
+	PORT        = ":3002" // Different port to run alongside Node
+)
+
+type SessionEntry struct {
+	SessionID string
+	CreatedAt time.Time
+}
+
+var (
+	sessionCache = make(map[string]SessionEntry)
+	cacheMutex   sync.RWMutex
+	SESSION_TTL  = 15 * time.Minute
+)
+
+// Map product ID to referer URL
+func getReferer(productId string) string {
+	id, err := strconv.Atoi(productId)
+	if err != nil {
+		return "https://www.microsoft.com/en-us/software-download/windows8ISO"
+	}
+	if id >= 2935 {
+		return "https://www.microsoft.com/en-us/software-download/windows11"
+	}
+	if id >= 2618 {
+		return "https://www.microsoft.com/en-us/software-download/windows10ISO"
+	}
+	return "https://www.microsoft.com/en-us/software-download/windows8ISO"
+}
+
+// Replicate Fido session tracking
+func setupSession() (string, error) {
+	sessionID := uuid.New().String()
+	client := &http.Client{Timeout: 10 * time.Second}
+
+	// Step 1: Register session
+	req1, _ := http.NewRequest("GET", fmt.Sprintf("https://vlscppe.microsoft.com/tags?org_id=%s&session_id=%s", ORG_ID, sessionID), nil)
+	req1.Header.Set("User-Agent", UA)
+	client.Do(req1) // Ignore errors intentionally
+
+	// Step 2: Fetch tracking JS
+	req2, _ := http.NewRequest("GET", fmt.Sprintf("https://ov-df.microsoft.com/mdt.js?instanceId=%s&PageId=si&session_id=%s", CUSTOMER_ID, sessionID), nil)
+	req2.Header.Set("User-Agent", UA)
+	resp2, err := client.Do(req2)
+	if err != nil {
+		return sessionID, nil // Proceed anyway
+	}
+	defer resp2.Body.Close()
+
+	bodyBytes, _ := io.ReadAll(resp2.Body)
+	mdtText := string(bodyBytes)
+
+	// Regex to extract w and rticks
+	reW := regexp.MustCompile(`[&?]w=([^&"'\s]+)`)
+	reRt := regexp.MustCompile(`rticks[="]+\+?\s*(\d{10,})`)
+
+	wMatch := reW.FindStringSubmatch(mdtText)
+	rtMatch := reRt.FindStringSubmatch(mdtText)
+
+	// Step 3: Send fingerprint response
+	if len(wMatch) > 1 && len(rtMatch) > 1 {
+		wVal := wMatch[1]
+		rtVal := rtMatch[1]
+		mdt := time.Now().UnixMilli()
+
+		fpURL := fmt.Sprintf("https://ov-df.microsoft.com/?session_id=%s&CustomerId=%s&PageId=si&w=%s&mdt=%d&rticks=%s",
+			sessionID, CUSTOMER_ID, wVal, mdt, rtVal)
+
+		req3, _ := http.NewRequest("GET", fpURL, nil)
+		req3.Header.Set("User-Agent", UA)
+		client.Do(req3)
+	}
+
+	return sessionID, nil
+}
+
+// Map DownloadType code to string
+func mapDownloadType(typeNum int) string {
+	switch typeNum {
+	case 0:
+		return "x86"
+	case 1:
+		return "x64"
+	case 2:
+		return "ARM64"
+	default:
+		return fmt.Sprintf("type_%d", typeNum)
+	}
+}
+
+// Background cleanup for stale sessions
+func cleanupSessions() {
+	for {
+		time.Sleep(1 * time.Minute)
+		cacheMutex.Lock()
+		now := time.Now()
+		for key, entry := range sessionCache {
+			if now.Sub(entry.CreatedAt) > SESSION_TTL {
+				delete(sessionCache, key)
+			}
+		}
+		cacheMutex.Unlock()
+	}
+}
+
+// Middleware for CORS
+func enableCORS(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Access-Control-Allow-Origin", "*")
+		w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
+		w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
+		if r.Method == "OPTIONS" {
+			w.WriteHeader(http.StatusOK)
+			return
+		}
+		next.ServeHTTP(w, r)
+	})
+}
+
+func respondJSONError(w http.ResponseWriter, status int, message string) {
+	w.WriteHeader(status)
+	json.NewEncoder(w).Encode(map[string]string{"error": message})
+}
+
+// --- /skuinfo endpoint ---
+func handleSkuInfo(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	productID := r.URL.Query().Get("product_id")
+	if productID == "" {
+		respondJSONError(w, http.StatusBadRequest, "product_id query parameter is required")
+		return
+	}
+
+	sessionID, _ := setupSession()
+
+	cacheMutex.Lock()
+	sessionCache[productID] = SessionEntry{SessionID: sessionID, CreatedAt: time.Now()}
+	cacheMutex.Unlock()
+
+	reqURL := fmt.Sprintf("https://www.microsoft.com/software-download-connector/api/getskuinformationbyproductedition?profile=%s&productEditionId=%s&SKU=undefined&friendlyFileName=undefined&Locale=%s&sessionID=%s",
+		PROFILE, productID, LOCALE, sessionID)
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	var finalData map[string]interface{}
+
+	// Retry logic
+	for attempt := 0; attempt < 3; attempt++ {
+		if attempt > 0 {
+			time.Sleep(2 * time.Second)
+		}
+		req, _ := http.NewRequest("GET", reqURL, nil)
+		req.Header.Set("User-Agent", UA)
+		req.Header.Set("Referer", getReferer(productID))
+		req.Header.Set("Accept", "application/json")
+
+		resp, err := client.Do(req)
+		if err != nil {
+			if attempt == 2 {
+				respondJSONError(w, http.StatusBadGateway, "Request failed: "+err.Error())
+				return
+			}
+			continue
+		}
+
+		bodyBytes, _ := io.ReadAll(resp.Body)
+		resp.Body.Close()
+
+		if resp.StatusCode != http.StatusOK {
+			if attempt == 2 {
+				respondJSONError(w, http.StatusBadGateway, fmt.Sprintf("Microsoft API returned HTTP %d", resp.StatusCode))
+				return
+			}
+			continue
+		}
+
+		// Double encoded decode logic
+		if len(bodyBytes) > 0 && bodyBytes[0] == '"' {
+			var unquoted string
+			json.Unmarshal(bodyBytes, &unquoted)
+			bodyBytes = []byte(unquoted)
+		}
+
+		var data map[string]interface{}
+		json.Unmarshal(bodyBytes, &data)
+
+		// Check for specific MS errors
+		if errs, ok := data["Errors"].([]interface{}); ok && len(errs) > 0 {
+			if attempt == 2 {
+				msg := "Microsoft API error"
+				if errMap, ok := errs[0].(map[string]interface{}); ok {
+					if val, exists := errMap["Value"]; exists {
+						msg = val.(string)
+					}
+				}
+				respondJSONError(w, http.StatusBadGateway, msg)
+				return
+			}
+			continue
+		}
+
+		finalData = data
+		break
+	}
+
+	skus, ok := finalData["Skus"].([]interface{})
+	if !ok || len(skus) == 0 {
+		respondJSONError(w, http.StatusNotFound, "No languages found for this product ID.")
+		return
+	}
+
+	log.Printf("/skuinfo: product_id=%s -> %d languages (session=%s)\n", productID, len(skus), sessionID[:8])
+	json.NewEncoder(w).Encode(finalData)
+}
+
+// --- /proxy endpoint ---
+func handleProxy(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "application/json")
+	productID := r.URL.Query().Get("product_id")
+	skuID := r.URL.Query().Get("sku_id")
+
+	if productID == "" || skuID == "" {
+		respondJSONError(w, http.StatusBadRequest, "product_id and sku_id query parameters are required")
+		return
+	}
+
+	var sessionID string
+	cacheMutex.RLock()
+	cached, exists := sessionCache[productID]
+	cacheMutex.RUnlock()
+
+	if exists && time.Since(cached.CreatedAt) < SESSION_TTL {
+		sessionID = cached.SessionID
+		log.Printf("/proxy: Reusing session %s for product_id=%s\n", sessionID[:8], productID)
+	} else {
+		log.Printf("/proxy: No valid session for product_id=%s, creating new one...\n", productID)
+		sessionID, _ = setupSession()
+
+		// Warmup with SKU info request
+		warmupURL := fmt.Sprintf("https://www.microsoft.com/software-download-connector/api/getskuinformationbyproductedition?profile=%s&productEditionId=%s&SKU=undefined&friendlyFileName=undefined&Locale=%s&sessionID=%s",
+			PROFILE, productID, LOCALE, sessionID)
+
+		client := &http.Client{Timeout: 10 * time.Second}
+		req, _ := http.NewRequest("GET", warmupURL, nil)
+		req.Header.Set("User-Agent", UA)
+		req.Header.Set("Referer", getReferer(productID))
+		req.Header.Set("Accept", "application/json")
+		client.Do(req)
+
+		cacheMutex.Lock()
+		sessionCache[productID] = SessionEntry{SessionID: sessionID, CreatedAt: time.Now()}
+		cacheMutex.Unlock()
+	}
+
+	reqURL := fmt.Sprintf("https://www.microsoft.com/software-download-connector/api/GetProductDownloadLinksBySku?profile=%s&productEditionId=undefined&SKU=%s&friendlyFileName=undefined&Locale=%s&sessionID=%s",
+		PROFILE, skuID, LOCALE, sessionID)
+
+	client := &http.Client{Timeout: 15 * time.Second}
+	req, _ := http.NewRequest("GET", reqURL, nil)
+	req.Header.Set("User-Agent", UA)
+	req.Header.Set("Referer", getReferer(productID))
+	req.Header.Set("Accept", "application/json")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		respondJSONError(w, http.StatusBadGateway, "Request failed: "+err.Error())
+		return
+	}
+	defer resp.Body.Close()
+
+	bodyBytes, _ := io.ReadAll(resp.Body)
+	if resp.StatusCode != http.StatusOK {
+		respondJSONError(w, http.StatusBadGateway, fmt.Sprintf("Microsoft API returned HTTP %d", resp.StatusCode))
+		return
+	}
+
+	// Double encoded decode
+	if len(bodyBytes) > 0 && bodyBytes[0] == '"' {
+		var unquoted string
+		json.Unmarshal(bodyBytes, &unquoted)
+		bodyBytes = []byte(unquoted)
+	}
+
+	var data map[string]interface{}
+	json.Unmarshal(bodyBytes, &data)
+
+	// Check for Microsoft errors
+	if errs, ok := data["Errors"].([]interface{}); ok && len(errs) > 0 {
+		if errMap, ok := errs[0].(map[string]interface{}); ok {
+			if typeNum, exists := errMap["Type"].(float64); exists && typeNum == 9 {
+				respondJSONError(w, http.StatusTooManyRequests, "Your IP has been temporarily blocked by Microsoft. Please try again later. (Code 715-123130)")
+				return
+			}
+			if val, exists := errMap["Value"].(string); exists {
+				respondJSONError(w, http.StatusBadGateway, val)
+				return
+			}
+		}
+		respondJSONError(w, http.StatusBadGateway, "Microsoft API error")
+		return
+	}
+
+	optsRaw, exists := data["ProductDownloadOptions"]
+	if !exists {
+		respondJSONError(w, http.StatusNotFound, "No download links found for this SKU.")
+		return
+	}
+
+	opts, ok := optsRaw.([]interface{})
+	if !ok || len(opts) == 0 {
+		respondJSONError(w, http.StatusNotFound, "No download links found for this SKU.")
+		return
+	}
+
+	for _, optRaw := range opts {
+		if optMap, ok := optRaw.(map[string]interface{}); ok {
+			if arch, hasArch := optMap["Architecture"]; !hasArch || arch == nil {
+				if dType, hasDType := optMap["DownloadType"].(float64); hasDType {
+					optMap["Architecture"] = mapDownloadType(int(dType))
+				}
+			}
+		}
+	}
+
+	log.Printf("/proxy: product_id=%s, sku_id=%s -> %d links\n", productID, skuID, len(opts))
+
+	// Write pure JSON
+	var buf bytes.Buffer
+	enc := json.NewEncoder(&buf)
+	enc.SetEscapeHTML(false) // Don't encode & to \u0026 in URLs!
+	enc.Encode(data)
+	w.Write(buf.Bytes())
+}
+
+func main() {
+	go cleanupSessions()
+
+	mux := http.NewServeMux()
+
+	// API Routing
+	mux.HandleFunc("/skuinfo", handleSkuInfo)
+	mux.HandleFunc("/proxy", handleProxy)
+	mux.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "application/json")
+		w.Write([]byte(`{"status":"ok"}`))
+	})
+
+	// Static UI Server
+	fs := http.FileServer(http.Dir("./public"))
+	mux.Handle("/", fs)
+
+	handler := enableCORS(mux)
+
+	log.Printf("Go Backend running on http://localhost%s\n", PORT)
+	err := http.ListenAndServe(PORT, handler)
+	if err != nil {
+		log.Fatal(err)
+	}
+}
--- a/backend/public/index.html
+++ b/backend/public/index.html
@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MSDL Backend API Test</title>
+  <style>
+    body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; color: #333; }
+    h1 { border-bottom: 2px solid #eee; padding-bottom: 0.5rem; }
+    .card { border: 1px solid #ddd; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; background: #fafafa; }
+    .form-group { margin-bottom: 1rem; }
+    label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
+    input, select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
+    .btn { background: #0066cc; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 500; }
+    .btn:hover { background: #0052a3; }
+    .btn:disabled { background: #ccc; cursor: not-allowed; }
+    pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; font-size: 0.85rem; }
+    .error { color: #d32f2f; font-weight: 500; }
+    .success { color: #2e7d32; font-weight: 500; }
+    .hidden { display: none; }
+  </style>
+</head>
+<body>
+
+  <h1>MSDL API Test UI</h1>
+  
+  <div class="card">
+    <h3>Step 1: Get Languages (SKU Info)</h3>
+    <div class="form-group">
+      <label for="productId">Product ID</label>
+      <!-- Default to Windows 11 (25H2) -->
+      <select id="productId">
+        <option value="3262">Windows 11 25H2 (3262)</option>
+        <option value="3321">Windows 11 25H2 New (3321)</option>
+        <option value="3113">Windows 11 24H2 (3113)</option>
+        <option value="2618">Windows 10 22H2 (2618)</option>
+        <option value="52">Windows 8.1 (52)</option>
+      </select>
+    </div>
+    <button id="btnGetLangs" class="btn">Fetch Languages</button>
+    <div id="langStatus" style="margin-top: 1rem;"></div>
+  </div>
+
+  <div id="step2Card" class="card hidden">
+    <h3>Step 2: Get Download Links (Proxy)</h3>
+    <div class="form-group">
+      <label for="skuId">Select Language (SKU)</label>
+      <select id="skuId"></select>
+    </div>
+    <button id="btnGetLinks" class="btn">Fetch Download Links</button>
+    <div id="linkStatus" style="margin-top: 1rem;"></div>
+  </div>
+
+  <div class="card">
+    <h3>API Response</h3>
+    <pre id="jsonOutput">Ready.</pre>
+  </div>
+
+  <script>
+    const baseUrl = window.location.origin; // e.g. http://localhost:3001
+    
+    const productIdEl = document.getElementById('productId');
+    const skuIdEl = document.getElementById('skuId');
+    const btnGetLangs = document.getElementById('btnGetLangs');
+    const btnGetLinks = document.getElementById('btnGetLinks');
+    const langStatus = document.getElementById('langStatus');
+    const linkStatus = document.getElementById('linkStatus');
+    const step2Card = document.getElementById('step2Card');
+    const jsonOutput = document.getElementById('jsonOutput');
+
+    function output(obj, isError = false) {
+      jsonOutput.textContent = JSON.stringify(obj, null, 2);
+      jsonOutput.style.color = isError ? '#ff8a80' : '#81c784';
+    }
+
+    let currentProductId = null;
+
+    btnGetLangs.addEventListener('click', async () => {
+      const pid = productIdEl.value;
+      btnGetLangs.disabled = true;
+      langStatus.innerHTML = '<i>Fetching languages... this takes a few seconds to warm up the Microsoft session.</i>';
+      step2Card.classList.add('hidden');
+      jsonOutput.style.color = '#d4d4d4';
+      jsonOutput.textContent = 'Loading...';
+
+      try {
+        const res = await fetch(`${baseUrl}/skuinfo?product_id=${pid}`);
+        const data = await res.json();
+        
+        if (!res.ok || data.error) {
+          throw new Error(data.error || 'Server error');
+        }
+
+        output(data);
+        langStatus.innerHTML = `<span class="success">Found ${data.Skus.length} languages!</span>`;
+        
+        // Populate step 2
+        skuIdEl.innerHTML = '';
+        data.Skus.forEach(sku => {
+          const opt = document.createElement('option');
+          opt.value = sku.Id;
+          opt.textContent = sku.LocalizedLanguage;
+          // select english by default if exists
+          if (sku.LocalizedLanguage.toLowerCase().includes('english')) {
+            opt.selected = true;
+          }
+          skuIdEl.appendChild(opt);
+        });
+
+        currentProductId = pid;
+        step2Card.classList.remove('hidden');
+
+      } catch (err) {
+        langStatus.innerHTML = `<span class="error">${err.message}</span>`;
+        output({ error: err.message }, true);
+      } finally {
+        btnGetLangs.disabled = false;
+      }
+    });
+
+    btnGetLinks.addEventListener('click', async () => {
+      const sid = skuIdEl.value;
+      if (!sid || !currentProductId) return;
+
+      btnGetLinks.disabled = true;
+      linkStatus.innerHTML = '<i>Fetching download links...</i>';
+      jsonOutput.style.color = '#d4d4d4';
+      jsonOutput.textContent = 'Loading...';
+
+      try {
+        const res = await fetch(`${baseUrl}/proxy?product_id=${currentProductId}&sku_id=${sid}`);
+        const data = await res.json();
+
+        if (!res.ok || data.error) {
+          throw new Error(data.error || 'Server error');
+        }
+
+        output(data);
+
+        if (data.ProductDownloadOptions && data.ProductDownloadOptions.length > 0) {
+          let linksHtml = '<div style="margin-top:10px;">';
+          data.ProductDownloadOptions.forEach(opt => {
+            linksHtml += `<div style="margin-bottom:10px;">
+              <strong>${opt.Architecture}</strong>: 
+              <br><a href="${opt.Uri}" target="_blank" style="word-break: break-all; color: #0066cc;">${opt.Uri}</a>
+            </div>`;
+          });
+          linksHtml += '</div>';
+          linkStatus.innerHTML = `<span class="success">Success! Links generated:</span>${linksHtml}`;
+        } else {
+          linkStatus.innerHTML = `<span class="error">No links found in response.</span>`;
+        }
+
+      } catch (err) {
+        linkStatus.innerHTML = `<span class="error">${err.message}</span>`;
+        output({ error: err.message }, true);
+      } finally {
+        btnGetLinks.disabled = false;
+      }
+    });
+  </script>
+</body>
+</html>
--- a/frontend/.env.example
+++ b/frontend/.env.example
@ -0,0 +1,2 @@
+# Copy to .env.local and set your backend URL
+VITE_API_URL=http://localhost:3002
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Windows ISO Downloader | Official Microsoft Images</title>
+    <meta name="description" content="Download official Microsoft Windows ISO files for Windows 11, 10, and 8.1. Fast, free, no registration required." />
+    <meta property="og:title" content="Windows ISO Downloader | Official Microsoft Images" />
+    <meta property="og:description" content="Download official Microsoft Windows ISO files. Fast, free, no registration." />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,41 @@
+{
+  "name": "msdl-frontend-v2",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.2.8",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-select": "^2.2.6",
+    "geist": "^1.7.0",
+    "lucide-react": "^1.7.0",
+    "motion": "^12.38.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.2",
+    "sonner": "^2.0.7",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}
--- a/frontend/public/_redirects
+++ b/frontend/public/_redirects
@ -0,0 +1 @@
+/* /index.html 200
--- a/frontend/public/data/products.json
+++ b/frontend/public/data/products.json
@ -0,0 +1,18 @@
+{
+  "48": "Windows 8.1 Single Language (9600.17415)",
+  "52": "Windows 8.1 (9600.17415)",
+  "2378": "Windows 10 22H2 Home China (19045.2006)",
+  "2618": "Windows 10 22H2 v1 (19045.2965)",
+  "3113": "Windows 11 24H2 (26100.1742)",
+  "3114": "Windows 11 24H2 Home China (26100.1742)",
+  "3115": "Windows 11 24H2 Pro China (26100.1742)",
+  "3131": "Windows 11 Arm64 24H2 (26100.1742)",
+  "3132": "Windows 11 Arm64 24H2 Home China (26100.1742)",
+  "3133": "Windows 11 Arm64 24H2 Pro China (26100.1742)",
+  "3262": "Windows 11 25H2 (26200.6584)",
+  "3263": "Windows 11 25H2 Home China (26200.6584)",
+  "3264": "Windows 11 25H2 Pro China (26200.6584)",
+  "3265": "Windows 11 Arm64 25H2 (26200.6584)",
+  "3266": "Windows 11 Arm64 25H2 Home China (26200.6584)",
+  "3267": "Windows 11 Arm64 25H2 Pro China (26200.6584)"
+}
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/icons.svg
+++ b/frontend/public/icons.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -0,0 +1,42 @@
+import { Routes, Route } from 'react-router-dom'
+import { Toaster } from 'sonner'
+import Dock from './components/Dock'
+import SiteFooter from './components/SiteFooter'
+import HomePage from './pages/HomePage'
+import ProductsPage from './pages/ProductsPage'
+import ProductDetailPage from './pages/ProductDetailPage'
+import AboutPage from './pages/AboutPage'
+import PrivacyPolicyPage from './pages/PrivacyPolicyPage'
+import DisclaimerPage from './pages/DisclaimerPage'
+import ScrollToTop from './components/ScrollToTop'
+
+export default function App() {
+  return (
+    <div className="min-h-screen pb-20 sm:pb-24" style={{ overflowX: 'hidden', maxWidth: '100vw' }}>
+      <ScrollToTop />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/products" element={<ProductsPage />} />
+        <Route path="/product/:productId" element={<ProductDetailPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
+        <Route path="/disclaimer" element={<DisclaimerPage />} />
+      </Routes>
+      <SiteFooter />
+      <Dock />
+      <Toaster
+        position="bottom-center"
+        offset={96}
+        theme="dark"
+        toastOptions={{
+          style: {
+            background: '#18181b',
+            border: '1px solid rgba(255,255,255,0.09)',
+            color: '#fafafa',
+            fontFamily: 'var(--font-sans)',
+          },
+        }}
+      />
+    </div>
+  )
+}
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/assets/vite.svg
+++ b/frontend/src/assets/vite.svg
--- a/frontend/src/components/Aria2Tip.tsx
+++ b/frontend/src/components/Aria2Tip.tsx
@ -0,0 +1,78 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { Terminal, ChevronRight, Copy, Check } from 'lucide-react'
+import { toast } from 'sonner'
+
+interface Aria2TipProps {
+  downloadUrl?: string
+}
+
+export default function Aria2Tip({ downloadUrl }: Aria2TipProps) {
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const urlPlaceholder = downloadUrl || 'PASTE_YOUR_LINK_HERE'
+  const command = `aria2c -x 16 -s 16 "${urlPlaceholder}"`
+
+  function handleCopy() {
+    navigator.clipboard.writeText(command)
+    setCopied(true)
+    toast.success('Command copied!')
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="mt-3">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 text-[12px] text-zinc-600 hover:text-zinc-400 transition-colors py-1"
+      >
+        <Terminal size={13} />
+        <span>Download faster with aria2 — 16× parallel connections</span>
+        <motion.span
+          animate={{ rotate: open ? 90 : 0 }}
+          transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+        >
+          <ChevronRight size={13} />
+        </motion.span>
+      </button>
+
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.div
+            key="aria2-content"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+            className="overflow-hidden"
+          >
+            <div className="mt-2 rounded-xl border border-white/7 bg-[#0d0d0f] overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-2 border-b border-white/5">
+                <span className="text-[10px] font-mono text-zinc-600 uppercase tracking-widest">Terminal</span>
+                <button
+                  onClick={handleCopy}
+                  className="flex items-center gap-1.5 text-[11px] text-zinc-500 hover:text-white transition-colors"
+                >
+                  {copied ? <Check size={11} className="text-green-400" /> : <Copy size={11} />}
+                  <span>{copied ? 'Copied' : 'Copy'}</span>
+                </button>
+              </div>
+              <div className="px-4 py-3 overflow-x-auto">
+                <code className="text-[12px] font-mono text-zinc-300 whitespace-nowrap">
+                  <span className="text-zinc-600 select-none">$ </span>
+                  {command}
+                </code>
+              </div>
+              {!downloadUrl && (
+                <p className="px-4 pb-3 text-[11px] text-zinc-600">
+                  Generate a link above, then paste it into this command for 16× speed.
+                </p>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
--- a/frontend/src/components/Badge.tsx
+++ b/frontend/src/components/Badge.tsx
@ -0,0 +1,34 @@
+interface BadgeProps {
+  variant: 'latest' | 'stable' | 'eol' | 'legacy'
+  label?: string
+}
+
+const config = {
+  latest: {
+    label: 'LATEST',
+    className: 'bg-blue-500/15 text-blue-400 border-blue-500/25',
+  },
+  stable: {
+    label: 'STABLE',
+    className: 'bg-green-500/15 text-green-400 border-green-500/25',
+  },
+  eol: {
+    label: 'END OF LIFE',
+    className: 'bg-amber-500/15 text-amber-400 border-amber-500/25',
+  },
+  legacy: {
+    label: 'LEGACY',
+    className: 'bg-zinc-500/15 text-zinc-400 border-zinc-500/25',
+  },
+}
+
+export default function Badge({ variant, label }: BadgeProps) {
+  const { label: defaultLabel, className } = config[variant]
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-full border text-[10px] font-semibold tracking-widest font-mono ${className}`}
+    >
+      {label ?? defaultLabel}
+    </span>
+  )
+}
--- a/frontend/src/components/ComparisonTable.tsx
+++ b/frontend/src/components/ComparisonTable.tsx
@ -0,0 +1,77 @@
+import { motion } from 'motion/react'
+import { Check, X, Minus } from 'lucide-react'
+
+type CellValue = true | false | 'varies'
+
+interface Row {
+  feature: string
+  msdl: CellValue
+  official: CellValue
+  others: CellValue
+}
+
+const rows: Row[] = [
+  { feature: 'Direct CDN link',      msdl: true,     official: true,     others: false },
+  { feature: 'No browser required',  msdl: true,     official: false,    others: 'varies' },
+  { feature: 'ARM64 support',        msdl: true,     official: false,    others: false },
+  { feature: 'No account needed',    msdl: true,     official: true,     others: 'varies' },
+  { feature: 'No ads or tracking',   msdl: true,     official: true,     others: false },
+]
+
+function Cell({ value, highlight = false }: { value: CellValue; highlight?: boolean }) {
+  if (value === true)
+    return <Check size={15} className={highlight ? 'text-blue-400' : 'text-green-500'} />
+  if (value === false)
+    return <X size={15} className="text-zinc-600" />
+  return <Minus size={15} className="text-zinc-500" />
+}
+
+export default function ComparisonTable() {
+  return (
+    <section className="mt-20">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: '-60px' }}
+        transition={{ duration: 0.5 }}
+      >
+        <h2 className="text-xl font-semibold text-white mb-1">Why MSDL?</h2>
+        <p className="text-sm text-zinc-500 mb-8">Compared to your other options.</p>
+
+        {/* Scrollable wrapper on mobile to prevent page-level overflow */}
+        <div className="overflow-x-auto rounded-2xl border border-white/7" style={{ WebkitOverflowScrolling: 'touch' }}>
+          <div style={{ minWidth: '480px' }}>
+            {/* Header */}
+            <div className="grid grid-cols-4 bg-[#111113] border-b border-white/7 text-[11px] font-mono font-semibold uppercase tracking-widest">
+              <div className="px-4 py-3 text-zinc-600">Feature</div>
+              <div className="px-4 py-3 text-blue-400 bg-blue-500/5 border-x border-blue-500/10 text-center">MSDL</div>
+              <div className="px-4 py-3 text-zinc-500 text-center">Official</div>
+              <div className="px-4 py-3 text-zinc-500 text-center">Others</div>
+            </div>
+
+            {/* Rows */}
+            {rows.map((row, i) => (
+              <div
+                key={row.feature}
+                className={`grid grid-cols-4 border-b border-white/5 last:border-0 ${i % 2 === 0 ? 'bg-[#0d0d0f]' : 'bg-[#111113]'}`}
+              >
+                <div className="px-4 py-3.5 text-sm text-zinc-400">{row.feature}</div>
+                <div className="px-4 py-3.5 flex justify-center bg-blue-500/3 border-x border-blue-500/8">
+                  <Cell value={row.msdl} highlight />
+                </div>
+                <div className="px-4 py-3.5 flex justify-center">
+                  <Cell value={row.official} />
+                </div>
+                <div className="px-4 py-3.5 flex justify-center">
+                  <Cell value={row.others} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <p className="mt-2 text-[11px] text-zinc-700 text-right pr-1 sm:hidden">← scroll →</p>
+      </motion.div>
+    </section>
+  )
+}
--- a/frontend/src/components/Dock.tsx
+++ b/frontend/src/components/Dock.tsx
@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { motion } from 'motion/react'
+import { Home, LayoutGrid, Info, ExternalLink, Shield } from 'lucide-react'
+
+interface DockItem {
+  label: string
+  icon: React.ReactNode
+  path?: string
+  href?: string
+}
+
+const items: DockItem[] = [
+  { label: 'Home',       icon: <Home size={19} />,        path: '/' },
+  { label: 'Products',   icon: <LayoutGrid size={19} />,  path: '/products' },
+  { label: 'About',      icon: <Info size={19} />,        path: '/about' },
+  { label: 'Privacy',    icon: <Shield size={19} />,      path: '/privacy-policy' },
+  { label: 'TechLatest', icon: <ExternalLink size={19} />, href: 'https://tech-latest.com' },
+]
+
+export default function Dock() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  useEffect(() => {
+    const idx = items.findIndex(item => item.path && item.path === location.pathname)
+    if (idx !== -1) setActiveIndex(idx)
+  }, [location.pathname])
+
+  function handleClick(item: DockItem, index: number) {
+    setActiveIndex(index)
+    if (item.href) {
+      window.open(item.href, '_blank', 'noopener noreferrer')
+    } else if (item.path) {
+      navigate(item.path)
+    }
+  }
+
+  return (
+    <>
+      {/* ── DESKTOP DOCK (sm+) — centered floating pill ── */}
+      <div className="hidden sm:flex fixed bottom-5 left-0 right-0 justify-center z-50 pointer-events-none">
+        <motion.div
+          className="pointer-events-auto flex items-center gap-1 px-3 py-2 rounded-2xl border border-white/10 bg-[#111113]/90 backdrop-blur-xl shadow-2xl shadow-black/50"
+          initial={{ y: 16, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+        >
+          {items.map((item, i) => {
+            const isActive = i === activeIndex
+            return (
+              <motion.button
+                key={item.label}
+                onClick={() => handleClick(item, i)}
+                whileHover={{ scale: 1.06, y: -2 }}
+                whileTap={{ scale: 0.93 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 22 }}
+                className={`
+                  relative flex items-center gap-2 rounded-xl cursor-pointer px-3 py-2
+                  transition-all duration-200
+                  ${isActive
+                    ? 'bg-white/10 border border-white/15 text-white'
+                    : 'border border-transparent text-zinc-500 hover:text-zinc-300'
+                  }
+                `}
+                aria-label={item.label}
+              >
+                {item.icon}
+
+                {/* Expanding active label */}
+                <motion.span
+                  animate={{ width: isActive ? 'auto' : 0, opacity: isActive ? 1 : 0 }}
+                  transition={{ type: 'spring', stiffness: 400, damping: 32 }}
+                  className="overflow-hidden whitespace-nowrap text-sm font-medium"
+                >
+                  {item.label}
+                </motion.span>
+
+                {/* Active dot */}
+                {isActive && (
+                  <motion.span
+                    layoutId="dock-dot-desktop"
+                    className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-blue-400"
+                  />
+                )}
+              </motion.button>
+            )
+          })}
+        </motion.div>
+      </div>
+
+      {/* ── MOBILE DOCK (<sm) — full-width bottom bar, flush, no gap ── */}
+      <motion.div
+        className="flex sm:hidden fixed bottom-0 left-0 right-0 z-50
+          border-t border-white/8 bg-[#111113]/95 backdrop-blur-xl"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+      >
+        {items.map((item, i) => {
+          const isActive = i === activeIndex
+          return (
+            <button
+              key={item.label}
+              onClick={() => handleClick(item, i)}
+              className="flex-1 flex flex-col items-center justify-center gap-1 py-3 min-w-0"
+            >
+              <span className={`transition-colors ${isActive ? 'text-blue-400' : 'text-zinc-500'}`}>
+                {item.icon}
+              </span>
+              <span
+                className={`text-[9px] font-medium tracking-wide transition-colors truncate max-w-full px-1 ${
+                  isActive ? 'text-blue-400' : 'text-zinc-600'
+                }`}
+              >
+                {item.label}
+              </span>
+            </button>
+          )
+        })}
+      </motion.div>
+    </>
+  )
+}
--- a/frontend/src/components/FAQAccordion.tsx
+++ b/frontend/src/components/FAQAccordion.tsx
@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { ChevronRight } from 'lucide-react'
+
+interface FaqItem {
+  q: string
+  a: string
+}
+
+const faqs: FaqItem[] = [
+  {
+    q: 'Is this legal?',
+    a: 'Yes. MSDL does not host, modify, or redistribute any Microsoft files. It automates access to download links that Microsoft already provides for free at microsoft.com/software-download — the same way Rufus and the open-source Fido script do. Microsoft itself recommends Rufus (which uses the identical approach) in its official documentation. You are downloading a file directly from Microsoft\'s own servers. A valid Windows license is still required to activate the OS.',
+  },
+  {
+    q: 'Are these download links safe?',
+    a: 'Yes. MSDL never stores or modifies any files. It retrieves signed, time-limited download links directly from Microsoft\'s servers (software.download.prss.microsoft.com). You can verify this by inspecting your browser\'s network requests.',
+  },
+  {
+    q: 'Why do links expire in 24 hours?',
+    a: 'Microsoft generates short-lived, IP-tied signed URLs to prevent redistribution and hotlinking of their ISOs. This is the same link you\'d get from the official Microsoft Software Download page — we just make it accessible without a browser.',
+  },
+  {
+    q: 'Can I use this with IDM or aria2?',
+    a: 'Absolutely — and we strongly recommend it. Microsoft throttles single-threaded browser downloads. Tools like aria2 (aria2c -x 16 -s 16 "URL") or IDM use 16 parallel connections, which typically give you full line speed on their CDN.',
+  },
+  {
+    q: 'What\'s the difference between the various product IDs?',
+    a: 'Each Windows release has a unique product ID on Microsoft\'s servers. For example, 3262 is Windows 11 25H2 (x64) and 3265 is Windows 11 25H2 (ARM64). MSDL exposes all known IDs so you can always find the exact build you need.',
+  },
+  {
+    q: 'Is MSDL open source?',
+    a: 'Yes. Both the frontend and the backend proxy are fully open source. The backend implements the same session-based flow as the Fido PowerShell script, ported to Go and Node.js. You can self-host the entire stack.',
+  },
+]
+
+export default function FAQAccordion() {
+  const [open, setOpen] = useState<number | null>(null)
+
+  return (
+    <section className="mt-20 mb-8">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: '-60px' }}
+        transition={{ duration: 0.5 }}
+      >
+        <h2 className="text-xl font-semibold text-white mb-1">Frequently asked questions</h2>
+        <p className="text-sm text-zinc-500 mb-8">Everything you need to know before downloading.</p>
+
+        <div className="rounded-2xl border border-white/7 overflow-hidden divide-y divide-white/5">
+          {faqs.map((faq, i) => (
+            <div key={i} className="bg-[#111113]">
+              <button
+                onClick={() => setOpen(open === i ? null : i)}
+                className="w-full flex items-center justify-between px-5 py-4 text-left group"
+              >
+                <span className={`text-sm font-medium transition-colors ${open === i ? 'text-white' : 'text-zinc-300 group-hover:text-white'}`}>
+                  {faq.q}
+                </span>
+                <motion.span
+                  animate={{ rotate: open === i ? 90 : 0 }}
+                  transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+                  className="flex-shrink-0 ml-4 text-zinc-600 group-hover:text-zinc-400 transition-colors"
+                >
+                  <ChevronRight size={16} />
+                </motion.span>
+              </button>
+
+              <AnimatePresence initial={false}>
+                {open === i && (
+                  <motion.div
+                    key="content"
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                    className="overflow-hidden"
+                  >
+                    <p className="px-5 pb-5 text-sm text-zinc-400 leading-relaxed">
+                      {faq.a}
+                    </p>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  )
+}
--- a/frontend/src/components/HowItWorks.tsx
+++ b/frontend/src/components/HowItWorks.tsx
@ -0,0 +1,62 @@
+import { motion } from 'motion/react'
+import { LayoutGrid, Globe, Link2 } from 'lucide-react'
+
+const steps = [
+  {
+    num: '1',
+    icon: LayoutGrid,
+    title: 'Pick a release',
+    desc: 'Choose from Windows 11, 10, and 8.1 across all feature updates.',
+  },
+  {
+    num: '2',
+    icon: Globe,
+    title: 'Choose language',
+    desc: '38 localised languages available for every release.',
+  },
+  {
+    num: '3',
+    icon: Link2,
+    title: 'Get CDN link',
+    desc: 'Direct from Microsoft\'s servers. No proxy, no middleman.',
+  },
+]
+
+export default function HowItWorks() {
+  return (
+    <section className="mt-20">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: '-60px' }}
+        transition={{ duration: 0.5 }}
+      >
+        <h2 className="text-xl font-semibold text-white mb-1">How it works</h2>
+        <p className="text-sm text-zinc-500 mb-8">Three steps to your official Windows ISO.</p>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/7 rounded-2xl overflow-hidden border border-white/7">
+          {steps.map((step, i) => {
+            const Icon = step.icon
+            return (
+              <div
+                key={step.num}
+                className="bg-[#111113] p-6 flex flex-col gap-4"
+              >
+                <div className="flex items-center gap-3">
+                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-[11px] font-mono font-semibold text-blue-400">
+                    {i + 1}
+                  </span>
+                  <Icon size={16} className="text-zinc-500" />
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-white mb-1">{step.title}</p>
+                  <p className="text-sm text-zinc-500 leading-relaxed">{step.desc}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </motion.div>
+    </section>
+  )
+}
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@ -0,0 +1,79 @@
+import { motion } from 'motion/react'
+import { Download, ArrowRight } from 'lucide-react'
+import Badge from './Badge'
+
+const WinLogo = ({ className }: { className?: string }) => (
+  <svg viewBox="0 0 88 88" className={className} fill="currentColor">
+    <path d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529l.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z" />
+  </svg>
+)
+
+type BadgeVariant = 'latest' | 'stable' | 'eol' | 'legacy'
+
+interface ProductCardProps {
+  id: string
+  name: string
+  version: string
+  build: string
+  description: string
+  badge: BadgeVariant
+  archs?: string[]
+  onClick: () => void
+}
+
+export default function ProductCard({
+  name,
+  version,
+  build,
+  description,
+  badge,
+  archs = ['x64'],
+  onClick,
+}: ProductCardProps) {
+  return (
+    <motion.div
+      whileHover={{ y: -3, scale: 1.005 }}
+      transition={{ type: 'spring', stiffness: 400, damping: 25 }}
+      onClick={onClick}
+      className="group relative cursor-pointer rounded-2xl border border-white/7 bg-[#111113] p-6
+        hover:border-white/13 hover:shadow-2xl hover:shadow-black/40
+        transition-colors duration-300"
+    >
+      {/* Header row */}
+      <div className="flex items-start justify-between mb-4">
+        <div className="w-9 h-9 rounded-lg bg-white/5 border border-white/8 flex items-center justify-center">
+          <WinLogo className="w-5 h-5 text-white/60" />
+        </div>
+        <Badge variant={badge} />
+      </div>
+
+      {/* Title */}
+      <div className="mb-3">
+        <h2 className="text-base font-semibold text-white leading-tight">{name} {version}</h2>
+        <p className="text-[11px] font-mono text-zinc-500 mt-0.5 tracking-wide">Build {build}</p>
+      </div>
+
+      {/* Description */}
+      <p className="text-sm text-zinc-400 leading-relaxed mb-4">{description}</p>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between">
+        <div className="flex gap-1.5">
+          {archs.map(arch => (
+            <span
+              key={arch}
+              className="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded bg-white/5 border border-white/8 text-zinc-500"
+            >
+              {arch}
+            </span>
+          ))}
+        </div>
+        <div className="flex items-center gap-1 text-xs text-zinc-600 group-hover:text-zinc-400 transition-colors">
+          <Download size={12} />
+          <span>Get links</span>
+          <ArrowRight size={11} className="group-hover:translate-x-0.5 transition-transform" />
+        </div>
+      </div>
+    </motion.div>
+  )
+}
--- a/frontend/src/components/RelatedReleases.tsx
+++ b/frontend/src/components/RelatedReleases.tsx
@ -0,0 +1,38 @@
+import { useNavigate } from 'react-router-dom'
+import { ArrowRight } from 'lucide-react'
+
+interface RelatedProduct {
+  id: string
+  label: string
+}
+
+interface RelatedReleasesProps {
+  current: string
+  items: RelatedProduct[]
+}
+
+export default function RelatedReleases({ current, items }: RelatedReleasesProps) {
+  const navigate = useNavigate()
+  const filtered = items.filter(i => i.id !== current)
+  if (filtered.length === 0) return null
+
+  return (
+    <div className="mt-6 pt-5 border-t border-white/5">
+      <p className="text-[10px] font-mono font-semibold uppercase tracking-widest text-zinc-600 mb-3">
+        Also available
+      </p>
+      <div className="flex flex-wrap gap-2">
+        {filtered.map(item => (
+          <button
+            key={item.id}
+            onClick={() => navigate(`/product/${item.id}`)}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-white/7 bg-white/3 text-xs text-zinc-400 hover:text-white hover:border-white/13 hover:bg-white/6 transition-all"
+          >
+            {item.label}
+            <ArrowRight size={11} />
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/ScrollToTop.tsx
+++ b/frontend/src/components/ScrollToTop.tsx
@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' })
+  }, [pathname])
+
+  return null
+}
--- a/frontend/src/components/SiteFooter.tsx
+++ b/frontend/src/components/SiteFooter.tsx
@ -0,0 +1,29 @@
+import { Link } from 'react-router-dom'
+
+export default function SiteFooter() {
+  return (
+    <footer className="max-w-4xl mx-auto px-5 pb-4 pt-8 text-center">
+      <p className="text-[11px] text-zinc-600 leading-relaxed">
+        This open-source project is not affiliated with Microsoft Corporation.{' '}
+        Windows is a registered trademark of Microsoft Corporation.{' '}
+        All ISO files are hosted on Microsoft's official CDN.
+      </p>
+      <div className="flex items-center justify-center gap-4 mt-2 text-[11px] text-zinc-700">
+        <Link to="/privacy-policy" className="hover:text-zinc-500 transition-colors">Privacy Policy</Link>
+        <span>·</span>
+        <Link to="/disclaimer" className="hover:text-zinc-500 transition-colors">Disclaimer</Link>
+        <span>·</span>
+        <Link to="/about" className="hover:text-zinc-500 transition-colors">About</Link>
+        <span>·</span>
+        <a
+          href="https://github.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-zinc-500 transition-colors"
+        >
+          GitHub
+        </a>
+      </div>
+    </footer>
+  )
+}
--- a/frontend/src/components/StatsBar.tsx
+++ b/frontend/src/components/StatsBar.tsx
@ -0,0 +1,33 @@
+import { motion } from 'motion/react'
+
+interface Stat {
+  value: string
+  label: string
+}
+
+const stats: Stat[] = [
+  { value: '17', label: 'releases available' },
+  { value: '38', label: 'languages' },
+  { value: '0', label: 'intermediaries' },
+]
+
+export default function StatsBar() {
+  return (
+    <motion.div
+      className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-[11px] font-mono text-zinc-600"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.35, duration: 0.5 }}
+    >
+      {stats.map((s, i) => (
+        <span key={s.label} className="flex items-center gap-4">
+          <span>
+            <span className="text-zinc-400 font-semibold">{s.value}</span>
+            {' '}{s.label}
+          </span>
+          {i < stats.length - 1 && <span className="text-zinc-700">·</span>}
+        </span>
+      ))}
+    </motion.div>
+  )
+}
--- a/frontend/src/components/SystemRequirements.tsx
+++ b/frontend/src/components/SystemRequirements.tsx
@ -0,0 +1,42 @@
+import { Cpu, MemoryStick, HardDrive, Shield } from 'lucide-react'
+
+interface Requirement {
+  icon: React.ReactNode
+  value: string
+  label: string
+}
+
+interface SystemRequirementsProps {
+  isWin11?: boolean
+}
+
+export default function SystemRequirements({ isWin11 = false }: SystemRequirementsProps) {
+  const requirements: Requirement[] = [
+    { icon: <Cpu size={16} />, value: '1 GHz+', label: 'Processor' },
+    { icon: <MemoryStick size={16} />, value: isWin11 ? '4 GB' : '2 GB', label: 'RAM' },
+    { icon: <HardDrive size={16} />, value: '64 GB', label: 'Storage' },
+  ]
+
+  return (
+    <div className="rounded-xl border border-white/7 bg-[#111113] p-4 mt-5">
+      <p className="text-[10px] font-mono font-semibold uppercase tracking-widest text-zinc-600 mb-3">
+        System Requirements
+      </p>
+      <div className="grid grid-cols-3 gap-3">
+        {requirements.map(req => (
+          <div key={req.label} className="flex flex-col gap-1.5">
+            <span className="text-zinc-500">{req.icon}</span>
+            <span className="text-sm font-semibold text-white">{req.value}</span>
+            <span className="text-[11px] text-zinc-600">{req.label}</span>
+          </div>
+        ))}
+      </div>
+      {isWin11 && (
+        <div className="mt-3 pt-3 border-t border-white/5 flex items-center gap-2">
+          <Shield size={13} className="text-amber-500 flex-shrink-0" />
+          <span className="text-[11px] text-amber-500/80">TPM 2.0 required for Windows 11</span>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,57 @@
+@import "tailwindcss";
+@import "@fontsource-variable/geist";
+
+@theme {
+  /* Background layers */
+  --color-bg:        #09090b;
+  --color-surface:   #111113;
+  --color-surface-2: #18181b;
+
+  /* Borders */
+  --color-border:       rgba(255, 255, 255, 0.07);
+  --color-border-hover: rgba(255, 255, 255, 0.13);
+
+  /* Accent */
+  --color-accent:       #3b82f6;
+  --color-accent-hover: #2563eb;
+
+  /* Text */
+  --color-text:         #fafafa;
+  --color-text-2:       #a1a1aa;
+  --color-text-muted:   #52525b;
+
+  /* Status */
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error:   #ef4444;
+
+  /* Font families */
+  --font-sans: 'Geist Variable', 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono Variable', 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: #09090b;
+  color: #fafafa;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-padding-bottom: 120px;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Thin, minimal scrollbar */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #27272a; border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)
--- a/frontend/src/pages/AboutPage.tsx
+++ b/frontend/src/pages/AboutPage.tsx
@ -0,0 +1,110 @@
+import { motion } from 'motion/react'
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2.5">
+      <h2 className="text-sm font-semibold text-white/80">{title}</h2>
+      <div className="text-sm text-zinc-500 leading-relaxed space-y-2">{children}</div>
+    </div>
+  )
+}
+
+export default function AboutPage() {
+  return (
+    <div className="max-w-2xl mx-auto px-4 pt-12 pb-10">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className="rounded-2xl border border-white/7 bg-[#111113] p-8 space-y-7"
+      >
+        <div>
+          <h1 className="text-2xl font-bold text-white mb-1">About MSDL</h1>
+          <p className="text-xs font-mono text-zinc-600">A TechLatest open-source project</p>
+        </div>
+
+        <Section title="What is this?">
+          <p>
+            MSDL (Microsoft Software Download Links) is a clean, open-source web tool for
+            obtaining official Windows ISO files directly from Microsoft's content delivery network
+            — without needing a Windows machine, the Media Creation Tool, or a browser lock check.
+          </p>
+          <p>
+            There are no third-party hosts, no redirects, no registration, and no ads.
+            Every link you receive is exactly the same signed URL you would get from
+            Microsoft's own download page.
+          </p>
+        </Section>
+
+        <Section title="How it works">
+          <p>
+            Our backend replicates the session-based authentication flow that Microsoft uses to
+            serve download links to end users. The same approach is used by{' '}
+            <a
+              href="https://github.com/pbatard/Fido"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              Fido
+            </a>{' '}
+            (the PowerShell script bundled with Rufus). The flow is:
+          </p>
+          <ol className="list-decimal list-inside space-y-1 text-zinc-500 text-sm">
+            <li>Register a session with Microsoft's tracking endpoint</li>
+            <li>Fetch and parse the MDT fingerprinting script</li>
+            <li>Call the SKU info API to retrieve available languages</li>
+            <li>Call the download links API using the warmed session to get signed CDN URLs</li>
+          </ol>
+          <p>
+            Links are IP-tied to the server and expire after 24 hours — this is standard
+            Microsoft behaviour, not a limitation of MSDL.
+          </p>
+        </Section>
+
+        <Section title="Data source">
+          <p>
+            All product data (release names, build numbers, and available architectures) is sourced
+            from Microsoft's official software download connector API:
+          </p>
+          <p>
+            <code className="text-[11px] font-mono bg-white/5 border border-white/7 px-2 py-0.5 rounded text-zinc-400 break-all">
+              www.microsoft.com/software-download-connector/api/
+            </code>
+          </p>
+          <p>
+            Product IDs are maintained manually based on Microsoft's release cadence.
+            Windows 11 25H2, 24H2, Windows 10 22H2, and Windows 8.1 are currently listed.
+            New releases are added as Microsoft publishes them.
+          </p>
+        </Section>
+
+        <Section title="Credits">
+          <p>
+            The underlying session flow is inspired by{' '}
+            <a
+              href="https://github.com/pbatard/Fido"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              Fido
+            </a>{' '}
+            by Pete Batard, the same mechanism powering Rufus's ISO download feature.
+          </p>
+          <p>
+            Built and maintained by{' '}
+            <a
+              href="https://tech-latest.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              TechLatest
+            </a>.
+          </p>
+        </Section>
+      </motion.div>
+    </div>
+  )
+}
--- a/frontend/src/pages/DisclaimerPage.tsx
+++ b/frontend/src/pages/DisclaimerPage.tsx
@ -0,0 +1,75 @@
+import { motion } from 'motion/react'
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <h2 className="text-sm font-semibold text-white/80">{title}</h2>
+      <div className="text-sm text-zinc-500 leading-relaxed space-y-2">{children}</div>
+    </div>
+  )
+}
+
+export default function DisclaimerPage() {
+  return (
+    <div className="max-w-2xl mx-auto px-4 pt-12 pb-10">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className="rounded-2xl border border-white/7 bg-[#111113] p-8 space-y-7"
+      >
+        <div>
+          <h1 className="text-2xl font-bold text-white mb-1">Disclaimer</h1>
+          <p className="text-xs font-mono text-zinc-600">Last updated: April 9, 2026</p>
+        </div>
+
+        <div className="p-4 rounded-xl border border-amber-500/15 bg-amber-500/6 text-amber-400/80 text-[12px] leading-relaxed">
+          This open-source project is <strong className="text-amber-400">not affiliated with, endorsed by, or sponsored by
+          Microsoft Corporation</strong> in any way. Windows is a registered trademark of Microsoft Corporation.
+        </div>
+
+        <Section title="No affiliation with Microsoft">
+          <p>
+            MSDL is an independent, open-source project. It is not produced, approved, or supported
+            by Microsoft Corporation. The name "Windows" and the Windows logo are registered
+            trademarks of Microsoft Corporation.
+          </p>
+        </Section>
+
+        <Section title="Purpose">
+          <p>
+            MSDL exists solely to make it easier for users to access official, unmodified Microsoft
+            Windows ISO files that Microsoft already makes freely available for download. All files
+            are served directly from Microsoft's own servers — we do not host, mirror, or modify
+            any content.
+          </p>
+        </Section>
+
+        <Section title="No warranty">
+          <p>
+            This tool is provided "as is" without warranty of any kind. We make no guarantees
+            about the availability of Microsoft's download links, the uptime of our backend, or
+            the compatibility of any downloaded ISO with your hardware configuration.
+          </p>
+        </Section>
+
+        <Section title="Use at your own risk">
+          <p>
+            By using this tool, you agree that you are solely responsible for complying with
+            Microsoft's End User License Agreement (EULA) and any applicable laws in your jurisdiction.
+            Downloading Windows does not grant you a license to use it — a valid product key or
+            digital license is required for activation.
+          </p>
+        </Section>
+
+        <Section title="Open source">
+          <p>
+            The source code is publicly available. You are free to inspect, fork, and self-host
+            this project under the terms of its open-source license. The project credits the
+            open-source Fido script by Pete Batard for the underlying session flow.
+          </p>
+        </Section>
+      </motion.div>
+    </div>
+  )
+}
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@ -0,0 +1,153 @@
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'motion/react'
+import { ArrowRight } from 'lucide-react'
+import ProductCard from '../components/ProductCard'
+import StatsBar from '../components/StatsBar'
+import HowItWorks from '../components/HowItWorks'
+import ComparisonTable from '../components/ComparisonTable'
+import FAQAccordion from '../components/FAQAccordion'
+
+const featured = [
+  {
+    id: '3262',
+    name: 'Windows 11',
+    version: '25H2',
+    build: '26200.6584',
+    description: 'The latest Windows 11 release with AI features and improved performance.',
+    badge: 'latest' as const,
+    archs: ['x64', 'ARM64'],
+  },
+  {
+    id: '3113',
+    name: 'Windows 11',
+    version: '24H2',
+    build: '26100.1742',
+    description: 'The widely deployed stable release. Recommended for enterprise environments.',
+    badge: 'stable' as const,
+    archs: ['x64', 'ARM64'],
+  },
+  {
+    id: '2618',
+    name: 'Windows 10',
+    version: '22H2',
+    build: '19045.2965',
+    description: 'The final Windows 10 feature update. Security support until October 2025.',
+    badge: 'eol' as const,
+    archs: ['x64', 'x86'],
+  },
+  {
+    id: '52',
+    name: 'Windows 8.1',
+    version: 'RTM',
+    build: '9600.17415',
+    description: 'Legacy release for older hardware compatibility and historical reference.',
+    badge: 'legacy' as const,
+    archs: ['x64', 'x86'],
+  },
+]
+
+const container = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.08 } },
+}
+
+const cardVariant = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 280, damping: 28 } },
+}
+
+export default function HomePage() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="max-w-4xl mx-auto px-5 pt-20 pb-16 relative" style={{ overflowX: 'hidden' }}>
+
+      {/* Ambient glow — fixed so it never affects document layout/scroll */}
+      <div className="fixed top-0 left-1/2 -translate-x-1/2 w-[700px] h-[300px] bg-blue-500/6 rounded-full blur-3xl pointer-events-none -z-10" />
+
+      {/* Hero */}
+      <motion.div
+        className="text-center mb-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <p className="text-[11px] font-mono font-semibold tracking-[0.22em] uppercase text-blue-400 mb-5">
+          Official Microsoft ISOs
+        </p>
+        <h1
+          className="font-bold text-white tracking-tight leading-tight mb-4"
+          style={{ fontSize: 'clamp(1.6rem, 7.5vw, 3.75rem)' }}
+        >
+          Windows ISO <span className="text-white/25">Downloader</span>
+        </h1>
+        <p className="text-zinc-400 text-base max-w-sm mx-auto mb-6 leading-relaxed">
+          Direct links from Microsoft's CDN. No ads. No registration.
+        </p>
+        <div className="flex items-center justify-center gap-4 text-[12px] text-zinc-500">
+          <span className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block" />
+            Always official
+          </span>
+          <span className="text-zinc-700">·</span>
+          <span className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 inline-block" />
+            Real-time links
+          </span>
+          <span className="text-zinc-700">·</span>
+          <span className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-zinc-600 inline-block" />
+            Free forever
+          </span>
+        </div>
+      </motion.div>
+
+      {/* Stats bar */}
+      <div className="mb-10">
+        <StatsBar />
+      </div>
+
+      {/* Featured grid */}
+      <motion.div
+        className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8"
+        variants={container}
+        initial="hidden"
+        animate="show"
+      >
+        {featured.map(product => (
+          <motion.div key={product.id} variants={cardVariant}>
+            <ProductCard
+              {...product}
+              onClick={() => navigate(`/product/${product.id}`)}
+            />
+          </motion.div>
+        ))}
+      </motion.div>
+
+      {/* Browse all CTA */}
+      <motion.div
+        className="text-center"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5 }}
+      >
+        <button
+          onClick={() => navigate('/products')}
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border border-white/8 bg-white/4 text-sm text-zinc-400 hover:text-white hover:border-white/15 hover:bg-white/7 transition-all duration-200"
+        >
+          Browse all {featured.length > 0 ? '17' : ''} releases
+          <ArrowRight size={14} />
+        </button>
+      </motion.div>
+
+      {/* How it works */}
+      <HowItWorks />
+
+      {/* Comparison table */}
+      <ComparisonTable />
+
+      {/* FAQ */}
+      <FAQAccordion />
+    </div>
+  )
+}
--- a/frontend/src/pages/PrivacyPolicyPage.tsx
+++ b/frontend/src/pages/PrivacyPolicyPage.tsx
@ -0,0 +1,78 @@
+import { motion } from 'motion/react'
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <h2 className="text-sm font-semibold text-white/80">{title}</h2>
+      <div className="text-sm text-zinc-500 leading-relaxed space-y-2">{children}</div>
+    </div>
+  )
+}
+
+export default function PrivacyPolicyPage() {
+  return (
+    <div className="max-w-2xl mx-auto px-4 pt-12 pb-10">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className="rounded-2xl border border-white/7 bg-[#111113] p-8 space-y-7"
+      >
+        <div>
+          <h1 className="text-2xl font-bold text-white mb-1">Privacy Policy</h1>
+          <p className="text-xs font-mono text-zinc-600">Last updated: April 9, 2026</p>
+        </div>
+
+        <Section title="No data collected">
+          <p>
+            MSDL does not collect, store, log, or share any personally identifiable information.
+            There are no user accounts, no cookies, no analytics trackers, and no third-party
+            advertising scripts of any kind.
+          </p>
+        </Section>
+
+        <Section title="How download links work">
+          <p>
+            When you request a download link, our backend server contacts Microsoft's software
+            download API on your behalf using a non-Windows browser user-agent (the same method
+            used by open-source tools like Rufus/Fido). Microsoft's servers return a time-limited,
+            IP-tied signed URL.
+          </p>
+          <p>
+            Our backend does not log your IP address, does not store the generated link, and does
+            not proxy the actual file download — the ISO is downloaded directly from Microsoft's CDN.
+          </p>
+        </Section>
+
+        <Section title="Third-party services">
+          <p>
+            All Windows ISO files are hosted on Microsoft's official content delivery network
+            (<code className="text-zinc-400 text-[11px] font-mono bg-white/5 px-1 py-0.5 rounded">software.download.prss.microsoft.com</code>).
+            We are not responsible for Microsoft's privacy practices or link availability.
+          </p>
+        </Section>
+
+        <Section title="Open source">
+          <p>
+            The full source code for both the frontend and backend is publicly available.
+            You can inspect, audit, or self-host the entire stack.
+          </p>
+        </Section>
+
+        <Section title="Contact">
+          <p>
+            Questions? Reach us via{' '}
+            <a
+              href="https://tech-latest.com/contact-us/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              TechLatest
+            </a>.
+          </p>
+        </Section>
+      </motion.div>
+    </div>
+  )
+}
--- a/frontend/src/pages/ProductDetailPage.tsx
+++ b/frontend/src/pages/ProductDetailPage.tsx
@ -0,0 +1,403 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { motion, AnimatePresence } from 'motion/react'
+import * as Select from '@radix-ui/react-select'
+import { ArrowLeft, ChevronDown, Download, AlertTriangle, Check, ExternalLink } from 'lucide-react'
+import { toast } from 'sonner'
+import type { Sku, DownloadOption } from '../types'
+import SystemRequirements from '../components/SystemRequirements'
+import Aria2Tip from '../components/Aria2Tip'
+import RelatedReleases from '../components/RelatedReleases'
+
+const API_BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3002'
+
+// Map product ID → metadata
+const PRODUCT_META: Record<string, { badge: string; archs: string[] }> = {
+  '3262': { badge: 'LATEST', archs: ['x64'] },
+  '3265': { badge: 'LATEST', archs: ['ARM64'] },
+  '3321': { badge: 'LATEST', archs: ['x64'] },
+  '3324': { badge: 'LATEST', archs: ['ARM64'] },
+  '3113': { badge: 'STABLE', archs: ['x64'] },
+  '3131': { badge: 'STABLE', archs: ['ARM64'] },
+  '2618': { badge: 'EOL SOON', archs: ['x64', 'x86'] },
+  '2378': { badge: 'EOL SOON', archs: ['x64'] },
+  '52': { badge: 'LEGACY', archs: ['x64', 'x86'] },
+  '48': { badge: 'LEGACY', archs: ['x64', 'x86'] },
+}
+
+// Sibling release groups for "Also available"
+const RELATED_GROUPS: Record<string, { id: string; label: string }[]> = {
+  '3262': [
+    { id: '3265', label: 'Win 11 25H2 ARM64' },
+    { id: '3321', label: 'Win 11 25H2 (updated)' },
+    { id: '3113', label: 'Win 11 24H2' },
+  ],
+  '3265': [
+    { id: '3262', label: 'Win 11 25H2 x64' },
+    { id: '3321', label: 'Win 11 25H2 (updated)' },
+    { id: '3131', label: 'Win 11 24H2 ARM64' },
+  ],
+  '3321': [
+    { id: '3262', label: 'Win 11 25H2' },
+    { id: '3324', label: 'Win 11 25H2 ARM64' },
+    { id: '3113', label: 'Win 11 24H2' },
+  ],
+  '3324': [
+    { id: '3321', label: 'Win 11 25H2 x64' },
+    { id: '3262', label: 'Win 11 25H2' },
+    { id: '3265', label: 'Win 11 25H2 ARM64 (alt)' },
+  ],
+  '3113': [
+    { id: '3262', label: 'Win 11 25H2' },
+    { id: '3131', label: 'Win 11 24H2 ARM64' },
+    { id: '2618', label: 'Win 10 22H2' },
+  ],
+  '3131': [
+    { id: '3265', label: 'Win 11 25H2 ARM64' },
+    { id: '3113', label: 'Win 11 24H2 x64' },
+  ],
+  '2618': [
+    { id: '3113', label: 'Win 11 24H2' },
+    { id: '3262', label: 'Win 11 25H2' },
+    { id: '52', label: 'Win 8.1' },
+  ],
+  '52': [
+    { id: '48', label: 'Win 8.1 Single Language' },
+    { id: '2618', label: 'Win 10 22H2' },
+  ],
+}
+
+function WinLogo({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 88 88" className={className} fill="currentColor">
+      <path d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529l.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z" />
+    </svg>
+  )
+}
+
+function archFromUri(uri: string): string {
+  const name = uri.split('/').pop()?.split('?')[0]?.toLowerCase() ?? ''
+  if (name.includes('arm')) return 'ARM64'
+  if (name.includes('x64') || name.includes('64')) return 'x64'
+  if (name.includes('x32') || name.includes('32') || name.includes('x86')) return 'x86'
+  return 'ISO'
+}
+
+function isWin11(productId: string): boolean {
+  const id = Number(productId)
+  return id >= 3113
+}
+
+export default function ProductDetailPage() {
+  const { productId } = useParams<{ productId: string }>()
+  const navigate = useNavigate()
+
+  const [productName, setProductName] = useState('')
+  const [buildStr, setBuildStr] = useState('')
+  const [languages, setLanguages] = useState<Sku[]>([])
+  const [selectedSku, setSelectedSku] = useState<Sku | null>(null)
+  const [downloadLinks, setDownloadLinks] = useState<DownloadOption[]>([])
+  const [isLoadingLangs, setIsLoadingLangs] = useState(true)
+  const [isFetching, setIsFetching] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [copiedUri, setCopiedUri] = useState<string | null>(null)
+
+  const meta = PRODUCT_META[productId!] ?? { badge: '', archs: ['x64'] }
+  const related = RELATED_GROUPS[productId!] ?? []
+
+  // Load product name + build string
+  useEffect(() => {
+    fetch('/data/products.json')
+      .then(r => r.json())
+      .then((data: Record<string, string>) => {
+        const name = data[productId!] ?? `Product ${productId}`
+        setProductName(name)
+        // Extract build from parentheses e.g. "(26200.6584)"
+        const match = name.match(/\(([^)]+)\)/)
+        if (match) setBuildStr(match[1])
+      })
+      .catch(() => setProductName(`Product ${productId}`))
+  }, [productId])
+
+  // Fetch languages on mount
+  useEffect(() => {
+    if (!productId) return
+    setIsLoadingLangs(true)
+    setError(null)
+    setDownloadLinks([])
+    setSelectedSku(null)
+
+    fetch(`${API_BASE}/skuinfo?product_id=${productId}`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.error) throw new Error(data.error)
+        if (!data.Skus?.length) throw new Error('No languages found for this product.')
+        setLanguages(data.Skus)
+        // Default to English if present
+        const english = data.Skus.find((s: Sku) =>
+          s.LocalizedLanguage.toLowerCase().includes('english') &&
+          !s.LocalizedLanguage.toLowerCase().includes('international')
+        ) ?? data.Skus[0]
+        setSelectedSku(english)
+      })
+      .catch(e => setError(e.message))
+      .finally(() => setIsLoadingLangs(false))
+  }, [productId])
+
+  async function handleGetLinks() {
+    if (!selectedSku || !productId) return
+    setIsFetching(true)
+    setError(null)
+    setDownloadLinks([])
+
+    fetch(`${API_BASE}/proxy?product_id=${productId}&sku_id=${selectedSku.Id}`)
+      .then(r => r.json())
+      .then(data => {
+        if (data.error) throw new Error(data.error)
+        if (!data.ProductDownloadOptions?.length) throw new Error('No download links returned.')
+        setDownloadLinks(data.ProductDownloadOptions)
+      })
+      .catch(e => {
+        setError(e.message)
+        toast.error(e.message)
+      })
+      .finally(() => setIsFetching(false))
+  }
+
+  function handleCopy(uri: string) {
+    navigator.clipboard.writeText(uri)
+    setCopiedUri(uri)
+    toast.success('Link copied to clipboard!')
+    setTimeout(() => setCopiedUri(null), 2000)
+  }
+
+  // First download link URI for aria2 tip
+  const firstUri = downloadLinks[0]?.Uri
+
+  return (
+    <div className="max-w-xl mx-auto px-5 pt-12 pb-10">
+      {/* Back */}
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-300 mb-8 transition-colors"
+      >
+        <ArrowLeft size={15} />
+        Back
+      </button>
+
+      <motion.div
+        initial={{ opacity: 0, y: 14 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+      >
+        {/* Product header */}
+        <div className="flex items-start gap-4 mb-8">
+          <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/8 flex items-center justify-center flex-shrink-0">
+            <WinLogo className="w-6 h-6 text-white/50" />
+          </div>
+          <div className="min-w-0">
+            <h1 className="text-2xl font-bold text-white leading-tight tracking-tight">
+              {productName || `Product ${productId}`}
+            </h1>
+            {buildStr && (
+              <p className="text-[12px] font-mono text-zinc-500 mt-0.5">Build {buildStr}</p>
+            )}
+            {meta.archs.length > 0 && (
+              <div className="flex gap-1.5 mt-2">
+                {meta.archs.map(arch => (
+                  <span key={arch} className="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded bg-white/5 border border-white/8 text-zinc-500">
+                    {arch}
+                  </span>
+                ))}
+                {meta.badge && (
+                  <span className="text-[10px] font-mono font-semibold px-2 py-0.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400">
+                    {meta.badge}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Main card */}
+        <div className="rounded-2xl border border-white/7 bg-[#111113] p-6 space-y-5">
+          {isLoadingLangs ? (
+            <div className="space-y-3">
+              <div className="h-3 w-20 bg-white/6 rounded animate-pulse" />
+              <div className="h-11 bg-white/6 rounded-xl animate-pulse" />
+              <div className="h-11 bg-white/5 rounded-xl animate-pulse" />
+            </div>
+          ) : error && !languages.length ? (
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-red-500/8 border border-red-500/15 text-red-400 text-sm">
+              <AlertTriangle size={15} className="flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="font-medium mb-0.5">Failed to load languages</p>
+                <p className="text-red-400/70 text-xs">{error}</p>
+              </div>
+            </div>
+          ) : (
+            <>
+              {/* Language selector */}
+              <div>
+                <label className="block text-[10px] font-mono font-semibold uppercase tracking-widest text-zinc-600 mb-2">
+                  Language
+                </label>
+                <Select.Root
+                  value={selectedSku?.Id}
+                  onValueChange={val => {
+                    const sku = languages.find(l => l.Id === val)
+                    if (sku) setSelectedSku(sku)
+                    setDownloadLinks([])
+                    setError(null)
+                  }}
+                >
+                  <Select.Trigger className="w-full flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 border border-white/7 text-sm text-white hover:bg-white/7 hover:border-white/12 focus:outline-none transition-all cursor-pointer">
+                    <Select.Value placeholder="Select language..." />
+                    <Select.Icon>
+                      <ChevronDown size={14} className="text-zinc-500" />
+                    </Select.Icon>
+                  </Select.Trigger>
+
+                  <Select.Portal>
+                    <Select.Content
+                      className="z-[100] w-[var(--radix-select-trigger-width)] max-h-72 overflow-auto rounded-xl border border-white/9 bg-[#131316] backdrop-blur-xl shadow-2xl text-sm"
+                      position="popper"
+                      sideOffset={6}
+                    >
+                      <Select.Viewport className="p-1">
+                        {languages.map(lang => (
+                          <Select.Item
+                            key={lang.Id}
+                            value={lang.Id}
+                            className="relative flex items-center justify-between px-3 py-2.5 rounded-lg text-zinc-400 data-[highlighted]:text-white data-[highlighted]:bg-white/6 cursor-pointer outline-none transition-colors"
+                          >
+                            <Select.ItemText>{lang.LocalizedLanguage}</Select.ItemText>
+                            <Select.ItemIndicator>
+                              <Check size={13} className="text-blue-400" />
+                            </Select.ItemIndicator>
+                          </Select.Item>
+                        ))}
+                      </Select.Viewport>
+                    </Select.Content>
+                  </Select.Portal>
+                </Select.Root>
+              </div>
+
+              {/* CTA */}
+              <button
+                onClick={handleGetLinks}
+                disabled={!selectedSku || isFetching}
+                className="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-blue-500 text-white text-sm font-semibold hover:bg-blue-600 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-[0_0_20px_rgba(59,130,246,0.2)] hover:shadow-[0_0_24px_rgba(59,130,246,0.3)]"
+              >
+                {isFetching ? (
+                  <>
+                    <motion.span
+                      animate={{ rotate: 360 }}
+                      transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+                      className="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full"
+                    />
+                    Fetching links…
+                  </>
+                ) : (
+                  <>
+                    <Download size={15} />
+                    Get Download Links
+                  </>
+                )}
+              </button>
+            </>
+          )}
+
+          {/* Error after fetch */}
+          <AnimatePresence>
+            {error && languages.length > 0 && (
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+                className="flex items-start gap-3 p-4 rounded-xl bg-red-500/8 border border-red-500/15 text-red-400 text-sm"
+              >
+                <AlertTriangle size={15} className="flex-shrink-0 mt-0.5" />
+                <span>{error}</span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Download links */}
+          <AnimatePresence>
+            {downloadLinks.length > 0 && (
+              <motion.div
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+                transition={{ type: 'spring', stiffness: 300, damping: 28 }}
+              >
+                <div className="pt-4 border-t border-white/6 space-y-3">
+                  {/* Warning */}
+                  <div className="flex items-center gap-2 p-3 rounded-lg bg-amber-500/6 border border-amber-500/12 text-amber-400/80 text-[11px]">
+                    <AlertTriangle size={12} className="flex-shrink-0" />
+                    Links expire in 24 hours · IP-tied · Use a download manager for full speed
+                  </div>
+
+                  {/* Links */}
+                  {downloadLinks.map(link => {
+                    const filename = link.Uri.split('/').pop()?.split('?')[0] ?? 'download.iso'
+                    const arch = link.Architecture || archFromUri(link.Uri)
+                    const isCopied = copiedUri === link.Uri
+                    return (
+                      <div
+                        key={link.Uri}
+                        className="flex items-center justify-between gap-3 p-3.5 rounded-xl bg-white/3 border border-white/5 hover:border-white/9 transition-colors"
+                      >
+                        <div className="min-w-0">
+                          <p className="text-[12px] font-mono text-white truncate">{filename}</p>
+                          <p className="text-[11px] text-zinc-600 mt-0.5">{arch}</p>
+                        </div>
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          <button
+                            onClick={() => handleCopy(link.Uri)}
+                            className="p-2 rounded-lg text-zinc-600 hover:text-white hover:bg-white/6 transition-all"
+                            title="Copy link"
+                          >
+                            {isCopied
+                              ? <Check size={13} className="text-green-400" />
+                              : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-3.5 h-3.5">
+                                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                                </svg>
+                            }
+                          </button>
+                          <a
+                            href={link.Uri}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-blue-500/12 border border-blue-500/20 text-blue-400 text-[11px] font-medium hover:bg-blue-500/20 transition-all"
+                          >
+                            <Download size={11} />
+                            {arch}
+                            <ExternalLink size={10} className="opacity-50" />
+                          </a>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* System requirements */}
+        <SystemRequirements isWin11={isWin11(productId!)} />
+
+        {/* aria2 tip */}
+        <Aria2Tip downloadUrl={firstUri} />
+
+        {/* Related releases */}
+        {related.length > 0 && (
+          <RelatedReleases current={productId!} items={related} />
+        )}
+      </motion.div>
+    </div>
+  )
+}
--- a/frontend/src/pages/ProductsPage.tsx
+++ b/frontend/src/pages/ProductsPage.tsx
@ -0,0 +1,123 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'motion/react'
+import { Search, ArrowRight } from 'lucide-react'
+import type { Product } from '../types'
+
+const quickSearches = [
+  { label: 'Windows 11 25H2', query: '25H2' },
+  { label: 'Windows 11 24H2', query: '24H2' },
+  { label: 'Windows 10', query: 'Windows 10' },
+  { label: 'Windows 8.1', query: 'Windows 8.1' },
+]
+
+export default function ProductsPage() {
+  const navigate = useNavigate()
+  const [products, setProducts] = useState<Product[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [query, setQuery] = useState('')
+
+  useEffect(() => {
+    fetch('/data/products.json')
+      .then(r => r.json())
+      .then((data: Record<string, string>) => {
+        setProducts(Object.entries(data).map(([id, name]) => ({ id, name })))
+      })
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  const filtered = products.filter(p =>
+    p.name.toLowerCase().includes(query.toLowerCase())
+  )
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 pt-12 pb-10">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+      >
+        <h1 className="text-3xl font-bold text-white mb-1">All Products</h1>
+        <p className="text-white/40 text-sm mb-6">
+          {products.length} versions available
+        </p>
+
+        {/* Search */}
+        <div className="relative mb-4">
+          <Search size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-white/30" />
+          <input
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search Windows versions..."
+            className="w-full bg-white/5 border border-white/8 rounded-xl pl-10 pr-4 py-3 text-sm text-white placeholder:text-white/25 focus:outline-none focus:border-white/20 focus:bg-white/8 transition-all"
+          />
+        </div>
+
+        {/* Quick filters */}
+        <div className="flex flex-wrap gap-2 mb-6">
+          {quickSearches.map(s => (
+            <button
+              key={s.label}
+              onClick={() => setQuery(s.query)}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium border border-white/8 bg-white/4 text-white/50 hover:text-white hover:border-white/15 hover:bg-white/8 transition-all"
+            >
+              {s.label}
+            </button>
+          ))}
+          {query && (
+            <button
+              onClick={() => setQuery('')}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium border border-white/8 bg-white/4 text-white/40 hover:text-white transition-all"
+            >
+              Clear ×
+            </button>
+          )}
+        </div>
+
+        {/* List */}
+        {isLoading ? (
+          <div className="space-y-2">
+            {[...Array(8)].map((_, i) => (
+              <div key={i} className="h-14 rounded-xl bg-white/4 animate-pulse" />
+            ))}
+          </div>
+        ) : filtered.length === 0 ? (
+          <p className="text-white/30 text-sm text-center py-12">No products found.</p>
+        ) : (
+          <motion.div
+            className="space-y-1.5"
+            initial="hidden"
+            animate="show"
+            variants={{ show: { transition: { staggerChildren: 0.03 } } }}
+          >
+            {filtered.map(product => (
+              <motion.div
+                key={product.id}
+                variants={{
+                  hidden: { opacity: 0, x: -8 },
+                  show: { opacity: 1, x: 0, transition: { type: 'spring', stiffness: 300, damping: 28 } },
+                }}
+              >
+                <button
+                  onClick={() => navigate(`/product/${product.id}`)}
+                  className="group w-full flex items-center justify-between px-4 py-3.5 rounded-xl border border-white/6 bg-white/3 hover:bg-white/6 hover:border-white/12 transition-all text-left"
+                >
+                  <div className="flex items-center gap-3">
+                    <svg viewBox="0 0 88 88" className="w-5 h-5 text-white/30 flex-shrink-0 group-hover:text-white/50 transition-colors" fill="currentColor">
+                      <path d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529l.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z" />
+                    </svg>
+                    <span className="text-sm text-white/70 group-hover:text-white transition-colors font-medium">
+                      {product.name}
+                    </span>
+                  </div>
+                  <ArrowRight size={14} className="text-white/20 group-hover:text-white/50 group-hover:translate-x-0.5 transition-all" />
+                </button>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  )
+}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@ -0,0 +1,24 @@
+export interface Sku {
+  Id: string
+  Language: string
+  LocalizedLanguage: string
+  FriendlyFileNames?: string[]
+}
+
+export interface SkuInfoResponse {
+  Skus: Sku[]
+}
+
+export interface DownloadOption {
+  Uri: string
+  Architecture: string
+}
+
+export interface ProxyResponse {
+  ProductDownloadOptions: DownloadOption[]
+}
+
+export interface Product {
+  id: string
+  name: string
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>