diff --git a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.controller.js b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.controller.js
index 942b79eabd..b0e0c303cf 100644
--- a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.controller.js
+++ b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.controller.js
@@ -1,28 +1,35 @@
-function modelsBuilderController($scope, umbRequestHelper, $log, $http, modelsBuilderResource) {
+function modelsBuilderController($scope, $http, umbRequestHelper, modelsBuilderResource) {
 
-    $scope.generate = function() {
-        $scope.generating = true;
+    var vm = this;
+
+    vm.reload = reload;
+    vm.generate = generate;
+    vm.dashboard = null;
+
+    function generate() {
+        vm.generating = true;
         umbRequestHelper.resourcePromise(
                 $http.post(umbRequestHelper.getApiUrl("modelsBuilderBaseUrl", "BuildModels")),
                 'Failed to generate.')
             .then(function (result) {
-                $scope.generating = false;
-                $scope.dashboard = result;
+                vm.generating = false;
+                vm.dashboard = result;
             });
-    };
+    }
 
-    $scope.reload = function () {
-        $scope.ready = false;
+    function reload() {
+        vm.loading = true;
         modelsBuilderResource.getDashboard().then(function (result) {
-            $scope.dashboard = result;
-            $scope.ready = true;
+            vm.dashboard = result;
+            vm.loading = false;
         });
-    };
+    }
 
     function init() {
-        modelsBuilderResource.getDashboard().then(function(result) {
-            $scope.dashboard = result;
-            $scope.ready = true;
+        vm.loading = true;
+        modelsBuilderResource.getDashboard().then(function (result) {
+            vm.dashboard = result;
+            vm.loading = false;
         });
     }
 
diff --git a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.htm b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.htm
deleted file mode 100644
index eeca93bf3a..0000000000
--- a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.htm
+++ /dev/null
@@ -1,41 +0,0 @@
-<div id="modelsBuilder" ng-controller="Umbraco.Dashboard.ModelsBuilderController">
-
-    <div ng-show="ready" style="float: right;">
-        <button type="button" class="btn" ng-click="reload()"><span>Reload</span></button>
-    </div>
-
-    <h3>Models Builder</h3>
-
-    <div ng-show="!ready">
-        Loading...
-    </div>
-
-    <div ng-show="ready">
-        <div ng-bind-html="dashboard.text"></div>
-
-        <div ng-if="dashboard.outOfDateModels">
-            <p>Models are <strong>out-of-date</strong>.
-            </p>
-        </div>
-
-        <div ng-if="dashboard.canGenerate">
-            <div ng-if="dashboard.generateCausesRestart">
-                <p style="color: red; font-weight: bold;">Generating models will restart the application.</p>
-            </div>
-            <div ng-show="!generating">
-                <button type="button" ng-click="generate()" class="btn btn-danger">
-                    <span>Generate models</span>
-                </button>
-            </div>
-            <div class="umb-loader-wrapper" ng-show="generating">
-                <div class="umb-loader"></div>
-            </div>
-        </div>
-
-        <div ng-if="dashboard.lastError" style="margin-top: 32px;" ng-show="!generating">
-            <span style="color: red; font-weight: bold;">Last generation failed with the following error:</span>
-            <pre style="width: 80%; white-space: pre-line; background: #f8f8f8; padding: 4px; font-size: small;">{{dashboard.lastError}}</pre>
-        </div>
-    </div>
-
-</div>
diff --git a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.html b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.html
new file mode 100644
index 0000000000..0c10c33e39
--- /dev/null
+++ b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/modelsbuilder.html
@@ -0,0 +1,44 @@
+<div id="modelsBuilder" ng-controller="Umbraco.Dashboard.ModelsBuilderController as vm">
+
+    <umb-box>
+        <umb-box-content>
+
+            <div ng-show="!vm.loading" class="pull-right">
+                <button type="button" class="btn" ng-click="vm.reload()"><span>Reload</span></button>
+            </div>
+
+            <h3 class="bold">Models Builder</h3>
+
+            <umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
+
+            <div ng-show="!vm.loading && vm.dashboard">
+                <div ng-bind-html="vm.dashboard.text"></div>
+
+                <div ng-if="vm.dashboard.outOfDateModels">
+                    <p>Models are <strong>out-of-date</strong>.</p>
+                </div>
+
+                <div ng-if="vm.dashboard.canGenerate">
+                    <div ng-if="vm.dashboard.generateCausesRestart">
+                        <p style="color: red; font-weight: bold;">Generating models will restart the application.</p>
+                    </div>
+                    <div ng-show="!vm.generating">
+                        <button type="button" ng-click="vm.generate()" class="btn btn-danger">
+                            <span>Generate models</span>
+                        </button>
+                    </div>
+                    <div class="umb-loader-wrapper" ng-show="vm.generating">
+                        <div class="umb-loader"></div>
+                    </div>
+                </div>
+
+                <div ng-if="vm.dashboard.lastError" style="margin-top: 32px;" ng-show="!vm.generating">
+                    <span style="color: red; font-weight: bold;">Last generation failed with the following error:</span>
+                    <pre style="width: 80%; white-space: pre-line; background: #f8f8f8; padding: 4px; font-size: small;">{{vm.dashboard.lastError}}</pre>
+                </div>
+            </div>
+
+        </umb-box-content>
+    </umb-box>
+
+</div>
diff --git a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/package.manifest b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/package.manifest
index d83523517a..5e64177046 100644
--- a/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/package.manifest
+++ b/src/Umbraco.Web.UI/App_Plugins/ModelsBuilder/package.manifest
@@ -1,7 +1,18 @@
 {
-    //array of files we want to inject into the application on app_start
-    javascript: [
-        '~/App_Plugins/ModelsBuilder/modelsbuilder.controller.js',
-		'~/App_Plugins/ModelsBuilder/modelsbuilder.resource.js'
+    // array of files we want to inject into the application
+    "javascript": [
+        "~/App_Plugins/ModelsBuilder/modelsbuilder.controller.js",
+		"~/App_Plugins/ModelsBuilder/modelsbuilder.resource.js"
+    ],
+
+    // models builder dashboard
+    "dashboards":  [
+        {
+            "alias": "settingsModelsBuilder",
+            "name":  "Models Builder",
+            "view":  "/App_Plugins/ModelsBuilder/modelsbuilder.html",
+            "sections":  [ "settings" ],
+            "weight": 40
+        }
     ]
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
index 7c3293183d..245ae7ca94 100644
--- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
+++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
@@ -105,7 +105,7 @@
     <PackageReference Include="MiniProfiler" Version="3.2.0.157" />
     <PackageReference Include="Newtonsoft.Json" Version="11.0.2" />
     <PackageReference Include="Umbraco.ModelsBuilder.Ui">
-      <Version>8.0.0-alpha.36</Version>
+      <Version>8.0.0-alpha.37</Version>
     </PackageReference>
     <PackageReference Include="Umbraco.SqlServerCE" Version="4.0.0.1" />
   </ItemGroup>
diff --git a/src/Umbraco.Web/Dashboards/ModelsBuilderDashboard.cs b/src/Umbraco.Web/Dashboards/ModelsBuilderDashboard.cs
deleted file mode 100644
index 44bc00cb6f..0000000000
--- a/src/Umbraco.Web/Dashboards/ModelsBuilderDashboard.cs
+++ /dev/null
@@ -1,20 +0,0 @@
-using System;
-using Umbraco.Core.Composing;
-using Umbraco.Core.Dashboards;
-
-namespace Umbraco.Web.Dashboards
-{
-    [Weight(40)]
-    public class ModelsBuilderDashboard : IDashboard
-    {
-        public string Alias => "settingsModelsBuilder";
-
-        public string[] Sections => new [] { "settings" };
-
-        public string View => "/App_Plugins/ModelsBuilder/modelsbuilder.htm";
-
-        public IAccessRule[] AccessRules => Array.Empty<IAccessRule>();
-    }
-
-
-}
diff --git a/src/Umbraco.Web/Umbraco.Web.csproj b/src/Umbraco.Web/Umbraco.Web.csproj
index f9fa29f7db..1cb2e9a53e 100755
--- a/src/Umbraco.Web/Umbraco.Web.csproj
+++ b/src/Umbraco.Web/Umbraco.Web.csproj
@@ -130,7 +130,6 @@
     <Compile Include="Dashboards\HealthCheckDashboard.cs" />
     <Compile Include="Dashboards\MediaDashboard.cs" />
     <Compile Include="Dashboards\MembersDashboard.cs" />
-    <Compile Include="Dashboards\ModelsBuilderDashboard.cs" />
     <Compile Include="Dashboards\PublishedStatusDashboard.cs" />
     <Compile Include="Dashboards\RedirectUrlDashboard.cs" />
     <Compile Include="Dashboards\SettingsDashboards.cs" />