diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js
index 50d85a7..a4499e5 100644
--- a/src/common/dialogs/delete-dialog.js
+++ b/src/common/dialogs/delete-dialog.js
@@ -42,7 +42,9 @@ class DeleteDialog extends React.Component {
             </Modal.Body>
 
             <Modal.Footer>
-                <Button onClick={() => this.props.onClose(false)}>Cancel</Button>
+            <span className='solid-button'>
+                <Button variant='secondary' onClick={() => this.props.onClose(false)}>Cancel</Button>
+            </span>
                 <Button variant="danger" onClick={() => this.props.onClose(true)}>Delete</Button>
             </Modal.Footer>
         </Modal>;
diff --git a/src/common/dialogs/dialog.js b/src/common/dialogs/dialog.js
index 4cc15af..9c5c2ce 100644
--- a/src/common/dialogs/dialog.js
+++ b/src/common/dialogs/dialog.js
@@ -45,6 +45,11 @@ class Dialog extends React.Component {
   }
 
   render() {
+
+    const buttonStyle = {
+      marginLeft: '10px'
+    };
+
     return (
       <Modal size={this.props.size || 'sm'} keyboard show={this.props.show} onEnter={this.props.onReset} onHide={this.cancelModal} onKeyPress={this.onKeyPress}>
         <Modal.Header>
@@ -56,8 +61,10 @@ class Dialog extends React.Component {
         </Modal.Body>
 
         <Modal.Footer>
-         {this.props.blendOutCancel? <div></div>:  <Button onClick={this.cancelModal}>Cancel</Button>}
-          <Button onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
+        <span className='solid-button'>
+         {this.props.blendOutCancel? <div/>:  <Button variant='secondary' onClick={this.cancelModal} style={buttonStyle}>Cancel</Button>}
+          <Button variant='secondary' onClick={this.closeModal} disabled={!this.props.valid} style={buttonStyle}>{this.props.buttonTitle}</Button>
+        </span>
         </Modal.Footer>
       </Modal>
     );
diff --git a/src/common/icon.js b/src/common/icon.js
index 1ad1701..25155b4 100644
--- a/src/common/icon.js
+++ b/src/common/icon.js
@@ -28,7 +28,7 @@ library.add(fas);
 class Icon extends React.Component {
 
   render() {
-    return <FontAwesomeIcon size={this.props.size} style={this.props.style} icon={this.props.icon} />
+    return <FontAwesomeIcon className={this.props.classname} size={this.props.size} style={this.props.style} icon={this.props.icon} />
   }
 }
 
diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index b2df4de..20a8994 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -24,13 +24,12 @@ class DashboardButtonGroup extends React.Component {
   render() {
     const buttonStyle = {
       marginLeft: '12px',
-      height: '44px',
-      width : '35px'
+      height: '44px', 
+      width : '35px',
     };
 
     const iconStyle = {
-      color: '#007bff',
-      height: '25px',
+      height: '25px', 
       width : '25px'
     }
 
@@ -45,21 +44,22 @@ class DashboardButtonGroup extends React.Component {
       buttons.push(
         <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"save"}`}> Save changes </Tooltip>} >
         <Button variant= 'light' size="lg" key={key} onClick={this.props.onSave} style={buttonStyle}>
-          <Icon icon="save" style={iconStyle} />
+          <Icon icon="save" classname='icon-color' style={iconStyle} />
         </Button>
         </OverlayTrigger>,
         <OverlayTrigger key={key++}  placement={'bottom'} overlay={<Tooltip id={`tooltip-${"cancel"}`}> Discard changes </Tooltip>} >
         <Button key={key} variant= 'light' size="lg" onClick={this.props.onCancel} style={buttonStyle}>
-          <Icon icon="times" style={iconStyle}/>
+          <Icon icon="times" classname='icon-color' style={iconStyle}/>
         </Button>
         </OverlayTrigger>
       );
     } else {
       if (this.props.fullscreen !== true) {
         buttons.push(
+        
           <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"expand"}`}> Change to fullscreen view </Tooltip>} >
           <Button key={key} variant= 'light' size="lg" onClick={this.props.onFullscreen} style={buttonStyle}>
-            <Icon icon="expand" style={iconStyle}/>
+            <Icon icon="expand" classname='icon-color' style={iconStyle}/>
           </Button>
           </OverlayTrigger>
         );
@@ -67,7 +67,7 @@ class DashboardButtonGroup extends React.Component {
         buttons.push(
           <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"compress"}`}> Back to normal view </Tooltip>} >
             <Button key={key} variant= 'light' size="lg" onClick={this.props.onFullscreen} style={buttonStyle}>
-              <Icon icon="compress" style={iconStyle}/>
+              <Icon icon="compress" classname='icon-color' style={iconStyle}/>
             </Button>
           </OverlayTrigger>
         );
@@ -77,7 +77,7 @@ class DashboardButtonGroup extends React.Component {
         buttons.push(
           <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"play"}`}> Continue simulation </Tooltip>} >
           <Button key={key} variant= 'light' size="lg" onClick={this.props.onUnpause} style={buttonStyle}>
-            <Icon icon="play" style={iconStyle}/>
+            <Icon icon="play" classname='icon-color' style={iconStyle}/>
           </Button>
           </OverlayTrigger>
         );
@@ -85,7 +85,7 @@ class DashboardButtonGroup extends React.Component {
         buttons.push(
           <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"pause"}`}> Pause simulation </Tooltip>} >
           <Button key={key} variant= 'light' size="lg" onClick={this.props.onPause} style={buttonStyle}>
-            <Icon icon="pause" style={iconStyle}/>
+            <Icon icon="pause" classname='icon-color' style={iconStyle}/>
           </Button>
           </OverlayTrigger>
         );
@@ -96,16 +96,15 @@ class DashboardButtonGroup extends React.Component {
           <OverlayTrigger key={key++} placement={'bottom'}
                           overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete files of scenario </Tooltip>}>
             <Button key={key} variant='light' size="lg" onClick={this.props.onEditFiles} style={buttonStyle}>
-              <Icon icon="file" style={iconStyle}/>
+              <Icon icon="file" classname='icon-color' style={iconStyle}/>
             </Button>
           </OverlayTrigger>
         );
 
         buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'}
-                          overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete input signals </Tooltip>}>
+          <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete input signals </Tooltip>}>
             <Button key={key} variant='light' size="lg" onClick={this.props.onEditInputSignals} style={buttonStyle}>
-              <Icon icon="sign-in-alt" style={iconStyle}/>
+              <Icon icon="sign-in-alt" classname='icon-color' style={iconStyle}/>
             </Button>
           </OverlayTrigger>
         );
@@ -114,7 +113,7 @@ class DashboardButtonGroup extends React.Component {
           <OverlayTrigger key={key++} placement={'bottom'}
                           overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete output signals </Tooltip>}>
             <Button key={key} variant='light' size="lg" onClick={this.props.onEditOutputSignals} style={buttonStyle}>
-              <Icon icon="sign-out-alt" style={iconStyle}/>
+              <Icon icon="sign-out-alt" classname='icon-color' style={iconStyle}/>
             </Button>
           </OverlayTrigger>
         );
@@ -123,7 +122,7 @@ class DashboardButtonGroup extends React.Component {
           <OverlayTrigger key={key++} placement={'bottom'}
                           overlay={<Tooltip id={`tooltip-${"layout"}`}> Add widgets and edit layout </Tooltip>}>
             <Button key={key} variant='light' size="lg" onClick={this.props.onEdit} style={buttonStyle}>
-              <Icon icon="pen" style={iconStyle}/>
+              <Icon icon="pen" classname='icon-color' style={iconStyle}/>
             </Button>
           </OverlayTrigger>
         );
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 56b9880..b8a627b 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -478,7 +478,7 @@ class Dashboard extends Component {
     return <div className={boxClasses} >
       <div className='section-header box-header'>
         <div className="section-title">
-          <span>{this.state.dashboard.name}</span>
+          <h2>{this.state.dashboard.name}</h2>
         </div>
 
         <DashboardButtonGroup
diff --git a/src/dashboard/edit-dashboard.js b/src/dashboard/edit-dashboard.js
index cb062ce..2df61bf 100644
--- a/src/dashboard/edit-dashboard.js
+++ b/src/dashboard/edit-dashboard.js
@@ -73,7 +73,7 @@ class EditDashboardDialog extends React.Component {
     return (
       <Dialog show={this.props.show} title="Edit Dashboard" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
         <form>
-          <FormGroup controlId="name" validationstate={this.validateForm('name')}>
+          <FormGroup controlId="name" valid={this.validateForm('name')}>
             <FormLabel>Name</FormLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js
index 6f4b9da..a023ba4 100644
--- a/src/dashboard/new-dashboard.js
+++ b/src/dashboard/new-dashboard.js
@@ -69,7 +69,7 @@ class NewDashboardDialog extends React.Component {
     return (
       <Dialog show={this.props.show} title="New Dashboard" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
         <form>
-          <FormGroup controlId="name" validationstate={this.validateForm('name')}>
+          <FormGroup controlId="name" valid={this.validateForm('name')}>
             <FormLabel>Name</FormLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
diff --git a/src/file/edit-files.js b/src/file/edit-files.js
index af5d251..d15102b 100644
--- a/src/file/edit-files.js
+++ b/src/file/edit-files.js
@@ -149,11 +149,14 @@ class EditFilesDialog extends React.Component {
           </FormGroup>
 
           <FormGroup as={Col} >
+          <span className='solid-button'>
             <Button
+              variant='secondary'
               disabled={this.state.uploadFile === null}
               onClick={() => this.startFileUpload()}>
               Upload
             </Button>
+          </span>
           </FormGroup>
 
           <FormGroup as={Col} >
diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js
index 93634e5..b0333b8 100644
--- a/src/ic/ic-action.js
+++ b/src/ic/ic-action.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Button, ButtonToolbar, DropdownButton, Dropdown, InputGroup, FormControl } from 'react-bootstrap';
+import { Button, DropdownButton, Dropdown, InputGroup, FormControl } from 'react-bootstrap';
 
 class ICAction extends React.Component {
   constructor(props) {
@@ -79,11 +79,11 @@ class ICAction extends React.Component {
       </Dropdown.Item>
     ));
 
-    return <div>
+    return <div className='solid-button'>
       <InputGroup>
         <InputGroup.Prepend>
           <DropdownButton
-            variant="outline-secondary"
+            variant="secondary"
             title={this.state.selectedAction != null ? this.state.selectedAction.title : ''}
             id="action-dropdown"
             onSelect={this.setAction}>
@@ -96,7 +96,7 @@ class ICAction extends React.Component {
             onChange={this.setTimeForAction} />
         </InputGroup.Prepend>
         <Button
-          variant="outline-secondary"
+          variant="secondary"
           disabled={sendCommandDisabled}
           onClick={() => this.props.runAction(this.state.selectedAction, this.state.time)}>Run</Button>
       </InputGroup>
diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js
index 32a21d9..cba6291 100644
--- a/src/ic/ic-dialog.js
+++ b/src/ic/ic-dialog.js
@@ -113,10 +113,10 @@ class ICDialog extends React.Component {
                   {this.props.userRole === "Admin" ? (
                       <div>
                         <h5>Controls:</h5>
-                        <div>
-                          <Button style={{margin: '5px'}} size='lg'
+                        <div className='solid-button'>
+                          <Button variant='secondary' style={{margin: '5px'}} size='lg'
                                   onClick={() => this.setState({confirmCommand: true, command: 'restart'})}>Restart</Button>
-                          <Button style={{margin: '5px'}} size='lg' onClick={() => this.setState({
+                          <Button variant='secondary' style={{margin: '5px'}} size='lg' onClick={() => this.setState({
                             confirmCommand: true,
                             command: 'shutdown'
                           })}>Shutdown</Button>
diff --git a/src/ic/ics.js b/src/ic/ics.js
index 2347050..de10aaa 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -354,7 +354,7 @@ class InfrastructureComponents extends Component {
 
   modifyNameColumn(name, component){
     let index = this.state.ics.indexOf(component);
-    return <Button variant="link" style={{color: '#047cab'}} onClick={() => this.openICStatus(component)}>{name}</Button>
+    return <Button variant="link" onClick={() => this.openICStatus(component)}>{name}</Button>
   }
 
   openICStatus(ic){
@@ -451,6 +451,11 @@ class InfrastructureComponents extends Component {
       marginLeft: '10px'
     };
 
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
+
     let managerTable = this.getICCategoryTable(this.state.managers, false, "IC Managers")
     let simulatorTable = this.getICCategoryTable(this.state.simulators, true, "Simulators")
     let gatewayTable = this.getICCategoryTable(this.state.gateways, true, "Gateways")
@@ -461,19 +466,19 @@ class InfrastructureComponents extends Component {
       <div className='section'>
         <h1>Infrastructure Components
           {this.state.currentUser.role === "Admin" ?
-            (<span>
+            (<span className='icon-button'>
               <OverlayTrigger
                 key={1}
                 placement={'top'}
                 overlay={<Tooltip id={`tooltip-${"add"}`}> Add Infrastructure Component </Tooltip>} >
-                <Button onClick={() => this.setState({newModal: true})} style={buttonStyle}><Icon icon="plus"
+                <Button variant='light' onClick={() => this.setState({newModal: true})} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle}
                                                                                                 /></Button>
               </OverlayTrigger>
               <OverlayTrigger
                 key={2}
                 placement={'top'}
                 overlay={<Tooltip id={`tooltip-${"import"}`}> Import Infrastructure Component </Tooltip>} >
-                <Button onClick={() => this.setState({importModal: true})} style={buttonStyle}><Icon icon="upload"
+                <Button variant='light' onClick={() => this.setState({importModal: true})} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle}
                                                                                                    /></Button>
               </OverlayTrigger>
               </span>)
diff --git a/src/ic/import-ic.js b/src/ic/import-ic.js
index bde1d9a..a165af6 100644
--- a/src/ic/import-ic.js
+++ b/src/ic/import-ic.js
@@ -118,7 +118,7 @@ class ImportICDialog extends React.Component {
             <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
           </FormGroup>
 
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+          <FormGroup controlId="name" valid={this.validateForm('name')}>
             <FormLabel>Name</FormLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
@@ -128,7 +128,7 @@ class ImportICDialog extends React.Component {
             <FormControl type="text" placeholder="Enter websocketurl" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="uuid" validationState={this.validateForm('uuid')}>
+          <FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
             <FormLabel>UUID</FormLabel>
             <FormControl type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index f58a132..791e79f 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -775,18 +775,17 @@ class Scenario extends React.Component {
       return (<Redirect to="/scenarios" />);
     }
 
-    const buttonStyle = {
-      marginLeft: '10px'
-    };
+    const altButtonStyle = {
+      marginLeft: '10px',
+    }
 
     const tableHeadingStyle = {
       paddingTop: '30px'
     }
 
     const iconStyle = {
-      color: '#007bff',
-      height: '25px',
-      width: '25px'
+      height: '30px',
+      width: '30px'
     }
 
     if (this.state.scenario === undefined) {
@@ -846,8 +845,8 @@ class Scenario extends React.Component {
     return <div className='section'>
       <div className='section-buttons-group-right'>
         <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete files of scenario </Tooltip>} >
-          <Button key={0} variant='light' size="lg" onClick={this.onEditFiles.bind(this)} style={buttonStyle}>
-            <Icon icon="file" style={iconStyle} />
+          <Button variant='light' key={0} size="lg" onClick={this.onEditFiles.bind(this)}>
+            <Icon icon="file" classname={'icon-color'} style={iconStyle}/>
           </Button>
         </OverlayTrigger>
       </div>
@@ -864,18 +863,20 @@ class Scenario extends React.Component {
 
       {/*Component Configurations table*/}
       <h2 style={tableHeadingStyle}>Component Configurations
+        <span className='icon-button'>
         <OverlayTrigger
           key={1}
           placement={'top'}
           overlay={<Tooltip id={`tooltip-${"add"}`}> Add Component Configuration </Tooltip>} >
-          <Button onClick={() => this.addConfig()} style={buttonStyle}><Icon icon="plus" /></Button>
+          <Button variant='light' onClick={() => this.addConfig()} style={altButtonStyle}><Icon icon="plus"  classname={'icon-color'} style={iconStyle} /></Button>
         </OverlayTrigger>
         <OverlayTrigger
           key={2}
           placement={'top'}
           overlay={<Tooltip id={`tooltip-${"import"}`}> Import Component Configuration </Tooltip>} >
-          <Button onClick={() => this.setState({ importConfigModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
+          <Button variant='light' onClick={() => this.setState({ importConfigModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle}/></Button>
         </OverlayTrigger>
+          </span>
       </h2>
       <Table data={this.state.configs}>
         <TableColumn
@@ -973,18 +974,20 @@ class Scenario extends React.Component {
 
       {/*Dashboard table*/}
       <h2 style={tableHeadingStyle}>Dashboards
+        <span className='icon-button'>
         <OverlayTrigger
           key={1}
           placement={'top'}
           overlay={<Tooltip id={`tooltip-${"add"}`}> Add Dashboard </Tooltip>} >
-          <Button onClick={() => this.setState({ newDashboardModal: true })} style={buttonStyle}><Icon icon="plus" /></Button>
+          <Button variant='light' onClick={() => this.setState({ newDashboardModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
         </OverlayTrigger>
         <OverlayTrigger
           key={2}
           placement={'top'}
           overlay={<Tooltip id={`tooltip-${"import"}`}> Import Dashboard </Tooltip>} >
-          <Button onClick={() => this.setState({ importDashboardModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
+          <Button variant='light' onClick={() => this.setState({ importDashboardModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle} /></Button>
         </OverlayTrigger>
+          </span>
       </h2>
       <Table data={this.state.dashboards}>
         <TableColumn title='Name' dataKey='name' link='/dashboards/' linkKey='id' />
@@ -1011,12 +1014,14 @@ class Scenario extends React.Component {
 
       {/*Result table*/}
       <h2 style={tableHeadingStyle}>Results
+        <span className='icon-button'>
         <OverlayTrigger
           key={1}
           placement={'top'}
           overlay={<Tooltip id={`tooltip-${"add"}`}> Add Result </Tooltip>} >
-          <Button onClick={() => this.setState({ newResultModal: true })} style={buttonStyle}><Icon icon="plus" /></Button>
+          <Button variant='light' onClick={() => this.setState({ newResultModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
         </OverlayTrigger>
+          </span>
       </h2>
       {resulttable}
       <NewResultDialog show={this.state.newResultModal} onClose={data => this.closeNewResultModal(data)} />
@@ -1043,11 +1048,15 @@ class Scenario extends React.Component {
             type="text"
           />
           <InputGroup.Append>
+          <span className='icon-button'>
             <Button
+              variant='light'
               type="submit"
+              style={altButtonStyle}
               onClick={() => this.addUser()}>
-              Add User
+              <Icon icon="plus" classname={'icon-color'} style={iconStyle} />
             </Button>
+            </span>
           </InputGroup.Append>
         </InputGroup><br /><br />
       </div>
diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js
index 8158af8..aef0740 100644
--- a/src/scenario/scenarios.js
+++ b/src/scenario/scenarios.js
@@ -236,24 +236,31 @@ class Scenarios extends Component {
 
   render() {
     const buttonStyle = {
-      marginLeft: '10px'
+      marginLeft: '10px',
     };
 
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
+
     return (
       <div className='section'>
         <h1>Scenarios
+          <span className='icon-button'>
           <OverlayTrigger
             key={1}
             placement={'top'}
             overlay={<Tooltip id={`tooltip-${"add"}`}> Add Scenario </Tooltip>} >
-              <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /></Button>
+              <Button variant='light' onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle} /></Button>
           </OverlayTrigger>
           <OverlayTrigger
             key={2}
             placement={'top'}
             overlay={<Tooltip id={`tooltip-${"import"}`}> Import Scenario </Tooltip>} >
-          <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
+          <Button variant='light' onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle} /></Button>
           </OverlayTrigger>
+            </span>
         </h1>
 
         <Table data={this.state.scenarios}>
diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js
index 7dec36a..b1df22c 100644
--- a/src/signal/edit-signal-mapping.js
+++ b/src/signal/edit-signal-mapping.js
@@ -65,7 +65,7 @@ class EditSignalMapping extends React.Component {
   }
 
   signals.forEach(signal => {
-    if(signal.checked == undefined) signal.checked = false
+    if(signal.checked === undefined) signal.checked = false
   });
 
 
@@ -149,7 +149,7 @@ class EditSignalMapping extends React.Component {
         data: signal,
         token: this.props.sessionToken
       });
-  
+
     })
 
   }
@@ -196,11 +196,11 @@ class EditSignalMapping extends React.Component {
   onSignalChecked(signal) {
     let tempSignals = this.state.signals;
     const index = tempSignals.indexOf(signal);
-    
+
     tempSignals[index].checked = !tempSignals[index].checked;
 
     this.setState({signals: tempSignals});
-    
+
   }
 
   checkAll(){
@@ -208,7 +208,7 @@ class EditSignalMapping extends React.Component {
     let allChecked = true;
 
     tempSignals.forEach(signal =>
-      { 
+      {
         if(signal.checked === false){
         signal.checked = true;
         allChecked = false;
@@ -224,7 +224,7 @@ class EditSignalMapping extends React.Component {
   render() {
 
       const buttonStyle = {
-        marginLeft: '10px'
+        marginLeft: '10px',
       };
 
       return(
@@ -251,24 +251,24 @@ class EditSignalMapping extends React.Component {
                   <TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
               </Table>
 
-              <div >
+              <div className='solid-button' style={{ float: 'right' }}>
               <OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>} >
-                <Button key={50} style={{ float: 'left' }} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" />  </Button>
+                <Button  variant='secondary' key={50} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" />  </Button>
               </OverlayTrigger>
-                <Button key={51} style={{ float: 'left' }} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
-                <Button key={52} style={{ float: 'right' }} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
+                <Button  variant='secondary' key={51} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
+                <Button  variant='secondary' key={52} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
               </div>
               <div>
                 <Collapse isOpened={this.state.openCollapse}>
                 <h6>Choose a Component Configuration to add the signal to: </h6>
-                <div>
+                <div className='solid-button'>
                 {typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
 
-                  <Button key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
+                  <Button variant='secondary' key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
 
                 ))}
                 </div>
-                </Collapse> 
+                </Collapse>
               </div>
           </FormGroup>
         </Dialog>
diff --git a/src/styles/app.css b/src/styles/app.css
index 50ddfda..7640536 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -369,6 +369,18 @@ body {
   height: auto !important;
   padding: 5px;
   float: right;
+  border-color: #ffffff;
+  background-color: #ffffff;
+}
+
+.section-buttons-group-right .btn{
+  border-color: #ffffff;
+  background-color: #ffffff;
+}
+
+.section-buttons-group-right .btn:hover{
+  border-color: #e3e3e3;
+  background-color: #e3e3e3;
 }
 
 .section-buttons-group-left {
@@ -377,10 +389,60 @@ body {
   float: left;
 }
 
+.section-buttons-group-left .btn{
+  background-color: #527984; 
+  border-color: #527984;
+}
+
+.section-buttons-group-left .btn:hover{
+  background-color: #31484f; 
+  border-color: #31484f;
+}
+
+.drag-and-drop .btn{
+  color: #527984;
+  border-color: #527984;
+}
+
+.drag-and-drop .btn:hover{
+  color: #527984;
+  border-color: #527984;
+}
+
+
 .section-buttons-group-right .rc-slider {
   margin-left: 12px;
 }
 
+.solid-button .btn{
+  background-color: #527984; 
+  border-color: #527984;
+}
+
+.solid-button .btn:hover{
+  background-color: #31484f; 
+  border-color: #31484f;
+}
+
+.solid-button .btn:disabled{
+  background-color: #527984; 
+  border-color: #527984;
+}
+
+.icon-button .btn{
+  border-color: #ffffff;
+  background-color: #ffffff;
+}
+
+.icon-button .btn:hover{
+  border-color: #e3e3e3;
+  background-color: #e3e3e3;
+}
+
+.icon-color {
+  color: #527984;
+}
+
 .form-horizontal .form-group {
   margin-left: 0 !important;
   margin-right: 0 !important;
diff --git a/src/user/login-form.js b/src/user/login-form.js
index 3c26f51..8c09152 100644
--- a/src/user/login-form.js
+++ b/src/user/login-form.js
@@ -91,7 +91,9 @@ class LoginForm extends Component {
 
         <FormGroup style={{paddingTop: 15, paddingBottom: 5}}>
           <Col>
-            <Button style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
+          <span className='solid-button'>
+            <Button variant='secondary' style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
+          </span>
             <Button variant="link" size="sm" style={{marginLeft: 85}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
           </Col>
         </FormGroup>
diff --git a/src/user/user.js b/src/user/user.js
index 2026771..e85f5ac 100644
--- a/src/user/user.js
+++ b/src/user/user.js
@@ -17,7 +17,7 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import {Button, Col, Row} from 'react-bootstrap';
+import {Button, Col, Row, FormGroup} from 'react-bootstrap';
 
 import AppDispatcher from '../common/app-dispatcher';
 import UsersStore from './users-store';
@@ -112,6 +112,7 @@ class User extends Component {
 
 
   render() {
+
     return (
       <div>
         <h1>Your User Account</h1>
@@ -119,27 +120,25 @@ class User extends Component {
         {this.state.currentUser !== undefined && this.state.currentUser !== null ?
 
           <form>
+
             <Row>
-              <Col xs={3}>Username: </Col>
-              <Col xs={3}> {this.state.currentUser.username} </Col>
+              <FormGroup as={Col} sm={2} controlId="details">
+                <div style={{ alignItems: 'right' }}>Username:</div>
+                <div style={{ alignItems: 'right' }}>E-mail:</div>
+                <div style={{ alignItems: 'right' }}>Role:</div>
+              </FormGroup>
+              <FormGroup as={Col} sm={3} controlId="information" >
+                <div> {this.state.currentUser.username}</div>
+                <div>{this.state.currentUser.mail}</div>
+                <div>{this.state.currentUser.role}</div>
+                <span className='icon-button'>
+                <Button variant='light' size='lg' variant='light' style={{margin: '10px'}} onClick={() => this.setState({ editModal: true })}><Icon size='lg' classname='icon-color' icon='edit' /> </Button>
+                </span>
+              </FormGroup>
             </Row>
 
-
-            <Row as={Col}>
-              <Col xs={3}>E-mail: </Col>
-              <Col xs={3}> {this.state.currentUser.mail} </Col>
-            </Row>
-
-            <Row as={Col}>
-              <Col xs={3}>Role: </Col>
-              <Col xs={3}> {this.state.currentUser.role} </Col>
-            </Row>
-
-
-            <Button onClick={() => this.setState({editModal: true})}><Icon icon='edit'/> Edit</Button>
-
             <EditOwnUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)}
-                               user={this.state.currentUser}/>
+              user={this.state.currentUser} />
 
           </form> : "Loading user data..."
         }
@@ -148,8 +147,5 @@ class User extends Component {
   }
 }
 
-
-
-
 let fluxContainerConverter = require('../common/FluxContainerConverter');
 export default Container.create(fluxContainerConverter.convert(User));
diff --git a/src/user/users.js b/src/user/users.js
index d577462..96b1e4c 100644
--- a/src/user/users.js
+++ b/src/user/users.js
@@ -131,20 +131,25 @@ class Users extends Component {
   render() {
 
     const buttonStyle = {
-      marginLeft: '10px'
+      marginLeft: '10px',
     };
 
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
+
     return (
       <div>
         <h1>Users
-
+          <span className='icon-button'>
           <OverlayTrigger
             key={1}
             placement={'top'}
             overlay={<Tooltip id={`tooltip-${"add"}`}> Add User </Tooltip>} >
-            <Button style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> </Button>
+            <Button variant='light' style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' classname='icon-color' style={iconStyle} /> </Button>
           </OverlayTrigger>
-
+        </span>
         </h1>
 
         <Table data={this.state.users}>
@@ -156,8 +161,6 @@ class Users extends Component {
           <TableColumn width='200' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
         </Table>
 
-
-
         <NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
         <EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
 
diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js
index 415fbd0..6ef3fcd 100644
--- a/src/widget/edit-widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget/edit-widget-color-zones-control.js
@@ -175,6 +175,15 @@ class EditWidgetColorZonesControl extends React.Component {
 
   render() {
 
+    const buttonStyle = {
+      marginBottom: '10px', 
+      marginLeft: '120px',
+    };
+
+    const iconStyle = {
+      height: '25px', 
+      width : '25px'
+    }
 
     let tempColor = 'FFFFFF';
     let collapse = false;
@@ -191,9 +200,10 @@ class EditWidgetColorZonesControl extends React.Component {
     }
     
     return <FormGroup>
-      <FormLabel>Color Zones</FormLabel>
-      <Button  onClick={this.addZone} style={{marginBottom: '10px', marginLeft: '120px'}} disabled={!this.props.widget.customProperties.colorZones}><Icon size='xs' icon="plus" /></Button>
-
+      <FormLabel>Color zones</FormLabel>
+      <span className='icon-button'>
+      <Button variant='light' onClick={this.addZone} style={buttonStyle} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" className='icon-color' style={iconStyle} /></Button>
+      </span>
     <div>
       {
           this.state.widget.customProperties.zones.map((zone, idx) => {
@@ -243,7 +253,9 @@ class EditWidgetColorZonesControl extends React.Component {
           </tr>
         </tbody>
       </Table>
-      <Button  onClick={this.removeZones}><Icon size='xs' icon="trash-alt" /></Button>
+      <span className='icon-button'>
+      <Button variant='light' onClick={this.removeZones} ><Icon style={iconStyle} classname='icon-color' icon="trash-alt" /></Button>
+      </span>
       </Collapse>
       
       <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />
diff --git a/src/widget/toolbox-item.js b/src/widget/toolbox-item.js
index f1ebb93..4c268c5 100644
--- a/src/widget/toolbox-item.js
+++ b/src/widget/toolbox-item.js
@@ -51,7 +51,7 @@ class ToolboxItem extends React.Component {
     if (this.props.disabled === false) {
       return this.props.connectDragSource(
         <div className={itemClass}>
-          <span className="btn " style={{marginTop: '5px', color: '#6ea2b0', borderColor: '#6ea2b0'}}>
+          <span className="btn " style={{marginTop: '5px'}}>
             {this.props.icon && <Icon style={{marginRight: '5px'}} icon={this.props.icon} /> }
             {this.props.name}
           </span>
diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js
index 033109c..ee48d37 100644
--- a/src/widget/widget-toolbox.js
+++ b/src/widget/widget-toolbox.js
@@ -96,11 +96,15 @@ class WidgetToolbox extends React.Component {
     const disableDecrease = this.disableDecrease();
     // Only one topology widget at the time is supported
     const iconStyle = {
-      color: '#007bff',
       height: '25px',
       width : '25px'
     }
 
+    const buttonStyle = {
+      marginRight: '3px', 
+      height: '40px', 
+    }
+
     const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
     const topologyItemMsg = thereIsTopologyWidget? 'Currently only one is supported' : '';
 
@@ -110,16 +114,16 @@ class WidgetToolbox extends React.Component {
 <div className='section-buttons-group-left'>
         <div>
         <OverlayTrigger key={2} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"cosmetic"}`}> Show/ hide available Cosmetic Widgets </Tooltip>} >
