diff --git a/web/app/app.module.ts b/web/app/app.module.ts
index 7b35226..7c52e09 100644
--- a/web/app/app.module.ts
+++ b/web/app/app.module.ts
@@ -38,6 +38,7 @@ import { NameService } from "./shared/services/name.service";
 import { GoogleCalendarWidgetConfigComponent } from "./configs/widget/google_calendar/gcal.widget.component";
 import { GoogleDocsWidgetConfigComponent } from "./configs/widget/google_docs/gdoc.widget.component";
 import { JitsiWidgetConfigComponent } from "./configs/widget/jitsi/jitsi.widget.component";
+import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch.widget.component";
 
 @NgModule({
     imports: [
@@ -75,6 +76,7 @@ import { JitsiWidgetConfigComponent } from "./configs/widget/jitsi/jitsi.widget.
         GoogleCalendarWidgetConfigComponent,
         GoogleDocsWidgetConfigComponent,
         JitsiWidgetConfigComponent,
+        TwitchWidgetConfigComponent,
 
         // Vendor
     ],
diff --git a/web/app/app.routing.ts b/web/app/app.routing.ts
index 8ff83fb..0f884a5 100644
--- a/web/app/app.routing.ts
+++ b/web/app/app.routing.ts
@@ -11,6 +11,7 @@ import { EtherpadWidgetConfigComponent } from "./configs/widget/etherpad/etherpa
 import { GoogleCalendarWidgetConfigComponent } from "./configs/widget/google_calendar/gcal.widget.component";
 import { GoogleDocsWidgetConfigComponent } from "./configs/widget/google_docs/gdoc.widget.component";
 import { JitsiWidgetConfigComponent } from "./configs/widget/jitsi/jitsi.widget.component";
+import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch.widget.component";
 
 const routes: Routes = [
     {path: "", component: HomeComponent},
@@ -52,6 +53,11 @@ const routes: Routes = [
                         component: JitsiWidgetConfigComponent,
                         data: {breadcrumb: "Jitsi Widgets", name: "Jitsi Widgets"}
                     },
+                    {
+                        path: "twitch",
+                        component: TwitchWidgetConfigComponent,
+                        data: {breadcrumb: "Twitch Livestream Widgets", name: "Twitch Livestream Widgets"}
+                    },
                 ],
             },
         ],
diff --git a/web/app/configs/widget/config_screen/config_screen.component.html b/web/app/configs/widget/config_screen/config_screen.component.html
index 6787e79..67db24a 100644
--- a/web/app/configs/widget/config_screen/config_screen.component.html
+++ b/web/app/configs/widget/config_screen/config_screen.component.html
@@ -22,6 +22,7 @@
     <my-ibox *ngFor="let widget of widgetComponent.widgets trackById" [isCollapsible]="true" [defaultCollapsed]="widget.id !== widgetComponent.defaultExpandedWidgetId">
         <h5 class="my-ibox-title">
             <i class="far fa-edit"></i> {{ widget.name || widget.url || widgetComponent.defaultName }}
+            <span *ngIf="widget.data.title">- {{ widget.data.title }}</span>
         </h5>
         <div class="my-ibox-content">
             <form (submit)="widgetComponent.saveWidget(widget)" novalidate name="editForm">
