diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js
index 179b3cd..b99f2af 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 style={{backgroundColor: '#527984', borderColor: '#527984'}} 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 741ecaf..071a58e 100644
--- a/src/common/dialogs/dialog.js
+++ b/src/common/dialogs/dialog.js
@@ -45,11 +45,6 @@ class Dialog extends React.Component {
   }
 
   render() {
-    const buttonStyle = {
-      backgroundColor: '#527984', 
-      borderColor: '#527984'
-    };
-
 
     return (
       <Modal size={this.props.size || 'sm'} keyboard show={this.props.show} onEnter={this.props.onReset} onHide={this.cancelModal} onKeyPress={this.onKeyPress}>
@@ -62,8 +57,10 @@ class Dialog extends React.Component {
         </Modal.Body>
 
         <Modal.Footer>
-         {this.props.blendOutCancel? <div></div>:  <Button style={buttonStyle} onClick={this.cancelModal}>Cancel</Button>}
-          <Button style={buttonStyle} onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
+        <span className='solid-button'>
+         {this.props.blendOutCancel? <div></div>:  <Button variant='secondary' onClick={this.cancelModal}>Cancel</Button>}
+          <Button variant='secondary' onClick={this.closeModal} disabled={!this.props.valid}>{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 9d171c6..20a8994 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -26,12 +26,9 @@ class DashboardButtonGroup extends React.Component {
       marginLeft: '12px',
       height: '44px', 
       width : '35px',
-      borderColor: '#ffffff',
-      backgroundColor: '#ffffff'
     };
 
     const iconStyle = {
-      color: '#527984',
       height: '25px', 
       width : '25px'
     }
@@ -47,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>
         );
@@ -69,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>
         );
@@ -79,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>
         );
@@ -87,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>
         );
@@ -98,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>
         );
@@ -116,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>
         );
