diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js
index a4499e5..8bc39a1 100644
--- a/src/common/dialogs/delete-dialog.js
+++ b/src/common/dialogs/delete-dialog.js
@@ -16,8 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Button, Modal, FormLabel } from 'react-bootstrap';
-import {Collapse} from 'react-collapse';
+import { Button, Modal, Form } from 'react-bootstrap';
 
 class DeleteDialog extends React.Component {
     onModalKeyPress = (event) => {
@@ -37,7 +36,7 @@ class DeleteDialog extends React.Component {
             <Modal.Body>
                 Are you sure you want to delete the {this.props.title} <strong>'{this.props.name}'</strong>?
                 <Collapse isOpened={this.props.managedexternally} >
-                    <FormLabel size="sm">The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore</FormLabel>
+                    <Form.Label size="sm">The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore</Form.Label>
                 </Collapse>
             </Modal.Body>
 
diff --git a/src/common/editable-header.js b/src/common/editable-header.js
index a10b48d..03a666a 100644
--- a/src/common/editable-header.js
+++ b/src/common/editable-header.js
@@ -17,7 +17,7 @@
 // TODO remove this file (not used!)
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormControl, Button } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import Icon from './icon';
 
 class EditableHeader extends React.Component {
@@ -79,12 +79,25 @@ class EditableHeader extends React.Component {
             };
 
             return <div>
-                <form style={wrapperStyle}>
-                    <FormControl type='text' size='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
-                </form>
+                <Form style={wrapperStyle}>
+                    <Form.Control
+                      type='text'
+                      size='large'
+                      value={this.state.title}
+                      onChange={this.onChange}
+                      style={editStyle}
+                      autoFocus
+                    />
+                </Form>
 
-                <Button onClick={this.save}><Icon icon='check' style={iconStyle} /></Button>
-                <Button onClick={this.cancel}><Icon icon='times' style={iconStyle} /></Button>
+                <Button
+                  onClick={this.save}>
+                    <Icon icon='check' style={iconStyle} />
+                </Button>
+                <Button
+                  onClick={this.cancel}>
+                    <Icon icon='times' style={iconStyle} />
+                </Button>
             </div>;
         }
 
diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 2277331..37a2a3e 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -16,8 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, FormLabel} from 'react-bootstrap';
-import  { Multiselect } from 'multiselect-react-dropdown'
+import { Form } from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
@@ -141,29 +140,29 @@ class EditConfigDialog extends React.Component {
         onReset={() => this.resetState()}
         valid={this.valid}
       >
-        <form>
-          <FormGroup controlId="name">
-            <FormLabel column={false}>Name</FormLabel>
-            <FormControl
+        <Form>
+          <Form.Group controlId="name">
+            <Form.Label column={false}>Name</Form.Label>
+            <Form.Control
               type="text"
               placeholder={this.props.config.name}
               value={this.state.name}
               onChange={(e) => this.handleChange(e)}
             />
-            <FormControl.Feedback />
-          </FormGroup>
+            <Form.Control.Feedback />
+          </Form.Group>
 
-          <FormGroup controlId="icID">
-            <FormLabel column={false}> Infrastructure Component </FormLabel>
-            <FormControl
+          <Form.Group controlId="icID">
+            <Form.Label column={false}> Infrastructure Component </Form.Label>
+            <Form.Control
               as="select"
               placeholder='Select infrastructure component'
               value={this.state.icID}
               onChange={(e) => this.handleChange(e)}
             >
               {ICOptions}
-            </FormControl>
-          </FormGroup>
+            </Form.Control>
+          </Form.Group>
 
           <Multiselect
             options={configFileOptions}
@@ -175,14 +174,14 @@ class EditConfigDialog extends React.Component {
             placeholder={'Select file(s)...'}
           />
 
-          <FormGroup controlId='startParameters'>
-            <FormLabel> Start Parameters </FormLabel>
+          <Form.Group controlId='startParameters'>
+            <Form.Label> Start Parameters </Form.Label>
             <ParametersEditor
               content={this.state.startParameters}
               onChange={(data) => this.handleParameterChange(data)}
             />
-          </FormGroup>
-        </form>
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/componentconfig/import-config.js b/src/componentconfig/import-config.js
index b11a69e..2b69d9a 100644
--- a/src/componentconfig/import-config.js
+++ b/src/componentconfig/import-config.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 
@@ -102,15 +102,15 @@ class ImportConfigDialog extends React.Component {
         onClose={(c) => this.onClose(c)}
         onReset={() => this.resetState()}
         valid={this.valid} >
-        <form>
-          <FormGroup controlId='file'>
-            <FormLabel>Component Configuration File</FormLabel>
-            <FormControl type='file' onChange={this.loadFile} />
-          </FormGroup>
+        <Form>
+          <Form.Group controlId='file'>
+            <Form.Label>Component Configuration File</Form.Label>
+            <Form.Control type='file' onChange={this.loadFile} />
+          </Form.Group>
 
-          <FormGroup controlId="name" >
-            <FormLabel>Name</FormLabel>
-            <FormControl
+          <Form.Group controlId="name" >
+            <Form.Label>Name</Form.Label>
+            <Form.Control
               readOnly={!this.imported}
               isValid={this.validateForm('name')}
               type="text"
@@ -118,9 +118,9 @@ class ImportConfigDialog extends React.Component {
               value={this.state.name}
               onChange={(e) => this.handleChange(e)}
             />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
+            <Form.Control.Feedback />
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/dashboard/edit-dashboard.js b/src/dashboard/edit-dashboard.js
index 2df61bf..42b5230 100644
--- a/src/dashboard/edit-dashboard.js
+++ b/src/dashboard/edit-dashboard.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 
@@ -71,14 +71,21 @@ class EditDashboardDialog extends React.Component {
 
   render() {
     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" valid={this.validateForm('name')}>
-            <FormLabel>Name</FormLabel>
-            <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
+      <Dialog
+        show={this.props.show}
+        title="Edit Dashboard"
+        buttonTitle="Save"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.valid}
+      >
+        <Form>
+          <Form.Group controlId="name" valid={this.validateForm('name')}>
+            <Form.Label>Name</Form.Label>
+            <Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/dashboard/import-dashboard.js b/src/dashboard/import-dashboard.js
index 47e5216..519a552 100644
--- a/src/dashboard/import-dashboard.js
+++ b/src/dashboard/import-dashboard.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 
@@ -100,15 +100,15 @@ class ImportDashboardDialog extends React.Component {
         onClose={(c) => this.onClose(c)}
         onReset={() => this.resetState()}
         valid={this.valid}>
-        <form>
-          <FormGroup controlId="file">
-            <FormLabel>Dashboard File</FormLabel>
-            <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
-          </FormGroup>
+        <Form>
+          <Form.Group controlId="file">
+            <Form.Label>Dashboard File</Form.Label>
+            <Form.Control type="file" onChange={(e) => this.loadFile(e.target.files)} />
+          </Form.Group>
 
-          <FormGroup controlId="name" >
-            <FormLabel>Name</FormLabel>
-            <FormControl
+          <Form.Group controlId="name" >
+            <Form.Label>Name</Form.Label>
+            <Form.Control
               readOnly={!this.imported}
               isValid={this.validateForm('name')}
               type="text"
@@ -116,9 +116,9 @@ class ImportDashboardDialog extends React.Component {
               value={this.state.name}
               onChange={(e) => this.handleChange(e)}
             />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
+            <Form.Control.Feedback />
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js
index a023ba4..5cc8a3e 100644
--- a/src/dashboard/new-dashboard.js
+++ b/src/dashboard/new-dashboard.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 
@@ -67,14 +67,21 @@ class NewDashboardDialog extends React.Component {
 
   render() {
     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" valid={this.validateForm('name')}>
-            <FormLabel>Name</FormLabel>
-            <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
+      <Dialog
+        show={this.props.show}
+        title="New Dashboard"
+        buttonTitle="Add"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.valid}
+      >
+        <Form>
+          <Form.Group controlId="name" valid={this.validateForm('name')}>
+            <Form.Label>Name</Form.Label>
+            <Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/file/edit-file-content.js b/src/file/edit-file-content.js
index 34a142e..7f9534d 100644
--- a/src/file/edit-file-content.js
+++ b/src/file/edit-file-content.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, Button, Col} from 'react-bootstrap';
+import { Form, Button, Col } from 'react-bootstrap';
 import AppDispatcher from "../common/app-dispatcher";
 import Dialog from '../common/dialogs/dialog';
 
@@ -28,7 +28,6 @@ class EditFileContent extends React.Component {
 
     this.state = {
       uploadFile: null,
-      
     };
   }
 
@@ -50,31 +49,33 @@ class EditFileContent extends React.Component {
     this.setState({ uploadFile: null });
   };
 
-
   onClose = () => {
         this.props.onClose();
   };
 
-
-  
-
   render() {
-    return <Dialog show={this.props.show} title='Edit File Content' buttonTitle='Close' onClose={() => this.onClose()} blendOutCancel = {true} valid={true}>
-      <FormGroup as={Col} >
-        <FormControl
+    return <Dialog
+      show={this.props.show}
+      title='Edit File Content'
+      buttonTitle='Close'
+      onClose={() => this.onClose()}
+      blendOutCancel = {true}
+      valid={true}
+    >
+      <Form.Group as={Col} >
+        <Form.Control
           disabled={false}
           type='file'
           onChange={(event) => this.selectUploadFile(event)} />
-      </FormGroup>
+      </Form.Group>
 
-      <FormGroup as={Col} >
+      <Form.Group as={Col} >
         <Button
           disabled={this.state.uploadFile === null}
           onClick={() => this.startEditContent()}>
           Upload
             </Button>
-      </FormGroup>
-
+      </Form.Group>
     </Dialog>;
   }
 }
diff --git a/src/file/edit-files.js b/src/file/edit-files.js
index 41d34cf..4058888 100644
--- a/src/file/edit-files.js
+++ b/src/file/edit-files.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, Button, Col, ProgressBar} from 'react-bootstrap';
+import { Form, Button, Col, ProgressBar } from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 import AppDispatcher from "../common/app-dispatcher";
 import Table from "../common/table";
@@ -107,76 +107,81 @@ class EditFilesDialog extends React.Component {
     };
 
     return (
-      <Dialog show={this.props.show} title="Edit Files of scenario" buttonTitle="Close" onClose={() => this.onClose()} blendOutCancel = {true} valid={true} size = 'lg'>
-        <div>
-
-          <Table data={this.props.files}>
-            {this.state.currentUser.role === "Admin" ?
-              <TableColumn
-                title='ID'
-                dataKey='id'
-              />
-              : <></>
-            }
+      <Dialog
+        show={this.props.show}
+        title="Edit Files of Scenario"
+        buttonTitle="Close"
+        onClose={() => this.onClose()}
+        blendOutCancel = {true}
+        valid={true}
+      >
+        <Table data={this.props.files}>
+          {this.state.currentUser.role === "Admin" ?
             <TableColumn
-              title='Name'
-              dataKey='name'
+              title='ID'
+              dataKey='id'
             />
-            <TableColumn
-              title='Size (bytes)'
-              dataKey='size'
-            />
-            <TableColumn
-              title='Type'
-              dataKey='type'
-            />
-            <TableColumn
-              title=''
-              align='right'
-              deleteButton
-              onDelete={(index) => this.deleteFile(index)}
-              editButton
-              onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })}
-            />
-          </Table>
-
-          <FormGroup as={Col} >
-            <FormControl
-              disabled={this.props.disabled}
-              type='file'
-              onChange={(event) => this.selectUploadFile(event)}
-            />
-          </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} >
-            <ProgressBar
-              striped={true}
-              animated={true}
-              now={this.state.uploadProgress}
-              label={this.state.uploadProgress + '%'}
-              style={progressBarStyle}
-            />
-          </FormGroup>
-          <div style={{ clear: 'both' }} />
-
-          <EditFileContent
-            show={this.state.editModal}
-            onClose={(data) => this.closeEditModal(data)}
-            sessionToken={this.props.sessionToken}
-            file={this.state.modalFile}
+            : <></>
+          }
+          <TableColumn
+            title='Name'
+            dataKey='name'
           />
-         </div>
+          <TableColumn
+            title='Size (bytes)'
+            dataKey='size'
+          />
+          <TableColumn
+            title='Type'
+            dataKey='type'
+          />
+          <TableColumn
+            title=''
+            align='right'
+            deleteButton
+            onDelete={(index) => this.deleteFile(index)}
+            editButton
+            onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })}
+          />
+        </Table>
+
+        <Form.Group as={Col} >
+          <Form.Control
+            disabled={this.props.disabled}
+            type='file'
+            onChange={(event) => this.selectUploadFile(event)}
+          />
+        </Form.Group>
+
+        <Form.Group as={Col} >
+          <span className='solid-button'>
+            <Button
+              variant='secondary'
+              disabled={this.state.uploadFile === null}
+              onClick={() => this.startFileUpload()}>
+              Upload
+            </Button>
+          </span>
+        </Form.Group>
+
+        <Form.Group as={Col} >
+          <ProgressBar
+            striped={true}
+            animated={true}
+            now={this.state.uploadProgress}
+            label={this.state.uploadProgress + '%'}
+            style={progressBarStyle}
+          />
+        </Form.Group>
+
+        <div style={{ clear: 'both' }} />
+
+        <EditFileContent
+          show={this.state.editModal}
+          onClose={(data) => this.closeEditModal(data)}
+          sessionToken={this.props.sessionToken}
+          file={this.state.modalFile}
+        />
       </Dialog>
     );
   }
