diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index 7919fe3..e68bb2d 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -394,4 +394,20 @@ div[class*="-widget"] label {
     height: 100%;
     border: 2px solid lightgray;
 }
-/* End box widget */
\ No newline at end of file
+/* End box widget */
+
+/* Begin time offset widget */
+.time-offset {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+}
+
+.time-offset span {
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: 600;
+    padding-top: 10px;
+}
+/* End time offset widget */
\ No newline at end of file
diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index bb0d5b5..4b4aa69 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -158,6 +158,15 @@ export default function CreateControls(widgetType = null, widget = null, session
             );
             break;
 
+        case 'TimeOffset':
+            DialogControls.push(
+                <EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.threshold_yellow'} label={'Threshold yellow'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.threshold_red'} label={'Threshold red'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetCheckboxControl key={3} widget={widget} controlId={'customProperties.horizontal'} input text="Horizontal" handleChange={e => handleChange(e)} />,
+                <EditWidgetCheckboxControl key={4} widget={widget} controlId={'customProperties.showOffset'} input text="showOffset" 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 cf48d67..ca16911 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -198,11 +198,14 @@ class WidgetFactory {
             case 'TimeOffset':
                 widget.minWidth = 20;
                 widget.minHeight = 20;
-                widget.width = 100;
-                widget.height = 100;
+                widget.width = 60;
+                widget.height = 60;
                 widget.customProperties.threshold_yellow = 1;
                 widget.customProperties.threshold_red = 2;
                 widget.customProperties.icID = 1;
+                widget.customProperties.horizontal = false;
+                widget.customProperties.showOffset = true;
+                break;
 
             default:
                 widget.width = 100;
diff --git a/src/widget/widgets/time-offset.js b/src/widget/widgets/time-offset.js
index a711742..46b2531 100644
--- a/src/widget/widgets/time-offset.js
+++ b/src/widget/widgets/time-offset.js
@@ -51,14 +51,18 @@ class WidgetTimeOffset extends Component {
   render() {
 
     return (
-      <div>
-        <TrafficLight
+      <div className="time-offset">
+        <TrafficLight Horizontal={this.props.widget.customProperties.horizontal}
         RedOn={this.props.widget.customProperties.threshold_red <= this.state.timeOffset}
         YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red)}
         GreenOn={this.state.timeOffset < this.props.widget.customProperties.threshold_yellow}
       />
-      <div>Time offset:</div>
-      <strong>{this.state.timeOffset}s</strong>
+      {this.props.widget.customProperties.showOffset ? 
+      (
+      <span>{this.state.timeOffset}s</span>)
+      :
+      (<div></div>)
+      }
       </div>
     );
   }