diff --git a/kivi-cars/package-lock.json b/kivi-cars/package-lock.json
index bade6b5..703494a 100644
--- a/kivi-cars/package-lock.json
+++ b/kivi-cars/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-hook-form": "^7.29.0",
         "react-router-dom": "^6.2.2",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
@@ -13172,6 +13173,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25388,6 +25404,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/kivi-cars/src/components/Button/StandardBtn.js b/kivi-cars/src/components/Button/StandardBtn.js
index 919232b..c9a664b 100644
--- a/kivi-cars/src/components/Button/StandardBtn.js
+++ b/kivi-cars/src/components/Button/StandardBtn.js
@@ -1,19 +1,21 @@
+import React from 'react'
 import './button.css'
 
 const StandardBtn = (props) => {
 
-    const {filtersData, setFiltersData, filter} = props.data
+    const {setData, filter} = props.data
 
     const clickHandler = ( e ) => {
-        setFiltersData(prevData => ({
-            ...prevData,
-            [e.target.name]: e.target.value
+        setData( prevState => ({
+            ...prevState,
+            "Category":{
+                [e.target.name]: e.target.value
+            }
         }))
     }
 
     return (
         <div className='standard-btn'>
-
            <button name={filter} value={props.title} className='standardBtn' onClick={e => clickHandler(e)}>{props.title}</button>
         </div>
     )
diff --git a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js
index e127755..0160e8f 100644
--- a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js
+++ b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js
@@ -1,7 +1,7 @@
 import './ButtonsToolbar.css';
 import { Link } from 'react-router-dom'
 import ArrowLeft from '../Button/leftBtn';
-import ArrowRigh from '../Button/rightBtn';
+// import ArrowRigh from '../Button/rightBtn';
 
 
 const ButtonsToolbar = (props) => {
@@ -12,12 +12,12 @@ const ButtonsToolbar = (props) => {
                     <ArrowLeft />
                 </Link>
             </div>
-            <div className='right-group'>
+            {/* <div className='right-group'>
                 <Link to={`${props.routes.next}`}>
                     <ArrowRigh/>
                 </Link>
                 
-            </div>
+            </div> */}
         </div>
     )
 } 
diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.js b/kivi-cars/src/components/CategoryBtns/categorybtns.js
index 5178413..2ab1f07 100644
--- a/kivi-cars/src/components/CategoryBtns/categorybtns.js
+++ b/kivi-cars/src/components/CategoryBtns/categorybtns.js
@@ -1,6 +1,7 @@
 import './categorybtns.css'
 import StandardBtn from '../Button/StandardBtn'
 import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 
 
 const CategoryBtns = (props) => {
@@ -10,16 +11,20 @@ const CategoryBtns = (props) => {
     let kamion = 'Kamion';
     let filter = 'Vozilo'
 
-    const {filtersData, setFiltersData} = props.data;
+    const {data, setData} = props.data;
 
     return ( 
         <div className='category-btns'>
             <Link to='/filters'>
-                <StandardBtn title={auto} data={{filtersData, setFiltersData, filter}}/>
+                <StandardBtn title={auto} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={motor} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={kamion} data={{data, setData, filter}}/>
             </Link>
             
-            <StandardBtn title={motor} data={{filtersData, setFiltersData}}/>
-            <StandardBtn title={kamion} data={{filtersData, setFiltersData}}/>
         </div>
     )
 
diff --git a/kivi-cars/src/components/Filters/Advanced-filters.js b/kivi-cars/src/components/Filters/Advanced-filters.js
index 25ad906..324f955 100644
--- a/kivi-cars/src/components/Filters/Advanced-filters.js
+++ b/kivi-cars/src/components/Filters/Advanced-filters.js
@@ -1,6 +1,8 @@
 import React from "react";
 import "./Filters.css";
 import Filter from "./Filter/Filter";
+import TitleBtn from "../Button/TitleBtn";
+import {Link} from 'react-router-dom';
 import Color from '../../data/color';
 import AirCondition from "../../data/air-condition";
 import Seats from "../../data/seats";
@@ -13,8 +15,8 @@ import CheckBox from "../../data/checkbox";
 
 const AdvancedFilters = (props) => {
 
-    const {filtersData, setFiltersData} = props.data
-    const data = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
+    const {filters, setFilters} = props.data
+    const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
     let index = 0
 
 
@@ -22,10 +24,10 @@ const AdvancedFilters = (props) => {
         <div className="filters-container">
             <div className="filters-content">
             {
-                data.map(item => {
+                data1.map(item => {
                     index += 1;
                     return(
-                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filtersData, setFiltersData}}/>
+                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
                     )
                 })
             }
@@ -35,11 +37,17 @@ const AdvancedFilters = (props) => {
                 CheckBox.map(item => {
                     index += 1;
                     return(
-                        <Checkbox key={index} title={item} data={{filtersData, setFiltersData}}/>
+                        <Checkbox key={index} title={item} data={{filters, setFilters}}/>
                     )
                 })
             }
             </div>
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
         </div>
     )
 }
diff --git a/kivi-cars/src/components/Filters/Filter/Checkbox.js b/kivi-cars/src/components/Filters/Filter/Checkbox.js
index 04541c3..ec91239 100644
--- a/kivi-cars/src/components/Filters/Filter/Checkbox.js
+++ b/kivi-cars/src/components/Filters/Filter/Checkbox.js
@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from "react";
-import './Checkbox.css';
+import React, { useState } from "react";
+import './css/Checkbox.css';
 
 const Checkbox = (props) => {
 
 
-    const {filtersData, setFiltersData} = props.data
-    const [isChecked, setIsChecked] = useState(false)
+    const {setFilters} = props.data
+    const [isChecked, setIsChecked] = useState(true)
 
 
     const changeHandler = ( event ) => {
-        setFiltersData(prevData => ({
+        setFilters(prevData => ({
             ...prevData,
             [event.target.name]: isChecked
         }))
diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js
index 3bf64e2..8686107 100644
--- a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js
+++ b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js
@@ -1,21 +1,20 @@
 import React, {useEffect, useState} from "react";
-import "./DoubleFilter.css";
+import "./css/DoubleFilter.css";
 
 const DoubleFilter = (props) => {
 
-    const defaultV = 0
-    const {filtersData, setFiltersData} = props.data
+    const {setFilters} = props.data
     const [doubleFilterData, setDoubleFilterData] = useState({})
 
     const changeHandler = ( e ) => {
         setDoubleFilterData(prevData => ({
             ...prevData,
-            [e.target.name]: e.target.value          
+            [e.target.name]: e.target.value     
         }))
     }
 
     useEffect(() => {
-        setFiltersData(prevData => ({
+        setFilters(prevData => ({
             ...prevData,
             [props.title]: doubleFilterData
         }))
@@ -31,7 +30,7 @@ const DoubleFilter = (props) => {
                 </div>
                 <div className="filter"> 
                 <label htmlFor="do" className="filter-info">Do</label>
-                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" max={props.fields.max} onChange={(e) => changeHandler(e)}/>
+                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
                 </div>
             </div>
         </div>
diff --git a/kivi-cars/src/components/Filters/Filter/Filter.js b/kivi-cars/src/components/Filters/Filter/Filter.js
index 3c0381e..c1e9cce 100644
--- a/kivi-cars/src/components/Filters/Filter/Filter.js
+++ b/kivi-cars/src/components/Filters/Filter/Filter.js
@@ -1,21 +1,22 @@
-import React from "react";
-import './Filter.css';
+import React, { useEffect, useState } from "react";
+import './css/Filter.css';
 
 const Filter = (props) => {
 
-    const {filtersData, setFiltersData} = props.data
+    const {filters, setFilters} = props.data
+    const [filtersData, setFiltersData] = useState({})
 
-    const changeHandler = ( event ) => {
-        setFiltersData( prevData => ({
+    const changeHandler = ( e ) => {
+        setFilters( prevData => ({
             ...prevData,
-            [event.target.name]: event.target.value
+            [e.target.name]: e.target.value
         }))
     }
 
     return(
         <div className="filter-component">
             <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
-            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(event) => changeHandler(event)}>
+            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
                 {props.tipovi.map((tip, i) => {
                     return (
                         <option key={i} value={tip} name={tip}>{tip}</option>
diff --git a/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js b/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
new file mode 100644
index 0000000..2535579
--- /dev/null
+++ b/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+import './css/LocationCheckbox.css';
+
+const LocationCheckbox = (props) => {
+
+    const {setCheckboxStatus} = props.data;
+    const [checked, setChecked] = useState(true)
+
+    const changeHandler = (e) => {
+        setCheckboxStatus(prevStatus => ({
+            ...prevStatus,
+            [e.target.name]: checked
+        }))
+    }
+
+
+    return (
+        <div className="checkbox">
+            <label className="checkbox-title" htmlFor={props.title}>{props.title}</label>
+            <input className="check-box" type="checkbox" name={props.title} id={props.title} onChange={(e)=> {
+                setChecked(!checked)
+                changeHandler(e)
+                }}/>
+        </div>
+    )
+}
+
+export default LocationCheckbox;
\ No newline at end of file
diff --git a/kivi-cars/src/components/Filters/Filter/Checkbox.css b/kivi-cars/src/components/Filters/Filter/css/Checkbox.css
similarity index 100%
rename from kivi-cars/src/components/Filters/Filter/Checkbox.css
rename to kivi-cars/src/components/Filters/Filter/css/Checkbox.css
diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.css b/kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css
similarity index 100%
rename from kivi-cars/src/components/Filters/Filter/DoubleFilter.css
rename to kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css
diff --git a/kivi-cars/src/components/Filters/Filter/Filter.css b/kivi-cars/src/components/Filters/Filter/css/Filter.css
similarity index 100%
rename from kivi-cars/src/components/Filters/Filter/Filter.css
rename to kivi-cars/src/components/Filters/Filter/css/Filter.css
diff --git a/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css b/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css
new file mode 100644
index 0000000..dadf9b9
--- /dev/null
+++ b/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css
@@ -0,0 +1,47 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox{
+    margin-top: 1em;
+    min-width: 60%;
+    height: 2em;
+    line-height: 1.5em;
+}
+
+.checkbox-title{
+    font-size: 16px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.check-box{
+    zoom: 1.5;
+    position: relative;
+    top: 3px;
+}
+
+
+
+@media only screen and (min-width: 541px){
+    .checkbox{
+        min-width: 40%;
+        max-width: 50%;
+    }
+
+    .checkbox-title{
+        font-size: 18px;
+    }
+
+}
+
+@media only screen and (min-width: 921px){
+    .checkbox{
+        min-width: 30%;
+        max-width: 35%;
+    }
+
+    .checkbox-title{
+        font-size: 20px;
+    }
+}
\ No newline at end of file
diff --git a/kivi-cars/src/components/Filters/Standard-filters.js b/kivi-cars/src/components/Filters/Standard-filters.js
index 281302b..140508d 100644
--- a/kivi-cars/src/components/Filters/Standard-filters.js
+++ b/kivi-cars/src/components/Filters/Standard-filters.js
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
+import {Link} from 'react-router-dom';
 import "./Filters.css";
 import Filter from "./Filter/Filter";
 import DoubleFilter from "./Filter/DoubleFilter";
+import TitleBtn from "../Button/TitleBtn";
 import Cars from "../../data/cars-brands";
 import Cubes from "../../data/cubes";
 import Type from "../../data/type";
@@ -18,7 +20,7 @@ import Kilometers from "../../data/kilometers";
 
 const StandardFilters = (props) => {
 
-    const {filtersData, setFiltersData} = props.data;
+    const {filters, setFilters} = props.data;
     const [brandIndex, setBrandIndex] = useState(0);
     let index = 0;
 
@@ -27,8 +29,9 @@ const StandardFilters = (props) => {
     })
 
     useEffect(() => {
-        if(filtersData.Marka)setBrandIndex(brands.indexOf(filtersData.Marka))
-    }, [filtersData])
+        if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka))
+        console.log("filters", filters)
+    }, [filters])
 
     const models = Cars[brandIndex].models
 
@@ -42,39 +45,41 @@ const StandardFilters = (props) => {
         "tipovi": models
     }
 
-    
-
-    
-    const data = [Fuel, Type]
     const data1 = [Transmission, Drive, Condition, Doors]
     const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
-        
+    const data3 = [Fuel, Type]    
 
     return(
         <div className="filters-container">
-            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filtersData, setFiltersData}}/>
-            <Filter ime={Models.ime} tipovi={Models.tipovi} data={{filtersData, setFiltersData}}/>
+            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filters, setFilters}}/>
+            <Filter ime={Models.ime} tipovi={Models.tipovi} data={{filters, setFilters}}/>
 
-            {data.map(item => {
+            {data3.map(item => {
                 index += 1;
                 return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filtersData, setFiltersData}}/>
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
                 )
             })}
 
             {data2.map(item => {
                 index += 1;
                 return(
-                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filtersData, setFiltersData}}/>
+                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filters, setFilters}}/>
                 )
             })}
             
             {data1.map(item => {
                 index += 1;
                 return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filtersData, setFiltersData}}/>
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
                 )
             })}
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
         </div>
     )
 }
diff --git a/kivi-cars/src/components/FiltersNavbar/FiltersNav.js b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js
index b7a6e01..3b498d5 100644
--- a/kivi-cars/src/components/FiltersNavbar/FiltersNav.js
+++ b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js
@@ -9,10 +9,10 @@ const FiltersNav = (props) => {
         <div className="links-container">
             <ul className="filters-links">
                 <li className={toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(true)}>
-                    <a id="standard-filters" >Filteri</a>
+                    <p id="standard-filters" >Filteri</p>
                 </li> 
                 <li className={!toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(false)}>
-                    <a id="advanced-filters" >Napredni filteri</a>
+                    <p id="advanced-filters" >Napredni filteri</p>
                 </li>
             </ul>
         </div>
diff --git a/kivi-cars/src/components/Location/LocationFilter.css b/kivi-cars/src/components/Location/LocationFilter.css
index e69de29..c93dcad 100644
--- a/kivi-cars/src/components/Location/LocationFilter.css
+++ b/kivi-cars/src/components/Location/LocationFilter.css
@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.locationFilter-div{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: auto;
+    width: 80%;
+    padding: 3em;
+    border-bottom: 2px solid #02adba;
+}
+
+.location-title {
+    width: 30%;
+    font-size: 22px;
+    text-align: center;
+}
+
diff --git a/kivi-cars/src/components/Location/LocationFilter.js b/kivi-cars/src/components/Location/LocationFilter.js
index 6252789..1695769 100644
--- a/kivi-cars/src/components/Location/LocationFilter.js
+++ b/kivi-cars/src/components/Location/LocationFilter.js
@@ -1,44 +1,39 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import './LocationFilter.css';
 import Location from "../../data/location";
 
-const LocationFilter = () => {
+const LocationFilter = (props) => {
 
-    const [locationData, setLocationData] = useState({});
+    const {setLocationData} = props.data;
 
     const clickHandler = (e) => {
-        setLocationData( prevData => ({
-            ...prevData,
-            [e.target.name]: e.target.value
-        }))
+        setLocationData( prevData => ( {
+                ...prevData,
+                "kanton": e.target.value
+            }))
     }
 
-    console.log(locationData)
-
-    useEffect(() => {
-        console.log(locationData)
-    },[locationData])
 
     return (
-        <div>
-            <label htmlFor={Location.ime}>Izaberite lokaciju:</label>
-            <select name={Location.ime} id={Location.ime} onClick={(e) => clickHandler(e) }>
+        <div className="locationFilter-div">
+            <label className="location-title" htmlFor={Location.ime}>Izaberite lokaciju:</label>
+            <select name={Location.ime} id={Location.ime} onChange={(e) => clickHandler(e) }>
                 <option value="Svi">Svi</option>
                 <optgroup label={Location.entiteti[0].entitet}>
                     {Location.entiteti[0].kantoni.map((kanton, i) => {
                         return(
-                            <option key={i} value={kanton.kanton}>{kanton.kanton}</option>
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
                         )
                     })}
                 </optgroup>
                 <optgroup label={Location.entiteti[1].entitet}>
                     {Location.entiteti[1].kantoni.map((kanton, i) => {
                         return(
-                            <option key={i} value={kanton.kanton}>{kanton.kanton}</option>
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
                         )
                     })}
                 </optgroup>
-                <option style={{fontWeight: "bold"}} value={Location.entiteti[2].distrikt}>{Location.entiteti[2].distrikt}</option>
+                <option style={{fontWeight: "bold"}} name="distrikt" value={Location.entiteti[2].entitet}>{Location.entiteti[2].entitet}</option>
             </select>
         </div>
     )
diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js
index 7a6e4c6..75deea6 100644
--- a/kivi-cars/src/containers/App.js
+++ b/kivi-cars/src/containers/App.js
@@ -12,12 +12,12 @@ import LinkR from '../data/routes';
 
 function App() {
 
-  const info = 'Dobrodosli na stranicu kivi!'
-  const [filtersData, setFiltersData] = useState({})
+  // const info = 'Dobrodosli na stranicu kivi!'
+  const [data, setData] = useState({})
 
   useEffect(() => {
-    console.log(filtersData)
-  }, [filtersData])
+    console.log(data)
+  }, [data])
 
 
   return (
@@ -26,11 +26,11 @@ function App() {
         <Routes>
         
           <Route path='/' element={<LandingPage />} />
-          <Route path='category' element={<CategoryPage data={{filtersData, setFiltersData}} routes={LinkR.category} />}/>
-          <Route path='filters' element={<FiltersPage data={{filtersData, setFiltersData}} routes={LinkR.filters}/>}/>
-          <Route path='location' element={<LocationPage data={{filtersData, setFiltersData}} routes={LinkR.location}/>}/>
-          <Route path='email' element={<EmailPage data={{filtersData, setFiltersData}} routes={LinkR.email} />}/>
-          <Route path='congrats' element={<CongratsPage data={{filtersData, setFiltersData}} routes={LinkR.congrats} />}/>
+          <Route path='category' element={<CategoryPage data={{data, setData}} routes={LinkR.category} />}/>
+          <Route path='filters' element={<FiltersPage data={{data, setData}} routes={LinkR.filters}/>}/>
+          <Route path='location' element={<LocationPage data={{data, setData}} routes={LinkR.location}/>}/>
+          <Route path='email' element={<EmailPage data={{data, setData}} routes={LinkR.email} />}/>
+          <Route path='congrats' element={<CongratsPage data={{data, setData}} routes={LinkR.congrats} />}/>
         
         </Routes>
       </Router>
diff --git a/kivi-cars/src/containers/CategoryPage.js b/kivi-cars/src/containers/CategoryPage.js
index dba91bf..38f098b 100644
--- a/kivi-cars/src/containers/CategoryPage.js
+++ b/kivi-cars/src/containers/CategoryPage.js
@@ -5,7 +5,7 @@ import './css/CategoryPage.css'
 
 function CategoryPage(props) {
 
-  const {filtersData, setFiltersData} = props.data
+  const {data, setData} = props.data
 
   const naslov = 'IZABERITE KATEGORIJU'
   return (
@@ -13,7 +13,7 @@ function CategoryPage(props) {
         <Header header={naslov}/>
         <ButtonsToolbar routes={props.routes}/>
         <div className='category-buttons'>
-          <CategoryBtns data={{filtersData, setFiltersData}}/>
+          <CategoryBtns data={{data, setData}}/>
         </div>
     </div>
   );
diff --git a/kivi-cars/src/containers/DataContext.js b/kivi-cars/src/containers/DataContext.js
deleted file mode 100644
index d6a8449..0000000
--- a/kivi-cars/src/containers/DataContext.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import {createContext} from 'react';
-
-
diff --git a/kivi-cars/src/containers/EmailPage.js b/kivi-cars/src/containers/EmailPage.js
index 69ed034..70d02a8 100644
--- a/kivi-cars/src/containers/EmailPage.js
+++ b/kivi-cars/src/containers/EmailPage.js
@@ -1,5 +1,4 @@
-import {useContext, useState, useEffect} from 'react';
-import { DataContext } from './DataContext';
+import { useState, useEffect} from 'react';
 import './css/EmailPage.css'
 import Header from '../components/Header/Header';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
@@ -10,7 +9,7 @@ import { Link } from 'react-router-dom';
 
 function EmailPage(props) {
 
-    const {filtersData, setFiltersData} = props.data
+    const {data, setData} = props.data
     const [error, setError] = useState(false)
 
 
@@ -30,9 +29,9 @@ function EmailPage(props) {
     const emailCheck = (e, ec) => {
         if(e !== "" && e === ec){
             setError(false)
-            setFiltersData(prevData => ({
+            setData(prevData => ({
                 ...prevData,
-                "email": state.email
+                "Email": state.email
             }))
             return error
         }else {
@@ -60,8 +59,8 @@ function EmailPage(props) {
                 <h2 className='h2'>Slanje obavještenja</h2>
             </div>
             <div className='buttons-container'>
-                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title1}/>
-                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title2}/>
+                <StandardBtn data={{data, setData, filter}} title={title1}/>
+                <StandardBtn data={{data, setData, filter}} title={title2}/>
             </div>
             <div className='form'>
                 <form method="POST" id="form-email">
diff --git a/kivi-cars/src/containers/FiltersPage.js b/kivi-cars/src/containers/FiltersPage.js
index 63a6ad3..b8a56fa 100644
--- a/kivi-cars/src/containers/FiltersPage.js
+++ b/kivi-cars/src/containers/FiltersPage.js
@@ -1,4 +1,4 @@
-import {React, useState} from "react";
+import {React, useEffect, useState} from "react";
 import './css/FiltersPage.css';
 import Header from "../components/Header/Header";
 import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
@@ -10,13 +10,22 @@ const FiltersPage = (props) => {
 
     const naslov = "Filteri za pretrazivanje"
     const [toggle, setToggle] = useState(true)
-    const {filtersData, setFiltersData} = props.data
+    const [filters, setFilters] = useState({});
+    const {data, setData} = props.data
     
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Filters": filters
+        }))
+    }, [filters])
+
     const showFilters = (toggle) => {
         if(toggle){
-            return <StandardFilters data={{filtersData, setFiltersData}}/>
+            return <StandardFilters data={{filters, setFilters}}/>
         }
-        return <AdvancedFilters data={{filtersData, setFiltersData}}/>;
+        return <AdvancedFilters data={{filters, setFilters}}/>;
     }
 
     return(
diff --git a/kivi-cars/src/containers/LocationPage.js b/kivi-cars/src/containers/LocationPage.js
index 5cd50d1..550c4ad 100644
--- a/kivi-cars/src/containers/LocationPage.js
+++ b/kivi-cars/src/containers/LocationPage.js
@@ -1,25 +1,85 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './css/LocationPage.css';
 import Header from "../components/Header/Header";
-import Filter from '../components/Filters/Filter/Filter';
 import Location from '../data/location';
 import LocationFilter from '../components/Location/LocationFilter';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import LocationCheckbox from '../components/Filters/Filter/LocationCheckbox';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';
 
 const LocationPage = (props) => {
 
-    const {filtersData, setFiltersData} = props.data
+    const {data, setData} = props.data
+    const [locationData, setLocationData] = useState({})
+    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
+    const [checkboxStatus, setCheckboxStatus] = useState({})
+    const [location, setLocation] = useState({});
     const naslov = "Dodajte lokaciju"
 
+    let id = 0;
 
+    useEffect(() => {
+        if(locationData.kanton){
+            Location.entiteti.map(entity => {
+                return entity.kantoni.map(kantony => {
+                    if(locationData.kanton === kantony.kanton){
+                        return setLocationInfo({
+                            "entitet": entity.entitet,
+                            "kanton": kantony.kanton,
+                            "gradovi": kantony.gradovi
+                        })
+                    }
+                })
+            })
+        }setCheckboxStatus({})
+            console.log("locationInfo", locationInfo)
+    }, [locationData])
 
+    useEffect(() => {
+        if(locationData.kanton === 'Distrikt Brcko'){
+            setLocation(
+                {
+                "entitet": "Distrikt Brcko",
+                "kanton": "Distrikt Brcko",
+                "gradovi": "Brcko"
+                }
+            )
+        }else{
+            setLocation( prevData => ({
+                ...prevData,
+                "entitet": locationInfo.entitet,
+                "kanton": locationInfo.kanton,
+                "gradovi": checkboxStatus
+            }))}
+            console.log("location", location)
+    }, [checkboxStatus])
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Location": location
+        }))
+        console.log("data", data)
+    }, [location])
+
+    
     return (
-        <div>
+        <div className='location-div'>
             <Header header={naslov}/>
             <ButtonsToolbar routes={props.routes}/>
-            <LocationFilter data={{filtersData, setFiltersData}}/>
-
-            
+            <LocationFilter data={{setLocationData}}/>
+            <div className='checkbox-div'>
+                {locationInfo.gradovi.map((grad) => {
+                    id += 1
+                    return(
+                        <LocationCheckbox key={id} title={grad} data={{checkboxStatus, setCheckboxStatus}}/>
+                    )
+                })}
+            </div>
+            <Link to="/email">
+                <TitleBtn title="Naredna stranica"/>
+            </Link>
         </div>
     );
 }
diff --git a/kivi-cars/src/containers/css/LocationPage.css b/kivi-cars/src/containers/css/LocationPage.css
index afafd28..5de0fe7 100644
--- a/kivi-cars/src/containers/css/LocationPage.css
+++ b/kivi-cars/src/containers/css/LocationPage.css
@@ -1,4 +1,19 @@
 *{
     margin: 0;
     padding: 0;
+}
+
+.checkbox-div{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+}
+
+@media only screen and (min-width: 541px){
+    .checkbox-div{
+        flex-direction: row;
+        justify-content: space-around;
+    }
 }
\ No newline at end of file
diff --git a/kivi-cars/src/data/cars-brands.js b/kivi-cars/src/data/cars-brands.js
index bfcd932..09b7fcb 100644
--- a/kivi-cars/src/data/cars-brands.js
+++ b/kivi-cars/src/data/cars-brands.js
@@ -1,6 +1,6 @@
 const Cars = [
-    {"brand":"Izaberite",
-        "models": ["Izaberite"]
+    {"brand":"Odaberite",
+        "models": ["Odaberite"]
     },
     {"brand":"Alfa Romeo",
         "models": [
diff --git a/kivi-cars/src/data/fuel.js b/kivi-cars/src/data/fuel.js
index add6283..97cdce2 100644
--- a/kivi-cars/src/data/fuel.js
+++ b/kivi-cars/src/data/fuel.js
@@ -4,7 +4,7 @@ const Fuel = {
         "Odaberite",
         "Dizel",
         "Benzin",
-        "Plin",
+        "Benzin/Plin",
         "Cng",
         "Hybrid",
         "Elektro"
diff --git a/kivi-cars/src/data/location.js b/kivi-cars/src/data/location.js
index 3671bd3..a277405 100644
--- a/kivi-cars/src/data/location.js
+++ b/kivi-cars/src/data/location.js
@@ -216,7 +216,15 @@ const Location = {
                 }
             ]
         },
-        {"distrikt":"Distrikt Brcko"}
+        {"entitet":"Distrikt Brcko",
+            "kantoni": [
+                {"kanton": "Distrikt Brcko",
+                    "gradovi":[
+                        
+                    ]
+                }
+            ]
+        }
     ]
 }