@@ -125,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/file/edit-files.js b/src/file/edit-files.js
index 97ae6e3..d15102b 100644
--- a/src/file/edit-files.js
+++ b/src/file/edit-files.js
@@ -149,12 +149,14 @@ class EditFilesDialog extends React.Component {
           </FormGroup>
 
           <FormGroup as={Col} >
+          <span className='solid-button'>
             <Button
-              style={{ backgroundColor: '#527984', borderColor: '#527984'}}
+              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 e18ba54..e968c17 100644
--- a/src/ic/ic-action.js
+++ b/src/ic/ic-action.js
@@ -75,17 +75,17 @@ class ICAction extends React.Component {
             step={1}
             onChange={this.setDelayForAction}
           />
+          <div className='solid-button'>
           <ButtonToolbar>
            <Dropdown onSelect={this.setAction}>
-             <Dropdown.Toggle id={'action-dropdown'} style={{backgroundColor: '#527984', borderColor: '#527984'}}> {this.state.selectedAction != null ? this.state.selectedAction.title : ''}</Dropdown.Toggle>
+             <Dropdown.Toggle variant='secondary' id={'action-dropdown'}> {this.state.selectedAction != null ? this.state.selectedAction.title : ''}</Dropdown.Toggle>
              <Dropdown.Menu>
              {actionList}
              </Dropdown.Menu>
            </Dropdown>
-
-            <Button style={{ marginLeft: '5px', backgroundColor: '#527984', borderColor: '#527984' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
-
+            <Button variant='secondary' style={{ marginLeft: '5px', }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
           </ButtonToolbar>
+          </div>
         </div>;
     }
 }
diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js
index 6e79fac..a919f3f 100644
--- a/src/ic/ic-dialog.js
+++ b/src/ic/ic-dialog.js
@@ -95,10 +95,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 dc013c6..e3405f2 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -334,7 +334,7 @@ class InfrastructureComponents extends Component {
     let ic = this.state.ics.find(ic => ic.name === name);
     let index = this.state.ics.indexOf(ic);
     if(ic.type === "villas-node" || ic.type === "villas-relay"){
-      return <Button variant="link" style={{color: '#047cab'}} onClick={() => this.setState({ icModal: true, modalIC: ic, modalIndex: index })}>{name}</Button>    }
+      return <Button variant="link" onClick={() => this.setState({ icModal: true, modalIC: ic, modalIndex: index })}>{name}</Button>    }
     else{
       return <span>{name}</span>
     }
@@ -369,12 +369,9 @@ class InfrastructureComponents extends Component {
   
     const buttonStyle = {
       marginLeft: '10px',
-      backgroundColor: '#ffffff',
-      borderColor: '#ffffff'
     }
 
     const iconStyle = {
-      color: '#527984',
       height: '30px',
       width: '30px'
     }
@@ -384,9 +381,9 @@ class InfrastructureComponents extends Component {
       <div className='section'>
         <h1>Infrastructure Components
         {this.state.currentUser.role === "Admin" ?
-          <span>
-            <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" style={iconStyle} /></Button>
-            <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" style={iconStyle} /></Button>
+          <span className='icon-button'>
+            <Button variant='light' onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle} /></Button>
+            <Button variant='light' onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle} /></Button>
           </span>
           :
           <span> </span>
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 6802d15..7353ce2 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -697,16 +697,8 @@ class Scenario extends React.Component {
       return (<Redirect to="/scenarios" />);
     }
 
-    const buttonStyle = {
-      marginLeft: '10px',
-      backgroundColor: '#527984', 
-      borderColor: '#527984'
-    };
-
     const altButtonStyle = {
       marginLeft: '10px',
-      backgroundColor: '#ffffff',
-      borderColor: '#ffffff'
     }
 
     const tableHeadingStyle = {
@@ -714,7 +706,6 @@ class Scenario extends React.Component {
     }
 
     const iconStyle = {
-      color: '#527984',
       height: '30px',
       width: '30px'
     }
@@ -764,8 +755,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={altButtonStyle}>
-            <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>
@@ -784,8 +775,10 @@ class Scenario extends React.Component {
 
       {/*Component Configurations table*/}
       <h2 style={tableHeadingStyle}>Component Configurations
-        <Button onClick={() => this.addConfig()} style={altButtonStyle}><Icon icon="plus" style={iconStyle} /></Button>
-        <Button onClick={() => this.setState({ importConfigModal: true })} style={altButtonStyle}><Icon icon="upload" style={iconStyle}/></Button>
+      <span className='icon-button'>
+        <Button variant='light' onClick={() => this.addConfig()} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
+        <Button variant='light' onClick={() => this.setState({ importConfigModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle}/></Button>
+      </span>
       </h2>
       <Table data={this.state.configs}>
         <TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
@@ -876,8 +869,10 @@ class Scenario extends React.Component {
 
       {/*Dashboard table*/}
       <h2 style={tableHeadingStyle}>Dashboards
-        <Button onClick={() => this.setState({ newDashboardModal: true })} style={altButtonStyle}><Icon icon="plus" style={iconStyle} /></Button>
-        <Button onClick={() => this.setState({ importDashboardModal: true })} style={altButtonStyle}><Icon icon="upload" style={iconStyle} /></Button>
+      <span className='icon-button'>
+        <Button variant='light' onClick={() => this.setState({ newDashboardModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
+        <Button variant='light' onClick={() => this.setState({ importDashboardModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle} /></Button>
+      </span>
       </h2>
       <Table data={this.state.dashboards}>
         <TableColumn title='Name' dataKey='name' link='/dashboards/' linkKey='id' />
@@ -904,7 +899,9 @@ class Scenario extends React.Component {
 
       {/*Result table*/}
       <h2 style={tableHeadingStyle}>Results
-        <Button onClick={() => this.setState({ newResultModal: true })} style={altButtonStyle}><Icon icon="plus" style={iconStyle} /></Button>
+      <span className='icon-button'>
+        <Button variant='light' onClick={() => this.setState({ newResultModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
+      </span>
       </h2>
       {resulttable}
       <NewResultDialog show={this.state.newResultModal} onClose={data => this.closeNewResultModal(data)} />
@@ -931,12 +928,15 @@ class Scenario extends React.Component {
             type="text"
           />
           <InputGroup.Append>
+          <span className='icon-button'>
             <Button
+              variant='light'
               type="submit"
               style={altButtonStyle}
               onClick={() => this.addUser()}>
-              <Icon icon="plus" style={iconStyle} />
+              <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 00477d3..5c8ca13 100644
--- a/src/scenario/scenarios.js
+++ b/src/scenario/scenarios.js
@@ -237,12 +237,9 @@ class Scenarios extends Component {
   render() {
     const buttonStyle = {
       marginLeft: '10px',
-      backgroundColor: '#ffffff',
-      borderColor: '#ffffff'
     };
 
     const iconStyle = {
-      color: '#527984',
       height: '30px',
       width: '30px'
     }
@@ -250,8 +247,10 @@ class Scenarios extends Component {
     return (
       <div className='section'>
         <h1>Scenarios
-          <Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" style={iconStyle} /></Button>
-          <Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" style={iconStyle} /></Button>
+        <span className='icon-button'>
+          <Button variant='light' onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle} /></Button>
+          <Button variant='light' onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle} /></Button>
+        </span>
         </h1>
 
         <Table data={this.state.scenarios}>
diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js
index 10980ae..e882cb2 100644
--- a/src/signal/edit-signal-mapping.js
+++ b/src/signal/edit-signal-mapping.js
@@ -177,8 +177,6 @@ class EditSignalMapping extends React.Component {
 
       const buttonStyle = {
         marginLeft: '10px',
-        backgroundColor: '#527984', 
-        borderColor: '#527984'
       };
 
       return(
@@ -204,16 +202,16 @@ class EditSignalMapping extends React.Component {
                   <TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
               </Table>
 
-              <div style={{ float: 'right' }}>
-                <Button key={50} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
+              <div className='solid-button' style={{ float: 'right' }}>
+                <Button variant='secondary' key={50} 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>
diff --git a/src/styles/app.css b/src/styles/app.css
index cc09d33..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;
@@ -389,7 +451,3 @@ body {
 .badge-outdated {
   opacity: 0.4;
 }
-
-a:link, a:active, a:visited , a:hover {
-  color: #047cab  ;
-}
diff --git a/src/user/login-form.js b/src/user/login-form.js
index e828de3..08c09df 100644
--- a/src/user/login-form.js
+++ b/src/user/login-form.js
@@ -91,8 +91,10 @@ class LoginForm extends Component {
 
         <FormGroup style={{paddingTop: 15, paddingBottom: 5}}>
           <Col>
-            <Button style={{width: 90, backgroundColor: '#527984', borderColor: '#527984'}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
-            <Button variant="link" size="sm" style={{marginLeft: 85, color: '#047cab'}} onClick={() => this.openRecoverPassword()}>Forgot your password?</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 fc82d49..007602c 100644
--- a/src/user/user.js
+++ b/src/user/user.js
@@ -112,15 +112,6 @@ class User extends Component {
 
 
   render() {
-    const iconStyle = {
-      color: '#527984',
-    }
-
-    const buttonStyle = {
-      margin: '10px',  
-      borderColor: '#ffffff',
-      backgroundColor: '#ffffff'
-    }
 
     return (
       <div>
@@ -140,7 +131,9 @@ class User extends Component {
                 <div> {this.state.currentUser.username}</div>
                 <div>{this.state.currentUser.mail}</div>
                 <div>{this.state.currentUser.role}</div>
-                <Button size='lg' style={buttonStyle} onClick={() => this.setState({ editModal: true })}><Icon size='lg' style={iconStyle} icon='edit' /> </Button>
+                <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>
 
diff --git a/src/user/users.js b/src/user/users.js
index 807bed4..a9b84dc 100644
--- a/src/user/users.js
+++ b/src/user/users.js
@@ -132,12 +132,9 @@ class Users extends Component {
 
     const buttonStyle = {
       marginLeft: '10px',
-      backgroundColor: '#ffffff',
-      borderColor: '#ffffff'
     }
 
     const iconStyle = {
-      color: '#527984',
       height: '30px',
       width: '30px'
     }
@@ -145,7 +142,9 @@ class Users extends Component {
     return (
       <div>
         <h1>Users
-        <Button style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' style={iconStyle} /></Button>
+        <span className='icon-button'>
+        <Button variant='light' style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' classname='icon-color' style={iconStyle} /></Button>
+        </span>
         </h1>
 
         <Table data={this.state.users}>
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 93653fb..6ef3fcd 100644
--- a/src/widget/edit-widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget/edit-widget-color-zones-control.js
@@ -178,12 +178,9 @@ class EditWidgetColorZonesControl extends React.Component {
     const buttonStyle = {
       marginBottom: '10px', 
       marginLeft: '120px',
-      borderColor: '#ffffff',
-      backgroundColor: '#ffffff'
     };
 
     const iconStyle = {
-      color: '#527984',
       height: '25px', 
       width : '25px'
     }
@@ -204,8 +201,9 @@ class EditWidgetColorZonesControl extends React.Component {
     
     return <FormGroup>
       <FormLabel>Color zones</FormLabel>
-      <Button  onClick={this.addZone} style={buttonStyle} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" style={iconStyle} /></Button>
-
+      <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) => {
@@ -255,7 +253,9 @@ class EditWidgetColorZonesControl extends React.Component {
           </tr>
         </tbody>
       </Table>
-      <Button  onClick={this.removeZones} style={{borderColor: '#ffffff', backgroundColor: '#ffffff'}} ><Icon style={iconStyle} 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 e2aa402..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: '#527984', borderColor: '#527984'}}>
+          <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 4483f1b..ee48d37 100644
--- a/src/widget/widget-toolbox.js
+++ b/src/widget/widget-toolbox.js
@@ -96,7 +96,6 @@ class WidgetToolbox extends React.Component {
     const disableDecrease = this.disableDecrease();
     // Only one topology widget at the time is supported
     const iconStyle = {
-      color: '#527984',
       height: '25px',
       width : '25px'
     }
@@ -104,15 +103,6 @@ class WidgetToolbox extends React.Component {
     const buttonStyle = {
       marginRight: '3px', 
       height: '40px', 
-      borderColor: '#527984',
-      backgroundColor: '#527984'
-    }
-
-    const altButtonStyle = {
-      marginRight: '3px',
-      height: '40px',
-      borderColor: '#ffffff',
-      backgroundColor: '#ffffff'
     }
 
     const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
@@ -124,15 +114,15 @@ 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 key={2} style={buttonStyle} onClick={() => this.showWidgets('cosmetic')}  >
+        <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 key={3} style={buttonStyle} onClick={() => this.showWidgets('displaying')}  >
+        <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 key={2} style={buttonStyle} onClick={() => this.showWidgets('manipulation')}  >
+        <Button key={2} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('manipulation')}  >
           <Icon icon={manipulationIcon}/> Manipulation Widgets</Button>
       </OverlayTrigger>
         </div>
@@ -142,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={altButtonStyle} 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={altButtonStyle} 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>
 
@@ -157,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'/>