diff --git a/web/app/configs/widget/etherpad/etherpad.widget.component.ts b/web/app/configs/widget/etherpad/etherpad.widget.component.ts
index fed4143..2f8f764 100644
--- a/web/app/configs/widget/etherpad/etherpad.widget.component.ts
+++ b/web/app/configs/widget/etherpad/etherpad.widget.component.ts
@@ -14,7 +14,7 @@ export class EtherpadWidgetConfigComponent extends WidgetComponent {
     private etherpadWidget: EtherpadWidget = <EtherpadWidget>SessionStorage.editIntegration;
 
     constructor(private nameService: NameService) {
-        super(WIDGET_ETHERPAD, "Etherpad Widget", "generic", "etherpad");
+        super(WIDGET_ETHERPAD, "Etherpad", "generic", "etherpad");
     }
 
     protected OnNewWidgetPrepared(widget: EditableWidget): void {
diff --git a/web/app/configs/widget/google_calendar/gcal.widget.component.ts b/web/app/configs/widget/google_calendar/gcal.widget.component.ts
index 0ce705a..3b1e370 100644
--- a/web/app/configs/widget/google_calendar/gcal.widget.component.ts
+++ b/web/app/configs/widget/google_calendar/gcal.widget.component.ts
@@ -8,7 +8,11 @@ import { Component } from "@angular/core";
 })
 export class GoogleCalendarWidgetConfigComponent extends WidgetComponent {
     constructor() {
-        super(WIDGET_GOOGLE_CALENDAR, "Google Calendar Widget", DISABLE_AUTOMATIC_WRAPPING, "googleCalendar");
+        super(WIDGET_GOOGLE_CALENDAR, "Google Calendar", DISABLE_AUTOMATIC_WRAPPING, "googleCalendar");
+    }
+
+    protected  OnNewWidgetPrepared(widget: EditableWidget) {
+        widget.dimension.newData.src = "";
     }
 
     protected OnWidgetsDiscovered(widgets: EditableWidget[]) {
diff --git a/web/app/configs/widget/google_docs/gdoc.widget.component.ts b/web/app/configs/widget/google_docs/gdoc.widget.component.ts
index 8d4078b..a52ef53 100644
--- a/web/app/configs/widget/google_docs/gdoc.widget.component.ts
+++ b/web/app/configs/widget/google_docs/gdoc.widget.component.ts
@@ -8,6 +8,6 @@ import { Component } from "@angular/core";
 })
 export class GoogleDocsWidgetConfigComponent extends WidgetComponent {
     constructor() {
-        super(WIDGET_GOOGLE_DOCS, "Google Docs Widget", "generic", "googleDocs");
+        super(WIDGET_GOOGLE_DOCS, "Google Doc", "generic", "googleDocs");
     }
 }
\ No newline at end of file
diff --git a/web/app/configs/widget/twitch/twitch.widget.component.html b/web/app/configs/widget/twitch/twitch.widget.component.html
new file mode 100644
index 0000000..d3d9e0b
--- /dev/null
+++ b/web/app/configs/widget/twitch/twitch.widget.component.html
@@ -0,0 +1,11 @@
+<my-widget-config [widgetComponent]="this">
+    <ng-template #widgetParamsTemplate let-widget="widget">
+        <label class="label-block">
+            Channel Name
+            <input type="text" class="form-control"
+                   placeholder="TwitchUsername"
+                   [(ngModel)]="widget.dimension.newData.channelName" name="widget-url-{{widget.id}}"
+                   [disabled]="isUpdating"/>
+        </label>
+    </ng-template>
+</my-widget-config>
\ No newline at end of file
diff --git a/web/app/configs/widget/twitch/twitch.widget.component.scss b/web/app/configs/widget/twitch/twitch.widget.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/app/configs/widget/twitch/twitch.widget.component.ts b/web/app/configs/widget/twitch/twitch.widget.component.ts
new file mode 100644
index 0000000..7514478
--- /dev/null
+++ b/web/app/configs/widget/twitch/twitch.widget.component.ts
@@ -0,0 +1,43 @@
+import { WidgetComponent } from "../widget.component";
+import { EditableWidget, WIDGET_TWITCH } from "../../../shared/models/widget";
+import { Component } from "@angular/core";
+
+@Component({
+    templateUrl: "twitch.widget.component.html",
+    styleUrls: ["twitch.widget.component.scss"],
+})
+export class TwitchWidgetConfigComponent extends WidgetComponent {
+    constructor() {
+        super(WIDGET_TWITCH, "Twitch Livestream", "video", "twitch");
+    }
+
+    protected OnNewWidgetPrepared(widget: EditableWidget) {
+        widget.dimension.newData.channelName = "";
+    }
+
+    protected OnWidgetsDiscovered(widgets: EditableWidget[]) {
+        for (const widget of widgets) {
+            if (!widget.data.channelName) {
+                // Convert legacy Dimension widgets to new format
+                widget.data.channelName = widget.data.dimChannelName;
+            }
+        }
+    }
+
+    protected OnWidgetBeforeAdd(widget: EditableWidget) {
+        this.setTwitchUrl(widget);
+    }
+
+    protected OnWidgetBeforeEdit(widget: EditableWidget) {
+        this.setTwitchUrl(widget);
+    }
+
+    private setTwitchUrl(widget: EditableWidget) {
+        if (!widget.dimension.newData.channelName || widget.dimension.newData.channelName.trim().length === 0) {
+            throw new Error("Please enter a shared calendar ID");
+        }
+
+        widget.dimension.newUrl = "https://player.twitch.tv/?channel=$channelName";
+        widget.dimension.newTitle = widget.dimension.newData.channelName;
+    }
+}
\ No newline at end of file