diff --git a/front/src/App.js b/front/src/App.js
index c5311c5..fed88e1 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,7 +1,7 @@
 import { BrowserRouter, Route, Routes} from "react-router-dom";
-import CatalogProducts from "./Catalogs/CatalogProducts";
-import CatalogSuppliers from "./Catalogs/CatalogSuppliers";
-import CatalogOrders from "./Catalogs/CatalogOrders";
+import CatalogProducts from "./Pages/CatalogProducts";
+import CatalogSuppliers from "./Pages/CatalogSuppliers";
+import OrderPage from "./Pages/OrderPage";
 import Header from "./general/Header";
 
 function App() {
@@ -13,7 +13,7 @@ function App() {
         <Route path="/" Component={CatalogProducts}/>
         <Route path="/products" Component={CatalogProducts} />
         <Route path="/suppliers" Component={CatalogSuppliers} />
-        <Route path="/orders" Component={CatalogOrders} />
+        <Route path="/orders" Component={OrderPage} />
       </Routes>
 
     </BrowserRouter>
diff --git a/front/src/DataService.js b/front/src/DataService.js
index da5ce9f..1b2cdbb 100644
--- a/front/src/DataService.js
+++ b/front/src/DataService.js
@@ -27,6 +27,12 @@ export default class DataService {
         return response.data.map(item => transformer(item));
     }
 
+    static async getOrders(url){
+        const response = await fetch(this.mainUrl + url)  
+        const res = response.json()
+        return res
+    }
+
     static async read(url, transformer) {
         const response = await axios.get(this.mainUrl + url);
         return transformer(response.data);
diff --git a/front/src/Catalogs/CatalogOrders.jsx b/front/src/Pages/CatalogOrders.jsx
similarity index 78%
rename from front/src/Catalogs/CatalogOrders.jsx
rename to front/src/Pages/CatalogOrders.jsx
index d28fd13..6a90b9e 100644
--- a/front/src/Catalogs/CatalogOrders.jsx
+++ b/front/src/Pages/CatalogOrders.jsx
@@ -11,7 +11,9 @@ export default function CatalogOrders(props) {
     const supplierUrl = 'supplier/'
     const productUrl = 'product/'
 
-    const transformer = (data) => new Order(data)
+    const transformer = (data) => {
+        new Order(data)
+    }
 
     const catalogOrderHeaders = [
         { name: 'date', label: 'Дата заказа' },
@@ -47,6 +49,12 @@ export default function CatalogOrders(props) {
         console.log(data)
     }
 
+    const saveProducts = (event) => {
+        console.log(products)
+        setData({...products, [event.target.id]: event.target.value})
+        console.log(products)
+    }
+
     return (
         <>  
             <Catalog headers={catalogOrderHeaders} 
@@ -59,22 +67,19 @@ export default function CatalogOrders(props) {
             addProduct={edit}
             modalAddProduct={
                 <div className="mb-3">
-                <label htmlFor="product" className="form-label">Поставщик</label>
-                <select id="product" className="form-select" required
-                    value={data.product} onChange={handleFormChange}>
-                    <option disabled value="">Укажите продукт</option>
-                    {
-                        products.map(product => 
-                            <option key={product.id} value={product.id}>{product.name}</option>
-                        )
-                    }
-                </select>
-            </div>
+                    <label htmlFor="product" className="form-label">Поставщик</label>
+                    <select id="product" className="form-select" required
+                        value={data.product} onChange={saveProducts}>
+                        <option disabled value="">Укажите продукт</option>
+                        {
+                            products.map(product => 
+                                <option key={product.id} value={product.id}>{product.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
             }>
-                
-            {/* <div className="mb-3">
-                <label htmlFor="data" className="form-label">Дата {data.date}</label>
-            </div> */}
+            
             
             <div className="mb-3">
                 <label htmlFor="supplierId" className="form-label">Поставщик</label>
diff --git a/front/src/Catalogs/CatalogProducts.jsx b/front/src/Pages/CatalogProducts.jsx
similarity index 100%
rename from front/src/Catalogs/CatalogProducts.jsx
rename to front/src/Pages/CatalogProducts.jsx
diff --git a/front/src/Catalogs/CatalogSuppliers.jsx b/front/src/Pages/CatalogSuppliers.jsx
similarity index 100%
rename from front/src/Catalogs/CatalogSuppliers.jsx
rename to front/src/Pages/CatalogSuppliers.jsx
diff --git a/front/src/Pages/OrderPage.jsx b/front/src/Pages/OrderPage.jsx
new file mode 100644
index 0000000..9306f72
--- /dev/null
+++ b/front/src/Pages/OrderPage.jsx
@@ -0,0 +1,180 @@
+import { React, useState, useEffect } from "react";
+import Table from "../general/Table";
+import ToolBar from "../general/ToolBar";
+import Modal from "../general/Modal";
+import DataService from "../DataService";
+import Order from "../models/Order";
+import Product from "../models/Product";
+import Supplier from "../models/Supplier";
+
+export default function OrderPage(){
+    const url = 'order/'
+    const supplierUrl = 'supplier/'
+    const productUrl = 'product/'
+
+    const transformer = (data) => new Order(data)
+    const transformerSupplier = (data) => new Product(data)
+    const transformerProduct = (data) => new Supplier(data)
+
+    const [orders, setOrders] = useState([])
+    const [currOrder, setCurrOrder] = useState('')
+
+    const[suppliers, setSuppliers] = useState([])
+    const[supplier, setSupplier] = useState('')
+
+    const [products, setProducts] = useState([])
+
+    const [modalHeader, setModalHeader] = useState('')
+    const [modalConfirm, setModalConfirm] = useState('')
+    const [modalVisible, setModalVisible] = useState(false)
+    const [isAddProd, setIsAddProd] = useState(false)
+
+    const [isEdit, setEdit] = useState(false)
+    const [addProdVisible, setAddProdVisible] = useState(false)
+    
+    const headers = [
+        { name: 'date', label: 'Дата заказа' },
+        { name: 'supplierName', label: 'Поставщик' },
+        { name: 'products', label: 'Продукт(ы)' }
+    ];
+
+    let selectedItems = [];
+
+    useEffect(() => {
+        loadItems()
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const loadItems = () => {
+        DataService.getOrders(url).then(data => {
+            console.log(data)
+            setOrders([])
+            data.map(order => {
+                setOrders(prevState => [...prevState, new Order(order)])
+            })
+        })
+
+        DataService.readAll(supplierUrl, transformerSupplier).then(data => setSuppliers(data))
+        DataService.readAll(productUrl, transformerProduct).then(data => setProducts(data))
+    }
+
+    const add = () =>{
+
+    }
+
+    const edit = () =>{
+
+    }
+
+    const remove = () =>{
+
+    }
+
+    const addProduct = () =>{
+        if (selectedItems.length === 0) 
+            return
+        
+        DataService.read(url + selectedItems[0], transformer)
+        .then(data => {
+
+
+
+            setEdit(false)
+            setAddProdVisible(true)
+            setModalHeader('Добавление продукта к заказу')
+            setModalConfirm('Сохранить')
+            edit(data)
+        }); 
+    }
+
+    const removeProduct = () =>{
+
+    }
+
+    const handleFormChange = (event) => {
+        console.log(currOrder)
+        setData({ ...data, [event.target.id]: event.target.value })
+        console.log(data)
+    }
+
+
+    const handleTableClick = (tableSelectedItems) => {selectedItems = tableSelectedItems;}
+    const handleTableDblClick = (tableSelectedItem) =>{}
+    const hideModal = () => {
+        setModalVisible(false)
+        setAddProdVisible(false)
+    }
+    const modalDone = () => {}
+
+    return(
+        <>
+            <ToolBar 
+                add={add}
+                edit={edit}   
+                remove={remove}
+                addProduct={addProduct}
+                removeProduct={removeProduct}
+                addsVisible={true}/>
+
+            <Table 
+                headers={headers} 
+                items={orders}
+                selectable={true}
+                onClick={handleTableClick}
+                onDblClick={handleTableDblClick}/>
+
+            <Modal
+                header={modalHeader}
+                confirm={modalConfirm}
+                visible={modalVisible} 
+                onHide={hideModal}
+                onDone={modalDone}> 
+                    <div className="mb-3">
+                        <label htmlFor="supplierId" className="form-label">Поставщик</label>
+                        <select id="supplierId" className="form-select" required
+                            value={currOrder.supplierId} onChange={handleFormChange}>
+                            <option disabled value="">Укажите поставщика</option>
+                            {
+                                suppliers.map(supplier => 
+                                    <option key={supplier.id} value={supplier.id}>{supplier.name}</option>
+                                )
+                            }
+                        </select>
+                    </div>
+
+                    <div className="mb-3">
+                        <label htmlFor="product" className="form-label">Поставщик</label>
+                        <select id="product" className="form-select" required
+                            onChange={handleFormChange}>
+                            <option disabled value="">Укажите продукт</option>
+                            {
+                                products.map(product => 
+                                    <option key={product.id} value={product.id}>{product.name}</option>
+                                )
+                            }
+                        </select>
+                    </div>
+            </Modal>
+
+            <Modal            
+            header={modalHeader}
+            confirm={modalConfirm}
+            visible={addProdVisible} 
+            onHide={hideModal}
+            onDone={modalDone}>
+                <div className="mb-3">
+                    <label htmlFor="product" className="form-label">Поставщик</label>
+                    <select id="product" className="form-select" required
+                        value={products} onChange={handleFormChange}>
+                        <option disabled value="">Укажите продукт</option>
+                        {
+                            products.map(product => 
+                                <option key={product.id} value={product.id}>{product.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+        </Modal>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/front/src/general/Catalog.jsx b/front/src/general/Catalog.jsx
index f25a0ec..cc99ed2 100644
--- a/front/src/general/Catalog.jsx
+++ b/front/src/general/Catalog.jsx
@@ -24,19 +24,19 @@ function Catalog(props) {
 
     const loadItems = () => {
         DataService.readAll(props.url, props.transformer)
-            .then(data =>
-                setItems(data))
+            .then(data => setItems(data))
     }
 
     const saveItem = () => {
         if(isAddProd){
             DataService.addProduct(`${props.url}addProduct/${props.data.id}`).then(() => loadItems())
-            return
+            
         }
 
         if (!isEdit) {
             DataService.create(props.url, props.data).then(() => loadItems())
-            if()
+            if(isAddProd)
+                DataService.addProduct(`${props.url}addProduct/${props.data.id}`).then(() => loadItems())
         } else{
             DataService.update(props.url + props.data.id, props.data).then(() => loadItems())
         }
@@ -101,7 +101,7 @@ function Catalog(props) {
         DataService.read(props.url + selectedItems[0], props.transformer)
         .then(data => {
             setEdit(false)
-            isAddProd(true)
+            setAddProdVisible(true)
             setModalHeader('Добавление продукта к заказу')
             setModalConfirm('Сохранить')
             setAddProdVisible(true)
@@ -111,7 +111,10 @@ function Catalog(props) {
 
     const handleTableClick = (tableSelectedItems) => selectedItems = tableSelectedItems;
     const handleTableDblClick = (tableSelectedItem) => editItem(tableSelectedItem);
-    const hideModal = () => setModalVisible(false)
+    const hideModal = () => {
+        setModalVisible(false)
+        setAddProdVisible(false)
+    }
     const modalDone = () => saveItem()
 
   return (
diff --git a/front/src/models/Order.js b/front/src/models/Order.js
index 82f329d..0e466de 100644
--- a/front/src/models/Order.js
+++ b/front/src/models/Order.js
@@ -5,6 +5,7 @@ export default class Order {
         this.id = data?.id;
         this.date = data?.dateOfOrder || '';
         this.supplierId = data?.supplier.id || '';
-        this.supplier = data?.supplier.name || '';
+        this.supplierName = data?.supplier.name || '';
+        this.products = data?.products || '';
     }
 }
\ No newline at end of file