diff --git a/angular/src/app/pages/account/bonus-program/bonus-program.component.html b/angular/src/app/pages/account/bonus-program/bonus-program.component.html
index 9247730..e6c7661 100644
--- a/angular/src/app/pages/account/bonus-program/bonus-program.component.html
+++ b/angular/src/app/pages/account/bonus-program/bonus-program.component.html
@@ -15,7 +15,7 @@
       </div>
       <div class="card-container__content">
         <div class="info">
-          <div *ngIf="accountData" class="row">
+          <div *ngIf="accountData" class="info__row">
             <span class="key">Имя</span>
             <span class="value" *ngIf="userName.length">{{
               userName
@@ -24,7 +24,7 @@
               >Не задано</span
             >
           </div>
-          <div *ngIf="accountData" class="row">
+          <div *ngIf="accountData" class="info__row">
             <span class="key">Баланс карты</span>
             <span class="value">{{ accountData.Bonuses }}</span>
           </div>
diff --git a/angular/src/app/pages/account/bonus-program/bonus-program.component.scss b/angular/src/app/pages/account/bonus-program/bonus-program.component.scss
index c8c07e9..25b60a2 100644
--- a/angular/src/app/pages/account/bonus-program/bonus-program.component.scss
+++ b/angular/src/app/pages/account/bonus-program/bonus-program.component.scss
@@ -25,7 +25,6 @@
       background: #09467f;
       box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
       border-radius: 15px;
-      height: 466px;
       margin-top: 11px;
       overflow: hidden;
       max-width: 400px;
@@ -56,7 +55,6 @@
       &__decorative-pattern {
         height: 122px;
         background-color: #fff;
-        // padding-top: 9px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -64,11 +62,6 @@
         img {
           height: 90px;
         }
-
-        // .imgs-row {
-        //   background: url("./assets/card-decorative-pattern.png") repeat-x;
-        //   height: 32%;
-        // }
       }
 
       &__content {
@@ -76,15 +69,15 @@
         color: #fff;
 
         .info {
-          height: 79px;
           border-bottom: solid #fff 1px;
           padding: 14px 18px;
 
-          .row {
+          &__row {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 7px;
+            gap: 90px;
 
             .key {
               font-size: 14px;
@@ -145,11 +138,6 @@
         background-size: cover;
       }
 
-      // &__front {
-      //   transform: rotateY(0deg);
-      //   background-image: url(./assets/background.svg);
-      // }
-
       &__back {
         position: absolute;
         opacity: 0;
diff --git a/angular/src/app/pages/info/info.component.html b/angular/src/app/pages/info/info.component.html
new file mode 100644
index 0000000..436f8f5
--- /dev/null
+++ b/angular/src/app/pages/info/info.component.html
@@ -0,0 +1,24 @@
+<p>info works!</p>
+<mdb-carousel [controls]="true" [indicators]="true" [animation]="'fade'">
+    <mdb-carousel-item>
+        <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="..." />
+        <div class="carousel-caption d-none d-md-block">
+            <h5>First slide label</h5>
+            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+        </div>
+    </mdb-carousel-item>
+    <mdb-carousel-item>
+        <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="..." />
+        <div class="carousel-caption d-none d-md-block">
+            <h5>Second slide label</h5>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+    </mdb-carousel-item>
+    <mdb-carousel-item>
+        <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="..." />
+        <div class="carousel-caption d-none d-md-block">
+            <h5>Third slide label</h5>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+        </div>
+    </mdb-carousel-item>
+</mdb-carousel>
\ No newline at end of file
diff --git a/angular/src/app/pages/info/info.component.scss b/angular/src/app/pages/info/info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/angular/src/app/pages/info/info.component.spec.ts b/angular/src/app/pages/info/info.component.spec.ts
new file mode 100644
index 0000000..93617f1
--- /dev/null
+++ b/angular/src/app/pages/info/info.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoComponent } from './info.component';
+
+describe('InfoComponent', () => {
+  let component: InfoComponent;
+  let fixture: ComponentFixture<InfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InfoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/angular/src/app/pages/info/info.component.ts b/angular/src/app/pages/info/info.component.ts
new file mode 100644
index 0000000..a2ee41c
--- /dev/null
+++ b/angular/src/app/pages/info/info.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-info',
+  templateUrl: './info.component.html',
+  styleUrls: ['./info.component.scss']
+})
+export class InfoComponent implements OnInit {
+  public imageObject = [{
+    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
+    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
+    title: 'Hummingbirds are amazing creatures'
+  }, {
+    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg',
+    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg'
+  }, {
+    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
+    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
+    title: 'Example with title.'
+  }, {
+    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/7.jpg',
+    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/7.jpg',
+    title: 'Hummingbirds are amazing creatures'
+  }, {
+    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/1.jpg',
+    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/1.jpg'
+  }, {
+    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/2.jpg',
+    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/2.jpg',
+    title: 'Example two with title.'
+  }];
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}