diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e475bdf..b7efbee 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ import {ProfilePageComponent} from "./pages/profile-page/profile-page.component"
 import {RulesPageComponent} from "./pages/rules-page/rules-page.component";
 import {BanlistPageComponent} from "./pages/banlist-page/banlist-page.component";
 import {MessagesPageComponent} from "./pages/messages-page/messages-page.component";
+import {VipPageComponent} from "./pages/vip-page/vip-page.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent},
@@ -13,7 +14,8 @@ const routes: Routes = [
   { path: "profile/:steam64", component: ProfilePageComponent },
   { path: "rules", component: RulesPageComponent },
   { path: "banlist", component: BanlistPageComponent },
-  { path: "messages", component: MessagesPageComponent }
+  { path: "messages", component: MessagesPageComponent },
+  { path: "vip", component: VipPageComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8018220..b7e2b6f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -59,6 +59,12 @@ import {NewsViewDialog} from "./pages/main-page/NewsViewDialog";
 import {AnnoncesListCarules} from "./pages/main-page/AnnoncesListCarules";
 import {DiscordConnectDialog} from "./pages/internal-components/dialogs/DiscordConnectDialog";
 import {MatStepperModule} from "@angular/material/stepper";
+import {VipService} from "./services/vip.service";
+import { VipPageComponent } from './pages/vip-page/vip-page.component';
+import {VipBuyDialog} from "./pages/vip-page/VipBuyDialog";
+import {VipFreeDialog} from "./pages/vip-page/VipFreeDialog";
+import {VipPromocodeDialog} from "./pages/vip-page/VipPromocodeDialog";
+import {MatCheckboxModule} from "@angular/material/checkbox";
 
 registerLocaleData(localeRu, "ru")
 
@@ -74,6 +80,7 @@ registerLocaleData(localeRu, "ru")
     RulesPageComponent,
     BanlistPageComponent,
     MessagesPageComponent,
+    VipPageComponent,
     //tables
     MessageSearchTable,
     BanlistSearchTable,
@@ -90,7 +97,10 @@ registerLocaleData(localeRu, "ru")
     //dialogs
     BanViewDialog,
     NewsViewDialog,
-    DiscordConnectDialog
+    DiscordConnectDialog,
+    VipBuyDialog,
+    VipFreeDialog,
+    VipPromocodeDialog
   ],
   imports: [
     BrowserModule,
@@ -121,7 +131,8 @@ registerLocaleData(localeRu, "ru")
     MatNativeDateModule,
     MatProgressSpinnerModule,
     MatDialogModule,
-    MatStepperModule
+    MatStepperModule,
+    MatCheckboxModule
   ],
   providers: [
     {provide: LOCALE_ID, useValue: 'ru' },
@@ -131,7 +142,8 @@ registerLocaleData(localeRu, "ru")
     BanService,
     ServerService,
     Tf2dataService,
-    MatDatepickerModule
+    MatDatepickerModule,
+    VipService
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/entities/VipBuy.ts b/src/app/entities/VipBuy.ts
new file mode 100644
index 0000000..0d43f98
--- /dev/null
+++ b/src/app/entities/VipBuy.ts
@@ -0,0 +1,17 @@
+export class VipBuy {
+  human_duration!: string;
+  money_price!: number;
+  item_price!:string;
+  img_url!:string;
+  period!:string;
+  steam:boolean = false;
+  qiwi:boolean = false;
+  donationalerts:boolean = false;
+  da_percent!: number;
+
+  static fromData(res:any): VipBuy {
+    const v = new VipBuy();
+    Object.assign(v, res);
+    return v;
+  }
+}
diff --git a/src/app/pages/banlist-page/banlist-page.component.html b/src/app/pages/banlist-page/banlist-page.component.html
index 7401c2c..c2ff5b9 100644
--- a/src/app/pages/banlist-page/banlist-page.component.html
+++ b/src/app/pages/banlist-page/banlist-page.component.html
@@ -6,7 +6,7 @@
 <div class="content-in-center">
   <div class="content-in-border">
     <app-need-auth-to-continue *ngIf="!authService.isAuth()"></app-need-auth-to-continue>
-    <div *ngIf="authService.isAuth">
+    <div *ngIf="authService.isAuth()">
       <app-banlist-search-table></app-banlist-search-table>
     </div>
   </div>
diff --git a/src/app/pages/internal-components/abstract-search-table.component.ts b/src/app/pages/internal-components/abstract-search-table.component.ts
index 1b966ac..155aa45 100644
--- a/src/app/pages/internal-components/abstract-search-table.component.ts
+++ b/src/app/pages/internal-components/abstract-search-table.component.ts
@@ -24,6 +24,8 @@ export abstract class AbstractSearchTable<T,U extends SearchFilter> implements A
   @Input("account_id")
   //[U:1:%s]
   account_id: number | null = null;
+  @Input("use_query")
+  use_query: boolean = true;
 
   protected constructor(public authService: AuthService,
                         protected serverService: ServerService,
@@ -35,7 +37,7 @@ export abstract class AbstractSearchTable<T,U extends SearchFilter> implements A
   }
 
   public updateData() {
-    if (this.account_id == null)
+    if (this.account_id == null && this.use_query)
       this.router.navigate([], {
         relativeTo: this.route,
         queryParams: this.filter.createQuery(this.paginator),
@@ -44,7 +46,7 @@ export abstract class AbstractSearchTable<T,U extends SearchFilter> implements A
   }
 
   ngAfterViewInit(): void {
-    if (this.account_id == null)
+    if (this.account_id == null || this.use_query)
       this.filter.fromQuery(this.route.snapshot.queryParamMap, this.paginator);
     else
       this.filter.addAccountToSearch(`[U:1:${this.account_id}]`);
diff --git a/src/app/pages/main-page/main-page.component.html b/src/app/pages/main-page/main-page.component.html
index 1636828..f4a7b70 100644
--- a/src/app/pages/main-page/main-page.component.html
+++ b/src/app/pages/main-page/main-page.component.html
@@ -61,9 +61,9 @@
 <!--тут продолжение главной страницы-->
 <div class="content-in-center">
   <div class="content-in-border">
-    <app-annonces-list-carules type="news"></app-annonces-list-carules>
+    <app-annonces-list-carules [use_query]="false" type="news"></app-annonces-list-carules>
   </div>
   <div class="content-in-border">
-    <app-annonces-list-carules type="reason4play"></app-annonces-list-carules>
+    <app-annonces-list-carules [use_query]="false" type="reason4play"></app-annonces-list-carules>
   </div>
 </div>
diff --git a/src/app/pages/vip-page/VipBuyDialog.ts b/src/app/pages/vip-page/VipBuyDialog.ts
new file mode 100644
index 0000000..6f4a054
--- /dev/null
+++ b/src/app/pages/vip-page/VipBuyDialog.ts
@@ -0,0 +1,72 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
+import {VipBuy} from "../../entities/VipBuy";
+import {ActionService} from "../../services/action.service";
+import {AuthService} from "../../services/auth.service";
+
+@Component({
+  selector: "app-vip-buy-dialog",
+  template:`
+    <h1 mat-dialog-title style="color: black">Выбор способа получения</h1>
+    <mat-dialog-content>
+      <p>Молодец что решился на такой шаг в своей жизни, лишния копейка от тебя нам это ее один способ потратить деньги на всяческую херню. Надеюсь ты ознакомился что ты получишь.</p>
+      <div *ngIf="vip">
+        <mat-accordion>
+          <mat-expansion-panel hideToggle [disabled]="!vip.steam">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Steam
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <p>Ты должен будешь отдать {{vip.item_price}}</p>
+            <mat-checkbox class="example-margin" [(ngModel)]="acceptRules">Я ознакомлен с правилами обмена</mat-checkbox>
+            <div *ngIf="acceptRules">
+              <button mat-button mat-raised-button style="width: 100%" (click)="goToTrade('STEAM', vip.money_price)">Перейти в стим для обмена</button>
+            </div>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel hideToggle [disabled]="!vip.qiwi">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Qiwi
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <p>Когда-то это работало</p>
+            <p>{{vip.money_price}} P</p>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel hideToggle [disabled]="!vip.donationalerts">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Donation Alert
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <p>Увы Усманов запретил, может как нибудь потом...</p>
+            <p>{{vip.money_price + (vip.money_price*vip.da_percent/100)}}</p>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel hideToggle>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Напрямую не через ботов
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <p>Обычно мы игнорируем трейды не через ботов, но если на то пошло, можешь узнать ссылку для прямого обмена в нашем дискорде</p>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </div>
+      <p>Выбери способ по душе</p>
+    </mat-dialog-content>
+  `
+})
+export class VipBuyDialog {
+  acceptRules: boolean = false;
+  constructor(@Inject(MAT_DIALOG_DATA) public vip:VipBuy,
+              private actionService: ActionService,
+              private authService: AuthService) {}
+
+  goToTrade(buy_type: 'QIWI' | 'DONATIONALERTS'| 'STEAM', cost:number) {
+    let url = `api/profile/current/buyvip?steam64=${this.authService.steamIds?.steam64==null?'':this.authService.steamIds?.steam64}&buy_type=${buy_type}&cost=${cost}`;
+    this.actionService.goToUrlViaTab(url);
+  }
+}
diff --git a/src/app/pages/vip-page/VipFreeDialog.ts b/src/app/pages/vip-page/VipFreeDialog.ts
new file mode 100644
index 0000000..adb66ec
--- /dev/null
+++ b/src/app/pages/vip-page/VipFreeDialog.ts
@@ -0,0 +1,18 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
+import {VipBuy} from "../../entities/VipBuy";
+
+@Component({
+  selector: "app-vip-buy-dialog",
+  template:`
+    <h1 mat-dialog-title style="color: black">Получение бесплатно</h1>
+    <mat-dialog-content>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+
+    </mat-dialog-actions>
+  `
+})
+export class VipFreeDialog {
+  constructor(@Inject(MAT_DIALOG_DATA) public vip:VipBuy) {}
+}
diff --git a/src/app/pages/vip-page/VipPromocodeDialog.ts b/src/app/pages/vip-page/VipPromocodeDialog.ts
new file mode 100644
index 0000000..def6ea7
--- /dev/null
+++ b/src/app/pages/vip-page/VipPromocodeDialog.ts
@@ -0,0 +1,18 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
+import {VipBuy} from "../../entities/VipBuy";
+
+@Component({
+  selector: "app-vip-buy-dialog",
+  template:`
+    <h1 mat-dialog-title style="color: black">Получение через промокод</h1>
+    <mat-dialog-content>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+
+    </mat-dialog-actions>
+  `
+})
+export class VipPromocodeDialog {
+  constructor(@Inject(MAT_DIALOG_DATA) public vip:VipBuy) {}
+}
diff --git a/src/app/pages/vip-page/vip-page.component.html b/src/app/pages/vip-page/vip-page.component.html
new file mode 100644
index 0000000..0bcc36f
--- /dev/null
+++ b/src/app/pages/vip-page/vip-page.component.html
@@ -0,0 +1,66 @@
+<div class="content-in-center-header" style="flex-direction: column;">
+  <h1>VIP статус на серверах</h1>
+  <h3>Рано или поздно ты захочешь этого...</h3>
+</div>
+
+<div class="content-in-center">
+  <div class="content-in-border">
+    <h2 style="color:#000;">Ты можешь получить VIP исходя из своих возможностей</h2>
+    <div class="container responsive-grid-250">
+      <mat-card *ngFor="let vip of vips" (click)="openDialog(vip)" style="cursor: pointer">
+        <mat-card-title>{{vip.human_duration}}</mat-card-title>
+        <mat-card-subtitle>
+          <p>Жми скорее</p>
+          <img style="width: 100%; border-radius: 5px; border: 0px solid black" [src]="vip.img_url">
+        </mat-card-subtitle>
+      </mat-card>
+    </div>
+    <div style="padding-top: 2%"></div>
+    <div>
+      <mat-accordion>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Что ты получаешь получая VIP
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <mat-accordion>
+            <mat-expansion-panel hideToggle>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  Здоровье маме
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <p>Используй команду</p>
+            </mat-expansion-panel>
+          </mat-accordion>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Правила обмена (прочти меня)
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <mat-list role="list">
+            <mat-list-item role="listitem">У меня должен быть подключен Steam Authenticator, иначе трейд будет принят ботом только после удержания предметов.</mat-list-item>
+            <mat-list-item role="listitem">Бот не всегда может принять трейд и будет его отменять, обычно решается попробовать снова отправить обмен.</mat-list-item>
+            <mat-list-item role="listitem">Ты можешь суммировать вещи, например: 2 ключа - 2 месяца или 20 рефов - 2 дня.</mat-list-item>
+            <mat-list-item role="listitem">Ключ или реф должен быть не перекрафченым - пунктирная рамка возле вещи.</mat-list-item>
+            <mat-list-item role="listitem">Ключ должен быть от сундука МаннКо, не иной.</mat-list-item>
+            <mat-list-item role="listitem">Иные вещи которые не принимает бот - трейд отменяется.</mat-list-item>
+            <mat-list-item role="listitem">Если бот так и не принимает обмен - пишешь нам.</mat-list-item>
+          </mat-list>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle [disabled]="true">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Что делать если...
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <p>убейся</p>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/pages/vip-page/vip-page.component.scss b/src/app/pages/vip-page/vip-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/vip-page/vip-page.component.ts b/src/app/pages/vip-page/vip-page.component.ts
new file mode 100644
index 0000000..1447282
--- /dev/null
+++ b/src/app/pages/vip-page/vip-page.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import {VipService} from "../../services/vip.service";
+import {VipBuy} from "../../entities/VipBuy";
+import {MatDialog, MatDialogConfig, MatDialogRef} from "@angular/material/dialog";
+import {VipBuyDialog} from "./VipBuyDialog";
+import {VipFreeDialog} from "./VipFreeDialog";
+import {VipPromocodeDialog} from "./VipPromocodeDialog";
+
+@Component({
+  selector: 'app-vip-page',
+  templateUrl: './vip-page.component.html',
+  styleUrls: ['./vip-page.component.scss']
+})
+export class VipPageComponent implements OnInit {
+  vips:VipBuy[] = [];
+
+  constructor(private vipService: VipService,
+              private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.getVips();
+  }
+
+  getVips() {
+    this.vipService.getVipPrices().subscribe(
+      (res) => this.vips = res
+    )
+  }
+
+  openDialog(vip: VipBuy): MatDialogRef<any>|null {
+    const config: MatDialogConfig = {maxWidth: '500px', data:vip};
+    switch (vip.period) {
+      case "month":
+      case "week" :
+      case "day": return this.dialog.open(VipBuyDialog, config);
+      case "free": return this.dialog.open(VipFreeDialog, config);
+      case "promocode": return this.dialog.open(VipPromocodeDialog, config);
+      default: console.log(`non found ${vip.period} dialog`)
+    }
+    return null;
+  }
+
+}
diff --git a/src/app/services/vip.service.ts b/src/app/services/vip.service.ts
new file mode 100644
index 0000000..08004ac
--- /dev/null
+++ b/src/app/services/vip.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {map, Observable} from "rxjs";
+import {VipBuy} from "../entities/VipBuy";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VipService {
+
+  constructor(private http: HttpClient) { }
+
+  getVipPrices(): Observable<any> {
+    return this.http.get(`api/external/vip`);
+  }
+}
diff --git a/src/proxy.conf.json b/src/proxy.conf.json
index 190fb95..cc583e3 100644
--- a/src/proxy.conf.json
+++ b/src/proxy.conf.json
@@ -2,5 +2,9 @@
   "/api": {
     "target": "http://192.168.3.3:26272/",
     "secure": false
+  },
+  "/site_content": {
+    "target": "https://192.168.3.3:14088/",
+    "secure": false
   }
 }