diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index 2643af9..d3bb657 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -32,12 +32,12 @@ class Dialog extends React.Component {
   }
 
   onKeyPress = (event) => {
-    if (event.key === 'Enter') {
+    /*if (event.key === 'Enter') {
       // prevent input from submitting
       event.preventDefault();
 
       this.closeModal(false);
-    }
+    }*/
   }
 
   render() {
diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js
index 9cafc98..5b30a1e 100644
--- a/src/components/dialog/edit-widget-control-creator.js
+++ b/src/components/dialog/edit-widget-control-creator.js
@@ -34,6 +34,7 @@ import EditWidgetTextSizeControl from './edit-widget-text-size-control';
 import EditWidgetCheckboxControl from './edit-widget-checkbox-control';
 import EditWidgetColorZonesControl from './edit-widget-color-zones-control';
 import EditWidgetMinMaxControl from './edit-widget-min-max-control';
+import EditWidgetHTMLContent from './edit-widget-html-content';
 
 export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
     // Use a list to concatenate the controls according to the widget type
@@ -45,11 +46,11 @@ export default function createControls(widgetType = null, widget = null, session
                 handleChange([e, {target: {id: 'signal', value: 0}}]);
             }
             dialogControls.push(
-                <EditWidgetTextControl key={1} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={3} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextSizeControl key={4} widget={widget} handleChange={e => handleChange(e)} />,
-                <EditWidgetCheckboxControl key={5} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
+                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
+                <EditWidgetCheckboxControl key={4} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
             );
         break;
         case 'Plot':
@@ -57,22 +58,22 @@ export default function createControls(widgetType = null, widget = null, session
                 handleChange([e, {target: {id: 'signals', value: []}}]);
             }
             dialogControls.push(
-                <EditWidgetTimeControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
-                <EditWidgetSignalsControl key={3} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetMinMaxControl key={5} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
+                <EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
+                <EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetMinMaxControl key={4} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Table':
             dialogControls.push(
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Image':
             dialogControls.push(
-                <EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetAspectControl key={2} widget={widget} handleChange={e => handleChange(e)} />
+                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
             );            
             break;
         case 'Gauge':
@@ -80,12 +81,12 @@ export default function createControls(widgetType = null, widget = null, session
                 handleChange([e, {target: {id: 'signal', value: ''}}]);
             }
             dialogControls.push(
-                <EditWidgetTextControl key={1} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />,
-                <EditWidgetSignalControl key={3} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetCheckboxControl key={4} widget={widget} controlId="colorZones" text="Show color zones" handleChange={e => handleChange(e)} />,
-                <EditWidgetColorZonesControl key={5} widget={widget} handleChange={e => handleChange(e)} />,
-                <EditWidgetMinMaxControl key={6} widget={widget} controlId="value" handleChange={e => handleChange(e)} />
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />,
+                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetCheckboxControl key={3} widget={widget} controlId="colorZones" text="Show color zones" handleChange={e => handleChange(e)} />,
+                <EditWidgetColorZonesControl key={4} widget={widget} handleChange={e => handleChange(e)} />,
+                <EditWidgetMinMaxControl key={5} widget={widget} controlId="value" handleChange={e => handleChange(e)} />
             );
             break;
         case 'PlotTable':
@@ -93,27 +94,27 @@ export default function createControls(widgetType = null, widget = null, session
                 handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
             }
             dialogControls.push(
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
-                <EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTimeControl key={4} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetMinMaxControl key={5} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
+                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
+                <EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTimeControl key={3} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetMinMaxControl key={4} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Slider':
             dialogControls.push(
-                <EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetOrientation key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Button':
             dialogControls.push(
-                <EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={2} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
+                <EditWidgetColorControl key={0} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={1} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Box':
             dialogControls.push(
-                <EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
+                <EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Label':
@@ -123,6 +124,13 @@ export default function createControls(widgetType = null, widget = null, session
                 <EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
             );
             break;
+        
+        case 'HTML':
+            dialogControls.push(
+                <EditWidgetHTMLContent key={0} widget={widget} placeholder='HTML Code' controlId='content' handleChange={e => handleChange(e)} />
+            );
+            break;
+
         default:
             console.log('Non-valid widget type: ' + widgetType);
         }
diff --git a/src/components/dialog/edit-widget-html-content.js b/src/components/dialog/edit-widget-html-content.js
new file mode 100644
index 0000000..22cc10b
--- /dev/null
+++ b/src/components/dialog/edit-widget-html-content.js
@@ -0,0 +1,47 @@
+/**
+ * File: edit-widget-html-content.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 03.09.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ **********************************************************************************/
+
+import React from 'react';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+class EditWidgetHTMLContent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      widget: {}
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+      // Update state's widget with props
+    this.setState({ widget: nextProps.widget });
+  }
+
+  render() {
+    return <FormGroup controlId={this.props.controlId}>
+      <ControlLabel>HTML Content</ControlLabel>
+      <FormControl componentClass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
+    </FormGroup>;
+  }
+}
+
+export default EditWidgetHTMLContent;
diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js
index 91802e0..0528938 100644
--- a/src/components/dialog/edit-widget.js
+++ b/src/components/dialog/edit-widget.js
@@ -140,11 +140,6 @@ 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'>
-          {/*<FormGroup controlId="name" validationState={this.validateForm('name')}>
-            <ControlLabel>Name</ControlLabel>
-            <FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>*/}
           { controls || '' }
         </form>
       </Dialog>
diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js
index faed0a3..ac4bd70 100644
--- a/src/components/widget-factory.js
+++ b/src/components/widget-factory.js
@@ -129,6 +129,10 @@ class WidgetFactory {
                 widget.border_color = 0;
                 widget.z = 0;
                 break;
+            case 'HTML':
+                widget.content = '<i>Hello World</i>';
+                break;
+            
             default:
                 widget.width = 100;
                 widget.height = 100;
diff --git a/src/components/widget-html.js b/src/components/widget-html.js
new file mode 100644
index 0000000..b358fea
--- /dev/null
+++ b/src/components/widget-html.js
@@ -0,0 +1,30 @@
+/**
+ * File: widget-html.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 29.08.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+
+class WidgetHTML extends React.Component {
+  render() {
+    return <div dangerouslySetInnerHTML={{__html: this.props.widget.content }} />
+  }
+}
+
+export default WidgetHTML;
diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js
index 9be58fa..c9cc77e 100644
--- a/src/components/widget-plot/plot.js
+++ b/src/components/widget-plot/plot.js
@@ -99,8 +99,6 @@ class Plot extends React.Component {
   }
 
   render() {
-    console.log(this.state);
-
     return <svg width={this.props.width + leftMargin} height={this.props.height + bottomMargin}>
       <g ref={node => select(node).call(this.state.xAxis)} style={{ transform: `translateY(${this.props.height}px)` }} />
       <g ref={node => select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin}px)`}} />
diff --git a/src/containers/visualization.js b/src/containers/visualization.js
index e28f419..971d55a 100644
--- a/src/containers/visualization.js
+++ b/src/containers/visualization.js
@@ -440,6 +440,7 @@ class Visualization extends React.Component {
               <ToolboxItem name="Slider" type="widget" disabled />
               <ToolboxItem name="Gauge" type="widget" />
               <ToolboxItem name="Box" type="widget" />
+              <ToolboxItem name="HTML" type="html" />
             </div>
           }
 
diff --git a/src/containers/widget.js b/src/containers/widget.js
index 055637a..15e89b6 100644
--- a/src/containers/widget.js
+++ b/src/containers/widget.js
@@ -41,6 +41,7 @@ import WidgetNumberInput from '../components/widget-number-input';
 import WidgetSlider from '../components/widget-slider';
 import WidgetGauge from '../components/widget-gauge';
 import WidgetBox from '../components/widget-box';
+import WidgetHTML from '../components/widget-html';
 
 import '../styles/widgets.css';
 
@@ -173,6 +174,8 @@ class Widget extends Component {
       element = <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} simulation={this.props.simulation} />
     } else if (widget.type === 'Box') {
       element = <WidgetBox widget={widget} editing={this.props.editing} />
+    } else if (widget.type === 'HTML') {
+      element = <WidgetHTML widget={widget} editing={this.props.editing} />
     }
     
     const widgetClasses = classNames({