diff --git a/frontend-react/package-lock.json b/frontend-react/package-lock.json
index a43e347..3ac5c2f 100644
--- a/frontend-react/package-lock.json
+++ b/frontend-react/package-lock.json
@@ -902,6 +902,152 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz",
       "integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA=="
     },
+    "@material-ui/core": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.0.tgz",
+      "integrity": "sha512-9fxu0B9zx/TfiU0OJmwRFk+I+2J7fcXzTfQl+ZPxqlVRrPDqTHnMZlqWRJjlHCe3AVXlgpJ6/a4QCvGEohEbIQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/system": "^3.0.0-alpha.0",
+        "@material-ui/utils": "^3.0.0-alpha.2",
+        "@types/jss": "^9.5.6",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "csstype": "^2.5.2",
+        "debounce": "^1.1.0",
+        "deepmerge": "^3.0.0",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^3.2.1",
+        "is-plain-object": "^2.0.4",
+        "jss": "^9.8.7",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "keycode": "^2.1.9",
+        "normalize-scroll-left": "^0.1.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^2.2.1",
+        "recompose": "0.28.0 - 0.30.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        },
+        "warning": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "@material-ui/icons": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz",
+      "integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "recompose": "0.28.0 - 0.30.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "3.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.1.tgz",
+      "integrity": "sha512-5EihYa6Ct5mA/shfFSjWO8e/whV+otbXAduYfiL34GH+Mh4vZs+wjcy0P80XA/cDIwSgkQ7vTvvY1x04AgIz4w==",
+      "requires": {
+        "@babel/runtime": "7.1.2",
+        "deepmerge": "^2.0.1",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
+          "integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        },
+        "warning": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "@material-ui/utils": {
+      "version": "3.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
+      "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.6.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -943,11 +1089,42 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "@types/jss": {
+      "version": "9.5.7",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz",
+      "integrity": "sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==",
+      "requires": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.5.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw=="
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
       "integrity": "sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA=="
     },
+    "@types/react": {
+      "version": "16.7.20",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.20.tgz",
+      "integrity": "sha512-Qd5RWkwl6SL7R2XzLk/cicjVQm1Mhc6HqXY5Ei4pWd1Vi8Fkbd5O0sA398x8fRSTPAuHdDYD9nrWmJMYTJI0vQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz",
+      "integrity": "sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
@@ -2434,6 +2611,11 @@
         "repeat-element": "^1.1.2"
       }
     },
+    "brcast": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+      "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -2723,6 +2905,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3450,6 +3637,14 @@
       "resolved": "https://registry.npmjs.org/css-url-regex/-/css-url-regex-1.1.0.tgz",
       "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w="
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
@@ -3741,6 +3936,11 @@
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs="
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -3774,6 +3974,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.1.0.tgz",
+      "integrity": "sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg=="
+    },
     "default-gateway": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-2.7.2.tgz",
@@ -4184,6 +4389,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5189,6 +5402,35 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -7021,6 +7263,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7109,6 +7356,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
+      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -7359,6 +7614,11 @@
         "is-extglob": "^1.0.0"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
@@ -7503,6 +7763,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8294,6 +8563,55 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
@@ -8302,6 +8620,11 @@
         "array-includes": "^3.0.3"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8964,6 +9287,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -9054,6 +9386,11 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
     "normalize-url": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
@@ -9536,6 +9873,11 @@
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.1.0.tgz",
       "integrity": "sha512-CPCdcFxx7fEcDMWTDjXe2Wypt4JuMt4q5Q2UrpTcyBBkLiCIyPEh/mCGmUWIcNkKGyXwQ9Y2wVhlKm6ketiBNQ=="
     },
+    "popper.js": {
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
+      "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -13521,6 +13863,39 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.2.tgz",
       "integrity": "sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ=="
     },
+    "react-event-listener": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.5.tgz",
+      "integrity": "sha512-//lCxOM3DQ0+xmTa/u9mI9mm55zCPdIKp89d8MGjlNsOOnXQ5sFDD1eed+sMBzQXKiRBLBMtSg/2T9RJFtfovw==",
+      "requires": {
+        "@babel/runtime": "7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+          "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        },
+        "warning": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-input-autosize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
@@ -14040,6 +14415,26 @@
         "util.promisify": "^1.0.0"
       }
     },
+    "recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -15974,6 +16369,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
diff --git a/frontend-react/package.json b/frontend-react/package.json
index b88b3d3..403546d 100644
--- a/frontend-react/package.json
+++ b/frontend-react/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^3.9.0",
+    "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
     "history": "^4.7.2",
     "prettier": "^1.15.3",
