Index: frontend/src/Components/TransportEdit/TransportEditTab.js
===================================================================
--- frontend/src/Components/TransportEdit/TransportEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportEdit/TransportEditTab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,85 @@
+import React from "react";
+import { Container, Col, Row, Image, Nav, Tab } from "react-bootstrap";
+import { useState } from "react";
+import { FaTaxi, FaHotel } from "react-icons/fa";
+import { MdOutlineStickyNote2 } from "react-icons/md";
+import AddNew from "../Resources/AddNew";
+import { BiData } from "react-icons/bi";
+import AddTransportForm from "../Forms/AddTransportForm";
+import TransportListing from "./TransportListing";
+import useGet from "../Hooks/useGet";
+
+function TransportEditTab(props) {
+  const [activeTab, setActiveTab] = useState("/hotel");
+  console.log(props.displayRoute)
+
+
+  const handleSelect = (eventKey) => {
+    setActiveTab(eventKey);
+  };
+
+  return (
+    <Container className="rounded-5">
+      <Tab.Container
+        activeKey={activeTab}
+        onSelect={handleSelect}
+        className="bg-dark rounded-5"
+      >
+        <Nav
+          fill
+          variant="tabs"
+          className="bg-body rounded-top-5"
+          activeKey="/hotel"
+          id="tab_item"
+        >
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/hotel" className="text-left rounded-5">
+              <span className="ikona">
+                <FaHotel
+                  color="#159895"
+                  style={{ lineHeight: "100em" }}
+                  size={"1.5em"}
+                  className="mx-3"
+                />
+              </span>
+              <span className="ikona">Рути</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item">
+            <Nav.Link eventKey="/restaurant">
+              <span className="ikona">
+                <MdOutlineStickyNote2 color="#159895" size={"1.5em"} className="mx-3" />
+              </span>
+              <span className="ikona">Резервации</span>
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item className="tab_item rounded-5">
+            <Nav.Link eventKey="/transport" className="text-left rounded-5">
+              <span className="ikona">
+                <BiData color="#159895" size={"1.5em"} className="mx-3" />
+              </span>
+              <span className="ikona">Општи податоци</span>
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+
+        <Tab.Content className="py-5 px-3 border rounded-bottom-5 bg-light">
+          <Tab.Pane eventKey="/hotel">
+            {props.displayRoute && props.displayRoute.availableRoutes.map((route) => {
+              return <TransportListing data={route}/>
+            })}  
+            <AddNew type="route" transport={props.displayRoute} refresh={props.refresh}/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/restaurant">
+            <AddNew type="restaurant"/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/transport">
+            <AddTransportForm transport={props.displayRoute} refresh={props.refresh}/>
+          </Tab.Pane>
+        </Tab.Content>
+      </Tab.Container>
+    </Container>
+  );
+}
+
+export default TransportEditTab;
Index: frontend/src/Components/TransportEdit/TransportListing.js
===================================================================
--- frontend/src/Components/TransportEdit/TransportListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/TransportEdit/TransportListing.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,47 @@
+import React from "react";
+import {useState} from "react";
+import {Col, Container, Row, Image, Modal, Button} from "react-bootstrap";
+import LoginForm from "../Login/LoginForm";
+import ChangePasswordForm from "../Forms/ChangePasswordForm";
+import {AiOutlinePlusCircle} from "react-icons/ai"
+
+const TransportListing = (props) => {
+
+    //const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
+    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">
+                        <Image
+                            src="https://samsung.teveotecno.com.ar/wp-content/uploads/2022/07/how-to-create-and-draw-custom-routes-with-google-maps_62d4ad146140d.jpeg"
+                            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"}}>
+                        <h2>{props.data.from} - {props.data.to}</h2>
+                        <h6>{props.data.routes.map(x => x).join(", ")}</h6>
+                    </Col>
+
+                    <Col className="d-flex flex-column justify-content-center align-content-center">
+                        <h5>Цена:</h5>
+                         <h4>{props.data.maxPrice}$</h4>
+                    </Col>
+                </Row>
+            </Container>
+        </a>
+    </>)
+}
+
+export default TransportListing;
