diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx
new file mode 100644
index 0000000..0a4e46e
--- /dev/null
+++ b/src/components/MainPage/MainPage.tsx
@@ -0,0 +1,109 @@
+import Card from '../MainPageCard/Card.tsx';
+import {cardProperties} from '../../index.tsx';
+function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{
+  return(
+    <div className="page page--gray page--main">
+      <header className="header">
+        <div className="container">
+          <div className="header__wrapper">
+            <div className="header__left">
+              <a className="header__logo-link header__logo-link--active">
+                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
+              </a>
+            </div>
+            <nav className="header__nav">
+              <ul className="header__nav-list">
+                <li className="header__nav-item user">
+                  <a className="header__nav-link header__nav-link--profile" href="#">
+                    <div className="header__avatar-wrapper user__avatar-wrapper">
+                    </div>
+                    <span className="header__user-name user__name">nawwarkheder@gmail.com</span>
+                    <span className="header__favorite-count">3</span>
+                  </a>
+                </li>
+                <li className="header__nav-item">
+                  <a className="header__nav-link" href="#">
+                    <span className="header__signout">Sign out</span>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      <main className="page__main page__main--index">
+        <h1 className="visually-hidden">Cities</h1>
+        <div className="tabs">
+          <section className="locations container">
+            <ul className="locations__list tabs__list">
+              <li className="locations__item">
+                <a className="locations__item-link tabs__item" href="#">
+                  <span>Paris</span>
+                </a>
+              </li>
+              <li className="locations__item">
+                <a className="locations__item-link tabs__item" href="#">
+                  <span>Cologne</span>
+                </a>
+              </li>
+              <li className="locations__item">
+                <a className="locations__item-link tabs__item" href="#">
+                  <span>Brussels</span>
+                </a>
+              </li>
+              <li className="locations__item">
+                <a className="locations__item-link tabs__item tabs__item--active">
+                  <span>Amsterdam</span>
+                </a>
+              </li>
+              <li className="locations__item">
+                <a className="locations__item-link tabs__item" href="#">
+                  <span>Hamburg</span>
+                </a>
+              </li>
+              <li className="locations__item">
+                <a className="locations__item-link tabs__item" href="#">
+                  <span>Dusseldorf</span>
+                </a>
+              </li>
+            </ul>
+          </section>
+        </div>
+        <div className="cities">
+          <div className="cities__places-container container">
+            <section className="cities__places places">
+              <h2 className="visually-hidden">Places</h2>
+              <b className="places__found">{CardProps[0].NumberOfPlaces} places to stay in Amsterdam</b>
+              <form className="places__sorting" action="#" method="get">
+                <span className="places__sorting-caption">Sort by</span>
+                <span className="places__sorting-type" tabIndex={0}>
+                  Popular
+                  <svg className="places__sorting-arrow" width="7" height="4">
+                    <use xlinkHref="#icon-arrow-select"></use>
+                  </svg>
+                </span>
+                <ul className="places__options places__options--custom places__options--opened">
+                  <li className="places__option places__option--active" tabIndex={0}>Popular</li>
+                  <li className="places__option" tabIndex={0}>Price: low to high</li>
+                  <li className="places__option" tabIndex={0}>Price: high to low</li>
+                  <li className="places__option" tabIndex={0}>Top rated first</li>
+                </ul>
+              </form>
+              <div className="cities__places-list places__list tabs__content">
+                <Card {...CardProps[0]}/>
+                <Card {...CardProps[1]}/>
+                <Card {...CardProps[2]}/>
+                <Card {...CardProps[3]}/>
+              </div>
+            </section>
+            <div className="cities__right-section">
+              <section className="cities__map map"></section>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+export default MainPage;
diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx
new file mode 100644
index 0000000..e6c2be1
--- /dev/null
+++ b/src/components/MainPageCard/Card.tsx
@@ -0,0 +1,40 @@
+import {cardProperties} from '../../index.tsx';
+function Card(MainPageCardProps:cardProperties):JSX.Element{
+  return(
+    <article className="cities__card place-card">
+      {MainPageCardProps.Premium ?
+        <div className="place-card__mark">
+          <span>Premium</span>
+        </div> : null}
+      <div className="cities__image-wrapper place-card__image-wrapper">
+        <a href="#">
+          <img className="place-card__image" src={MainPageCardProps.Img} width="260" height="200" alt="Place image"/>
+        </a>
+      </div>
+      <div className="place-card__info">
+        <div className="place-card__price-wrapper">
+          <div className="place-card__price">
+            <b className="place-card__price-value">&euro;{MainPageCardProps.Price}</b>
+            <span className="place-card__price-text">&#47;&nbsp;night</span>
+          </div>
+          <button className="place-card__bookmark-button button" type="button">
+            <svg className="place-card__bookmark-icon" width="18" height="19">
+              <use xlinkHref="#icon-bookmark"></use>
+            </svg>
+            <span className="visually-hidden">To bookmarks</span>
+          </button>
+        </div>
+        <div className="place-card__rating rating">
+          <div className="place-card__stars rating__stars">
+            <span style={{width: '80%'}}></span>
+            <span className="visually-hidden">Rating</span>
+          </div>
+        </div>
+        <h2 className="place-card__name">
+          <a href="#">{MainPageCardProps.Description}</a>
+        </h2>
+        <p className="place-card__type">{MainPageCardProps.ApartsmentType}</p>
+      </div>
+    </article>);
+}
+export default Card;
diff --git a/src/index.tsx b/src/index.tsx
index be81a6e..99250b6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,64 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import App from './components/MainPage/MainPage';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+type cardProperties={
+  Premium:boolean;
+  Price:number;
+  Img:string;
+  ApartsmentType:string;
+  Description:string;
+  NumberOfPlaces?:number;
+};
+export type {cardProperties};
+
+const mainPageCardInfo:cardProperties[] = [
+  {
+    Premium:true,
+    Price:120,
+    Img:'../markup/Img/apartment-01.jpg',
+    ApartsmentType:'Apartment',
+    Description:'Beautiful &amp; luxurious apartment at great location',
+    NumberOfPlaces:132
+  },
+  {
+    Premium:false,
+    Price:80,
+    Img:'../markup/Img/room.jpg',
+    ApartsmentType:'Room',
+    Description:'Wood and stone place',
+  },
+
+  {
+    Premium:false,
+    Price:132,
+    Img:'../markup/Img/apartment-02.jpg',
+    ApartsmentType:'Apartment',
+    Description:'Canal View Prinsengracht',
+  },
+
+  {
+    Premium:true,
+    Price:180,
+    Img:'../markup/Img/apartment-03.jpg',
+    ApartsmentType:'Apartment',
+    Description:'Nice, cozy, warm big bed apartment',
+  },
+
+  {
+    Premium:false,
+    Price:80,
+    Img:'../markup/Img/room.jpg',
+    ApartsmentType:'Room',
+    Description:'Wood and stone place',
+  }];
+export default {mainPageCardInfo} ;
 
 root.render(
   <React.StrictMode>
-    <h1>Hello, World!</h1>
+    <App CardProps={mainPageCardInfo}/>
   </React.StrictMode>
 );