diff --git a/frontend-react/public/index.html b/frontend-react/public/index.html
index 323182f..5c3706e 100755
--- a/frontend-react/public/index.html
+++ b/frontend-react/public/index.html
@@ -13,6 +13,13 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
+    />
+    <link rel="stylesheet" href="./style.css" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/frontend-react/public/style.css b/frontend-react/public/style.css
new file mode 100644
index 0000000..6e21f0a
--- /dev/null
+++ b/frontend-react/public/style.css
@@ -0,0 +1,8 @@
+html {
+  font-family: Roboto, sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+* {
+  font-family: Roboto, serif;
+}
diff --git a/frontend-react/src/assets/checkboxAndRadioStyle.css b/frontend-react/src/assets/checkboxAndRadioStyle.css
new file mode 100644
index 0000000..d8aaad8
--- /dev/null
+++ b/frontend-react/src/assets/checkboxAndRadioStyle.css
@@ -0,0 +1,10 @@
+.radio-style {
+  color: #e91e63 !important;
+}
+
+.checkbox-style {
+  color: #e91e63 !important;
+}
+.label-style {
+  color: white;
+}
diff --git a/frontend-react/src/assets/dashboardStyle.js b/frontend-react/src/assets/dashboardStyle.js
new file mode 100644
index 0000000..2395c6c
--- /dev/null
+++ b/frontend-react/src/assets/dashboardStyle.js
@@ -0,0 +1,26 @@
+import { drawerWidth, transition } from "./globalStyle";
+
+const appStyle = theme => ({
+  wrapper: {
+    top: "0",
+    display: "grid",
+    minHeight: "750px",
+    "grid-template-columns": `${drawerWidth}px 1fr`,
+    "grid-template-areas": `"sidebar content"`,
+    [theme.breakpoints.down("sm")]: {
+      "grid-template-areas": `"sidebar" "content"`,
+      "grid-template-columns": "1fr",
+      "grid-template-rows": "auto 1fr"
+    }
+  },
+  mainPanel: {
+    ...transition,
+    overflowScrolling: "touch",
+    "grid-area": "content",
+    zIndex: "1",
+    backgroundColor: "#272727",
+    backgroundImage: "linear-gradient(180deg,#272727, #21525f)"
+  }
+});
+
+export default appStyle;
diff --git a/frontend-react/src/assets/globalStyle.js b/frontend-react/src/assets/globalStyle.js
new file mode 100644
index 0000000..f0b9d81
--- /dev/null
+++ b/frontend-react/src/assets/globalStyle.js
@@ -0,0 +1,42 @@
+const drawerWidth = 360;
+
+const transition = {
+  transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
+};
+
+const boxShadow = {
+  boxShadow:
+    "0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
+};
+
+const defaultFont = {
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontWeight: "300",
+  lineHeight: "1.5em"
+};
+
+const primaryColor = "#e91e63";
+
+const primaryBoxShadow = {
+  boxShadow:
+    "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4)"
+};
+
+const defaultBoxShadow = {
+  border: "0",
+  borderRadius: "3px",
+  boxShadow:
+    "0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)",
+  padding: "10px 0",
+  transition: "all 150ms ease 0s"
+};
+
+export {
+  drawerWidth,
+  transition,
+  boxShadow,
+  defaultFont,
+  primaryColor,
+  primaryBoxShadow,
+  defaultBoxShadow
+};
diff --git a/frontend-react/src/assets/img/reactlogo.png b/frontend-react/src/assets/img/reactlogo.png
new file mode 100644
index 0000000..40672ae
Binary files /dev/null and b/frontend-react/src/assets/img/reactlogo.png differ
diff --git a/frontend-react/src/assets/img/sidebar-1.jpg b/frontend-react/src/assets/img/sidebar-1.jpg
new file mode 100644
index 0000000..d60429b
Binary files /dev/null and b/frontend-react/src/assets/img/sidebar-1.jpg differ
diff --git a/frontend-react/src/assets/rangeStyle.css b/frontend-react/src/assets/rangeStyle.css
new file mode 100644
index 0000000..0d25382
--- /dev/null
+++ b/frontend-react/src/assets/rangeStyle.css
@@ -0,0 +1,28 @@
+.rc-slider-handle {
+  border: solid 2px #e91e63 !important;
+}
+.rc-slider-handle:hover {
+  border: solid 2px #e91e63 !important;
+}
+.rc-slider-rail {
+  background-color: #e91e63 !important;
+  width: 20px;
+}
+.rc-slider-track {
+  background-color: grey !important;
+}
+.input-style:after {
+  border-bottom: 1px solid #e91e63 !important;
+}
+.input-style {
+  color: white !important;
+  width: 80% !important;
+  margin: 0 auto !important;
+  position: relative !important;
+  display: block !important;
+  margin: 10px auto !important;
+}
+.rc-slider {
+  width: 80% !important;
+  margin: 0 auto !important;
+}
diff --git a/frontend-react/src/assets/sidebarStyle.js b/frontend-react/src/assets/sidebarStyle.js
new file mode 100644
index 0000000..04a15bd
--- /dev/null
+++ b/frontend-react/src/assets/sidebarStyle.js
@@ -0,0 +1,171 @@
+import {
+  boxShadow,
+  defaultFont,
+  primaryColor,
+  primaryBoxShadow
+} from "./globalStyle";
+
+const sidebarStyle = theme => ({
+  drawerPaper: {
+    border: "none",
+    position: "relative",
+    "overflow-y": "auto",
+    "overflow-x": "none",
+    zIndex: "1",
+    ...boxShadow,
+    "grid-area": "sidebar",
+    [theme.breakpoints.down("sm")]: {
+      position: "relative"
+    }
+  },
+  logo: {
+    position: "relative",
+    padding: "15px 15px",
+    zIndex: "4",
+    "&:after": {
+      content: '""',
+      position: "absolute",
+      bottom: "0",
+
+      height: "1px",
+      right: "15px",
+      width: "calc(100% - 30px)",
+      backgroundColor: "rgba(180, 180, 180, 0.3)"
+    }
+  },
+  logoLink: {
+    ...defaultFont,
+    textTransform: "uppercase",
+    padding: "5px 0",
+    display: "block",
+    fontSize: "18px",
+    textAlign: "left",
+    fontWeight: "400",
+    lineHeight: "30px",
+    textDecoration: "none",
+    backgroundColor: "transparent",
+    "&,&:hover": {
+      color: "#FFFFFF"
+    }
+  },
+  logoImage: {
+    width: "30px",
+    display: "inline-block",
+    maxHeight: "30px",
+    marginLeft: "10px",
+    marginRight: "15px"
+  },
+  img: {
+    width: "35px",
+    top: "22px",
+    position: "absolute",
+    verticalAlign: "middle",
+    border: "0"
+  },
+  background: {
+    position: "absolute",
+    zIndex: "1",
+    height: "100%",
+    width: "100%",
+    display: "block",
+    top: "0",
+    left: "0",
+    backgroundSize: "cover",
+    backgroundPosition: "center center",
+    "&:after": {
+      position: "absolute",
+      zIndex: "3",
+      width: "100%",
+      height: "100%",
+      content: '""',
+      display: "block",
+      background: "#000",
+      opacity: ".8"
+    }
+  },
+  list: {
+    marginTop: "20px",
+    paddingLeft: "0",
+    paddingTop: "0",
+    paddingBottom: "0",
+    marginBottom: "0",
+    listStyle: "none",
+    position: "unset"
+  },
+  item: {
+    position: "relative",
+    display: "block",
+    textDecoration: "none",
+    "&:hover,&:focus,&:visited,&": {
+      color: "#FFFFFF"
+    }
+  },
+  itemLink: {
+    width: "auto",
+    transition: "all 300ms linear",
+    margin: "10px 15px 0",
+    borderRadius: "3px",
+    position: "relative",
+    display: "block",
+    padding: "10px 15px",
+    backgroundColor: "transparent",
+    ...defaultFont
+  },
+  itemIcon: {
+    width: "24px",
+    height: "30px",
+    fontSize: "24px",
+    lineHeight: "30px",
+    float: "left",
+    marginRight: "15px",
+    textAlign: "center",
+    verticalAlign: "middle",
+    color: "rgba(255, 255, 255, 0.8)"
+  },
+  itemText: {
+    ...defaultFont,
+    margin: "0",
+    lineHeight: "30px",
+    fontSize: "14px",
+    color: "#FFFFFF"
+  },
+  whiteFont: {
+    color: "#FFFFFF"
+  },
+
+  sidebarWrapper: {
+    width: "360px",
+    position: "relative",
+    overflow: "auto",
+    zIndex: "4",
+    overflowScrolling: "touch"
+  },
+  whiteText: {
+    zIndex: "5000",
+    color: "white"
+  },
+  collapsedItemStyle: {
+    zIndex: "5000",
+    color: "white",
+    "&:hover": {
+      backgroundColor: primaryColor,
+      color: "#FFFFFF",
+      ...primaryBoxShadow
+    },
+    cursor: "pointer"
+  },
+  collapse: {
+    width: "80%",
+    margin: "0 auto"
+  },
+  checkedItem: {
+    backgroundColor: primaryColor,
+    color: "#FFFFFF",
+    ...primaryBoxShadow
+  },
+  subOptionIndent: {
+    paddingLeft: "20px"
+  }
+});
+
+export default sidebarStyle;
diff --git a/frontend-react/src/components/App.js b/frontend-react/src/components/App.js
index 40f4963..63f2bd0 100644
--- a/frontend-react/src/components/App.js
+++ b/frontend-react/src/components/App.js
@@ -1,26 +1,20 @@
 import React from "react";
-import Select from "react-select";
+import PropTypes from "prop-types";
+import withStyles from "@material-ui/core/styles/withStyles";
 import { connect } from "react-redux";
-import {
-  CATEGORY_SELECT,
-  ITEMS_CHANGED,
-  USER_DATA_CHANGED
-} from "constants/actionTypes";
-import { hoc, areObjectEqual } from "utils/helpers";
+import { ITEMS_CHANGED, USER_DATA_CHANGED } from "constants/actionTypes";
+import { areObjectEqual } from "utils/helpers";
 import { createOlxLink } from "utils/createOlxLink";
 import axios from "axios";
 
-import * as Vozila from "./categories/Vozila";
-import * as Nekretnine from "./categories/Nekretnine";
+import image from "assets/img/sidebar-1.jpg";
+import logo from "assets/img/reactlogo.png";
 
-import DeepCategoryWrapper from "components/widgets/DeepCategoryWrapper";
+import Sidebar from "components/Sidebar.js";
 import ItemsContainer from "./items/itemscontainer/ItemsContainer";
 import NotificationModal from "./NotificationModal";
 
-const options = [
-  { value: "Vozila", label: "Vozila" },
-  { value: "Nekretnine", label: "Nekretnine" }
-];
+import dashboardStyle from "assets/dashboardStyle.js";
 
 const mapStateToProps = state => {
   return {
@@ -33,7 +27,6 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option }),
   onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items }),
   onUserDataChange: change => dispatch({ type: USER_DATA_CHANGED, ...change })
 });
