diff --git a/app/composables/graphql/generated.ts b/app/composables/graphql/generated.ts
index 49e6d3a..e5dd4c7 100644
--- a/app/composables/graphql/generated.ts
+++ b/app/composables/graphql/generated.ts
@@ -134,7 +134,9 @@ export type CreateMyDeliveryAddressInput = {
 };
 
 export type CreateReferralInput = {
+  bonusPercent: Scalars['Float']['input'];
   refereeUserId: Scalars['ID']['input'];
+  referrerUserId: Scalars['ID']['input'];
 };
 
 export enum Decision {
@@ -185,6 +187,22 @@ export type ManagerBonusBalance = {
   userId: Scalars['ID']['output'];
 };
 
+export type ManagerReferralLink = {
+  __typename?: 'ManagerReferralLink';
+  bonusPercent: Scalars['Float']['output'];
+  createdAt: Scalars['DateTime']['output'];
+  createdById: Scalars['ID']['output'];
+  id: Scalars['ID']['output'];
+  refereeCompanyName?: Maybe<Scalars['String']['output']>;
+  refereeEmail: Scalars['String']['output'];
+  refereeId: Scalars['ID']['output'];
+  refereeName: Scalars['String']['output'];
+  referrerCompanyName?: Maybe<Scalars['String']['output']>;
+  referrerEmail: Scalars['String']['output'];
+  referrerId: Scalars['ID']['output'];
+  referrerName: Scalars['String']['output'];
+};
+
 export type ManagerUser = {
   __typename?: 'ManagerUser';
   companyName?: Maybe<Scalars['String']['output']>;
@@ -526,6 +544,7 @@ export type Query = {
   managerBonusBalances: Array<ManagerBonusBalance>;
   managerNotificationHistory: Array<NotificationHistoryItem>;
   managerOrders: Array<Order>;
+  managerReferralLinks: Array<ManagerReferralLink>;
   managerUsers: Array<ManagerUser>;
   managerWithdrawalRequests: Array<ManagerWithdrawalRequest>;
   me?: Maybe<User>;
@@ -582,7 +601,9 @@ export type ReadyOrderItemInput = {
 
 export type ReferralLink = {
   __typename?: 'ReferralLink';
+  bonusPercent: Scalars['Float']['output'];
   createdAt: Scalars['DateTime']['output'];
+  createdById: Scalars['ID']['output'];
   id: Scalars['ID']['output'];
   refereeId: Scalars['ID']['output'];
   referrerId: Scalars['ID']['output'];
@@ -839,7 +860,7 @@ export type CreateReferralMutationVariables = Exact<{
 }>;
 
 
-export type CreateReferralMutation = { __typename?: 'Mutation', createReferral: { __typename?: 'ReferralLink', id: string, referrerId: string, refereeId: string, createdAt: any } };
+export type CreateReferralMutation = { __typename?: 'Mutation', createReferral: { __typename?: 'ReferralLink', id: string, referrerId: string, refereeId: string, createdById: string, bonusPercent: number, createdAt: any } };
 
 export type ManagerBonusBalancesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -862,6 +883,11 @@ export type ManagerOrdersQueryVariables = Exact<{
 
 export type ManagerOrdersQuery = { __typename?: 'Query', managerOrders: Array<{ __typename?: 'Order', id: string, code: string, status: OrderStatus, kind: OrderKind, customerId: string, deliveryAddress?: string | null, deliveryTerms?: string | null, deliveryFee?: number | null, totalPrice?: number | null, createdAt: any, items: Array<{ __typename?: 'OrderItem', id: string, productName: string, quantity: number, unitPrice?: number | null, lineTotal?: number | null }> }> };
 
+export type ManagerReferralLinksQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ManagerReferralLinksQuery = { __typename?: 'Query', managerReferralLinks: Array<{ __typename?: 'ManagerReferralLink', id: string, referrerId: string, referrerName: string, referrerEmail: string, referrerCompanyName?: string | null, refereeId: string, refereeName: string, refereeEmail: string, refereeCompanyName?: string | null, createdById: string, bonusPercent: number, createdAt: any }> };
+
 export type ManagerUsersDetailQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -870,7 +896,7 @@ export type ManagerUsersDetailQuery = { __typename?: 'Query', managerUsers: Arra
 export type ManagerUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };
+export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, email: string, fullName: string, role: UserRole, companyName?: string | null, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };
 
 export type ManagerWithdrawalRequestsQueryVariables = Exact<{
   status?: InputMaybe<WithdrawalStatus>;
@@ -1625,6 +1651,8 @@ export const CreateReferralDocument = gql`
     id
     referrerId
     refereeId
+    createdById
+    bonusPercent
     createdAt
   }
 }
@@ -1763,6 +1791,44 @@ export function useManagerOrdersLazyQuery(variables: ManagerOrdersQueryVariables
   return VueApolloComposable.useLazyQuery<ManagerOrdersQuery, ManagerOrdersQueryVariables>(ManagerOrdersDocument, variables, options);
 }
 export type ManagerOrdersQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerOrdersQuery, ManagerOrdersQueryVariables>;
+export const ManagerReferralLinksDocument = gql`
+    query ManagerReferralLinks {
+  managerReferralLinks {
+    id
+    referrerId
+    referrerName
+    referrerEmail
+    referrerCompanyName
+    refereeId
+    refereeName
+    refereeEmail
+    refereeCompanyName
+    createdById
+    bonusPercent
+    createdAt
+  }
+}
+    `;
+
+/**
+ * __useManagerReferralLinksQuery__
+ *
+ * To run a query within a Vue component, call `useManagerReferralLinksQuery` and pass it any options that fit your needs.
+ * When your component renders, `useManagerReferralLinksQuery` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useManagerReferralLinksQuery();
+ */
+export function useManagerReferralLinksQuery(options: VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> = {}) {
+  return VueApolloComposable.useQuery<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>(ManagerReferralLinksDocument, {}, options);
+}
+export function useManagerReferralLinksLazyQuery(options: VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> = {}) {
+  return VueApolloComposable.useLazyQuery<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>(ManagerReferralLinksDocument, {}, options);
+}
+export type ManagerReferralLinksQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>;
 export const ManagerUsersDetailDocument = gql`
     query ManagerUsersDetail {
   managerUsers {
@@ -1809,7 +1875,10 @@ export const ManagerUsersDocument = gql`
     query ManagerUsers {
   managerUsers {
     id
+    email
     fullName
+    role
+    companyName
     telegramConnection {
       id
       type
diff --git a/app/pages/bonus-system/index.vue b/app/pages/bonus-system/index.vue
index ccff450..b7240a7 100644
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -92,6 +92,12 @@ const filteredWithdrawals = computed(() => {
       title="Бонусы"
       :search-placeholder="activeTab === 'balances' ? 'Пользователь, email или сумма' : 'Пользователь, сумма или статус'"
     >
+      <template #controls>
+        <NuxtLink to="/bonus-system/referrals/new" class="btn btn-primary border-0">
+          Добавить связь
+        </NuxtLink>
+      </template>
+
       <template #tabs>
         <div class="tabs tabs-boxed w-fit bg-white">
           <button
diff --git a/app/pages/bonus-system/referrals/new.vue b/app/pages/bonus-system/referrals/new.vue
index 3924659..0a3812d 100644
--- a/app/pages/bonus-system/referrals/new.vue
+++ b/app/pages/bonus-system/referrals/new.vue
@@ -1,24 +1,81 @@
 <script setup lang="ts">
-import { useMutation } from '@vue/apollo-composable';
-import { CreateReferralDocument } from '~/composables/graphql/generated';
+import { useMutation, useQuery } from '@vue/apollo-composable';
+import {
+  CreateReferralDocument,
+  ManagerReferralLinksDocument,
+  ManagerUsersDocument,
+  type ManagerReferralLinksQuery,
+  type ManagerUsersQuery,
+} from '~/composables/graphql/generated';
 
 definePageMeta({
   middleware: ['manager-only'],
 });
 
+type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
+type ManagerReferralLinkItem = ManagerReferralLinksQuery['managerReferralLinks'][number];
+
+const referrerUserId = ref('');
 const refereeUserId = ref('');
+const bonusPercent = ref(5);
 const createdReferralId = ref('');
+const errorMessage = ref('');
+const usersQuery = useQuery(ManagerUsersDocument);
+const linksQuery = useQuery(ManagerReferralLinksDocument);
 const createReferralMutation = useMutation(CreateReferralDocument);
 
+const clientOptions = computed<ManagerUserItem[]>(() => (
+  (usersQuery.result.value?.managerUsers ?? [])
+    .filter((user) => user.role === 'CLIENT')
+    .slice()
+    .sort((left, right) => left.fullName.localeCompare(right.fullName, 'ru'))
+));
+
+const referralLinks = computed<ManagerReferralLinkItem[]>(() => (
+  linksQuery.result.value?.managerReferralLinks ?? []
+));
+
+function userOptionLabel(user: ManagerUserItem) {
+  return [user.fullName, user.companyName || user.email]
+    .filter(Boolean)
+    .join(' • ');
+}
+
 async function createReferral() {
   createdReferralId.value = '';
-  const response = await createReferralMutation.mutate({
-    input: {
-      refereeUserId: refereeUserId.value,
-    },
-  });
+  errorMessage.value = '';
 
-  createdReferralId.value = response?.data?.createReferral.id ?? '';
+  if (!referrerUserId.value || !refereeUserId.value) {
+    errorMessage.value = 'Выберите обоих клиентов для связки.';
+    return;
+  }
+
+  if (referrerUserId.value === refereeUserId.value) {
+    errorMessage.value = 'Нельзя связать клиента с самим собой.';
+    return;
+  }
+
+  const normalizedBonusPercent = Number(bonusPercent.value);
+  if (!Number.isFinite(normalizedBonusPercent) || normalizedBonusPercent <= 0 || normalizedBonusPercent > 100) {
+    errorMessage.value = 'Укажите процент бонуса от 0.01 до 100.';
+    return;
+  }
+
+  try {
+    const response = await createReferralMutation.mutate({
+      input: {
+        referrerUserId: referrerUserId.value,
+        refereeUserId: refereeUserId.value,
+        bonusPercent: normalizedBonusPercent,
+      },
+    });
+
+    createdReferralId.value = response?.data?.createReferral.id ?? '';
+    refereeUserId.value = '';
+    await linksQuery.refetch();
+  } catch (error: any) {
+    errorMessage.value = error?.message || 'Не удалось создать бонусную связку.';
+  }
 }
 </script>
 
@@ -28,22 +85,96 @@ async function createReferral() {
 
     <div class="manager-hero">
       <p class="manager-eyebrow">Бонусы</p>
-      <h1 class="manager-title">Создать реферальную связь</h1>
+      <h1 class="manager-title">Создать бонусную связку клиентов</h1>
+      <p class="max-w-2xl text-sm text-[#466653]">
+        Первый клиент получает процент бонуса, когда заказ второго клиента переходит в статус доставленного.
+      </p>
     </div>
 
-    <div class="surface-card rounded-3xl p-5">
+    <div class="surface-card rounded-3xl p-5 space-y-4">
       <label class="form-control">
-        <span class="label-text">ID приглашенного пользователя</span>
-        <input v-model="refereeUserId" class="input manager-field w-full" placeholder="user id">
+        <span class="label-text">Клиент, который получает бонус</span>
+        <select v-model="referrerUserId" class="select manager-field w-full">
+          <option value="">Выберите клиента</option>
+          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
+            {{ userOptionLabel(user) }}
+          </option>
+        </select>
+      </label>
+
+      <label class="form-control">
+        <span class="label-text">Клиент, с чьих заказов начисляется бонус</span>
+        <select v-model="refereeUserId" class="select manager-field w-full">
+          <option value="">Выберите клиента</option>
+          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
+            {{ userOptionLabel(user) }}
+          </option>
+        </select>
+      </label>
+
+      <label class="form-control">
+        <span class="label-text">Процент бонусной программы</span>
+        <input
+          v-model="bonusPercent"
+          type="number"
+          min="0.01"
+          max="100"
+          step="0.01"
+          class="input manager-field w-full"
+          placeholder="5"
+        >
       </label>
 
       <div class="mt-4">
-        <button class="btn btn-primary border-0" @click="createReferral">Создать</button>
+        <button
+          class="btn btn-primary border-0"
+          :disabled="createReferralMutation.loading.value || usersQuery.loading.value"
+          @click="createReferral"
+        >
+          {{ createReferralMutation.loading.value ? 'Сохраняем...' : 'Создать связь' }}
+        </button>
       </div>
     </div>
 
+    <div v-if="errorMessage" class="surface-card rounded-3xl border border-[#d27d7d] bg-[#fff4f4] p-5 text-sm text-[#8b2a2a]">
+      {{ errorMessage }}
+    </div>
+
     <div v-if="createdReferralId" class="surface-card rounded-3xl p-5 text-sm text-[#123824]">
       Создана связь: <span class="font-semibold">{{ createdReferralId }}</span>
     </div>
+
+    <div class="space-y-4">
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="text-lg font-bold text-[#123824]">Текущие бонусные связки</h2>
+        <span class="text-sm text-[#466653]">{{ referralLinks.length }}</span>
+      </div>
+
+      <div v-if="linksQuery.loading.value" class="manager-empty-state">
+        Загружаем связки...
+      </div>
+      <div v-else-if="referralLinks.length === 0" class="manager-empty-state">
+        Бонусных связок пока нет.
+      </div>
+      <div v-else class="space-y-3">
+        <article
+          v-for="link in referralLinks"
+          :key="link.id"
+          class="surface-card rounded-3xl p-5"
+        >
+          <div class="space-y-2">
+            <p class="text-sm font-semibold text-[#123824]">
+              {{ link.referrerName }} получает {{ link.bonusPercent }}% с заказов {{ link.refereeName }}
+            </p>
+            <p class="text-sm text-[#466653]">
+              {{ link.referrerCompanyName || link.referrerEmail }} → {{ link.refereeCompanyName || link.refereeEmail }}
+            </p>
+            <p class="text-xs text-[#5c7b69]">
+              Создано {{ new Date(link.createdAt).toLocaleString() }}
+            </p>
+          </div>
+        </article>
+      </div>
+    </div>
   </section>
 </template>
diff --git a/graphql/operations/manager/create-referral.graphql b/graphql/operations/manager/create-referral.graphql
index dcb3d32..d9442bb 100644
--- a/graphql/operations/manager/create-referral.graphql
+++ b/graphql/operations/manager/create-referral.graphql
@@ -3,6 +3,8 @@ mutation CreateReferral($input: CreateReferralInput!) {
     id
     referrerId
     refereeId
+    createdById
+    bonusPercent
     createdAt
   }
 }
diff --git a/graphql/operations/manager/manager-referral-links.graphql b/graphql/operations/manager/manager-referral-links.graphql
new file mode 100644
index 0000000..e4c02e4
--- /dev/null
+++ b/graphql/operations/manager/manager-referral-links.graphql
@@ -0,0 +1,16 @@
+query ManagerReferralLinks {
+  managerReferralLinks {
+    id
+    referrerId
+    referrerName
+    referrerEmail
+    referrerCompanyName
+    refereeId
+    refereeName
+    refereeEmail
+    refereeCompanyName
+    createdById
+    bonusPercent
+    createdAt
+  }
+}
diff --git a/graphql/operations/manager/manager-users.graphql b/graphql/operations/manager/manager-users.graphql
index 7d0aeab..2097486 100644
--- a/graphql/operations/manager/manager-users.graphql
+++ b/graphql/operations/manager/manager-users.graphql
@@ -1,7 +1,10 @@
 query ManagerUsers {
   managerUsers {
     id
+    email
     fullName
+    role
+    companyName
     telegramConnection {
       id
       type
diff --git a/graphql/schema.graphql b/graphql/schema.graphql
index 4303961..b813dae 100644
--- a/graphql/schema.graphql
+++ b/graphql/schema.graphql
@@ -269,6 +269,23 @@ type ReferralLink {
   id: ID!
   referrerId: ID!
   refereeId: ID!
+  createdById: ID!
+  bonusPercent: Float!
+  createdAt: DateTime!
+}
+
+type ManagerReferralLink {
+  id: ID!
+  referrerId: ID!
+  referrerName: String!
+  referrerEmail: String!
+  referrerCompanyName: String
+  refereeId: ID!
+  refereeName: String!
+  refereeEmail: String!
+  refereeCompanyName: String
+  createdById: ID!
+  bonusPercent: Float!
   createdAt: DateTime!
 }
 
@@ -339,6 +356,7 @@ type Query {
   myCurrentOrders: [Order!]!
   managerUsers: [ManagerUser!]!
   managerOrders(status: OrderStatus, customerId: ID): [Order!]!
+  managerReferralLinks: [ManagerReferralLink!]!
   managerBonusBalances: [ManagerBonusBalance!]!
   managerWithdrawalRequests(status: WithdrawalStatus): [ManagerWithdrawalRequest!]!
   registrationRequests(status: RegistrationStatus): [RegistrationRequest!]!
@@ -447,7 +465,9 @@ input BlockOrderInput {
 }
 
 input CreateReferralInput {
+  referrerUserId: ID!
   refereeUserId: ID!
+  bonusPercent: Float!
 }
 
 input AddBonusTransactionInput {