Index: frontend/src/Components/RestaurantDetails/Carousel.js
===================================================================
--- frontend/src/Components/RestaurantDetails/Carousel.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/RestaurantDetails/Carousel.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useState } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import Menu from './Menu';
+import { Row } from 'react-bootstrap';
+
+function MenuCarousel(props) {
+
+    return (
+        <>
+            <hr className='m-3'></hr>
+            <Row className='d-flex justify-content-center align-items-center'><h2>Мени</h2></Row>
+            <hr className='m-2'></hr>
+            <Menu menu={props.menu}></Menu>
+        </>
+    );
+}
+
+export default MenuCarousel;
Index: frontend/src/Components/RestaurantDetails/Menu.js
===================================================================
--- frontend/src/Components/RestaurantDetails/Menu.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/RestaurantDetails/Menu.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -0,0 +1,49 @@
+import React, {useState} from "react";
+import {Col, Container, Row, Carousel} from "react-bootstrap";
+import MenuItem from "./MenuItem";
+
+const Menu = (props) => {
+    const menu = props.menu
+
+    console.log(menu)
+    const partitionBy3 = (arr) => {
+        const rowPartitions = Array.from({length: Math.ceil(arr.length / 5)}, (v, i) =>
+            arr.slice(i * 5, i * 5 + 5)
+        );
+        return Array.from({length: Math.ceil(rowPartitions.length / 2)}, (v, i) =>
+            rowPartitions.slice(i * 2, i * 2 + 2)
+        );
+    }
+
+    const [ind, setIndex] = useState(0);
+
+    const handleSelect = (selectedIndex) => {
+        setIndex(selectedIndex);
+    };
+
+
+    return (<>
+        <Carousel activeIndex={ind} onSelect={handleSelect} indicators={false}>
+            {partitionBy3(menu).map((slides, index) => {
+                return (
+                    <Carousel.Item key={index}>
+                        {slides.map((row) => {
+                            return (
+                                <Row>
+                                    {row.map((menuItem) => {
+                                        return (
+                                            <Col>
+                                                <MenuItem data={menuItem}/>
+                                            </Col>
+                                        )
+                                    })}
+                                </Row>
+                            )
+                        })}
+                    </Carousel.Item>)
+            })}
+        </Carousel>
+    </>)
+}
+
+export default Menu;
Index: frontend/src/Components/RestaurantDetails/MenuItem.js
===================================================================
--- frontend/src/Components/RestaurantDetails/MenuItem.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/RestaurantDetails/MenuItem.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -0,0 +1,48 @@
+import React from "react";
+import {Col, Row, Image, Container} from "react-bootstrap";
+
+const MenuItem = (props) => {
+
+    const data = props.data;
+    return (<>
+
+        <a href="#" style={{textDecoration: "none", color: "black"}}>
+            <Container className="py-3 px-1 my-4"
+                       style={{
+                           border: "4px solid #159895",
+                           borderRadius: "1em",
+                           boxShadow: "0 3px 5px #159895",
+                           maxWidth: "90%"
+                       }}>
+                <Row>
+                    <Col className="d-flex justify-content-center mb-3">
+                        <Image
+                            src="https://www.tasteofhome.com/wp-content/uploads/2019/01/medium-rare-steak-shutterstock_706040446.jpg"
+                            style={{
+                                height: "7em",
+                                borderRadius: "1em",
+                                boxShadow: "0 4px 20px lightblue",
+                                maxWidth: "100%",
+                            }}
+                        ></Image>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col className="d-flex flex-column justify-content-center " style={{textAlign: "center"}}>
+                        <h4>{data.name}</h4>
+                        <h6>{data.ingredients}</h6>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+
+                        <h5>Цена: {data.price}$</h5>
+                    </Col>
+                </Row>
+            </Container>
+        </a>
+
+    </>)
+}
+
+export default MenuItem;
Index: frontend/src/Components/RestaurantDetails/Table.js
===================================================================
--- frontend/src/Components/RestaurantDetails/Table.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/RestaurantDetails/Table.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -0,0 +1,38 @@
+import {Col, Container, Image, Row} from "react-bootstrap";
+import React from "react";
+import { LuFan } from "react-icons/lu";
+import { TbToolsKitchen2 } from "react-icons/tb"
+import { MdBalcony } from "react-icons/md"
+
+const Table = (props) => {
+    return (
+        <>
+            <Container className="px-1 w-100">
+                <Row>
+                    <Col className="d-flex justify-content-center">
+                        <Image onClick={(e) => {
+                            e.preventDefault();
+                            console.log(props.data)
+                            props.showModal(props.data)
+                        }}
+                               src="https://cdnimg.webstaurantstore.com/uploads/seo_category/2019/5/table-dining-sets.jpg"
+                               style={{
+                                   height: "8em",
+                                   borderRadius: "1em",
+                                   boxShadow: "0 4px 20px lightblue",
+                                   maxWidth: "100%",
+                               }}
+                        ></Image>
+                    </Col>
+                    <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
+                        <h3>Маса</h3>
+                        <h3>Број на луѓе {props.data.noSeats}</h3>
+                    </Col>
+
+                </Row>
+            </Container>
+        </>
+    );
+};
+
+export default Table;
Index: frontend/src/Components/RestaurantDetails/TableRow.js
===================================================================
--- frontend/src/Components/RestaurantDetails/TableRow.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/RestaurantDetails/TableRow.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -0,0 +1,83 @@
+import React from "react";
+import { useState } from "react";
+import { Col, Container, Row, Image, Modal, Button } from "react-bootstrap";
+import Form from "react-bootstrap/Form";
+import useCreate from "../Hooks/useCreate";
+import Table from "./Table";
+import tab from "../Tab/Tab";
+const TableRow = (props) => {
+    const {createEntity} = useCreate()
+    const [getData, setData] = useState(0);
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+    const table = props.table
+    console.log(props)
+    console.log(table)
+    return (
+        <>
+            <tr>
+                <td>
+                    <Table data={table}></Table>
+                </td>
+                <td>
+                    <Form.Select aria-label="Default select example" name={'numberOfBeds'}
+                                 onChange={(e) => {
+                                     setData(e.target.value);
+                                 }}>
+                        <option></option>
+                        {[...Array(props.data.find(x => x.restaurantTable.tableId === table.tableId).numTables).keys()].map(x => {
+                            return (
+                                <option value={x+1}  >{x + 1}</option>
+                            )
+                        })}
+                    </Form.Select>
+                </td>
+                <td>
+                    <Button
+                        onClick={handleShow}
+                        className="m-2"
+                        size="md"
+                        style={{backgroundColor: "#159895"}}
+                    >
+                        Резервирај
+                    </Button>
+                </td>
+            </tr>
+
+            <Modal show={show} onHide={handleClose}>
+                <Modal.Header closeButton>
+                    <Modal.Title>Потврда на резервација</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <h3>Резервација на маса во ресторан</h3>
+                    <h3>На ден:<b>{' ' + props.params.date}</b></h3>
+                    <h3>Време од:<b>{' ' + props.params.hourFrom}</b></h3>
+                    <h3>Време до:<b>{' ' + props.params.hourTo}</b></h3>
+                    <h3>Маса за {table.noSeats} луѓе</h3>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={handleClose}>
+                        Close
+                    </Button>
+                    <Button variant="primary" onClick={() => {
+                        createEntity('restaurant/reserve', {
+                            restaurantTableId: table.tableId,
+                            userId: 1,
+                            restaurantAvailibleId: props.availableId,
+                            hourFrom: props.params.hourFrom,
+                            hourTo: props.params.hourTo,
+                            date: props.params.date
+                        })
+                        handleClose();
+                    }}>
+                        Резервирај
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    )
+}
+
+export default TableRow
Index: frontend/src/Components/RestaurantDetails/TablesTable.js
===================================================================
--- frontend/src/Components/RestaurantDetails/TablesTable.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
+++ frontend/src/Components/RestaurantDetails/TablesTable.js	(revision 5528b99794e1d3a36baa8eb2f1829125b75f0174)
@@ -0,0 +1,41 @@
+import React from "react";
+import Form from "react-bootstrap/Form";
+import FaHotel from "react-icons/fa";
+import {Button} from "react-bootstrap";
+import useCreate from "../Hooks/useCreate";
+import TableRow from "./TableRow";
+
+const TablesTable = (props) => {
+
+    console.log(props)
+
+
+    return (
+        <>
+            <table className="m-auto table table-hover table-responsive">
+                <thead>
+                <tr>
+                    <th scope="col">Тип на маса</th>
+                    <th scope="col">Колку единици?</th>
+                    <th scope="col"></th>
+                </tr>
+                </thead>
+                <tbody>
+                {Array.from(new Set(props.data.map(x => x.restaurantTable))).map((table) => {
+                    return (
+                        <>
+                            <TableRow
+                                params={props.params}
+                                availableId={props.data.filter(x => x.restaurantTable.tableId === table.tableId).
+                                map(x => x.restaurantAvailibleId)[0]}
+                                data={props.data} table={table} from={props.from} to={props.to}/>
+                        </>
+                    );
+                })}
+                </tbody>
+            </table>
+        </>
+    );
+};
+
+export default TablesTable;
