diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 4a8c976..102a311 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -379,3 +379,14 @@ div[class*="-widget"] label {
     border: 2px solid lightgray;
 }
 /* End box widget */
+
+/* Begin line widget */
+.line-widget {
+    width: 100%;
+    height: 1%;
+    border: 2px solid red;
+    transform: rotate(0deg);
+}
+
+
+/* End line widget */
diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index 2b656dc..1cf26ad 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -144,7 +144,6 @@ export default function CreateControls(widgetType = null, widget = null, session
                 <EditFileWidgetControl key={0} widget={widget} controlId={"customProperties.file"} files={files} type={'xml'} handleChange={(e) => handleChange(e) } />
             );
             break;
-
         case 'NumberInput':
             DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
@@ -152,6 +151,13 @@ export default function CreateControls(widgetType = null, widget = null, session
                 <EditWidgetCheckboxControl key={1} widget={widget} controlId={'customProperties.showUnit'} input text="Show unit" handleChange={e => handleChange(e)} />
             );
             break;
+        case 'Line':
+            DialogControls.push(
+                <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Line color'} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.rotation'} label={'Rotation (degrees)'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.border_width'} label={'Line width'} defaultValue={0} handleChange={(e) => handleChange(e)} />
+            );
+            break;
 
         default:
             console.log('Non-valid widget type: ' + widgetType);
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index 8b08117..285e2ed 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -180,6 +180,13 @@ class WidgetFactory {
                 widget.height = 400;
                 widget.customProperties.file = -1; // ID of file, -1 means non selected
                 break;
+            case 'Line':
+                widget.height = 50;
+                widget.customProperties.border_color = 8;
+                WidgetSlider.customPropertier.border_width = 2;
+                widget.customProperties.margin_top = 15;
+                widget.customProperties.rotation = 0;
+                break;
 
             default:
                 widget.width = 100;
diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js
index 07c3a36..5236ece 100644
--- a/src/widget/widget-toolbox.js
+++ b/src/widget/widget-toolbox.js
@@ -53,6 +53,7 @@ class WidgetToolbox extends React.Component {
       <ToolboxItem name='Table' type='widget' icon = 'plus'/>
       <ToolboxItem name='Label' type='widget' icon = 'plus'/>
       <ToolboxItem name='Image' type='widget' icon = 'plus'/>
+      <ToolboxItem name='Line' type='widget' icon='plus'/>
       <ToolboxItem name='Button' type='widget' icon = 'plus'/>
       <ToolboxItem name='NumberInput' type='widget' icon = 'plus'/>
       <ToolboxItem name='Slider' type='widget' icon = 'plus'/>
diff --git a/src/widget/widget.js b/src/widget/widget.js
index e2faeb1..7b647db 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -43,6 +43,7 @@ import WidgetGauge from './widgets/gauge';
 import WidgetBox from './widgets/box';
 import WidgetHTML from './widgets/html';
 import WidgetTopology from './widgets/topology';
+import WidgetLine from './widgets/line';
 
 import '../styles/widgets.css';
 
@@ -221,6 +222,11 @@ class Widget extends React.Component {
         files={this.state.files}
         token={this.state.sessionToken}
       />
+    } else if (widget.type === 'Line') {
+      return <WidgetLine
+        widget={widget}
+        editing={this.props.editing}
+      />
     }
 
     return null;
diff --git a/src/widget/widgets/line.js b/src/widget/widgets/line.js
new file mode 100644
index 0000000..9ccc4eb
--- /dev/null
+++ b/src/widget/widgets/line.js
@@ -0,0 +1,39 @@
+/**
+ * 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, { Component } from 'react';
+
+import EditWidgetColorControl from '../edit-widget/edit-widget-color-control';
+import EditWidgetNumberControl from '../edit-widget/edit-widget-number-control';
+
+class WidgetLine extends Component {
+  render() {
+      const lineStyle = {
+        borderColor: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color],
+        transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)',
+        borderWidth: '' + this.props.widget.customProperties.border_width + 'px'
+    };
+
+    return (
+      <div className="line-widget" style={lineStyle}>
+            { } 
+      </div>
+    );
+  }
+}
+
+export default WidgetLine;