diff --git a/web/app/app.module.ts b/web/app/app.module.ts
index aa10a1b..1ebc263 100644
--- a/web/app/app.module.ts
+++ b/web/app/app.module.ts
@@ -33,6 +33,7 @@ import { AdminApiService } from "./shared/services/admin-api.service";
 import { ServiceLocator } from "./shared/services/locator.service";
 import { IboxComponent } from "./elements/ibox/ibox.component";
 import { CustomWidgetConfigComponent } from "./configs/widget/custom/custom.widget.component";
+import { ConfigScreenWidgetComponent } from "./configs/widget/config_screen/config_screen.widget.component";
 
 @NgModule({
     imports: [
@@ -65,6 +66,7 @@ import { CustomWidgetConfigComponent } from "./configs/widget/custom/custom.widg
         GCalWidgetWrapperComponent,
         RiotHomeComponent,
         IboxComponent,
+        ConfigScreenWidgetComponent,
         CustomWidgetConfigComponent,
 
         // Vendor
diff --git a/web/app/configs/widget/config_screen/config_screen.component.html b/web/app/configs/widget/config_screen/config_screen.component.html
new file mode 100644
index 0000000..f8ec86d
--- /dev/null
+++ b/web/app/configs/widget/config_screen/config_screen.component.html
@@ -0,0 +1,41 @@
+<div *ngIf="isLoading">
+    <my-spinner></my-spinner>
+</div>
+<div *ngIf="!isLoading">
+    <my-ibox [isCollapsible]="true" [defaultCollapsed]="widgetComponent.defaultExpandedWidgetId">
+        <h5 class="my-ibox-title">
+            <i class="far fa-plus-square"></i> Add {{ widgetComponent.defaultName }}
+        </h5>
+        <div class="my-ibox-content">
+            <form (submit)="widgetComponent.addWidget()" novalidate name="addForm">
+                <ng-container *ngTemplateOutlet="widgetParamsTemplate;context:{widget:widgetComponent.newWidget}"></ng-container>
+
+                <div style="margin-top: 25px">
+                    <button type="submit" class="btn btn-sm btn-success" [disabled]="widgetComponent.isUpdating">
+                        <i class="fa fa-plus"></i> Add Widget
+                    </button>
+                </div>
+            </form>
+        </div>
+    </my-ibox>
+
+    <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 }}
+        </h5>
+        <div class="my-ibox-content">
+            <form (submit)="widgetComponent.saveWidget(widget)" novalidate name="editForm">
+                <ng-container *ngTemplateOutlet="widgetParamsTemplate;context:{widget:widget}"></ng-container>
+
+                <div style="margin-top: 25px">
+                    <button type="submit" class="btn btn-sm btn-primary" [disabled]="widgetComponent.isUpdating">
+                        <i class="far fa-save"></i> Save Widget
+                    </button>
+                    <button type="button" class="btn btn-sm btn-danger" [disabled]="widgetComponent.isUpdating" (click)="widgetComponent.removeWidget(widget)">
+                        <i class="far fa-trash-alt"></i> Remove Widget
+                    </button>
+                </div>
+            </form>
+        </div>
+    </my-ibox>
+</div>
\ No newline at end of file
diff --git a/web/app/configs/widget/config_screen/config_screen.widget.component.scss b/web/app/configs/widget/config_screen/config_screen.widget.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/app/configs/widget/config_screen/config_screen.widget.component.ts b/web/app/configs/widget/config_screen/config_screen.widget.component.ts
new file mode 100644
index 0000000..591351c
--- /dev/null
+++ b/web/app/configs/widget/config_screen/config_screen.widget.component.ts
@@ -0,0 +1,16 @@
+import { NewWidgetComponent } from "../widget.component";
+import { Component, ContentChild, Input, TemplateRef } from "@angular/core";
+
+@Component({
+    selector: "my-widget-config",
+    templateUrl: "config_screen.component.html",
+    styleUrls: ["config_screen.widget.component.scss"],
+})
+export class ConfigScreenWidgetComponent {
+
+    @Input() widgetComponent: NewWidgetComponent;
+    @ContentChild(TemplateRef) widgetParamsTemplate: TemplateRef<any>;
+
+    constructor() {
+    }
+}
\ No newline at end of file
diff --git a/web/app/configs/widget/custom/custom.widget.component.html b/web/app/configs/widget/custom/custom.widget.component.html
index af713df..f00ca1d 100644
--- a/web/app/configs/widget/custom/custom.widget.component.html
+++ b/web/app/configs/widget/custom/custom.widget.component.html
@@ -1,59 +1,18 @@
-<ng-template #widgetParams let-widget="widget">
-    <label class="label-block">
-        Widget Name
-        <input type="text" class="form-control"
-               placeholder="{{ defaultName }}"
-               [(ngModel)]="widget.dimension.newName" name="widget-name-{{widget.id}}"
-               [disabled]="isUpdating"/>
-    </label>
-    <label class="label-block">
-        Widget URL
-        <input type="text" class="form-control"
-               placeholder="https://matrix.org"
-               [(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}"
-               [disabled]="isUpdating"/>
-    </label>
-</ng-template>
-
-<!-- Annoyingly, this has to be copy/pasted to all the integration configs -->
-<div *ngIf="isLoading">
-    <my-spinner></my-spinner>
-</div>
-<div *ngIf="!isLoading">
-    <my-ibox [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
-        <h5 class="my-ibox-title">
-            <i class="far fa-plus-square"></i> Add {{ defaultName }}
-        </h5>
-        <div class="my-ibox-content">
-            <form (submit)="addWidget()" novalidate name="addForm">
-                <ng-container *ngTemplateOutlet="widgetParams;context:{widget:newWidget}"></ng-container>
-
-                <div style="margin-top: 25px">
-                    <button type="submit" class="btn btn-sm btn-success" [disabled]="isUpdating">
-                        <i class="fa fa-plus"></i> Add Widget
-                    </button>
-                </div>
-            </form>
-        </div>
-    </my-ibox>
-
-    <my-ibox *ngFor="let widget of widgets trackById" [isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId">
-        <h5 class="my-ibox-title">
-            <i class="far fa-edit"></i> {{ widget.name || widget.url || defaultName }}
-        </h5>
-        <div class="my-ibox-content">
-            <form (submit)="saveWidget(widget)" novalidate name="editForm">
-                <ng-container *ngTemplateOutlet="widgetParams;context:{widget:widget}"></ng-container>
-
-                <div style="margin-top: 25px">
-                    <button type="submit" class="btn btn-sm btn-primary" [disabled]="isUpdating">
-                        <i class="far fa-save"></i> Save Widget
-                    </button>
-                    <button type="button" class="btn btn-sm btn-danger" [disabled]="isUpdating" (click)="removeWidget(widget)">
-                        <i class="far fa-trash-alt"></i> Remove Widget
-                    </button>
-                </div>
-            </form>
-        </div>
-    </my-ibox>
-</div>
\ No newline at end of file
+<my-widget-config [widgetComponent]="this">
+    <ng-template #widgetParamsTemplate let-widget="widget">
+        <label class="label-block">
+            Widget Name
+            <input type="text" class="form-control"
+                   placeholder="{{ defaultName }}"
+                   [(ngModel)]="widget.dimension.newName" name="widget-name-{{widget.id}}"
+                   [disabled]="isUpdating"/>
+        </label>
+        <label class="label-block">
+            Widget URL
+            <input type="text" class="form-control"
+                   placeholder="https://matrix.org"
+                   [(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}"
+                   [disabled]="isUpdating"/>
+        </label>
+    </ng-template>
+</my-widget-config>
\ No newline at end of file