diff --git a/payment.html b/payment.html
new file mode 100644
index 0000000..4209242
--- /dev/null
+++ b/payment.html
@@ -0,0 +1,264 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <title>Оплата через СБП</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <meta name="theme-color" content="#2563eb">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      background: #1e40af;
+    }
+
+    .page {
+      min-height: 100dvh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #0ea5e9 100%);
+    }
+    @media (max-width: 480px) {
+      .page { align-items: flex-end; padding: 0; }
+    }
+
+    .card {
+      background: #fff;
+      border-radius: 24px;
+      width: 100%;
+      max-width: 400px;
+      box-shadow: 0 24px 60px rgba(0,0,0,.18);
+      overflow: hidden;
+    }
+    @media (max-width: 480px) {
+      .card { border-radius: 24px 24px 0 0; max-width: 100%; box-shadow: 0 -8px 40px rgba(0,0,0,.15); }
+    }
+
+    .card__header {
+      background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
+      padding: 32px 28px 28px;
+      text-align: center;
+    }
+    @media (max-width: 480px) { .card__header { padding: 28px 24px 24px; } }
+
+    .card__title { color: #fff; font-size: 22px; font-weight: 700; margin: 14px 0 4px; letter-spacing: -.3px; }
+    .card__subtitle { color: rgba(255,255,255,.7); font-size: 13px; }
+
+    .card__body { padding: 28px 28px 20px; }
+    @media (max-width: 480px) { .card__body { padding: 24px 20px 16px; } }
+
+    .card__footer { padding: 0 28px 24px; display: flex; justify-content: center; }
+    @media (max-width: 480px) { .card__footer { padding: 0 20px 32px; } }
+
+    .sbp-logo {
+      display: inline-flex; align-items: center; justify-content: center;
+      background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
+      border-radius: 16px; padding: 12px 20px;
+      border: 1px solid rgba(255,255,255,.25);
+    }
+    .sbp-logo img { height: 40px; display: block; }
+    @media (max-width: 480px) { .sbp-logo img { height: 34px; } }
+
+    .field { margin-bottom: 16px; }
+    .field__label {
+      display: block; font-size: 13px; font-weight: 600; color: #64748b;
+      margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px;
+    }
+    .field__error { display: block; margin-top: 6px; font-size: 13px; color: #ef4444; font-weight: 500; }
+    .field__error:empty { display: none; }
+
+    .input-wrap {
+      display: flex; align-items: center;
+      border: 2px solid #e2e8f0; border-radius: 14px;
+      background: #f8fafc;
+      transition: border-color .2s, box-shadow .2s, background .2s;
+    }
+    .input-wrap:focus-within {
+      border-color: #2563eb;
+      box-shadow: 0 0 0 4px rgba(37,99,235,.12);
+      background: #fff;
+    }
+    .input-wrap--error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
+    .input-wrap__prefix { padding: 0 4px 0 18px; font-size: 26px; font-weight: 700; color: #2563eb; user-select: none; line-height: 1; }
+    .input-wrap__input {
+      flex: 1; border: none; background: transparent;
+      padding: 16px 16px 16px 8px; font-size: 32px; font-weight: 700;
+      color: #0f172a; outline: none; min-width: 0; font-family: inherit;
+      appearance: textfield; -moz-appearance: textfield;
+    }
+    .input-wrap__input::placeholder { color: #cbd5e1; }
+    .input-wrap__input::-webkit-outer-spin-button,
+    .input-wrap__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+    @media (max-width: 480px) { .input-wrap__input { font-size: 28px; padding: 14px 14px 14px 6px; } }
+
+    .currency-badge {
+      display: flex; align-items: center; gap: 10px;
+      background: #f1f5f9; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
+    }
+    .currency-badge__flag { font-size: 22px; line-height: 1; }
+    .currency-badge__code { font-size: 15px; font-weight: 700; color: #0f172a; }
+    .currency-badge__name { font-size: 13px; color: #64748b; margin-left: auto; }
+
+    .pay-btn {
+      width: 100%; display: flex; align-items: center; justify-content: center;
+      gap: 10px; padding: 17px 24px;
+      background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
+      color: #fff; border: none; border-radius: 14px;
+      font-size: 17px; font-weight: 700; letter-spacing: .2px;
+      cursor: pointer; font-family: inherit;
+      transition: opacity .15s, transform .1s, box-shadow .15s;
+      box-shadow: 0 6px 20px rgba(37,99,235,.38);
+    }
+    .pay-btn:hover { opacity: .92; box-shadow: 0 8px 28px rgba(37,99,235,.45); }
+    .pay-btn:active { transform: scale(.98); opacity: .88; }
+    .pay-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
+    .pay-btn__icon { display: flex; align-items: center; }
+    @media (max-width: 480px) { .pay-btn { padding: 16px 24px; font-size: 16px; } }
+
+    .secure-badge {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 12px; color: #94a3b8; font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+
+<div class="page">
+  <div class="card">
+
+    <div class="card__header">
+      <div class="sbp-logo">
+        <img src="https://sbp.nspk.ru/storage/settings/common/logo/0645d335-8b62-43a1-9a33-0d4c9d1dc0e0.svg" alt="СБП" />
+      </div>
+      <h1 class="card__title">Оплата через СБП</h1>
+      <p class="card__subtitle">Система быстрых платежей</p>
+    </div>
+
+    <div class="card__body">
+
+      <div class="field">
+        <label class="field__label" for="amount">Сумма платежа</label>
+        <div class="input-wrap" id="inputWrap">
+          <span class="input-wrap__prefix">₽</span>
+          <input
+            id="amount"
+            type="number"
+            class="input-wrap__input"
+            min="1"
+            step="1"
+            inputmode="numeric"
+            placeholder="0"
+            autofocus
+            value="10"
+          />
+        </div>
+        <span class="field__error" id="error"></span>
+      </div>
+
+      <div class="currency-badge">
+        <span class="currency-badge__flag">🇷🇺</span>
+        <span class="currency-badge__code">RUB</span>
+        <span class="currency-badge__name">Российский рубль</span>
+      </div>
+
+      <button class="pay-btn" id="payBtn" onclick="goToPayment()">
+        <span class="pay-btn__icon">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
+            <line x1="1" y1="10" x2="23" y2="10"/>
+          </svg>
+        </span>
+        <span id="btnText">Перейти к оплате</span>
+      </button>
+
+    </div>
+
+    <div class="card__footer">
+      <span class="secure-badge">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+        </svg>
+        Защищённое соединение
+      </span>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  const API_URL = 'https://qr.vitanova.network:567/qr';
+
+  const amountInput = document.getElementById('amount');
+  const errorEl = document.getElementById('error');
+  const payBtn = document.getElementById('payBtn');
+  const btnText = document.getElementById('btnText');
+  const inputWrap = document.getElementById('inputWrap');
+
+  amountInput.addEventListener('input', function () {
+    if (Number(this.value) > 0) {
+      errorEl.textContent = '';
+      inputWrap.classList.remove('input-wrap--error');
+    }
+  });
+
+  function getPaymentId() {
+    return new URLSearchParams(window.location.search).get('id');
+  }
+
+  function setLoading(loading) {
+    payBtn.disabled = loading;
+    btnText.textContent = loading ? 'Подождите...' : 'Перейти к оплате';
+  }
+
+  function showError(msg) {
+    errorEl.textContent = msg;
+    inputWrap.classList.add('input-wrap--error');
+  }
+
+  function goToPayment() {
+    const amount = Number(amountInput.value);
+
+    if (!amount || amount <= 0) {
+      showError('Введите корректную сумму');
+      return;
+    }
+
+    const id = getPaymentId();
+    if (!id) {
+      showError('Не указан идентификатор платежа (параметр id)');
+      return;
+    }
+
+    errorEl.textContent = '';
+    inputWrap.classList.remove('input-wrap--error');
+    setLoading(true);
+
+    fetch(API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ payment: 'sbp', amount, currency: 'rub', id })
+    })
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function (data) {
+        setLoading(false);
+        if (data && data.payload) {
+          window.location.href = data.payload;
+        }
+      })
+      .catch(function () {
+        setLoading(false);
+        showError('Ошибка при создании платежа. Попробуйте ещё раз.');
+      });
+  }
+</script>
+
+</body>
+</html>
diff --git a/public/favicon.ico b/public/favicon.ico
index 57614f9..1843a99 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index 4efb04e..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="7" fill="#2563eb"/>
-  <text x="16" y="23" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">₽</text>
-</svg>