@@ -84,32 +77,29 @@ class App extends React.Component {
       lastUpdateTime = Date.now();
     }
   }
-  handleChange = selectedOption => {
-    this.props.onCategoryChanged(selectedOption);
-  };
 
   render() {
-    const { category, items } = this.props;
+    const { items, classes } = this.props;
 
     return (
-      <div>
-        <Select
-          value={category}
-          onChange={this.handleChange}
-          options={options}
-        />
-        {hoc(category && category.value, {
-          Vozila: <DeepCategoryWrapper {...Vozila.properties} />,
-          Nekretnine: <DeepCategoryWrapper {...Nekretnine.properties} />
-        })}
-        <ItemsContainer />
-        {items.length ? <NotificationModal /> : null}
+      <div className={classes.wrapper}>
+        <Sidebar logoText={"Market Alarm"} logo={logo} image={image} />
+
+        <div className={classes.mainPanel}>
+          <ItemsContainer />
+          {items.length ? <NotificationModal /> : null}
+        </div>
       </div>
     );
   }
 }
+App.propTypes = {
+  classes: PropTypes.object.isRequired
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+export default withStyles(dashboardStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(App)
+);
diff --git a/frontend-react/src/components/NotificationModal.js b/frontend-react/src/components/NotificationModal.js
index d8831e2..7d0ea16 100644
--- a/frontend-react/src/components/NotificationModal.js
+++ b/frontend-react/src/components/NotificationModal.js
@@ -19,6 +19,22 @@ const modalStyle = function() {
   };
 };
 