-        <Button variant="light" key={2} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('cosmetic')}  >
-          <Icon icon={cosmeticIcon} style={{color: '#007bff'}}/> Cosmetic Widgets</Button>
+        <Button key={2} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('cosmetic')}  >
+          <Icon icon={cosmeticIcon}/> Cosmetic Widgets</Button>
       </OverlayTrigger>
       <OverlayTrigger key={3} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"displaying"}`}> Show/ hide available Displaying Widgets </Tooltip>} >
-        <Button variant="light" key={3} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('displaying')}  >
-          <Icon icon={displayingIcon} style={{color: '#007bff'}} /> Displaying Widgets</Button>
+        <Button key={3} variant="secondary"  style={buttonStyle} onClick={() => this.showWidgets('displaying')}  >
+          <Icon icon={displayingIcon}/> Displaying Widgets</Button>
       </OverlayTrigger>
       <OverlayTrigger key={4} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"manipulation"}`}> Show/ hide available Manipulation Widgets </Tooltip>} >
-        <Button variant="light" key={2} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('manipulation')}  >
-          <Icon icon={manipulationIcon} style={{color: '#007bff'}} /> Manipulation Widgets</Button>
+        <Button key={2} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('manipulation')}  >
+          <Icon icon={manipulationIcon}/> Manipulation Widgets</Button>
       </OverlayTrigger>
         </div>
       </div>