diff --git a/src/file/select-file.js b/src/file/select-file.js
index bf7469a..42c9c54 100644
--- a/src/file/select-file.js
+++ b/src/file/select-file.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel, Button, Col, ProgressBar } from 'react-bootstrap';
+import { Form, Button, Col, ProgressBar } from 'react-bootstrap';
 import AppDispatcher from '../common/app-dispatcher';
 
 class SelectFile extends React.Component {
@@ -88,39 +88,39 @@ class SelectFile extends React.Component {
       };
 
       return <div>
-          <FormGroup>
-              <FormLabel sm={3} md={2}>
+          <Form.Group>
+              <Form.Label sm={3} md={2}>
                   {this.props.name}
-              </FormLabel>
+              </For.m.Label>
 
-              <FormGroup as={Col} sm={9} md={10}>
-                  <FormControl
+              <Form.Group as={Col} sm={9} md={10}>
+                  <Form.Control
                     as="select"
                     value={this.props.value}
                     disabled={this.props.disabled}
                     placeholder='Select file'
                     onChange={(event) => this.props.onChange(event)}>
                       {fileOptions}
-                  </FormControl>
-              </FormGroup>
-          </FormGroup>
+                  </Form.Control>
+              </Form.Group>
+          </Form.Group>
 
-          <FormGroup as={Col} >
-                  <FormControl
+          <Form.Group as={Col} >
+                  <Form.Control
                     disabled={this.props.disabled}
                     type='file'
                     onChange={(event) => this.selectUploadFile(event)} />
-          </FormGroup>
+          </Form.Group>
 
-          <FormGroup as={Col} >
+          <Form.Group as={Col} >
                   <Button
                     disabled={this.state.uploadFile === null}
                     onClick={() => this.startFileUpload()}>
                     Upload
                   </Button>
-          </FormGroup>
+          </Form.Group>
 
-        <FormGroup as={Col} >
+        <Form.Group as={Col} >
           <ProgressBar
             striped={true}
             animated={true}
@@ -128,7 +128,7 @@ class SelectFile extends React.Component {
             label={this.state.uploadProgress + '%'}
             style={progressBarStyle}
           />
-        </FormGroup>
+        </Form.Group>
 
       </div>;
   }
diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index 91b9de4..0782b5b 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import _ from 'lodash';
 import {Collapse} from 'react-collapse';
 import Dialog from '../common/dialogs/dialog';
@@ -150,71 +150,70 @@ class EditICDialog extends React.Component {
         onClose={(c) => this.onClose(c)}
         onReset={() => this.resetState()}
         valid={this.valid}
-        size='lg'
       >
-        <form>
-          <FormLabel column={false}>UUID: {this.props.ic.uuid}</FormLabel>
-          <FormGroup controlId="name">
-            <FormLabel column={false}>Name</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="category">
-            <FormLabel column={false}>Category</FormLabel>
-            <FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
+        <Form>
+          <Form.Label column={false}>UUID: {this.props.ic.uuid}</Form.Label>
+          <Form.Group controlId="name">
+            <Form.Label column={false}>Name</Form.Label>
+            <Form.Control type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="category">
+            <Form.Label column={false}>Category</Form.Label>
+            <Form.Control as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
               <option>simulator</option>
               <option>service</option>
               <option>gateway</option>
               <option>equipment</option>
               <option>manager</option>
-            </FormControl>
-          </FormGroup>
-          <FormGroup controlId="type">
-            <FormLabel column={false}>Type</FormLabel>
-            <FormControl as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
+            </Form.Control>
+          </Form.Group>
+          <Form.Group controlId="type">
+            <Form.Label column={false}>Type</Form.Label>
+            <Form.Control as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
               <option default>Select type</option>
               {typeOptions.map((name,index) => (
                 <option key={index}>{name}</option>
               ))}
-            </FormControl>
-          </FormGroup>
-          <FormGroup controlId="websocketurl">
-            <FormLabel column={false}>Websocket URL</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.websocketurl} value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="apiurl">
-            <FormLabel column={false}>API URL</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.apiurl} value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="location">
-            <FormLabel column={false}>Location</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.location} value={this.state.location || '' } onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="description">
-            <FormLabel column={false}>Description</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.description} value={this.state.description || '' } onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId='startParameterSchema'>
-            <FormLabel column={false}>Start parameter schema of IC</FormLabel>
+            </Form.Control>
+          </Form.Group>
+          <Form.Group controlId="websocketurl">
+            <Form.Label column={false}>Websocket URL</Form.Label>
+            <Form.Control type="text" placeholder={this.props.ic.websocketurl} value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="apiurl">
+            <Form.Label column={false}>API URL</Form.Label>
+            <Form.Control type="text" placeholder={this.props.ic.apiurl} value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="location">
+            <Form.Label column={false}>Location</Form.Label>
+            <Form.Control type="text" placeholder={this.props.ic.location} value={this.state.location || '' } onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="description">
+            <Form.Label column={false}>Description</Form.Label>
+            <Form.Control type="text" placeholder={this.props.ic.description} value={this.state.description || '' } onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId='startParameterSchema'>
+            <Form.Label column={false}>Start parameter schema of IC</Form.Label>
             <ParametersEditor
               content={this.state.startParameterSchema}
               disabled={false}
               onChange={(data) => this.handleStartParameterSchemaChange(data)}
             />
