Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,16 @@
+#priceContainer{
+    display: flex;
+}
+
+#slider{
+    margin-top: 20px;
+}
+
+#box{
+    margin-left: 20px;
+}
+
+#priceLabel{
+    margin-top: 23px;
+    font-size: 17px;
+}
Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import "./FilterPriceComponent.css"
+
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function RangeSlider() {
+  const [value, setValue] = React.useState([20, 37]);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div id="priceContainer">
+      <label id="priceLabel">Цена:</label>
+    <Box id="box" sx={{ width: 350 }}>
+      <Slider
+      id="slider"
+        getAriaLabel={() => 'Price range'}
+        value={value}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        getAriaValueText={valuetext}
+      />
+    </Box>
+    </div>
+  );
+}
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,4 @@
+#demo-multiple-checkbox{
+    margin-top: 10px;
+}
+
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import ListItemText from '@mui/material/ListItemText';
+import Select from '@mui/material/Select';
+import Checkbox from '@mui/material/Checkbox';
+import "./FilterSelectComponent.css"
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+const categories = [
+  'Category1',
+  'Category2',
+  'Category3',
+  'Category4',
+  'Category5',
+  'Category6',
+  'Category7',
+  'Category8',
+  'Category9',
+  'Category10',
+];
+
+export default function MultipleSelectCheckmarks() {
+  const [category, setCategory] = React.useState([]);
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    setCategory(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  return (
+    <div>
+      <FormControl id="form" sx={{ m: 1, width: 200 }}>
+        <InputLabel id="demo-multiple-checkbox-label">Category</InputLabel>
+        <Select
+          size={"small"}
+          labelId="demo-multiple-checkbox-label"
+          id="demo-multiple-checkbox"
+          multiple
+          value={category}
+          onChange={handleChange}
+          input={<OutlinedInput label="Category" />}  // tuka odi soodvetno imeto na filter
+          renderValue={(selected) => selected.join(', ')}
+          MenuProps={MenuProps}
+>
+          {categories.map((cat) => (
+            <MenuItem key={cat} value={cat}>
+              <Checkbox checked={category.indexOf(cat) > -1} />
+              <ListItemText primary={cat} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,5 @@
+#searchfield{
+    display: flex;
+    border-radius: 20px;
+    height: fit-content;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import { styled, alpha } from '@mui/material/styles';
+import "./SearchFieldComponent.css"
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import InputBase from '@mui/material/InputBase';
+import Badge from '@mui/material/Badge';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import SearchIcon from '@mui/icons-material/Search';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import MailIcon from '@mui/icons-material/Mail';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import MoreIcon from '@mui/icons-material/MoreVert';
+
+const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(3),
+      width: 'auto',
+    },
+  }));
+  
+  const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }));
+
+  const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    '& .MuiInputBase-input': {
+      padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+      transition: theme.transitions.create('width'),
+      width: '100%',
+      [theme.breakpoints.up('md')]: {
+        width: '20ch',
+      },
+    },
+  }));
+
+export default class SearchFieldComponent extends Component {
+  render() {
+    return (
+        <Search id="searchfield">
+        <SearchIconWrapper id="iconwrapper">
+          <SearchIcon />
+        </SearchIconWrapper>
+        <StyledInputBase
+        id="search"
+          placeholder="Пребарувај…"
+          inputProps={{ 'aria-label': 'search' }}
+        />
+      </Search>
+    )
+  }
+}
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,20 @@
+#filtersDiv{
+    background-color: #91AD7E;
+    display: flex;
+}
+
+/* #filtersDiv > div{
+    margin-left: 30px;
+} */
+
+
+#filtersDiv > div{
+    margin-left: 30px;
+}
+
+#filtersDiv > div:nth-of-type(4){
+    margin-top: 15px;
+    margin-left: 200px;
+}
+
+
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import "./GroupedFiltersComponent.css"
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import FilterSelectComponent from "../FiltersComponents/FilterSelectComponent"
+import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent"
+import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent';
+
+export default class GroupedFiltersComponent extends Component {
+  render() {
+    return (
+      <div id="filtersDiv">
+       <FilterSelectComponent/>
+       <FilterSelectComponent/>
+       <FilterPriceComponent/>
+       <SearchFieldComponent/>
+      </div>
+    )
+  }
+}
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,10 @@
+#header{
+    background-color: #B6E2C8;
+    display: flex;
+    justify-content: center;
+}
+
+#header img{
+    width: 310px;
+    height: 200px;
+}
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+import logo from '../../logo_phonelux.png'
+import './HeaderComponent.css'
+
+export default class HeaderComponent extends Component {
+  render() {
+    return (
+      <div id='header'>
+        <img src={logo}></img>
+      </div>
+    )
+  }
+}
Index: phonelux-frontend/src/components/Layout.js
===================================================================
--- phonelux-frontend/src/components/Layout.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/Layout.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Layout extends Component {
+  render() {
+    return (
+      <div>
+        
+      </div>
+    )
+  }
+}