@@ -128,13 +132,13 @@ class WidgetToolbox extends React.Component {
           <span>Grid: { this.props.grid > 1 ? this.props.grid : 'Disabled' }</span>
           <Slider value={this.props.grid} style={{ width: '80px' }} step={5} onChange={this.onGridChange} />
           <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"increase"}`}> Increase dashboard height </Tooltip>} >
-          <Button variant="light" key={0} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(1)}  >
-          <Icon icon="plus" style={iconStyle}/>
+          <Button variant="light" key={0} style={buttonStyle} onClick={() => this.props.onDashboardSizeChange(1)}  >
+          <Icon icon="plus" classname='icon-color' style={iconStyle}/>
           </Button>
           </OverlayTrigger>
           <OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"decrease"}`}> Decrease dashboard height </Tooltip>} >
-          <Button variant="light" key={1} disabled={disableDecrease} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(-1)} >
-          <Icon icon="minus" style={iconStyle}/>
+          <Button variant="light" key={1} disabled={disableDecrease} style={buttonStyle} onClick={() => this.props.onDashboardSizeChange(-1)} >
+          <Icon icon="minus" classname='icon-color' style={iconStyle}/>
           </Button>
           </OverlayTrigger>
 
@@ -143,7 +147,7 @@ class WidgetToolbox extends React.Component {
       <br></br>
       <br></br>
       <br></br>
-      <div className= 'section-buttons-group-left'>
+      <div className= 'drag-and-drop'>
       <span>
       <Collapse isOpened={this.state.showCosmeticWidgets} >
       <ToolboxItem name='Line' type='widget' icon='plus'/>