-          </FormGroup>
-          <FormGroup controlId='properties'>
-            <FormLabel column={false}>Properties</FormLabel>
+          </Form.Group>
+          <Form.Group controlId='properties'>
+            <Form.Label column={false}>Properties</Form.Label>
             <ParametersEditor
               content={this.state.properties}
               disabled={true}
               onChange={(data) => this.handlePropertiesChange(data)}
             />
-          </FormGroup>
-        </form>
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js
index c5358c5..df4c17f 100644
--- a/src/ic/ic-action.js
+++ b/src/ic/ic-action.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Form, SplitButton, Dropdown, FormControl } from 'react-bootstrap';
+import { Form, SplitButton, Dropdown } from 'react-bootstrap';
 import AppDispatcher from "../common/app-dispatcher";
 import NotificationsFactory from "../common/data-managers/notifications-factory";
 import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
@@ -228,10 +228,11 @@ class ICAction extends React.Component {
 
     return <div>
             <Form inline>
-              <FormControl
+              <Form.Control
                 type="datetime-local"
                 value={time}
-                onChange={this.setTimeForAction} />
+                onChange={this.setTimeForAction}
+              />
               <SplitButton
                   style={splitButtonStyle}
                   title={this.state.selectedAction != null ? this.state.selectedAction.title : ''}
diff --git a/src/ic/import-ic.js b/src/ic/import-ic.js
index a165af6..51a992b 100644
--- a/src/ic/import-ic.js
+++ b/src/ic/import-ic.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import _ from 'lodash';
 
 import Dialog from '../common/dialogs/dialog';
@@ -111,29 +111,36 @@ class ImportICDialog extends React.Component {
 
   render() {
     return (
-      <Dialog show={this.props.show} title="Import Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-        <form>
-          <FormGroup controlId="file">
-            <FormLabel>Infrastructure Component File</FormLabel>
-            <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
-          </FormGroup>
+      <Dialog
+        show={this.props.show}
+        title="Import Infrastructure Component"
+        buttonTitle="Add"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.valid}
+      >
+        <Form>
+          <Form.Group controlId="file">
+            <Form.Label>Infrastructure Component File</Form.Label>
+            <Form.Control type="file" onChange={(e) => this.loadFile(e.target.files)} />
+          </Form.Group>
 
-          <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 />
-          </FormGroup>
-          <FormGroup controlId="websocketurl">
-            <FormLabel>Websocket URL</FormLabel>
-            <FormControl type="text" placeholder="Enter websocketurl" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <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 />
-          </FormGroup>
-        </form>
+          <Form.Group controlId="name" valid={this.validateForm('name')}>
+            <Form.Label>Name</Form.Label>
+            <Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="websocketurl">
+            <Form.Label>Websocket URL</Form.Label>
+            <Form.Control type="text" placeholder="Enter websocketurl" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="uuid" valid={this.validateForm('uuid')}>
+            <Form.Label>UUID</Form.Label>
+            <Form.Control type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js
index 73a28eb..3fe9fb8 100644
--- a/src/ic/new-ic.js
+++ b/src/ic/new-ic.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel, FormCheck, OverlayTrigger, Tooltip} from 'react-bootstrap';
+import { Form, OverlayTrigger, Tooltip} from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
@@ -191,101 +191,108 @@ class NewICDialog extends React.Component {
     }
 
     return (
-      <Dialog show={this.props.show} title="New Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.validateForm()}>
-        <form>
+      <Dialog
+        show={this.props.show}
+        title="New Infrastructure Component"
+        buttonTitle="Add"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.validateForm()}
+      >
+        <Form>
           {this.props.managers.length > 0 ?
             <>
-              <FormGroup controlId="managedexternally">
+              <Form.Group controlId="managedexternally">
                 <OverlayTrigger key="-1" placement={'left'} overlay={<Tooltip id={`tooltip-${"me"}`}>An externally managed component is created and managed by an IC manager via AMQP</Tooltip>} >
-                  <FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
-                  </FormCheck>
+                  <Form.Check type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
+                  </Form.Check>
                 </OverlayTrigger>
-              </FormGroup>
+              </Form.Group>
               {this.state.managedexternally === true ?
-                <FormGroup controlId="manager" valid={this.validateForm('manager')}>
+                <Form.Group controlId="manager" valid={this.validateForm('manager')}>
                   <OverlayTrigger key="0" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
-                    <FormLabel>Manager to create new IC *</FormLabel>
+                    <Form.Label>Manager to create new IC *</Form.Label>
                   </OverlayTrigger>
-                  <FormControl as="select" value={this.state.manager} onChange={(e) => this.handleChange(e)}>
+                  <Form.Control as="select" value={this.state.manager} onChange={(e) => this.handleChange(e)}>
                     {managerOptions}
-                  </FormControl>
-                </FormGroup>
+                  </Form.Control>
+                </Form.Group>
                 : <div/>
               }
             </>
             : <div/>
           }
-          <FormGroup controlId="name" valid={this.validateForm('name')}>
+          <Form.Group controlId="name" valid={this.validateForm('name')}>
             <OverlayTrigger key="1" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
-              <FormLabel>Name *</FormLabel>
+              <Form.Label>Name *</Form.Label>
             </OverlayTrigger>
-              <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-              <FormControl.Feedback />
-          </FormGroup>
+              <Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+              <Form.Control.Feedback />
+          </Form.Group>
           {this.state.managedexternally === false ?
-            <FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
-              <FormLabel>UUID</FormLabel>
-              <FormControl type="text" placeholder="Enter uuid" value={this.state.uuid}
+            <Form.Group controlId="uuid" valid={this.validateForm('uuid')}>
+              <Form.Label>UUID</Form.Label>
+              <Form.Control type="text" placeholder="Enter uuid" value={this.state.uuid}
                            onChange={(e) => this.handleChange(e)}/>
-              <FormControl.Feedback/>
-            </FormGroup>
+              <Form.Control.Feedback/>
+            </Form.Group>
             : <div/>
           }
-          <FormGroup controlId="location">
-            <FormLabel>Location</FormLabel>
-            <FormControl type="text" placeholder="Enter Location" value={this.state.location} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="description">
-            <FormLabel>Description</FormLabel>
-            <FormControl type="text" placeholder="Enter Description" value={this.state.description} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="category" valid={this.validateForm('category')}>
+          <Form.Group controlId="location">
+            <Form.Label>Location</Form.Label>
+            <Form.Control type="text" placeholder="Enter Location" value={this.state.location} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="description">
+            <Form.Label>Description</Form.Label>
+            <Form.Control type="text" placeholder="Enter Description" value={this.state.description} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="category" valid={this.validateForm('category')}>
             <OverlayTrigger key="2" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
-              <FormLabel>Category of component *</FormLabel>
+              <Form.Label>Category of component *</Form.Label>
             </OverlayTrigger>
-            <FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
+            <Form.Control as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
               <option default>Select category</option>
               <option value="simulator">Simulator</option>
               <option value="service">Service</option>
               <option value="gateway">Gateway</option>
               <option value="equipment">Equipment</option>
               <option value="manager">Manager</option>
-            </FormControl>
-          </FormGroup>
-          <FormGroup controlId="type" valid={this.validateForm('type')}>
+            </Form.Control>
+          </Form.Group>
+          <Form.Group controlId="type" valid={this.validateForm('type')}>
             <OverlayTrigger key="3" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
-              <FormLabel>Type of component *</FormLabel>
+              <Form.Label>Type of component *</Form.Label>
             </OverlayTrigger>
-            <FormControl as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
+            <Form.Control as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
               <option default>Select type</option>
               {typeOptions.map((name,index) => (
                 <option key={index}>{name}</option>
               ))}
-            </FormControl>
-          </FormGroup>
-          <FormGroup controlId="websocketurl">
-            <FormLabel>Websocket URL</FormLabel>
-            <FormControl type="text" placeholder="https://" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="apiurl">
-            <FormLabel>API URL</FormLabel>
-            <FormControl type="text" placeholder="https://" value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
+            </Form.Control>
+          </Form.Group>
+          <Form.Group controlId="websocketurl">
+            <Form.Label>Websocket URL</Form.Label>
+            <Form.Control type="text" placeholder="https://" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+          <Form.Group controlId="apiurl">
+            <Form.Label>API URL</Form.Label>
+            <Form.Control type="text" placeholder="https://" value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
           {this.state.managedexternally === true ?
-            <FormGroup controlId='properties'>
-              <FormLabel> Properties </FormLabel>
+            <Form.Group controlId='properties'>
+              <Form.Label> Properties </Form.Label>
               <ParametersEditor
                 content={this.state.properties}
                 onChange={(data) => this.handlePropertiesChange(data)}
               />
-            </FormGroup>
+            </Form.Group>
             : <div/>
           }
-        </form>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/result/edit-result.js b/src/result/edit-result.js
index 024a410..2b8b13f 100644
--- a/src/result/edit-result.js
+++ b/src/result/edit-result.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel, Col, Row, Button, ProgressBar } from 'react-bootstrap';
+import { Form, Col, Row, Button, ProgressBar } from 'react-bootstrap';
 import AppDispatcher from "../common/app-dispatcher";
 import FileStore from "../file/file-store"
 
@@ -131,78 +131,90 @@ class EditResultDialog extends React.Component {
   }
 
   render() {
-
-    return <Dialog show={this.props.show}
+    return <Dialog
+      show={this.props.show}
       title={'Edit Result No. ' + this.state.id}
       buttonTitle='Close'
       onClose={() => this.onClose()}
       blendOutCancel={true}
       valid={true}
-      size='lg'>
+    >
+      <Form.Group as={Col} controlId='description'>
+        <Row style={{ float: 'center' }} >
+          <Col xs lg="2">
+            <Form.Label>Description</Form.Label>
+          </Col>
+          <Col xs lg="4">
+            <Form.Control
+              type='text'
+              placeholder={this.state.description}
+              value={this.state.description}
+              onChange={this.handleChange}
+            />
+            <Form.Control.Feedback />
+          </Col>
+          <Col xs lg="2">
+            <Button
+              type="submit"
+              onClick={() => this.submitDescription()}>
+              Save
+          </Button>
+          </Col>
+        </Row>
+      </Form.Group>
 
+      <Table data={this.state.files}>
+        <TableColumn
+          title='ID'
+          dataKey='id'
+        />
+        <TableColumn
+          title='Name'
+          dataKey='name'
+        />
+        <TableColumn
+          title='Size (bytes)'
+          dataKey='size'
+        />
+        <TableColumn
+          title='Type'
+          dataKey='type'
+        />
+        <TableColumn
+          title=''
+          deleteButton
+          onDelete={(index) => this.deleteFile(index)}
+        />
+      </Table>
 
-      <div>
-        <FormGroup as={Col} controlId='description'>
-          <Row style={{ float: 'center' }} >
-            <Col xs lg="2">
-              <FormLabel>Description</FormLabel>
-            </Col>
-            <Col xs lg="4">
-              <FormControl type='text' placeholder={this.state.description} value={this.state.description} onChange={this.handleChange} />
-              <FormControl.Feedback />
-            </Col>
-            <Col xs lg="2">
-              <Button
-                type="submit"
-                onClick={() => this.submitDescription()}>
-                Save
-            </Button>
-            </Col>
-          </Row>
-        </FormGroup>
-
-        <Table data={this.state.files}>
-          <TableColumn title='ID' dataKey='id' />
-          <TableColumn title='Name' dataKey='name' />
-          <TableColumn title='Size (bytes)' dataKey='size' />
-          <TableColumn title='Type' dataKey='type' />
-          <TableColumn
-            title=''
-            deleteButton
-            onDelete={(index) => this.deleteFile(index)}
-          />
-        </Table>
-
-        <div style={{ float: 'center' }}>
-          <h5>Add result file</h5>
-          <Row>
-            <Col xs lg="4">
-              <FormControl type='file' onChange={(event) => this.selectUploadFile(event)} />
-            </Col>
-            <Col xs lg="2">
-              <Button
-                disabled={this.state.uploadFile === null}
-                onClick={() => this.startFileUpload()}>
-                Upload
-            </Button>
-            </Col>
-          </Row>
-        </div>
-
-        <br></br>
-
-        <FormGroup as={Col} >
-          <ProgressBar
-            striped={true}
-            animated={true}
-            now={this.state.uploadProgress}
-            label={this.state.uploadProgress + '%'}
-          />
-        </FormGroup>
-
+      <div style={{ float: 'center' }}>
+        <h5>Add result file</h5>
+        <Row>
+          <Col xs lg="4">
+            <Form.Control type='file' onChange={(event) => this.selectUploadFile(event)} />
+          </Col>
+          <Col xs lg="2">
+            <Button
+              disabled={this.state.uploadFile === null}
+              onClick={() => this.startFileUpload()}>
+              Upload
+          </Button>
+          </Col>
+        </Row>
       </div>
+
+      <br />
+
+      <Form.Group as={Col} >
+        <ProgressBar
+          striped={true}
+          animated={true}
+          now={this.state.uploadProgress}
+          label={this.state.uploadProgress + '%'}
+        />
+      </Form.Group>
     </Dialog>;
   }
 }
 
