diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
index 121d4b7..4123011 100644
--- a/smart-hut/src/views/Navbar.js
+++ b/smart-hut/src/views/Navbar.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react";
+import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment,  Dropdown } from "semantic-ui-react";
 import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
 import ModalWindow from "../components/modalform";
 
@@ -13,9 +13,7 @@ class Navbar extends Component {
     }
   }
 
-  editModeController = (e) => {
-    this.setState((prevState) => ({ editMode: !prevState.editMode }));
-  };
+  editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
 
   handleClick = (e, {id}) => {
     console.log(id);
@@ -29,7 +27,7 @@ class Navbar extends Component {
     return (
       <div>
       <Segment.Group>
-       <Responsive as={Segment}>
+       <Responsive as={Segment} minWidth={768}>
           <Grid>
             <Grid.Row color='black'>
                 <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
@@ -74,7 +72,7 @@ class Navbar extends Component {
                             {e.name}
                           </Grid.Column>
                           <Grid.Column floated="right">
-                          {this.state.edit ?
+                          {this.state.editMode ?
                             <ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
                             : null
                           }
@@ -102,9 +100,79 @@ class Navbar extends Component {
                 </Grid.Row>
               </Grid>
             </Responsive>
+
             <Responsive as={Segment} maxWidth={768}>
-            //dropdown menu
+
+              <Menu inverted>
+                <Dropdown item fluid text='Select Room'>
+                  <Dropdown.Menu>
+
+                    <Dropdown.Item
+                      key={-1}
+                      name='Home'
+                      active={this.state.activeItem === 'Home'}
+                      onClick={this.handleClick}>
+                      <Grid>
+                        <Grid.Row>
+                          <Grid.Column>
+                            <Icon name="home" size="small"/>
+                          </Grid.Column>
+                          <Grid.Column>
+                            Home
+                          </Grid.Column>
+                        </Grid.Row>
+                      </Grid>
+                    </Dropdown.Item>
+
+                    {this.props.rooms ?
+                    this.props.rooms.map((e, i) => {
+                      return (
+                        <Dropdown.Item
+                          id={e.id}
+                          key={i}
+                          name={e.name}
+                          active={this.state.activeItem === e.id}
+                          onClick={this.handleClick}
+                         >
+                         <Grid>
+                           <Grid.Row>
+                             <Grid.Column width={1}>
+                               <Icon name={e.icon} size="small"/>
+                             </Grid.Column>
+                             <Grid.Column>
+                               {e.name}
+                             </Grid.Column>
+                           </Grid.Row>
+                         </Grid>
+                         </ Dropdown.Item>
+                        )
+                      }) : null
+                    }
+
+                  </Dropdown.Menu>
+                </Dropdown>
+              </Menu>
+
+              <Grid>
+              <Grid.Row>
+                <Grid.Column width={8}>
+                  <Button icon fluid labelPosition='left'>
+                    <Icon name='plus' size='small'/>
+                    ADD ROOM
+                  </Button>
+                </Grid.Column>
+                <Grid.Column width={8}>
+                  <Button icon fluid labelPosition='left'>
+                    <Icon name='pencil' size='small'/>
+                    EDIT ROOM
+                  </Button>
+                </Grid.Column>
+              </Grid.Row>
+              </Grid>
+
+
             </Responsive>
+
           </Segment.Group>
        </div>
     );