diff --git a/www/frontSrc/Header/Nav/Nav.js b/www/frontSrc/Header/Nav/Nav.js
index a2fa641bd3358d476738388fa52456e3489cd21d..5f8c9da0b1e7f687e48ebcb173853bf64235af8f 100644
--- a/www/frontSrc/Header/Nav/Nav.js
+++ b/www/frontSrc/Header/Nav/Nav.js
@@ -72,49 +72,75 @@ const Nav = (
           onChange={handleChange}
           classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
         >
-          <Tab disableRipple
-            icon={<HomeIcon viewBox="6 156 600 600" className={classes.navIcons}/>}
-            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          />
-          <Tab
-            icon={<MonitoringIcon viewBox="0 0 600 600"/>}
-            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          />
-          <Tab
-            icon={<ReportingIcon viewBox="0 0 600 600"/>}
-            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          />
-          <Tab
-            icon={<ConfigurationIcon viewBox="0 0 600 600"/>}
-            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          />
-          <Tab
-            icon={<AdministrationIcon viewBox="6 156 600 600"/>}
-            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          />
+          {
+            Object.keys(items).map((item) => {
+              const Components = {
+                'Home': {
+                  component: HomeIcon,
+                  viewBox: '6 156 600 600',
+                  className: classes.navIcons
+                },
+                'Monitoring': {
+                  component: MonitoringIcon,
+                  viewBox: '0 0 600 600',
+                  className: null
+                },
+                'Reporting': {
+                  component: ReportingIcon,
+                  viewBox: '0 0 600 600',
+                  className: null
+                },
+                'Configuration': {
+                  component: ConfigurationIcon,
+                  viewBox: '0 0 600 600',
+                  className: null
+                },
+                'Administration': {
+                  component: AdministrationIcon,
+                  viewBox: '6 156 600 600',
+                  className: null
+                },
+
+              }
+              const i = items[item]
+              const Icon = Components[i.label].component || HomeIcon
+
+              return (
+                <Tab disableRipple key={item}
+                     icon={<Icon viewBox={Components[i.label].viewBox} className={Components[i.label].className} />}
+                     classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+                />
+              )
+            }
+            )
+          }
         </Tabs>
         {
-          items.map((item, index) => {
-            if(value === index) {
-              return (
-                <div className={classes.wrapper} key={index}>
-                  <div className={classes.secondLevel} key={index} style={{ backgroundColor: item.color }}>
-                    {
-                      item.children.map((secondItem, i) => {
-                        return <SecondLevel
+          Object.keys(items).map((item, index) => {
+            console.log(items[item].children)
+            /*if(value === index) {
+
+              item.children.map((secondItem, i) => {
+                console.log('1',secondItem)
+                return (
+                  <div className={classes.wrapper}>
+                    <div className={classes.secondLevel} key={index} style={{ backgroundColor: item.color }}>
+                      <SecondLevel
                         key={i}
                         id={i}
                         item={secondItem}
                         open={open}
-                        />
-                      })
-                    }
+                      />
+                    </div>
                   </div>
-                </div>
-              )
-            }
+                )
+              })
+            }*/
           })
         }
+        <div className={classes.secondLevel} key={1} style={{ backgroundColor: '#009FDF' }}>
+          hello
+        </div>
       </div>
 )
 
diff --git a/www/frontSrc/Header/Nav/NavContainer.js b/www/frontSrc/Header/Nav/NavContainer.js
index 3feaf26c4a7ea0101428eaba505b4c7f6da98dca..00ece298442d90df2b0de91b8828c5ca4d2eebed 100644
--- a/www/frontSrc/Header/Nav/NavContainer.js
+++ b/www/frontSrc/Header/Nav/NavContainer.js
@@ -31,11 +31,14 @@ class NavContainer extends Component {
     const { data, dataFetched } = this.props.nav
 
     if (dataFetched) {
-      const key = data.reduce((acc, item) => {
-        if (item.active) acc = item.key
+      //console.log(this.props.nav)
+      const key = Object.keys(data).reduce((acc, item) => {
+        if (data[item].active) acc = item.key
         return acc
       },0)
+
       const activeItemKey = value !== key ? key : value
+
         return <Nav
           value={value}
           items={data}
diff --git a/www/frontSrc/Header/Reducers/navReducer.js b/www/frontSrc/Header/Reducers/navReducer.js
index fc9b102f6675b3e2e02af583c8e1342372fb6432..d0e128684edc3b0f4ebec0dd4002752b0903996d 100644
--- a/www/frontSrc/Header/Reducers/navReducer.js
+++ b/www/frontSrc/Header/Reducers/navReducer.js
@@ -20,7 +20,7 @@ export default function navReducer (
         isFetching: true,
       }
     case REQUEST_NAV_ITEMS_SUCCESS:
-      const color = ['#00A499', '#84BD00', '#E98F2C', '#009FDF', '#10069F']
+      /*const color = ['#00A499', '#84BD00', '#E98F2C', '#009FDF', '#10069F']
       const data = action.data
       const result = data.reduce((acc, item, i) => {
         acc = [
@@ -32,11 +32,11 @@ export default function navReducer (
           }
         ]
         return acc
-      }, [])
+      }, [])*/
 
       return {
         ...state,
-        data: result,
+        data: action.data,
         dataFetched: true,
         isFetching: false,
         error: false,