-export default EditResultDialog;
\ No newline at end of file
+export default EditResultDialog;
diff --git a/src/result/new-result.js b/src/result/new-result.js
index 73d5e85..2529d02 100644
--- a/src/result/new-result.js
+++ b/src/result/new-result.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 
@@ -45,7 +45,7 @@ class NewResultDialog extends React.Component {
   }
 
   resetState() {
-    this.setState({ 
+    this.setState({
         ConfigSnapshots: '',
         Description: '',
         ResultFileIDs: [],
@@ -54,14 +54,21 @@ class NewResultDialog extends React.Component {
 
   render() {
     return (
-      <Dialog show={this.props.show} title="New Result" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={true}>
-        <form>      
-          <FormGroup controlId="Description">
-            <FormLabel>Description</FormLabel>
-            <FormControl type="text" placeholder="Enter description" value={this.state.Description} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-        </form>
+      <Dialog
+        show={this.props.show}
+        title="New Result"
+        buttonTitle="Add"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={true}
+      >
+        <Form>
+          <Form.Group controlId="Description">
+            <Form.Label>Description</Form.Label>
+            <Form.Control type="text" placeholder="Enter description" value={this.state.Description} onChange={(e) => this.handleChange(e)} />
+            <Form.Control.Feedback />
+          </Form.Group>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/result/result-configs-dialog.js b/src/result/result-configs-dialog.js
index 8dfc220..b0fcea5 100644
--- a/src/result/result-configs-dialog.js
+++ b/src/result/result-configs-dialog.js
@@ -15,6 +15,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 import React from 'react';
+import { Form } from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 import ReactJson from 'react-json-view';
 
@@ -46,16 +47,16 @@ class ResultConfigDialog extends React.Component {
         size="lg"
         blendOutCancel={true}
       >
-        <form>
-            <ReactJson
-              src={this.props.configs}
-              name={false}
-              displayDataTypes={false}
-              displayObjectSize={false}
-              enableClipboard={false}
-              collapsed={false}
-            />
-        </form>
+        <Form>
+          <ReactJson
+            src={this.props.configs}
+            name={false}
+            displayDataTypes={false}
+            displayObjectSize={false}
+            enableClipboard={false}
+            collapsed={false}
+          />
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/scenario/edit-scenario.js b/src/scenario/edit-scenario.js
index d3f90c6..19a2fb9 100644
--- a/src/scenario/edit-scenario.js
+++ b/src/scenario/edit-scenario.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
+import { Form, Col } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
@@ -76,20 +76,26 @@ class EditScenarioDialog extends React.Component {
   };
 
   render() {
-    return <Dialog show={this.props.show} title='Edit Scenario' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
-      <form>
-        <FormGroup as={Col} controlId='name'>
-          <FormLabel column={false}>Name</FormLabel>
-          <FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
-          <FormControl.Feedback />
-        </FormGroup>
-
-        <FormGroup as={Col} controlId='startParameters'>
-          <FormLabel column={false}>Start Parameters</FormLabel>
+    return <Dialog
+      show={this.props.show}
+      title='Edit Scenario'
+      buttonTitle='Save'
+      onClose={this.onClose}
+      onReset={this.resetState}
+      valid={true}
+    >
+      <Form>
+        <Form.Group as={Col} controlId='name'>
+          <Form.Label column={false}>Name</Form.Label>
+          <Form.Control type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
+          <Form.Control.Feedback />
+        </Form.Group>
 
+        <Form.Group as={Col} controlId='startParameters'>
+          <Form.Label column={false}>Start Parameters</Form.Label>
           <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
-        </FormGroup>
-      </form>
+        </Form.Group>
+      </Form>
     </Dialog>;
   }
 }
diff --git a/src/scenario/import-scenario.js b/src/scenario/import-scenario.js
index a6b9a23..f0eff99 100644
--- a/src/scenario/import-scenario.js
+++ b/src/scenario/import-scenario.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
+import { Form, Col } from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
@@ -93,26 +93,32 @@ class ImportScenarioDialog extends React.Component {
   }
 
   render() {
-    return <Dialog show={this.props.show} title="Import Scenario" buttonTitle="Import" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
-      <form>
-        <FormGroup as={Col} controlId="file">
-          <FormLabel>Scenario File</FormLabel>
-          <FormControl type="file" onChange={this.loadFile} />
-        </FormGroup>
+    return <Dialog
+      show={this.props.show}
+      title="Import Scenario"
+      buttonTitle="Import"
+      onClose={this.onClose}
+      onReset={this.resetState}
+      valid={this.valid}
+    >
+      <Form>
+        <Form.Group as={Col} controlId="file">
+          <Form.Label>Scenario File</Form.Label>
+          <Form.Control type="file" onChange={this.loadFile} />
+        </Form.Group>
 
-        <FormGroup as={Col} controlId="name">
-          <FormLabel>Name</FormLabel>
-          <FormControl readOnly={this.imported === false} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
-          <FormControl.Feedback />
-        </FormGroup>
+        <Form.Group as={Col} controlId="name">
+          <Form.Label>Name</Form.Label>
+          <Form.Control readOnly={this.imported === false} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+          <Form.Control.Feedback />
+        </Form.Group>
 
-        <FormGroup as={Col}>
-          <FormLabel>Start Parameters</FormLabel>
+        <Form.Group as={Col}>
+          <Form.Label>Start Parameters</Form.Label>
 
           <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} disabled={this.imported === false} />
-        </FormGroup>
-
-      </form>
+        </Form.Group>
+      </Form>
     </Dialog>;
   }
 }
diff --git a/src/scenario/new-scenario.js b/src/scenario/new-scenario.js
index c582a3c..7535994 100644
--- a/src/scenario/new-scenario.js
+++ b/src/scenario/new-scenario.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
+import { Form, Col} from 'react-bootstrap';
 
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
@@ -70,20 +70,26 @@ class NewScenarioDialog extends React.Component {
   }
 
   render() {
-    return <Dialog show={this.props.show} title="New Scenario" buttonTitle="Add" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
-      <form>
-        <FormGroup as={Col} controlId="name">
-          <FormLabel>Name</FormLabel>
-          <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
-          <FormControl.Feedback />
-        </FormGroup>
+    return <Dialog
+      show={this.props.show}
+      title="New Scenario"
+      buttonTitle="Add"
+      onClose={this.onClose}
+      onReset={this.resetState}
+      valid={this.valid}>
+      <Form>
+        <Form.Group as={Col} controlId="name">
+          <Form.Label>Name</Form.Label>
+          <Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
+          <Form.Control.Feedback />
+        </Form.Group>
 
-        <FormGroup as={Col}>
-          <FormLabel>Start Parameters</FormLabel>
+        <Form.Group as={Col}>
+          <Form.Label>Start Parameters</Form.Label>
 
           <ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
-        </FormGroup>
-      </form>
+        </Form.Group>
+      </Form>
     </Dialog>;
   }
 }
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 90d0586..8436317 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { Container } from 'flux/utils';
-import { Button, InputGroup, FormControl } from 'react-bootstrap';
+import { Button, InputGroup, Form } from 'react-bootstrap';
 
 import FileSaver from 'file-saver';
 
diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js
index 3b75386..e9ece22 100644
--- a/src/signal/edit-signal-mapping.js
+++ b/src/signal/edit-signal-mapping.js
@@ -17,8 +17,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button, FormGroup, FormLabel, FormText, OverlayTrigger, Tooltip} from 'react-bootstrap';
-import {Collapse} from 'react-collapse';
+import { Button, Form, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
 import Dialog from "../common/dialogs/dialog";
@@ -228,52 +227,107 @@ class EditSignalMapping extends React.Component {
         marginLeft: '10px',
       };
 
-      return(
+      return <Dialog
+        show={this.props.show}
+        title="Edit Signal Mapping"
+        buttonTitle="Save"
+        blendOutCancel = {false}
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={true}
+      >
+        <Form.Group>
+          <Form.Label>{this.props.direction} Mapping</Form.Label>
+          <Form.Text>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</Form.Text>
+          <Table checkbox onChecked={(signal) => this.onSignalChecked(signal)} data={this.state.signals}>
+              <TableColumn
+                checkbox
+                onChecked={(index, event) => this.onSignalChecked(index, event)}
+                checkboxKey='checked'
+                width='30'
+              />
+              <TableColumn
+                title='Index'
+                dataKey='index'
+                inlineEditable
+                inputType='number'
+                onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
+              />
+              <TableColumn
+                title='Name'
+                dataKey='name'
+                inlineEditable
+                inputType='text'
+                onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
+              />
+              <TableColumn
+                title='Unit'
+                dataKey='unit'
+                inlineEditable
+                inputType='text'
+                onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
+              />
+              <TableColumn
+                title='Scaling Factor'
+                dataKey='scalingFactor'
+                inlineEditable
+                inputType='number'
+                onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
+              />
+              <TableColumn
+                title='Remove'
+                deleteButton
+                onDelete={(index) => this.handleDelete(index)}
+              />
+          </Table>
 
-        <Dialog
-          show={this.props.show}
-          title="Edit Signal Mapping"
-          buttonTitle="Save"
-          blendOutCancel = {false}
-          onClose={(c) => this.onClose(c)}
-          onReset={() => this.resetState()}
-          valid={true}
-          size='lg'>
-
-          <FormGroup>
-              <FormLabel>{this.props.direction} Mapping</FormLabel>
-              <FormText>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</FormText>
-              <Table checkbox onChecked={(signal) => this.onSignalChecked(signal)} data={this.state.signals}>
-                  <TableColumn checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} checkboxKey='checked' width='30' />
-                  <TableColumn title='Index' dataKey='index' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
-                  <TableColumn title='Name' dataKey='name' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
-                  <TableColumn title='Unit' dataKey='unit' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
-                  <TableColumn title='Scaling Factor' dataKey='scalingFactor' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
-                  <TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
-              </Table>
-
-              <div className='solid-button' style={{ float: 'right' }}>
-              <OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>} >
-                <Button  variant='secondary' key={50} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" />  </Button>
-              </OverlayTrigger>
-                <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 className='solid-button' style={{ float: 'right' }}>
+            <OverlayTrigger
+              key={0}
+              placement='left'
+              overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>}
+            >
+              <Button
+                variant='secondary'
+                key={50}
+                onClick={() => this.checkAll()}
+                style={buttonStyle}
+              >
+                <Icon icon="check" />
+              </Button>
+            </OverlayTrigger>
+            <Button
+              variant='secondary'
+              key={51}
+              onClick={() => this.handleRemove()} style={buttonStyle}>
+              <Icon icon="minus" />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 className='solid-button'>
+              {typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
+                <Button
+                  variant='secondary'
+                  key={config.id}
+                  onClick={() => this.handleAdd(config.id)}
+                  style={buttonStyle}
+                >
+                  {config.name}
+                </Button>
+              ))}
               </div>
-              <div>
-                <Collapse isOpened={this.state.openCollapse}>
-                <h6>Choose a Component Configuration to add the signal to: </h6>
-                <div className='solid-button'>
-                {typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
-
-                  <Button variant='secondary' key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
-
-                ))}
-                </div>
-                </Collapse>
-              </div>
-          </FormGroup>
-        </Dialog>
-  );
+            </Collapse>
+          </div>
+        </Form.Group>
+      </Dialog>;
   }
 }
 
