diff --git a/App.js b/App.js
new file mode 100644
index 0000000..ad88738
--- /dev/null
+++ b/App.js
@@ -0,0 +1,77 @@
+import React, {Component} from 'react';
+import MainPage from "./pages/main-page.js"
+import AdminPage from "./pages/admin-page.js"
+import UserPage from "./pages/user-page.js"
+import ShopingCard from "./pages/shoping-card.js"
+
+import './App.css';
+
+class App extends Component {
+  constructor(){
+    super();
+    this.state = {
+      activePage: "mainPage"
+    }
+}
+
+changeActivePageToAdminPage = () => {
+  this.setState({
+    activePage: "adminPage"
+  })
+}
+
+changeActivePageToUserPage = () => {
+  this.setState({
+    activePage: "userPage"
+  })
+}
+
+changeActivePageToShopCardPage = () => {
+  this.setState({
+    activePage: "shopingCard"
+  })
+}
+
+changeActivePageToMainPage = () => {
+  this.setState({
+    activePage: "mainPage"
+  })
+}
+
+
+
+  render() {
+    const {activePage} = this.state;
+
+    if (activePage == "mainPage") {
+      return (
+        <MainPage
+          changeActivePageToUserPage ={this.changeActivePageToUserPage}
+          changeActivePageToAdminPage ={this.changeActivePageToAdminPage}
+        />)
+    }
+    if (activePage == "adminPage") {
+      return (
+        <AdminPage
+        changeActivePageToMainPage = {this.changeActivePageToMainPage}
+        changeActivePageToShopCardPage = {this.changeActivePageToShopCardPage}
+        />)
+    }
+    if (activePage == "userPage") {
+      return (
+        <UserPage
+        changeActivePageToMainPage ={this.changeActivePageToMainPage}
+        changeActivePageToShopCardPage={this.changeActivePageToShopCardPage}
+        />)
+    }
+    if (activePage == "shopingCard") {
+      return (
+        <ShopingCard
+        changeActivePageToMainPage={this.changeActivePageToMainPage}
+      />)
+    }
+
+  }
+}
+
+export default App;
diff --git a/pages/admin-page.js b/pages/admin-page.js
new file mode 100644
index 0000000..8082a80
--- /dev/null
+++ b/pages/admin-page.js
@@ -0,0 +1,74 @@
+import React, {Component} from 'react';
+import staff from "../shoping-goods";
+import "bootstrap/dist/css/bootstrap.css"
+
+class AdminPage extends Component {
+  render() {
+
+
+    let ShopsGoods = staff.map((value, index, arr)=>{
+      return (
+        <li className="list-group-item" key={value.id}>
+            <img src="#" alt=""/>
+            <a href="#" className="admin-orders__link">
+              {value.text}
+            </a>
+            <h2 className="float-right btn-link">✎</h2>
+          </li>
+      )
+    })
+
+    let addStaffToShopingGoods = ()=>{
+      let text = document.getElementById("enterNewName").value
+      let id = Math.random()*100000000000000000
+      let newOnj = {
+        id: id,
+        text: text,
+      }
+      staff.push(newOnj)
+
+    }
+
+    const {
+      changeActivePageToMainPage,
+      changeActivePageToShopCardPage,
+    } = this.props
+
+    return (
+      <div className="container flex-grow-1">
+        <div className="row">
+          <div className="col-8">
+            <div className="admin-orders">
+              <h1>ADMIN PAGE</h1>
+
+              {ShopsGoods}
+              <br/>
+              <div className="input-group mb-3">
+                <div className="input-group-prepend">
+                  <span className="input-group-text" id="basic-addon1">@</span>
+                </div>
+                <input type="text" className="form-control" id="enterNewName" placeholder="enter new name"/>
+                <button className="btn btn-primary" onClick ={addStaffToShopingGoods}>Add</button>
+              </div>
+            </div>
+          </div>
+          <div className="col-4">
+            <div>
+              Admin
+            </div>
+            <button
+              onClick = {changeActivePageToMainPage}
+            >User Logout</button>
+            <button
+              onClick = {changeActivePageToShopCardPage}
+            >Shop Card</button>
+          </div>
+        </div>
+      </div>
+
+    )
+  }
+}
+
+
+export default AdminPage;
diff --git a/pages/main-page.js b/pages/main-page.js
new file mode 100644
index 0000000..8db3ed5
--- /dev/null
+++ b/pages/main-page.js
@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+
+ class MainPage extends Component {
+
+
+  render() {
+    const {
+      changeActivePageToAdminPage,
+      changeActivePageToUserPage,
+    } = this.props
+
+    return (
+      <div className="container">
+        <h1>Main Page</h1>
+        <div className="row">
+          <button
+            className="btn btn-primary"
+            onClick={changeActivePageToAdminPage}
+          >Login as Admin</button>
+          <button
+          className="btn btn-outline-primary"
+          onClick={changeActivePageToUserPage}
+          >Login as User</button>
+        </div>
+        </div>
+    )
+  }
+}
+export default MainPage;
diff --git a/pages/shoping-card.js b/pages/shoping-card.js
new file mode 100644
index 0000000..550bf3c
--- /dev/null
+++ b/pages/shoping-card.js
@@ -0,0 +1,53 @@
+import React, {Component} from 'react';
+import staffInShoppingCart from "../shoping-goods-who-has-added-to-chop";
+
+
+class ShopingCard extends Component {
+  render() {
+    const {
+      changeActivePageToMainPage,
+
+    } = this.props
+
+
+    let staffFromStaffInShoppingCart = staffInShoppingCart.map((value)=>{
+      return (
+        <li className="list-group-item">
+          <img src="#" alt=""/>
+          <a href="#" className="admin-orders__link">
+            {value.text}
+          </a>
+          <h2 className="float-right badge-light">✓</h2>
+        </li>
+      )
+    })
+    return (
+      <div className="container">
+        <div className="row">
+          <div className="col-8">
+            <h1>Shopping Cart</h1>
+            <ul className="list-group">
+
+                {staffFromStaffInShoppingCart}
+            </ul>
+          </div>
+          <div className="col-4">
+            <div>
+              User
+            </div>
+            <button onClick={changeActivePageToMainPage}>User Logout</button>
+          </div>
+        </div>
+        <div className="row">
+          <pre>price:</pre>
+        </div>
+        <div className="row">
+          <button className="btn btn-primary">Ship it</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+
+export default ShopingCard;
diff --git a/pages/user-page.js b/pages/user-page.js
new file mode 100644
index 0000000..f1bf65b
--- /dev/null
+++ b/pages/user-page.js
@@ -0,0 +1,74 @@
+import React, {Component} from 'react';
+import staff from "../shoping-goods";
+import "bootstrap/dist/css/bootstrap.css";
+import staffInShoppingCart from "../shoping-goods-who-has-added-to-chop";
+
+class UserPage extends Component {
+  render() {
+
+    const {
+      changeActivePageToMainPage,
+      changeActivePageToShopCardPage
+    } = this.props
+
+// let addStaffToShoppingCart = (id)=> {
+//   let text = "";
+//    let newObj = {
+//
+//    }
+  // console.log(this);
+// }
+
+  let ShopsGoods = staff.map((value, index, arr)=>{
+    let text = value.text
+    let id = value.id
+    return (
+      <div className="card" key = {value.id} id = {value.id}>
+        <div className="card-body">
+          <h5 className="card-title">{value.text}</h5>
+          <p className="card-text">{value.text}</p>
+          <button className="btn btn-primery btn-lg" id={index} onClick={
+            e => {
+              staffInShoppingCart.push({
+                id: id,
+                text: text
+
+              })
+            }
+        } >Buy</button>
+          <h3 className="text-success">✓✓✓✓✓</h3>
+        </div>
+      </div>
+    )
+  })
+
+    return (
+      <div className="container">
+        <h1>USER PAGE</h1>
+        <div className="row">
+          <div className="col-8">
+            <div className="row">
+            {ShopsGoods}
+
+            </div>
+          </div>
+          <div className="col-4">
+            <div>
+              User
+            </div>
+            <button
+              onClick={changeActivePageToMainPage}
+            >User Logout</button>
+            <button
+              onClick={changeActivePageToShopCardPage}
+            >Shopping Cart</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+
+
+export default UserPage;
diff --git a/shoping-goods-who-has-added-to-chop.js b/shoping-goods-who-has-added-to-chop.js
new file mode 100644
index 0000000..9859f07
--- /dev/null
+++ b/shoping-goods-who-has-added-to-chop.js
@@ -0,0 +1 @@
+export default []
diff --git a/shoping-goods.js b/shoping-goods.js
new file mode 100644
index 0000000..36dd18d
--- /dev/null
+++ b/shoping-goods.js
@@ -0,0 +1,14 @@
+export default  [
+  {
+    "id": "4567876543456",
+    "text": "MacBook pro 2018"
+  },
+  {
+    "id": "4567876545676",
+    "text": "Dell xs"
+  },
+  {
+    "id": "2345654567878",
+    "text": "Microsoft Surface"
+  }
+]