Index: frontend/src/Components/Tab/Tab.js
===================================================================
--- frontend/src/Components/Tab/Tab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/Tab.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Container, Nav } from "react-bootstrap";
+import { Tab } from "react-bootstrap";
+import TabFormHotel from "./TabFormHotel";
+import TabFormRestaurant from "./TabFormRestaurant";
+import TabFormTransport from "./TabFormTransport";
+import { FaHotel, FaTaxi } from 'react-icons/fa'
+import { MdRestaurant } from "react-icons/md"
+
+function TabComponent() {
+  const [activeTab, setActiveTab] = useState("/hotel");
+
+  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 href="/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"><MdRestaurant 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"><FaTaxi 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">
+            <TabFormHotel/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/restaurant">
+            <TabFormRestaurant/>
+          </Tab.Pane>
+          <Tab.Pane eventKey="/transport">
+            <TabFormTransport/>
+          </Tab.Pane>
+        </Tab.Content>
+      </Tab.Container>
+    </Container>
+  );
+}
+
+export default TabComponent;
Index: frontend/src/Components/Tab/TabFormHotel.js
===================================================================
--- frontend/src/Components/Tab/TabFormHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/TabFormHotel.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,92 @@
+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { FaMagnet } from "react-icons/fa"
+import { HiMagnifyingGlass } from "react-icons/hi2"
+import useFormData from "../Hooks/useFormData";
+
+function TabFormHotel() {
+
+  const { formData, onFormChange, setFormData } = useFormData({
+    hotelLocation: undefined,
+    dateFrom: undefined,
+    dateTo: undefined,
+    numBeds: undefined
+  })
+
+  return (
+    <Form className='rounded-5' >
+      <Row>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="text"
+              placeholder="Каде ќе патувате?:"
+              id="location"
+              name="hotelLocation"
+              value={formData.hotelLocation}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="location">Локација:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="date"
+              placeholder="Датум на пристигнување:"
+              id="dateFrom"
+              name="dateFrom"
+              value={formData.dateFrom}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="dateFrom">Датум на пристигнување:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="date"
+              placeholder="Датум на заминување:"
+              id="dateTo"
+              name="dateTo"
+              value={formData.dateTo}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="dateTo">Датум на заминување:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="number"
+              placeholder="Број на гости:"
+              id="floatingPassengers"
+              name="numBeds"
+              value={formData.numBeds}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingPassengers">Број на гости:</label>
+          </Form.Floating>
+
+          <Form.Group className="my-1">
+            <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" 
+            onClick={(e) => {
+              e.preventDefault();
+              window.location.href = `/search/hotel/${formData.hotelLocation}/${formData.dateFrom}/${formData.dateTo}/${formData.numBeds}`
+            }}>
+              <span className="ikona my-1"><HiMagnifyingGlass/></span>
+              <span className="ikona mx-3">Пребарај</span>
+            </Button>
+          </Form.Group>
+        </Col>
+
+      </Row>
+    </Form>
+  );
+}
+
+export default TabFormHotel;
Index: frontend/src/Components/Tab/TabFormRestaurant.js
===================================================================
--- frontend/src/Components/Tab/TabFormRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/TabFormRestaurant.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,120 @@
+import React from "react";
+import {Button, Col, Container, Form, Row} from "react-bootstrap";
+import {HiMagnifyingGlass} from "react-icons/hi2"
+import useFormData from "../Hooks/useFormData";
+
+const timeOfArrival = () => {
+    let times = [];
+
+    for (let i = 0; i <= 23; i++) {
+        for (let j = 0; j <= 30; j += 30) {
+            let hour = i.toString().padStart(2, "0");
+            let minutes = j.toString().padStart(2, "0");
+            times.push(`${hour}:${minutes}`);
+        }
+    }
+
+    return times;
+};
+function TabFormRestaurant() {
+    const {formData, onFormChange, setFormData} = useFormData({
+        restaurantLocation: '',
+        date: '',
+        hourFrom: '',
+        hourTo: '',
+        numPeople: ''
+    })
+
+
+    const a = timeOfArrival();
+
+    return (
+        <Form>
+            <Row>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Control
+                            size="lg"
+                            type="text"
+                            placeholder="Место:"
+                            id="location"
+                            name={'restaurantLocation'}
+                            value={formData.restaurantLocation}
+                            onChange={onFormChange}
+                        ></Form.Control>
+                        <label htmlFor="location">Место:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Control
+                            size="md"
+                            type="date"
+                            step={3600000}
+                            placeholder="Час од:"
+                            id="dateFrom"
+                            name={'date'}
+                            value={formData.date}
+                            onChange={onFormChange}
+                        ></Form.Control>
+                        <label htmlFor="dateFrom">Датум:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Select size="md"
+                         name={'hourFrom'}
+                         value={formData.hourFrom}
+                         onChange={onFormChange}>
+                            <option>Изберете време:</option>
+                            {a.map((x) => {
+                                return <option key={x}>{x}</option>;
+                            })}
+                        </Form.Select>
+                        <label htmlFor="hour">Час од:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Select size="md"
+                         name={'hourTo'}
+                         value={formData.hourTo}
+                         onChange={onFormChange}>
+                            <option>Изберете време:</option>
+                            {a.filter((x) => x > formData.hourFrom).map((x) => {
+                                return <option key={x}>{x}</option>;
+                            })}
+                        </Form.Select>
+                        <label htmlFor="hour">Час до:</label>
+                    </Form.Floating>
+                </Col>
+                <Col>
+                    <Form.Floating className="mb-3">
+                        <Form.Control
+                            size="md"
+                            type="number"
+                            placeholder="Број на гости:"
+                            id="floatingPassengers"
+                            name={'numPeople'}
+                            value={formData.numPeople}
+                            onChange={onFormChange}
+                        ></Form.Control>
+                        <label htmlFor="floatingPassengers">Број на гости:</label>
+                    </Form.Floating>
+                    <Form.Group className="my-1">
+                        <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" onClick={(e) => {
+                            e.preventDefault();
+                            window.location.href = `/search/restaurant/${formData.restaurantLocation}/${formData.date}/${formData.hourFrom}/${formData.hourTo}/${formData.numPeople}`
+
+                        }}>
+                            <span className="ikona my-1"><HiMagnifyingGlass/></span>
+                            <span className="ikona mx-3">Пребарај</span>
+                        </Button>
+                    </Form.Group>
+                </Col>
+            </Row>
+        </Form>
+    );
+}
+
+export default TabFormRestaurant;
Index: frontend/src/Components/Tab/TabFormTransport.js
===================================================================
--- frontend/src/Components/Tab/TabFormTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
+++ frontend/src/Components/Tab/TabFormTransport.js	(revision e6c2521bc7455763be50cf2e37427887b6efb4b9)
@@ -0,0 +1,88 @@
+import React from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { HiMagnifyingGlass } from "react-icons/hi2"
+import useFormData from "../Hooks/useFormData";
+
+function TabFormTransport() {
+
+  const { formData, onFormChange, setFormData } = useFormData({
+    from: undefined,
+    to: undefined,
+    date: undefined,
+    numPassengers: 0
+  })
+
+  return (
+    <Form>
+      <Row>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="text"
+              placeholder="Од:"
+              id="floatingFrom"
+              value={formData.from}
+              name={'from'}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingFrom">Од:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="text"
+              placeholder="До:"
+              id="floatingTo"
+              name={'to'}
+              value={formData.to}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingTo">До:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="date"
+              placeholder="Датум:"
+              id="floatingDate"
+              name={'date'}
+              value={formData.date}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingDate">Датум:</label>
+          </Form.Floating>
+        </Col>
+        <Col>
+          <Form.Floating className="mb-3">
+            <Form.Control
+              size="md"
+              type="number"
+              placeholder="Број на патници:"
+              name={'numPassengers'}
+              id="floatingPassengers"
+              value={formData.numPassengers}
+              onChange={onFormChange}
+            ></Form.Control>
+            <label htmlFor="floatingPassengers">Број на патници:</label>
+          </Form.Floating>
+          <Form.Group className="my-1">
+            <Button type="submit" style={{backgroundColor: "#159895"}} size="lg" onClick={(e) => {
+              e.preventDefault();
+              window.location.href = `/search/transport/${formData.from}/${formData.to}/${formData.date}/${formData.numPassengers}`
+            }}>
+              <span className="ikona my-1"><HiMagnifyingGlass/></span>
+              <span className="ikona mx-3">Пребарај</span>
+            </Button>
+          </Form.Group>
+        </Col>
+      </Row>
+    </Form>
+  );
+}
+
+export default TabFormTransport;