diff --git a/src/user/login-form.js b/src/user/login-form.js
index fedfa26..ef38ee9 100644
--- a/src/user/login-form.js
+++ b/src/user/login-form.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { Form, Button, FormGroup, FormControl, FormLabel, Col } from 'react-bootstrap';
+import { Form, Button, Col } from 'react-bootstrap';
 import RecoverPassword from './recover-password'
 import AppDispatcher from '../common/app-dispatcher';
 import _ from 'lodash';
@@ -69,19 +69,19 @@ class LoginForm extends Component {
   villaslogin() {
     return (
       <Form key="login_a">
-        <FormGroup controlId="username">
-          <FormLabel column={true}>Username</FormLabel>
+        <Form.Group controlId="username">
+          <Form.Label column={true}>Username</Form.Label>
           <Col>
-            <FormControl type="text" placeholder="Username" autoComplete="username" onChange={(e) => this.handleChange(e)} />
+            <Form.Control type="text" placeholder="Username" autoComplete="username" onChange={(e) => this.handleChange(e)} />
           </Col>
-        </FormGroup>
+        </Form.Group>
 
-        <FormGroup controlId="password">
-          <FormLabel column={true}>Password</FormLabel>
+        <Form.Group controlId="password">
+          <Form.Label column={true}>Password</Form.Label>
           <Col >
-            <FormControl type="password" placeholder="Password" autoComplete="current-password" onChange={(e) => this.handleChange(e)} />
+            <Form.Control type="password" placeholder="Password" autoComplete="current-password" onChange={(e) => this.handleChange(e)} />
           </Col>
-        </FormGroup>
+        </Form.Group>
 
         {this.props.loginMessage &&
           <div style={{ marginBottom: '20px', color: 'red', fontSize: 'small' }}>
@@ -91,17 +91,16 @@ class LoginForm extends Component {
           </div>
         }
 
-        <FormGroup style={{ paddingTop: 15, paddingBottom: 5 }}>
+        <Form.Group style={{ paddingTop: 15, paddingBottom: 5 }}>
           <Col>
           <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>
+        </Form.Group>
 
         <RecoverPassword show={this.state.forgottenPassword} onClose={() => this.closeRecoverPassword()} sessionToken={this.props.sessionToken} />
-
       </Form>
     );
   }
diff --git a/src/widget/edit-widget/edit-widget-aspect-control.js b/src/widget/edit-widget/edit-widget-aspect-control.js
index 3186584..a41d360 100644
--- a/src/widget/edit-widget/edit-widget-aspect-control.js
+++ b/src/widget/edit-widget/edit-widget-aspect-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormCheck } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetAspectControl extends React.Component {
   constructor(props) {
@@ -41,15 +41,15 @@ class EditWidgetAspectControl extends React.Component {
     }
 
     return (
-      <FormGroup>
-        <FormCheck
+      <Form.Group>
+        <Form.Check
           type='checkbox'
           id={this.props.controlId}
           checked={isCustomProperty ?  this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
           label={"Lock Aspect Ratio"}
-          onChange={e => this.props.handleChange(e)}>
-        </FormCheck>
-      </FormGroup>
+          onChange={e => this.props.handleChange(e)}
+        />
+      </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-checkbox-control.js b/src/widget/edit-widget/edit-widget-checkbox-control.js
index 8a4113f..6dd8ce0 100644
--- a/src/widget/edit-widget/edit-widget-checkbox-control.js
+++ b/src/widget/edit-widget/edit-widget-checkbox-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormCheck } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetCheckboxControl extends React.Component {
   constructor(props) {
@@ -45,16 +45,15 @@ class EditWidgetCheckboxControl extends React.Component {
   }
 
   render() {
-    return <FormGroup>
-      <FormCheck
+    return <Form.Group>
+      <Form.Check
         type={"checkbox"}
         id={this.props.controlId}
         label={this.props.text}
         defaultChecked={this.state.isChecked}
-        onChange={e => this.handleCheckboxChange(e)}>
-
-      </FormCheck>
-    </FormGroup>;
+        onChange={e => this.handleCheckboxChange(e)}
+      />
+    </Form.Group>;
   }
 }
 
diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js
index aba342e..ada958f 100644
--- a/src/widget/edit-widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget/edit-widget-color-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap';
+import { Form, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 import Icon from "../../common/icon";
 
@@ -77,7 +77,7 @@ class EditWidgetColorControl extends Component {
     let style = {
       backgroundColor: color,
       opacity: opacity,
-      width: '260px', 
+      width: '260px',
       height: '40px'
     }
 
@@ -86,23 +86,20 @@ class EditWidgetColorControl extends Component {
       tooltipText = "Change border color";
     }
 
-   
-    return (
-      <FormGroup>
-        <FormLabel>{this.props.label}</FormLabel>
 
-        <div className='section-buttons-group-right'>
+    return <Form.Group>
+      <Form.Label>{this.props.label}</Form.Label>
+
+      <div className='section-buttons-group-right'>
         <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
         <Button key={2} style={style} onClick={this.openColorPicker.bind(this)}  >
           <Icon icon="paint-brush"/>
         </Button>
         </OverlayTrigger>
-        </div>
+      </div>
 
-        <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
-      </FormGroup>
-
-    )
+      <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
+    </Form.Group>;
   }
 }
 
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 6ef3fcd..aa337b6 100644
--- a/src/widget/edit-widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget/edit-widget-color-zones-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, Table, FormLabel, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 
 import Icon from '../../common/icon';
@@ -198,11 +198,18 @@ class EditWidgetColorZonesControl extends React.Component {
       height: '40px',
       marginTop: '20px'
     }
-    
-    return <FormGroup>
-      <FormLabel>Color zones</FormLabel>
+
+    return <Form.Group>
+      <Form.Label>Color Zones</Form.Label>
       <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>
+        <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>
       {
@@ -222,44 +229,43 @@ class EditWidgetColorZonesControl extends React.Component {
           )
 
       }
-      </div>
-      <Collapse isOpened={collapse} >
-      <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
-        <Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)}  >
-          <Icon icon="paint-brush"/>
-        </Button>
-        </OverlayTrigger>
-        <Table>
-        <tbody>
-          <tr>
-            <td>
-              Min:
-              <FormControl
-                type="number"
-                step="any"
-                placeholder="Min"
-                value={this.state.minValue}
-                onChange={e => this.handleMinChange(e)} />
-            </td>
-            <td>
-              Max:
-              <FormControl
-                type="number"
-                step="any"
-                placeholder="Max"
-                value={ this.state.maxValue}
-                onChange={e => this.handleMaxChange(e)} />
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-      <span className='icon-button'>
-      <Button variant='light' onClick={this.removeZones} ><Icon style={iconStyle} classname='icon-color' icon="trash-alt" /></Button>
-      </span>
+    </div>
+      <Collapse isOpened={collapse}>
+        <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
+          <Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)}  >
+            <Icon icon="paint-brush"/>
+          </Button>
+          </OverlayTrigger>
+          <Table>
+          <tbody>
+            <tr>
+              <td>
+                Min:
+                <Form.Control
+                  type="number"
+                  step="any"
+                  placeholder="Min"
+                  value={this.state.minValue}
+                  onChange={e => this.handleMinChange(e)} />
+              </td>
+              <td>
+                Max:
+                <Form.Control
+                  type="number"
+                  step="any"
+                  placeholder="Max"
+                  value={ this.state.maxValue}
+                  onChange={e => this.handleMaxChange(e)} />
+              </td>
+            </tr>
+          </tbody>
+        </Table>
+        <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'} />
-    </FormGroup>;
+    </Form.Group>;
   }
 }
 