+const buttonStyle = function() {
+  return {
+    width: "100px",
+    margin: "0 auto",
+    position: "relative",
+    borderRadius: "8px",
+    display: "block",
+    padding: "10px 10px",
+    textAlign: "center",
+    marginBottom: "20px",
+    color: "white",
+    backgroundColor: "#e91e63",
+    border: "1px solid #e91e63"
+  };
+};
+
 class NotificationModal extends React.Component {
   handleOpen = () => {
     this.props.onModalOpen();
@@ -50,7 +66,9 @@ class NotificationModal extends React.Component {
 
     return (
       <div>
-        <button onClick={this.handleOpen}>Open Modal</button>
+        <button style={buttonStyle()} onClick={this.handleOpen}>
+          Open Modal
+        </button>
 
         <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
           <div>
diff --git a/frontend-react/src/components/Sidebar.js b/frontend-react/src/components/Sidebar.js
new file mode 100644
index 0000000..5fe0f8f
--- /dev/null
+++ b/frontend-react/src/components/Sidebar.js
@@ -0,0 +1,135 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import Dashboard from "@material-ui/icons/Dashboard";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import Collapse from "@material-ui/core/Collapse";
+import StarBorder from "@material-ui/icons/StarBorder";
+
+import sidebarStyle from "assets/sidebarStyle.js";
+import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
+import DeepCategoryWrapper from "./widgets/DeepCategoryWrapper";
+import { hoc } from "utils/helpers";
+
+import * as Vozila from "./categories/Vozila";
+import * as Nekretnine from "./categories/Nekretnine";
+
+import { connect } from "react-redux";
+import { CATEGORY_SELECT } from "constants/actionTypes";
+
+const options = [
+  { value: "Vozila", label: "Vozila" },
+  { value: "Nekretnine", label: "Nekretnine" }
+];
+
+const mapStateToProps = state => {
+  return {
+    category: state.category
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option })
+});
+
+class Sidebar extends React.Component {
+  handleCategoryChange = selectedOption => {
+    this.props.onCategoryChanged(selectedOption);
+  };
+  render() {
+    const { classes, logo, image, logoText, category } = this.props;
+
+    return (
+      <div className={classes.drawerPaper}>
+        <div className={classes.logo}>
+          <a href="https://www.creative-tim.com" className={classes.logoLink}>
+            <div className={classes.logoImage}>
+              <img src={logo} alt="logo" className={classes.img} />
+            </div>
+            {logoText}
+          </a>
+        </div>
+        <div className={classes.sidebarWrapper}>
+          <List role="menu">
+            <ListItem className={classes.whiteText} onClick={this.handleClick}>
+              <ListItemIcon className={classes.whiteText}>
+                <Dashboard />
+              </ListItemIcon>
+              <ListItemText
+                className={classes.whiteText}
+                inset
+                primary="Kategorija"
+                disableTypography={true}
+              />
+              {true ? <ExpandLess /> : <ExpandMore />}
+            </ListItem>
+            <Collapse in={true} timeout="auto" unmountOnExit>
+              <List disablePadding>
+                {options.map(({ label, value }, index) => (
+                  <ListItem
+                    onClick={() => this.handleCategoryChange({ label, value })}
+                    className={
+                      classes.nested +
+                      " " +
+                      classes.collapsedItemStyle +
+                      " " +
+                      (category && category.value === value
+                        ? classes.checkedItem
+                        : "")
+                    }
+                    key={index}
+                  >
+                    <ListItemIcon className={classes.whiteText}>
+                      <StarBorder />
+                    </ListItemIcon>
+                    <ListItemText
+                      className={classes.whiteText}
+                      primary={label}
+                      disableTypography={true}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </Collapse>
+
+            {hoc(category && category.value, {
+              Vozila: (
+                <CollapseWrapperStyled componentName="Podkategorija">
+                  <DeepCategoryWrapper {...Vozila.properties} />
+                </CollapseWrapperStyled>
+              ),
+              Nekretnine: (
+                <CollapseWrapperStyled componentName="Podkategorija">
+                  <DeepCategoryWrapper {...Nekretnine.properties} />
+                </CollapseWrapperStyled>
+              )
+            })}
+          </List>
+        </div>
+        {image !== undefined ? (
+          <div
+            className={classes.background}
+            style={{ backgroundImage: "url(" + image + ")" }}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+Sidebar.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(sidebarStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Sidebar)
+);
diff --git a/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js b/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js
index 1abbeb3..7e4afbb 100644
--- a/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js
+++ b/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
+import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
 
 const elements = [
   {
@@ -54,13 +55,12 @@ const elements = [
 class KuceFilter extends React.Component {
   render() {
     return (
-      <div>
-        <span>Dodatno za kuce</span>
+      <CollapseWrapperStyled componentName="Dodatno za kuce">
         <CheckboxAndRadioWrapper
           componentName="dodatno-za-kuce"
           elements={elements}
         />
-      </div>
+      </CollapseWrapperStyled>
     );
   }
 }
diff --git a/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js b/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js
index bf9cebb..fd50223 100644
--- a/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js
+++ b/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
+import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
 
 const elements = [
   {
@@ -61,13 +62,12 @@ const elements = [
 class StanoviFilter extends React.Component {
   render() {
     return (
-      <div>
-        <span>Dodatno za stan</span>
+      <CollapseWrapperStyled componentName="Dodatno za stan">
         <CheckboxAndRadioWrapper
           componentName="dodatno-za-stan"
           elements={elements}
         />
-      </div>
+      </CollapseWrapperStyled>
     );
   }
 }
diff --git a/frontend-react/src/components/filters/NekretnineFilter/index.js b/frontend-react/src/components/filters/NekretnineFilter/index.js
index ef5bd9e..fb281e8 100644
--- a/frontend-react/src/components/filters/NekretnineFilter/index.js
+++ b/frontend-react/src/components/filters/NekretnineFilter/index.js
@@ -2,21 +2,49 @@ import React from "react";
 import * as Filters from "./AllFiltersDefined";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
 import SelectDisplayCheckboxWrapper from "components/widgets/SelectDisplayCheckboxWrapper";
+import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
 import RangeWrapper from "components/widgets/RangeWrapper";
-import SelectWrapper from "components/widgets/SelectWrapper";
+import DropDownWrapper from "components/widgets/DropDownWrapper";
 
 class NekretnineFilter extends React.Component {
   render() {
     return (
       <div>
-        <CheckboxAndRadioWrapper
-          componentName="vrsta"
-          elements={Filters.vrstaElements}
-        />
-        <SelectWrapper {...Filters.lokacijaOptions} />
-        <SelectDisplayCheckboxWrapper {...Filters.gradoviOptions} />
-        <RangeWrapper {...Filters.cijenaRangeOptions} optionName="cijena" />
-        <RangeWrapper {...Filters.velicinaRangeOptions} optionName="velicina" />
+        {[
+          <CheckboxAndRadioWrapper
+            componentName="Vrsta"
+            elements={Filters.vrstaElements}
+          />,
+
+          <DropDownWrapper
+            componentName="Lokacija"
+            {...Filters.lokacijaOptions}
+          />,
+
+          <SelectDisplayCheckboxWrapper
+            componentName="Grad"
+            {...Filters.gradoviOptions}
+          />,
+
+          <RangeWrapper
+            componentName="Cijena"
+            {...Filters.cijenaRangeOptions}
+            optionName="cijena"
+          />,
+
+          <RangeWrapper
+            componentName="Velicina"
+            {...Filters.velicinaRangeOptions}
+            optionName="velicina"
+          />
+        ].map(comp => (
+          <CollapseWrapperStyled
+            key={comp.props.componentName}
+            componentName={comp.props.componentName}
+          >
+            {comp}
+          </CollapseWrapperStyled>
+        ))}
       </div>
     );
   }
diff --git a/frontend-react/src/components/filters/VozilaFilter/index.js b/frontend-react/src/components/filters/VozilaFilter/index.js
index cc731f5..09925da 100644
--- a/frontend-react/src/components/filters/VozilaFilter/index.js
+++ b/frontend-react/src/components/filters/VozilaFilter/index.js
@@ -2,26 +2,54 @@ import React from "react";
 import * as Filters from "./AllFiltersDefined";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
 import RangeWrapper from "components/widgets/RangeWrapper";
-import SelectWrapper from "components/widgets/SelectWrapper";
+import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
+import DropDownWrapper from "components/widgets/DropDownWrapper";
 
 class VozilaFilter extends React.Component {
   render() {
     return (
       <div>
-        <CheckboxAndRadioWrapper
-          componentName="stanje"
-          elements={Filters.stanjeElements}
-        />
-        <SelectWrapper {...Filters.proizvodacOptions} />
-        <RangeWrapper {...Filters.cijenaRangeOptions} />
-        <SelectWrapper {...Filters.lokacijaOptions} />
-        <RangeWrapper {...Filters.godisteRangeOptions} />
-        <SelectWrapper {...Filters.kilometrazaOptions.kilometraMin} />
-        <SelectWrapper {...Filters.kilometrazaOptions.kilometraMax} />
-        <CheckboxAndRadioWrapper
-          componentName="gorivo"
-          elements={Filters.gorivoElements}
-        />
+        {[
+          <CheckboxAndRadioWrapper
+            componentName="Stanje"
+            elements={Filters.stanjeElements}
+          />,
+          <DropDownWrapper
+            componentName="Proizvodac"
+            {...Filters.proizvodacOptions}
+          />,
+          <RangeWrapper
+            componentName="Cijena"
+            {...Filters.cijenaRangeOptions}
+          />,
+          <DropDownWrapper
+            componentName="Lokacija"
+            {...Filters.lokacijaOptions}
+          />,
+          <RangeWrapper
+            componentName="Godiste"
+            {...Filters.godisteRangeOptions}
+          />,
+          <DropDownWrapper
+            componentName="Min kilometraza"
+            {...Filters.kilometrazaOptions.kilometraMin}
+          />,
+          <DropDownWrapper
+            componentName="Max kilometraza"
+            {...Filters.kilometrazaOptions.kilometraMax}
+          />,
+          <CheckboxAndRadioWrapper
+            componentName="Gorivo"
+            elements={Filters.gorivoElements}
+          />
+        ].map(comp => (
+          <CollapseWrapperStyled
+            key={comp.props.componentName}
+            componentName={comp.props.componentName}
+          >
+            {comp}
+          </CollapseWrapperStyled>
+        ))}
       </div>
     );
   }
diff --git a/frontend-react/src/components/items/itemcard/ItemCard.css b/frontend-react/src/components/items/itemcard/ItemCard.css
index 7b64e2b..c752056 100644
--- a/frontend-react/src/components/items/itemcard/ItemCard.css
+++ b/frontend-react/src/components/items/itemcard/ItemCard.css
@@ -1,36 +1,40 @@
 .item {
   display: grid;
-  border: solid #877ad2 1px;
-  border-radius: 10px;
-  max-width: 360px;
-  min-height: 300px;
+  border: solid #ffc600 1px;
+  border-radius: 5px;
+  max-width: 200px;
+  min-height: 150px;
   grid-template-areas:
     "image"
     "title";
   margin: 3%;
-  background-color: #dbdbd7;
+  background-color: #272727;
+  justify-items: center;
+  align-items: center;
 }
 
 .item > a > img {
-  width: 70%;
-  height: 60%;
-  max-height: 200px;
+  width: 90%;
+  height: 90%;
+  min-height: 100px !important;
+  min-width: 150px !important;
   grid-area: image;
-  padding: 8% 8% 0 8%;
 }
 .item > a {
   text-decoration: none;
 }
 .basic-info {
   grid-area: title;
-  width: 85%;
+  width: 100%;
   margin: 0 auto;
+  text-align: center;
 }
 
 .basic-info > h3 {
   font-size: 90%;
   margin: 5%;
   margin-bottom: 0px;
-  color: #332390;
+  color: #ffc600;
+  padding-bottom: 10px;
   overflow-wrap: break-word;
 }
diff --git a/frontend-react/src/components/items/itemscontainer/ItemsContainer.css b/frontend-react/src/components/items/itemscontainer/ItemsContainer.css
index 908bb2c..b241318 100644
--- a/frontend-react/src/components/items/itemscontainer/ItemsContainer.css
+++ b/frontend-react/src/components/items/itemscontainer/ItemsContainer.css
@@ -3,6 +3,6 @@
   margin-top: 8%;
   display: grid;
   grid-gap: 5px;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  grid-template-rows: repeat(2, 320px);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  justify-items: center;
 }
diff --git a/frontend-react/src/components/items/itemscontainer/ItemsContainer.js b/frontend-react/src/components/items/itemscontainer/ItemsContainer.js
index fbeaf8a..a8c04fc 100644
--- a/frontend-react/src/components/items/itemscontainer/ItemsContainer.js
+++ b/frontend-react/src/components/items/itemscontainer/ItemsContainer.js
@@ -19,11 +19,7 @@ class ItemContainer extends Component {
   }
 
   render() {
-    return (
-      <div>
-        <div className="items-list">{this.renderItems()}</div>
-      </div>
-    );
+    return <div className="items-list">{this.renderItems()}</div>;
   }
 }
 export default connect(mapStateToProps)(ItemContainer);
diff --git a/frontend-react/src/components/subcategories/nekretnine/Kuce.js b/frontend-react/src/components/subcategories/nekretnine/Kuce.js
index e2e4589..7c55ba2 100644
--- a/frontend-react/src/components/subcategories/nekretnine/Kuce.js
+++ b/frontend-react/src/components/subcategories/nekretnine/Kuce.js
@@ -2,14 +2,13 @@ import React from "react";
 import NekretnineFilter from "components/filters/NekretnineFilter/index";
 import KuceFilter from "components/filters/NekretnineFilter/KuceFilter/index";
 class Kuce extends React.Component {
-	render() {
-		return (
-			<div>
-				<span>Kuce</span>
-				<NekretnineFilter />
-				<KuceFilter />
-			</div>
-		);
-	}
+  render() {
+    return (
+      <div>
+        <NekretnineFilter />
+        <KuceFilter />
+      </div>
+    );
+  }
 }
 export default Kuce;
diff --git a/frontend-react/src/components/subcategories/nekretnine/Stanovi.js b/frontend-react/src/components/subcategories/nekretnine/Stanovi.js
index c0b0bf3..2f1b946 100644
--- a/frontend-react/src/components/subcategories/nekretnine/Stanovi.js
+++ b/frontend-react/src/components/subcategories/nekretnine/Stanovi.js
@@ -3,14 +3,13 @@ import NekretnineFilter from "components/filters/NekretnineFilter/index";
 import StanoviFilter from "components/filters/NekretnineFilter/StanoviFilter/index";
 
 class Stanovi extends React.Component {
-	render() {
-		return (
-			<div>
-				<span>Stanovi</span>
-				<NekretnineFilter />
-				<StanoviFilter />
-			</div>
-		);
-	}
+  render() {
+    return (
+      <div>
+        <NekretnineFilter />
+        <StanoviFilter />
+      </div>
+    );
+  }
 }
 export default Stanovi;
diff --git a/frontend-react/src/components/subcategories/vozila/Automobili.js b/frontend-react/src/components/subcategories/vozila/Automobili.js
index 3a0cb6b..419a211 100644
--- a/frontend-react/src/components/subcategories/vozila/Automobili.js
+++ b/frontend-react/src/components/subcategories/vozila/Automobili.js
@@ -2,13 +2,12 @@ import React from "react";
 import VozilaFilter from "components/filters/VozilaFilter/index";
 
 class Automobili extends React.Component {
-	render() {
-		return (
-			<div>
-				<span>Auto</span>
-				<VozilaFilter />
-			</div>
-		);
-	}
+  render() {
+    return (
+      <div>
+        <VozilaFilter />
+      </div>
+    );
+  }
 }
 export default Automobili;
diff --git a/frontend-react/src/components/subcategories/vozila/Motocikli.js b/frontend-react/src/components/subcategories/vozila/Motocikli.js
index 76e83d5..039fe20 100644
--- a/frontend-react/src/components/subcategories/vozila/Motocikli.js
+++ b/frontend-react/src/components/subcategories/vozila/Motocikli.js
@@ -2,13 +2,12 @@ import React from "react";
 import VozilaFilter from "components/filters/VozilaFilter/index";
 
 class Motocikli extends React.Component {
-	render() {
-		return (
-			<div>
-				<span>Motocikli</span>
-				<VozilaFilter />
-			</div>
-		);
-	}
+  render() {
+    return (
+      <div>
+        <VozilaFilter />
+      </div>
+    );
+  }
 }
 export default Motocikli;
diff --git a/frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js b/frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js
index 6487907..90decfe 100644
--- a/frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js
+++ b/frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js
@@ -1,5 +1,8 @@
 import React from "react";
 import { optionchangewrapper } from "utils/optionchangewrapper";
+import Checkbox from "@material-ui/core/Checkbox";
+import Radio from "@material-ui/core/Radio";
+import "assets/checkboxAndRadioStyle.css";
 
 class CheckboxAndRadioWrapper extends React.Component {
   optionChange = (option, optionName, type) => {
@@ -22,26 +25,33 @@ class CheckboxAndRadioWrapper extends React.Component {
   renderElements = (elements, componentName) => {
     return elements.map(({ type, value, name, optionName } = {}) => (
       <label key={name + type}>
-        <input
-          name={type === "radio" ? `${componentName}-radio` : ""}
-          type={type}
-          value={value}
-          checked={this.isChecked(type, value, optionName)}
-          onChange={option => this.optionChange(option, optionName, type)}
-        />
-        {name}
+        {type === "radio" ? (
+          <Radio
+            className="radio-style"
+            name={type === "radio" ? `${componentName}-radio` : ""}
+            type={type}
+            value={value}
+            checked={this.isChecked(type, value, optionName)}
+            onChange={option => this.optionChange(option, optionName, type)}
+          />
+        ) : (
+          <Checkbox
+            className="checkbox-style"
+            type={type}
+            value={value}
+            checked={this.isChecked(type, value, optionName)}
+            onChange={option => this.optionChange(option, optionName, type)}
+          />
+        )}
+        <span className="label-style">{name}</span>
+        <br />
       </label>
     ));
   };
 
   render() {
     const { elements, componentName } = this.props;
-    return (
-      <div>
-        <span>{componentName}</span>
-        {this.renderElements(elements, componentName)}
-      </div>
-    );
+    return <div>{this.renderElements(elements, componentName)}</div>;
   }
 }
 export default optionchangewrapper(CheckboxAndRadioWrapper);
diff --git a/frontend-react/src/components/widgets/CollapseWrapperStyled.js b/frontend-react/src/components/widgets/CollapseWrapperStyled.js
new file mode 100644
index 0000000..0adb30a
--- /dev/null
+++ b/frontend-react/src/components/widgets/CollapseWrapperStyled.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { connect } from "react-redux";
+import { OPTION_EXPAND_CHANGE } from "constants/actionTypes";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import sidebarStyle from "assets/sidebarStyle.js";
+import Collapse from "@material-ui/core/Collapse";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import Dashboard from "@material-ui/icons/Dashboard";
+
+const mapStateToProps = state => {
+  return {
+    uiexpand: state.uiexpand
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onUIExpandChanged: uiExpandOption =>
+    dispatch({ type: OPTION_EXPAND_CHANGE, ...uiExpandOption })
+});
+
+class CollapseWrapperStyled extends React.Component {
+  handleClick = componentName => {
+    this.props.onUIExpandChanged({
+      controlName: componentName,
+      value: !this.props.uiexpand[componentName]
+    });
+  };
+
+  isopen = componentName => this.props.uiexpand[componentName];
+  render() {
+    let { classes, componentName } = this.props;
+    return (
+      <div>
+        <ListItem
+          className={classes.whiteText}
+          onClick={() => this.handleClick(componentName)}
+        >
+          <ListItemIcon className={classes.whiteText}>
+            <Dashboard />
+          </ListItemIcon>
+          <ListItemText
+            className={classes.whiteText}
+            inset
+            primary={componentName}
+            disableTypography={true}
+          />
+          {this.isopen(componentName) ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse
+          className={classes.subOptionIndent}
+          in={this.isopen(componentName)}
+          timeout="auto"
+          unmountOnExit
+        >
+          {this.props.children}
+        </Collapse>
+      </div>
+    );
+  }
+}
+export default withStyles(sidebarStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(CollapseWrapperStyled)
+);
diff --git a/frontend-react/src/components/widgets/DeepCategoryWrapper.js b/frontend-react/src/components/widgets/DeepCategoryWrapper.js
index d0ea539..fe197a1 100644
--- a/frontend-react/src/components/widgets/DeepCategoryWrapper.js
+++ b/frontend-react/src/components/widgets/DeepCategoryWrapper.js
@@ -1,8 +1,15 @@
 import React from "react";
-import Select from "react-select";
 import { subcategorywrapper } from "utils/subcategorywrapper";
 import { hoc } from "utils/helpers";
 
+import withStyles from "@material-ui/core/styles/withStyles";
+import sidebarStyle from "assets/sidebarStyle.js";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import StarBorder from "@material-ui/icons/StarBorder";
+
 class DeepCategoryWrapper extends React.Component {
   handleOptionChange = selectedOption => {
     const { depth, onSubCategoryChanged } = this.props;
@@ -10,21 +17,45 @@ class DeepCategoryWrapper extends React.Component {
   };
 
   render() {
-    const { options, depth, childrenComponents } = this.props;
+    const { options, depth, childrenComponents, classes } = this.props;
     const {
       subcategory: { [depth]: deepSubCategory }
     } = this.props;
 
     return (
       <div>
-        <Select
-          value={deepSubCategory || null}
-          onChange={this.handleOptionChange}
-          options={options}
-        />
+        <List disablePadding>
+          {options.map(({ label, value }, index) => (
+            <ListItem
+              onClick={() => this.handleOptionChange({ label, value })}
+              className={
+                classes.nested +
+                " " +
+                classes.collapsedItemStyle +
+                " " +
+                (deepSubCategory && deepSubCategory.value === value
+                  ? classes.checkedItem
+                  : "")
+              }
+              key={index}
+            >
+              <ListItemIcon className={classes.whiteText}>
+                <StarBorder />
+              </ListItemIcon>
+              <ListItemText
+                className={classes.whiteText}
+                primary={label}
+                disableTypography={true}
+              />
+            </ListItem>
+          ))}
+        </List>
+
         {hoc(deepSubCategory && deepSubCategory.value, childrenComponents)}
       </div>
     );
   }
 }
-export default subcategorywrapper(DeepCategoryWrapper);
+export default withStyles(sidebarStyle)(
+  subcategorywrapper(DeepCategoryWrapper)
+);
diff --git a/frontend-react/src/components/widgets/DropDownWrapper.js b/frontend-react/src/components/widgets/DropDownWrapper.js
new file mode 100644
index 0000000..b216c07
--- /dev/null
+++ b/frontend-react/src/components/widgets/DropDownWrapper.js
@@ -0,0 +1,54 @@
+import React from "react";
+import { optionchangewrapper } from "utils/optionchangewrapper";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import sidebarStyle from "assets/sidebarStyle.js";
+import StarBorder from "@material-ui/icons/StarBorder";
+
+class DropdownWrapper extends React.Component {
+  handleOptionChange = selectedOption => {
+    const { onOptionChanged, optionName } = this.props;
+    onOptionChanged({
+      optionName,
+      optionValue: selectedOption
+    });
+  };
+
+  render() {
+    let { value, options, choices, classes } = this.props;
+    let optionName = value;
+    return (
+      <List disablePadding>
+        {choices.map(({ label, value }, index) => (
+          <ListItem
+            onClick={() => this.handleOptionChange({ label, value })}
+            className={
+              classes.nested +
+              " " +
+              classes.collapsedItemStyle +
+              " " +
+              (options[optionName] && options[optionName].value === value
+                ? classes.checkedItem
+                : "")
+            }
+            key={index}
+          >
+            <ListItemIcon className={classes.whiteText}>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText
+              className={classes.whiteText}
+              primary={label}
+              disableTypography={true}
+            />
+          </ListItem>
+        ))}
+      </List>
+    );
+  }
+}
+export default withStyles(sidebarStyle)(optionchangewrapper(DropdownWrapper));
diff --git a/frontend-react/src/components/widgets/RangeWrapper.js b/frontend-react/src/components/widgets/RangeWrapper.js
index 3f4cf18..3732ce0 100644
--- a/frontend-react/src/components/widgets/RangeWrapper.js
+++ b/frontend-react/src/components/widgets/RangeWrapper.js
@@ -1,7 +1,9 @@
 import React from "react";
 import { Range } from "rc-slider";
 import { optionchangewrapper } from "utils/optionchangewrapper";
+import "assets/rangeStyle.css";
 import "rc-slider/assets/index.css";
+import Input from "@material-ui/core/Input";
 
 class RangeWrapper extends React.Component {
   sendAction = (optionName, optionValue) => {
@@ -39,14 +41,24 @@ class RangeWrapper extends React.Component {
           step={step}
           onAfterChange={this.handleRangeChange}
         />
-        <input
-          ref={node => {
+        <Input
+          placeholder="Min"
+          className="input-style"
+          inputProps={{
+            "aria-label": "Min"
+          }}
+          inputRef={node => {
             this.inputMin = node;
           }}
           onChange={this.handleInputChange}
         />
-        <input
-          ref={node => {
+        <Input
+          placeholder="Max"
+          className="input-style"
+          inputProps={{
+            "aria-label": "Max"
+          }}
+          inputRef={node => {
             this.inputMax = node;
           }}
           onChange={this.handleInputChange}
diff --git a/frontend-react/src/constants/actionTypes.js b/frontend-react/src/constants/actionTypes.js
index 3a6bd9c..3269142 100644
--- a/frontend-react/src/constants/actionTypes.js
+++ b/frontend-react/src/constants/actionTypes.js
@@ -5,3 +5,4 @@ export const ITEMS_CHANGED = "ITEMS_CHANGED";
 export const MODAL_CLOSE = "MODAL_CLOSE";
 export const MODAL_OPEN = " MODAL_OPEN";
 export const USER_DATA_CHANGED = "USER_DATA_CHANGED";
+export const OPTION_EXPAND_CHANGE = "OPTION_EXPAND_CHANGE";
diff --git a/frontend-react/src/index.js b/frontend-react/src/index.js
index 16c243b..8afbae8 100644
--- a/frontend-react/src/index.js
+++ b/frontend-react/src/index.js
@@ -4,9 +4,11 @@ import React from "react";
 import { store } from "./store";
 
 import App from "./components/App";
+import CssBaseline from "@material-ui/core/CssBaseline";
 
 ReactDOM.render(
   <Provider store={store}>
+    <CssBaseline />
     <App />
   </Provider>,
   document.getElementById("root")
diff --git a/frontend-react/src/reducer.js b/frontend-react/src/reducer.js
index f06cbac..001bac4 100644
--- a/frontend-react/src/reducer.js
+++ b/frontend-react/src/reducer.js
@@ -4,6 +4,7 @@ import options from "./reducers/options";
 import items from "./reducers/items";
 import modal from "./reducers/modal";
 import userdata from "./reducers/userdata";
+import uiexpand from "./reducers/uiexpand";
 import { combineReducers } from "redux";
 
 export default combineReducers({
@@ -12,5 +13,6 @@ export default combineReducers({
   options,
   items,
   modal,
-  userdata
+  userdata,
+  uiexpand
 });
diff --git a/frontend-react/src/reducers/uiexpand.js b/frontend-react/src/reducers/uiexpand.js
new file mode 100644
index 0000000..59d0f44
--- /dev/null
+++ b/frontend-react/src/reducers/uiexpand.js
@@ -0,0 +1,18 @@
+import {
+  OPTION_EXPAND_CHANGE,
+  CATEGORY_SELECT,
+  SUBCATEGORY_SELECT
+} from "constants/actionTypes";
+
+export default (state = {}, action) => {
+  switch (action.type) {
+    case OPTION_EXPAND_CHANGE:
+      return { ...state, [action.controlName]: action.value };
+    case CATEGORY_SELECT:
+      return {};
+    case SUBCATEGORY_SELECT:
+      return { Podkategorija: state["Podkategorija"] };
+    default:
+      return state;
+  }
+};