diff --git a/src/widget/edit-widget/edit-widget-file-control.js b/src/widget/edit-widget/edit-widget-file-control.js
index 7185f16..8c2aa44 100644
--- a/src/widget/edit-widget/edit-widget-file-control.js
+++ b/src/widget/edit-widget/edit-widget-file-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, FormLabel} from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditFileWidgetControl extends React.Component {
 
@@ -59,13 +59,13 @@ class EditFileWidgetControl extends React.Component {
     }
 
     return <div>
-      <FormGroup controlId="file">
-        <FormLabel>File</FormLabel>
-        <FormControl
+      <Form.Group controlId="file">
+        <Form.Label>File</Form.Label>
+        <Form.Control
           as="select"
           value={isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]}
-          onChange={(e) => this.handleFileChange(e)}>{fileOptions} </FormControl>
-      </FormGroup>
+          onChange={(e) => this.handleFileChange(e)}>{fileOptions} </Form.Control>
+      </Form.Group>
     </div>;
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-html-content.js b/src/widget/edit-widget/edit-widget-html-content.js
index 1df71d5..1bf2080 100644
--- a/src/widget/edit-widget/edit-widget-html-content.js
+++ b/src/widget/edit-widget/edit-widget-html-content.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetHTMLContent extends React.Component {
   constructor(props) {
@@ -60,20 +60,25 @@ class EditWidgetHTMLContent extends React.Component {
 
   handleKeyIgnore(event){
     // This function prevents a keystroke from beeing handled by dialog.js
-    event.stopPropagation();    
-    }
-    
+    event.stopPropagation();
+  }
 
   render() {
     return (
-        <FormGroup controlId={this.props.controlId}>
-          <FormLabel>HTML Content</FormLabel>
-          <FormControl  onKeyDown={this.handleKeyIgnore} componentclass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
-          <FormControl.Feedback />
-        </FormGroup>
+        <Form.Group controlId={this.props.controlId}>
+          <Form.Label>HTML Content</Form.Label>
+          <Form.Control
+            onKeyDown={this.handleKeyIgnore}
+            componentclass="textarea"
+            style={{ height: 200 }}
+            placeholder={this.props.placeholder}
+            value={this.state.value}
+            onChange={e => this.props.handleChange(e)}
+          />
+          <Form.Control.Feedback />
+        </Form.Group>
     );
   }
 }
 
-
 export default EditWidgetHTMLContent;
diff --git a/src/widget/edit-widget/edit-widget-ic-control.js b/src/widget/edit-widget/edit-widget-ic-control.js
index 7e90f81..acf2626 100644
--- a/src/widget/edit-widget/edit-widget-ic-control.js
+++ b/src/widget/edit-widget/edit-widget-ic-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {FormGroup, FormControl, FormLabel} from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetICControl extends React.Component {
 
@@ -60,13 +60,13 @@ class EditWidgetICControl extends React.Component {
     }
 
     return <div>
-      <FormGroup controlId="ic">
-        <FormLabel>IC</FormLabel>
-        <FormControl
+      <Form.Group controlId="ic">
+        <Form.Label>IC</Form.Label>
+        <Form.Control
           as="select"
           value={isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]}
-          onChange={(e) => this.handleICChange(e)}>{icOptions} </FormControl>
-      </FormGroup>
+          onChange={(e) => this.handleICChange(e)}>{icOptions} </Form.Control>
+      </Form.Group>
     </div>;
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-min-max-control.js b/src/widget/edit-widget/edit-widget-min-max-control.js
index f25f23a..88e7442 100644
--- a/src/widget/edit-widget/edit-widget-min-max-control.js
+++ b/src/widget/edit-widget/edit-widget-min-max-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel, FormCheck, Table } from 'react-bootstrap';
+import { Form, Table } from 'react-bootstrap';
 
 class EditWidgetMinMaxControl extends React.Component {
   constructor(props) {
@@ -75,20 +75,20 @@ class EditWidgetMinMaxControl extends React.Component {
 
   render() {
 
-    return <FormGroup>
-      <FormLabel>{this.props.label}</FormLabel>
-      <FormCheck
+    return <Form.Group>
+      <Form.Label>{this.props.label}</Form.Label>
+      <Form.Check
         label= {"UseMinMax"}
         defaultChecked={this.state.useMinMax}
         onChange={e => this.handleCheckboxChange(e)}>
-      </FormCheck>
+      </Form.Check>
 
       <Table>
         <tbody>
           <tr>
             <td>
               Min:
-              <FormControl
+              <Form.Control
                 type="number"
                 step="any"
                 disabled={!this.state.useMinMax}
@@ -98,7 +98,7 @@ class EditWidgetMinMaxControl extends React.Component {
             </td>
             <td>
               Max:
-              <FormControl
+              <Form.Control
                 type="number"
                 step="any"
                 disabled={!this.state.useMinMax}
@@ -109,7 +109,7 @@ class EditWidgetMinMaxControl extends React.Component {
           </tr>
         </tbody>
       </Table>
-    </FormGroup>;
+    </Form.Group>;
   }
 }
 
diff --git a/src/widget/edit-widget/edit-widget-number-control.js b/src/widget/edit-widget/edit-widget-number-control.js
index 3b3101f..18e2d90 100644
--- a/src/widget/edit-widget/edit-widget-number-control.js
+++ b/src/widget/edit-widget/edit-widget-number-control.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetNumberControl extends Component {
   constructor(props) {
@@ -48,14 +48,14 @@ class EditWidgetNumberControl extends Component {
     }
 
     return (
-        <FormGroup controlId={this.props.controlId}>
-          <FormLabel>{this.props.label}</FormLabel>
-          <FormControl
+        <Form.Group controlId={this.props.controlId}>
+          <Form.Label>{this.props.label}</Form.Label>
+          <Form.Control
             type="number"
             step={step}
             value={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
             onChange={e => this.props.handleChange(e)} />
-        </FormGroup>
+        </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-orientation.js b/src/widget/edit-widget/edit-widget-orientation.js
index 5ac835f..7ff5252 100644
--- a/src/widget/edit-widget/edit-widget-orientation.js
+++ b/src/widget/edit-widget/edit-widget-orientation.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap';
+import { Col, Row, Form } from 'react-bootstrap';
 
 import WidgetSlider from '../widgets/slider';
 
@@ -50,12 +50,11 @@ class EditWidgetOrientation extends Component {
   }
 
   render() {
-
     // The <Row> tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms
     return (
-        <FormGroup controlId="orientation">
+        <Form.Group controlId="orientation">
           <Row>
-            <Col className={FormLabel} sm={3}>
+            <Col className={Form.Label} sm={3}>
               Orientation
             </Col>
             <Col sm={10}>
@@ -64,14 +63,20 @@ class EditWidgetOrientation extends Component {
                   let value = WidgetSlider.OrientationTypes[type].value;
                   let name = WidgetSlider.OrientationTypes[type].name;
 
-                  return (
-                    <FormCheck inline label={name} key={value} id={value} type='radio' title='orientation' checked={ value === this.state.widget.customProperties.orientation } onChange={(e) => this.handleOrientationChange(value)}>
-                    </FormCheck>)
+                  return <Form.Check
+                      inline label={name}
+                      key={value}
+                      id={value}
+                      type='radio'
+                      title='orientation'
+                      checked={ value === this.state.widget.customProperties.orientation }
+                      onChange={(e) => this.handleOrientationChange(value)}
+                    />
                 })
               }
             </Col>
           </Row>
-        </FormGroup>
+        </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-parameters-control.js b/src/widget/edit-widget/edit-widget-parameters-control.js
index 4117fd6..d589c2e 100644
--- a/src/widget/edit-widget/edit-widget-parameters-control.js
+++ b/src/widget/edit-widget/edit-widget-parameters-control.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import ParametersEditor from '../../common/parameters-editor';
 
 class EditWidgetParametersControl extends Component {
@@ -45,10 +45,13 @@ class EditWidgetParametersControl extends Component {
 
   render() {
     return (
-        <FormGroup controlId={this.props.controlId}>
-          <FormLabel>{this.props.label}</FormLabel>
-          <ParametersEditor content={this.state.widget[this.props.controlId] || {}} onChange={(v)=> this.handleChange(v)} />
-        </FormGroup>
+        <Form.Group controlId={this.props.controlId}>
+          <Form.Label>{this.props.label}</Form.Label>
+          <ParametersEditor
+            content={this.state.widget[this.props.controlId] || {}}
+            onChange={(v)=> this.handleChange(v)}
+          />
+        </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js
index a612277..f82d2ad 100644
--- a/src/widget/edit-widget/edit-widget-plot-colors-control.js
+++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap';
+import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 import Icon from "../../common/icon";
 import {scaleOrdinal} from "d3-scale";
@@ -80,33 +80,40 @@ class EditWidgetPlotColorsControl extends Component {
   render() {
 
     return (
-      <FormGroup>
-        <FormLabel>Line Colors</FormLabel>
+      <Form.Group>
+        <Form.Label>Line Colors</Form.Label>
+          <div>
+              {
+                this.state.widget.signalIDs.map((signalID, idx) => {
+                  let color = this.state.widget.customProperties.lineColors[signalID];
+                  let width = 260 / this.state.widget.signalIDs.length;
+                  let style = {
+                      backgroundColor: color,
+                      width: width,
+                      height: '40px'
+                  }
 
-            <div>
-                {
-                    this.state.widget.signalIDs.map((signalID, idx) => {
-                        let color = this.state.widget.customProperties.lineColors[signalID];
-                        let width = 260 / this.state.widget.signalIDs.length;
-                        let style = {
-                            backgroundColor: color,
-                            width: width,
-                            height: '40px'
-                        }
+                  let signal = this.props.signals.find(signal => signal.id === signalID);
 
-                        let signal = this.props.signals.find(signal => signal.id === signalID);
-
-                        return (<OverlayTrigger key={idx} placement={'bottom'} overlay={<Tooltip id={'tooltip-${"signal name"}'}>{signal.name}</Tooltip>}>
-                          <Button
-                            style={style} key={idx} onClick={i => this.editLineColor(signalID)} ><Icon icon="pen" /></Button>
-                            </OverlayTrigger>
-                        )
-                    })
-                }
+                  return <OverlayTrigger
+                    key={idx}
+                    placement={'bottom'}
+                    overlay={<Tooltip id={'tooltip-${"signal name"}'}>{signal.name}</Tooltip>}
+                  >
+                    <Button
+                      style={style}
+                      key={idx}
+                      onClick={i => this.editLineColor(signalID)}
+                    >
+                      <Icon icon="pen" />
+                    </Button>
+                  </OverlayTrigger>;
+                })
+              }
             </div>
 
         <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} lineIndex={this.state.selectedIndex} controlId={'lineColor'} disableOpacity={true}/>
-      </FormGroup>
+      </Form.Group>
 
     )
   }
diff --git a/src/widget/edit-widget/edit-widget-signal-control.js b/src/widget/edit-widget/edit-widget-signal-control.js
index cc9135d..d9667e3 100644
--- a/src/widget/edit-widget/edit-widget-signal-control.js
+++ b/src/widget/edit-widget/edit-widget-signal-control.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetSignalControl extends Component {
   constructor(props) {
@@ -48,9 +48,9 @@ class EditWidgetSignalControl extends Component {
   render() {
 
     return (
-        <FormGroup controlId="signal">
-          <FormLabel>Select signal</FormLabel>
-          <FormControl as="select" value={this.props.widget.signalIDs[0] || ""} onChange={(e) => this.handleSignalChange(e)}>
+        <Form.Group controlId="signal">
+          <Form.Label>Select signal</Form.Label>
+          <Form.Control as="select" value={this.props.widget.signalIDs[0] || ""} onChange={(e) => this.handleSignalChange(e)}>
           <option default>Select signal</option>
             {
               this.state.signals.length === 0 ? (
@@ -61,8 +61,8 @@ class EditWidgetSignalControl extends Component {
                 ))
               )
             }
-          </FormControl>
-        </FormGroup>
+          </Form.Control>
+        </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-signals-control.js b/src/widget/edit-widget/edit-widget-signals-control.js
index ad4658b..007b1fe 100644
--- a/src/widget/edit-widget/edit-widget-signals-control.js
+++ b/src/widget/edit-widget/edit-widget-signals-control.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormCheck, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetSignalsControl extends Component {
   constructor(props) {
@@ -55,25 +55,25 @@ class EditWidgetSignalsControl extends Component {
 
   render() {
     return (
-        <FormGroup>
-          <FormLabel>Signals</FormLabel>
+        <Form.Group>
+          <Form.Label>Signals</Form.Label>
           {
             this.state.signals === 0 || !this.state.widget.hasOwnProperty(this.props.controlId)? (
-              <FormLabel>No signals available</FormLabel>
+              <Form.Label>No signals available</Form.Label>
             ) : (
               this.state.signals.map((signal, index) => (
-                <FormCheck
+                <Form.Check
                   type={'checkbox'}
                   label={signal.name}
                   id={signal.id}
                   key={signal.id}
                   checked={this.state.checkedSignals.find(id => id === signal.id) !== undefined}
                   onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}>
-                </FormCheck>
+                </Form.Check>
                 ))
               )
           }
-        </FormGroup>
+        </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-text-control.js b/src/widget/edit-widget/edit-widget-text-control.js
index 22aac97..5392ca1 100644
--- a/src/widget/edit-widget/edit-widget-text-control.js
+++ b/src/widget/edit-widget/edit-widget-text-control.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetTextControl extends Component {
   constructor(props) {
@@ -60,11 +60,11 @@ class EditWidgetTextControl extends Component {
 
   render() {
     return (
-        <FormGroup controlId={this.props.controlId}>
-          <FormLabel>{this.props.label}</FormLabel>
-          <FormControl type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
-          <FormControl.Feedback />
-        </FormGroup>
+        <Form.Group controlId={this.props.controlId}>
+          <Form.Label>{this.props.label}</Form.Label>
+          <Form.Control type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
+          <Form.Control.Feedback />
+        </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-text-size-control.js b/src/widget/edit-widget/edit-widget-text-size-control.js
index 10e7922..ce3b131 100644
--- a/src/widget/edit-widget/edit-widget-text-size-control.js
+++ b/src/widget/edit-widget/edit-widget-text-size-control.js
@@ -16,21 +16,21 @@
  **********************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetTextSizeControl extends React.Component {
   render() {
     const sizes = [11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 46, 52, 60, 72];
 
     return (
-      <FormGroup controlId="customProperties.textSize">
-        <FormLabel>Text size</FormLabel>
-        <FormControl as="select" value={this.props.widget.customProperties.textSize} onChange={e => this.props.handleChange(e)}>
+      <Form.Group controlId="customProperties.textSize">
+        <Form.Label>Text size</Form.Label>
+        <Form.Control as="select" value={this.props.widget.customProperties.textSize} onChange={e => this.props.handleChange(e)}>
           {sizes.map((size, index) => (
             <option key={index} value={size}>{size}</option>
           ))}
-        </FormControl>
-      </FormGroup>
+        </Form.Control>
+      </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-time-control.js b/src/widget/edit-widget/edit-widget-time-control.js
index 23fb368..ea4eeff 100644
--- a/src/widget/edit-widget/edit-widget-time-control.js
+++ b/src/widget/edit-widget/edit-widget-time-control.js
@@ -16,7 +16,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormControl, FormLabel, FormText } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 
 class EditWidgetTimeControl extends Component {
   constructor(props) {
@@ -43,9 +43,9 @@ class EditWidgetTimeControl extends Component {
     }
 
     return (
-      <FormGroup controlId= {this.props.controlId}>
-        <FormLabel>Time</FormLabel>
-        <FormControl
+      <Form.Group controlId= {this.props.controlId}>
+        <Form.Label>Time</Form.Label>
+        <Form.Control
           type="number"
           min="1"
           max="300"
@@ -53,8 +53,8 @@ class EditWidgetTimeControl extends Component {
           value={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
           onChange={(e) => this.props.handleChange(e)}
         />
-        <FormText>Time in seconds</FormText>
-      </FormGroup>
+        <Form.Text>Time in seconds</Form.Text>
+      </Form.Group>
     );
   }
 }
diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index 5d0d601..081cb08 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -16,6 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
+import { Form } from 'react-bootstrap';
 import Dialog from '../../common/dialogs/dialog';
 import CreateControls from './edit-widget-control-creator';
 
@@ -174,10 +175,17 @@ class EditWidgetDialog extends React.Component {
     }
 
     return (
-      <Dialog show={this.props.show} title="Edit Widget" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-        <form encType='multipart/form-data'>
+      <Dialog
+        show={this.props.show}
+        title="Edit Widget"
+        buttonTitle="Save"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.valid}
+      >
+        <Form encType='multipart/form-data'>
           { controls || '' }
-        </form>
+        </Form>
       </Dialog>
     );
   }
diff --git a/src/widget/widgets/input.js b/src/widget/widgets/input.js
index 142f4e2..21c0421 100644
--- a/src/widget/widgets/input.js
+++ b/src/widget/widgets/input.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { Form, FormGroup, Col, FormLabel, FormControl, InputGroup } from 'react-bootstrap';
+import { Form, Col, InputGroup } from 'react-bootstrap';
 
 class WidgetInput extends Component {
 
@@ -87,13 +87,13 @@ class WidgetInput extends Component {
     return (
       <div className="number-input-widget full">
           <Form componentclass="fieldset" horizontal="true">
-              <FormGroup>
-                  <Col as={FormLabel}>
+              <Form.Group>
+                  <Col as={Form.Label}>
                     {this.props.widget.name}
                   </Col>
                   <Col>
                     <InputGroup>
-                      <FormControl
+                      <Form.Control
                         type="number"
                         step="any"
                         disabled={ this.props.editing }
@@ -112,7 +112,7 @@ class WidgetInput extends Component {
                     )}
                     </InputGroup>
                   </Col>
-                </FormGroup>
+                </Form.Group>
             </Form>
       </div>
     );