diff --git a/src/js/admin-network-view.js b/src/js/admin-network-view.js
index 004ef54..c37e6ff 100644
--- a/src/js/admin-network-view.js
+++ b/src/js/admin-network-view.js
@@ -2,7 +2,7 @@ module.exports = {
   template: "#admin-network-view-template",
 
   attached: function () {
-    this.svelteComponent = SvelteComponents.create(
+    this.svelteComponent = SvelteComponents.createComponent(
       "AdminNetworkView",
       document.getElementById("svelte-root")
     );
diff --git a/src/js/app.js b/src/js/app.js
index bec006a..3871766 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -6,6 +6,9 @@ const Sock = require("./sock");
 const omit = require("lodash.omit");
 
 SvelteComponents.initNetworkInfo();
+SvelteComponents.createComponent("DialogHost",
+  document.getElementById("svelte-dialog-host")
+);
 
 function is_newer_version(current, latest) {
   const pattern = /(\d+)\.(\d+)\.(\d+)(.*)/;
diff --git a/src/js/axis-vars.js b/src/js/axis-vars.js
index 99eff79..18c54e1 100644
--- a/src/js/axis-vars.js
+++ b/src/js/axis-vars.js
@@ -1,107 +1,69 @@
-/******************************************************************************\
-
-                 This file is part of the Buildbotics firmware.
-
-                   Copyright (c) 2015 - 2018, Buildbotics LLC
-                              All rights reserved.
-
-      This file ("the software") is free software: you can redistribute it
-      and/or modify it under the terms of the GNU General Public License,
-       version 2 as published by the Free Software Foundation. You should
-       have received a copy of the GNU General Public License, version 2
-      along with the software. If not, see <http://www.gnu.org/licenses/>.
-
-      The software 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
-                Lesser General Public License for more details.
-
-        You should have received a copy of the GNU Lesser General Public
-                 License along with the software.  If not, see
-                        <http://www.gnu.org/licenses/>.
-
-                 For information regarding this software email:
-                   "Joseph Coffland" <joseph@buildbotics.com>
-
-\******************************************************************************/
-
 'use strict'
 
-
-function is_defined(x) {return typeof x != 'undefined'}
-
-
 module.exports = {
   props: ['state', 'config'],
 
-
   computed: {
-    x: function () {return this._compute_axis('x')},
-    y: function () {return this._compute_axis('y')},
-    z: function () {return this._compute_axis('z')},
-    a: function () {return this._compute_axis('a')},
-    b: function () {return this._compute_axis('b')},
-    c: function () {return this._compute_axis('c')},
-    axes: function () {return this._compute_axes()}
+    x: function () { return this._compute_axis('x') },
+    y: function () { return this._compute_axis('y') },
+    z: function () { return this._compute_axis('z') },
+    a: function () { return this._compute_axis('a') },
+    b: function () { return this._compute_axis('b') },
+    c: function () { return this._compute_axis('c') },
+    axes: function () { return this._compute_axes() }
   },
 
-
   methods: {
     _convert_length: function (value) {
       return this.state.imperial ? value / 25.4 : value;
     },
 
-
     _length_str: function (value) {
       return this._convert_length(value).toLocaleString() +
         (this.state.imperial ? ' in' : ' mm');
     },
 
-
     _compute_axis: function (axis) {
-      var abs        = this.state[axis + 'p'] || 0;
-      var off        = this.state['offset_' + axis];
-      var motor_id   = this._get_motor_id(axis);
-      var motor      = motor_id == -1 ? {} : this.config.motors[motor_id];
-      var enabled    = typeof motor.enabled != 'undefined' && motor.enabled;
+      var abs = this.state[axis + 'p'] || 0;
+      var off = this.state['offset_' + axis];
+      var motor_id = this._get_motor_id(axis);
+      var motor = motor_id == -1 ? {} : this.config.motors[motor_id];
+      var enabled = typeof motor.enabled != 'undefined' && motor.enabled;
       var homingMode = motor['homing-mode']
-      var homed      = this.state[motor_id + 'homed'];
-      var min        = this.state[motor_id + 'tn'];
-      var max        = this.state[motor_id + 'tm'];
-      var dim        = max - min;
-      var pathMin    = this.state['path_min_' + axis];
-      var pathMax    = this.state['path_max_' + axis];
-      var pathDim    = pathMax - pathMin;
-      var under      = pathMin + off < min;
-      var over       = max < pathMax + off;
-      var klass      = (homed ? 'homed' : 'unhomed') + ' axis-' + axis;
-      var state      = 'UNHOMED';
-      var icon       = 'question-circle';
-      var fault      = this.state[motor_id + 'df'] & 0x1f;
-      var shutdown   = this.state.power_shutdown;
+      var homed = this.state[motor_id + 'homed'];
+      var min = this.state[motor_id + 'tn'];
+      var max = this.state[motor_id + 'tm'];
+      var dim = max - min;
+      var pathMin = this.state['path_min_' + axis];
+      var pathMax = this.state['path_max_' + axis];
+      var pathDim = pathMax - pathMin;
+      var under = pathMin + off < min;
+      var over = max < pathMax + off;
+      var klass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis;
+      var state = 'UNHOMED';
+      var icon = 'question-circle';
+      var fault = this.state[motor_id + 'df'] & 0x1f;
+      var shutdown = this.state.power_shutdown;
       var title;
-      var ticon      = 'question-circle';
-      var tstate     = 'NO FILE';
+      var ticon = 'question-circle';
+      var tstate = 'NO FILE';
       var toolmsg;
-      var tklass     = (homed ? 'homed' : 'unhomed') + ' axis-' + axis;
+      var tklass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis;
 
       if (fault || shutdown) {
         state = shutdown ? 'SHUTDOWN' : 'FAULT';
         klass += ' error';
         icon = 'exclamation-circle';
-
-      }  else if(homed) {
+      } else if (homed) {
         state = 'HOMED';
         icon = 'check-circle';
       }
-      
+
       if (0 < dim && dim < pathDim) {
         tstate = 'NO FIT';
         tklass += ' error';
         ticon = 'ban';
-
       } else {
-
         if (over || under) {
           tstate = over ? 'OVER' : 'UNDER';
           tklass += ' warn';
@@ -113,46 +75,44 @@ module.exports = {
       }
 
       switch (state) {
-      case 'UNHOMED': title = 'Click the home button to home axis.'; break;
-      case 'HOMED': title = 'Axis successfuly homed.'; break;
-      case 'FAULT':
-        title = 'Motor driver fault.  A potentially damaging electrical ' +
-          'condition was detected and the motor driver was shutdown.  ' +
-          'Please power down the controller and check your motor cabling.  ' +
-          'See the "Motor Faults" table on the "Indicators" tab for more ' +
-          'information.';
-        break;
-      case 'SHUTDOWN':
-        title = 'Motor power fault.  All motors in shutdown.  ' +
-          'See the "Power Faults" table on the "Indicators" tab for more ' +
-          'information.  Reboot controller to reset.';
-      }
-      
-      switch(tstate) {
-      
-      case 'OVER':
-        toolmsg = 'Caution: The current tool path file would move ' +
-          this._length_str(pathMax + off - max) + ' above axis limit with the current offset.';
-        break;
+        case 'UNHOMED': title = 'Click the home button to home axis.'; break;
+        case 'HOMED': title = 'Axis successfuly homed.'; break;
+        case 'FAULT':
+          title = 'Motor driver fault.  A potentially damaging electrical ' +
+            'condition was detected and the motor driver was shutdown.  ' +
+            'Please power down the controller and check your motor cabling.  ' +
+            'See the "Motor Faults" table on the "Indicators" tab for more ' +
+            'information.';
+          break;
 
-      case 'UNDER':
-        toolmsg = 'Caution: The current tool path file would move ' +
-          this._length_str(min - pathMin - off) + ' below limit with the current offset.';
-        break;
-
-      case 'NO FIT':
-        toolmsg = 'Warning: The current tool path dimensions (' +
-          this._length_str(pathDim) + ') exceed axis dimensions (' +
-          this._length_str(dim) + ') by ' +
-          this._length_str(pathDim - dim) + '.';
-        break;
-        
-      default:
-      	toolmsg = 'Tool path ' + axis + ' dimensions OK.';
-      	break;
-      
+        case 'SHUTDOWN':
+          title = 'Motor power fault.  All motors in shutdown.  ' +
+            'See the "Power Faults" table on the "Indicators" tab for more ' +
+            'information.  Reboot controller to reset.';
+      }
+
+      switch (tstate) {
+        case 'OVER':
+          toolmsg = 'Caution: The current tool path file would move ' +
+            this._length_str(pathMax + off - max) + ' above axis limit with the current offset.';
+          break;
+
+        case 'UNDER':
+          toolmsg = 'Caution: The current tool path file would move ' +
+            this._length_str(min - pathMin - off) + ' below limit with the current offset.';
+          break;
+
+        case 'NO FIT':
+          toolmsg = 'Warning: The current tool path dimensions (' +
+            this._length_str(pathDim) + ') exceed axis dimensions (' +
+            this._length_str(dim) + ') by ' +
+            this._length_str(pathDim - dim) + '.';
+          break;
+
+        default:
+          toolmsg = 'Tool path ' + axis + ' dimensions OK.';
+          break;
       }
-      
 
       return {
         pos: abs - off,
@@ -179,7 +139,6 @@ module.exports = {
       }
     },
 
-
     _get_motor_id: function (axis) {
       for (var i = 0; i < this.config.motors.length; i++) {
         var motor = this.config.motors[i];
@@ -189,7 +148,6 @@ module.exports = {
       return -1;
     },
 
-
     _compute_axes: function () {
       var homed = false;
 
@@ -197,7 +155,7 @@ module.exports = {
         var axis = this[name];
 
         if (!axis.enabled) continue
-        if (!axis.homed) {homed = false; break}
+        if (!axis.homed) { homed = false; break }
         homed = true;
       }
 
@@ -217,10 +175,11 @@ module.exports = {
       if (error) klass += ' error';
       else if (warn) klass += ' warn';
 
-      if(!homed && this.ask_home)
-      {
-      	this.ask_home_msg = true;
-      	this.ask_home = false;
+      if (!homed && this.ask_home) {
+        this.ask_home = false;
+        SvelteComponents.showDialog("HomeMachine", {
+          home: () => this.home()
+        });
       }
 
       return {
diff --git a/src/js/control-view.js b/src/js/control-view.js
index 802f3d5..53d7aee 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -27,7 +27,7 @@
 
 'use strict'
 
-var api    = require('./api');
+var api = require('./api');
 var cookie = require('./cookie')('bbctrl-');
 
 module.exports = {
@@ -81,7 +81,6 @@ module.exports = {
         c: false
       },
       ask_home: true,
-      ask_home_msg: false,
       ask_zero_xy_msg: false,
       ask_zero_z_msg: false,
       showGcodeMessage: false
@@ -102,10 +101,10 @@ module.exports = {
       },
       immediate: true
     },
-    
+
     'state.bitDiameter': {
       handler: function (bitDiameter) {
-          this.tool_diameter = bitDiameter;
+        this.tool_diameter = bitDiameter;
       },
       immediate: true
     },
@@ -115,7 +114,7 @@ module.exports = {
       if ((units == 'METRIC') != this.metric)
         this.send(units == 'METRIC' ? 'G21' : 'G20');
 
-        this.units_changed();
+      this.units_changed();
     },
 
     'state.line': function () {
@@ -129,7 +128,7 @@ module.exports = {
 
     jog_step: function () {
       cookie.set_bool('jog-step', this.jog_step);
-  },
+    },
 
     jog_adjust: function () {
       cookie.set('jog-adjust', this.jog_adjust);
@@ -148,13 +147,13 @@ module.exports = {
       var state = this.state.xx;
 
       if (typeof cycle != 'undefined' && state != 'ESTOPPED' &&
-          (cycle == 'jogging' || cycle == 'homing'))
+        (cycle == 'jogging' || cycle == 'homing'))
         return cycle.toUpperCase();
       return state || ''
     },
 
 
-    pause_reason: function () {return this.state.pr},
+    pause_reason: function () { return this.state.pr },
 
 
     is_running: function () {
@@ -162,20 +161,20 @@ module.exports = {
     },
 
 
-    is_stopping: function () {return this.mach_state == 'STOPPING'},
-    is_holding: function () {return this.mach_state == 'HOLDING'},
-    is_ready: function () {return this.mach_state == 'READY'},
-    is_idle: function () {return this.state.cycle == 'idle'},
+    is_stopping: function () { return this.mach_state == 'STOPPING' },
+    is_holding: function () { return this.mach_state == 'HOLDING' },
+    is_ready: function () { return this.mach_state == 'READY' },
+    is_idle: function () { return this.state.cycle == 'idle' },
 
 
     is_paused: function () {
       return this.is_holding &&
         (this.pause_reason == 'User pause' ||
-         this.pause_reason == 'Program pause')
+          this.pause_reason == 'Program pause')
     },
 
 
-    can_mdi: function () {return this.is_idle || this.state.cycle == 'mdi'},
+    can_mdi: function () { return this.is_idle || this.state.cycle == 'mdi' },
 
 
     can_set_axis: function () {
@@ -199,7 +198,7 @@ module.exports = {
     },
 
 
-    plan_time: function () {return this.state.plan_time},
+    plan_time: function () { return this.state.plan_time },
 
 
     plan_time_remaining: function () {
@@ -227,20 +226,20 @@ module.exports = {
 
   events: {
     jog: function (axis, power) {
-      var data = {ts: new Date().getTime()};
+      var data = { ts: new Date().getTime() };
       data[axis] = power;
       api.put('jog', data);
     },
 
-    back2zero: function(axis0,axis1) {
-      this.send("G0"+axis0+"0"+axis1+"0");
+    back2zero: function (axis0, axis1) {
+      this.send("G0" + axis0 + "0" + axis1 + "0");
     },
 
     step: function (axis, value) {
       this.send('M70\nG91\nG0' + axis + value + '\nM72');
     },
 
-    probing_failed: function() {
+    probing_failed: function () {
       Vue.set(this.state, "probing_active", false);
       Vue.set(this.state, "wait_for_probing_complete", false);
       Vue.set(this.state, "show_probe_complete_modal", false);
@@ -249,7 +248,7 @@ module.exports = {
       Vue.set(this.state, "show_probe_failed_modal", true);
     },
 
-    probing_complete: function() {
+    probing_complete: function () {
       Vue.set(this.state, "probing_active", false);
 
       if (this.config.settings['probing-prompts']) {
@@ -259,7 +258,7 @@ module.exports = {
       }
     },
 
-    finalize_probe: function() {
+    finalize_probe: function () {
       Vue.set(this.state, "show_probe_complete_modal", false);
 
       if (this.state.goto_xy_zero_after_probe) {
@@ -277,8 +276,8 @@ module.exports = {
 
 
   methods: {
-    units_changed : function() {
-      if(this.mach_units == 'METRIC') {
+    units_changed: function () {
+      if (this.mach_units == 'METRIC') {
         document.getElementById("jog_button_fine").innerHTML = "0.1";
         document.getElementById("jog_button_small").innerHTML = "1.0";
         document.getElementById("jog_button_medium").innerHTML = "10";
@@ -293,7 +292,7 @@ module.exports = {
       this.set_jog_incr('small');
     },
 
-    start_probe_test: function(on_finish) {
+    start_probe_test: function (on_finish) {
       if (!this.config.settings['probing-prompts']) {
         on_finish();
         return;
@@ -304,7 +303,7 @@ module.exports = {
       Vue.set(this.state, "on_probe_finish", on_finish);
     },
 
-    finish_probe_test: function() {
+    finish_probe_test: function () {
       this.show_probe_test_modal = false;
       Vue.set(this.state, "saw_probe_connected", false);
 
@@ -314,14 +313,14 @@ module.exports = {
       on_finish();
     },
 
-    hide_probe_failed_modal: function() {
+    hide_probe_failed_modal: function () {
       Vue.set(this.state, "show_probe_failed_modal", false);
     },
 
     prep_and_show_tool_diameter_modal() {
       this.tool_diameter_for_prompt = (this.mach_units == 'METRIC')
-          ? this.tool_diameter
-          : this.tool_diameter / 25.4;
+        ? this.tool_diameter
+        : this.tool_diameter / 25.4;
 
       this.tool_diameter_for_prompt = this.tool_diameter_for_prompt.toFixed(3).replace(/0+$/, "");
 
@@ -340,7 +339,7 @@ module.exports = {
       if (this.mach_units !== "METRIC") {
         this.tool_diameter *= 25.4;
       }
-      
+
       this.probe_xyz();
     },
 
@@ -429,7 +428,7 @@ module.exports = {
       this.probe(true);
     },
 
-    set_jog_incr: function(newValue) {
+    set_jog_incr: function (newValue) {
       document.getElementById("jog_button_fine").style.fontWeight = 'normal';
       document.getElementById("jog_button_small").style.fontWeight = 'normal';
       document.getElementById("jog_button_medium").style.fontWeight = 'normal';
@@ -437,19 +436,19 @@ module.exports = {
 
       if (newValue == 'fine') {
         document.getElementById("jog_button_fine").style.fontWeight = 'bold';
-        if(this.mach_units == 'METRIC')
+        if (this.mach_units == 'METRIC')
           this.jog_incr = 0.1;
         else
           this.jog_incr = 0.005;
       } else if (newValue == 'small') {
         document.getElementById("jog_button_small").style.fontWeight = 'bold';
-        if(this.mach_units == 'METRIC')
+        if (this.mach_units == 'METRIC')
           this.jog_incr = 1.0;
         else
           this.jog_incr = 0.05;
       } else if (newValue == 'medium') {
         document.getElementById("jog_button_medium").style.fontWeight = 'bold';
-        if(this.mach_units == 'METRIC')
+        if (this.mach_units == 'METRIC')
           this.jog_incr = 10;
         else
           this.jog_incr = 0.5;
@@ -462,15 +461,15 @@ module.exports = {
       }
     },
 
-    goto_zero(zero_x,zero_y,zero_z,zero_a) {
+    goto_zero(zero_x, zero_y, zero_z, zero_a) {
       var xcmd = "";
       var ycmd = "";
       var zcmd = "";
       var acmd = "";
-      if(zero_x) xcmd = "X0";
-      if(zero_y) ycmd = "Y0";
-      if(zero_z) zcmd = "Z0";
-      if(zero_a) acmd = "A0";
+      if (zero_x) xcmd = "X0";
+      if (zero_y) ycmd = "Y0";
+      if (zero_z) zcmd = "Z0";
+      if (zero_a) acmd = "A0";
 
       this.ask_zero_xy_msg = false;
       this.ask_zero_z_msg = false;
@@ -478,7 +477,7 @@ module.exports = {
       this.send('G90\nG0' + xcmd + ycmd + zcmd + acmd + '\n');
     },
 
-    jog_fn: function (x_jog,y_jog,z_jog,a_jog) {
+    jog_fn: function (x_jog, y_jog, z_jog, a_jog) {
       var xcmd = "X" + x_jog * this.jog_incr;
       var ycmd = "Y" + y_jog * this.jog_incr;
       var zcmd = "Z" + z_jog * this.jog_incr;
@@ -619,22 +618,24 @@ module.exports = {
 
 
     home: function (axis) {
-      
       this.ask_home = false;
-      this.ask_home_msg = false;     
-      
-      if (typeof axis == 'undefined') api.put('home');
 
-      else {
-        if (this[axis].homingMode != 'manual') api.put('home/' + axis);
-        else this.manual_home[axis] = true;
+      if (typeof axis == 'undefined') {
+        api.put('home');
+      } else {
+        if (this[axis].homingMode != 'manual') {
+          api.put('home/' + axis);
+        }
+        else {
+          this.manual_home[axis] = true;
+        }
       }
     },
 
 
     set_home: function (axis, position) {
       this.manual_home[axis] = false;
-      api.put('home/' + axis + '/set', {position: parseFloat(position)});
+      api.put('home/' + axis + '/set', { position: parseFloat(position) });
     },
 
 
@@ -648,15 +649,15 @@ module.exports = {
       this.axis_position = 0;
       this.position_msg[axis] = true;
     },
-    
-    show_toolpath_msg : function(axis) {
+
+    show_toolpath_msg: function (axis) {
       this.toolpath_msg[axis] = true;
     },
 
 
     set_position: function (axis, position) {
       this.position_msg[axis] = false;
-      api.put('position/' + axis, {'position': parseFloat(position)});
+      api.put('position/' + axis, { 'position': parseFloat(position) });
     },
 
 
@@ -682,15 +683,15 @@ module.exports = {
     },
 
 
-    start: function () {api.put('start')},
-    pause: function () {api.put('pause')},
-    unpause: function () {api.put('unpause')},
-    optional_pause: function () {api.put('pause/optional')},
-    stop: function () {api.put('stop')},
-    step: function () {api.put('step')},
+    start: function () { api.put('start') },
+    pause: function () { api.put('pause') },
+    unpause: function () { api.put('unpause') },
+    optional_pause: function () { api.put('pause/optional') },
+    stop: function () { api.put('stop') },
+    step: function () { api.put('step') },
 
 
-    override_feed: function () {api.put('override/feed/' + this.feed_override)},
+    override_feed: function () { api.put('override/feed/' + this.feed_override) },
 
 
     override_speed: function () {
diff --git a/src/pug/index.pug b/src/pug/index.pug
index 1eedc13..575e904 100644
--- a/src/pug/index.pug
+++ b/src/pug/index.pug
@@ -20,6 +20,8 @@ html(lang="en")
     style: include:stylus ../stylus/style.styl
 
   body(v-cloak)
+    #svelte-dialog-host
+
     #overlay(v-if="status != 'connected'")
       span {{status}}
     
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 7c08bf5..83c8dc8 100644
--- a/src/pug/templates/control-view.pug
+++ b/src/pug/templates/control-view.pug
@@ -36,20 +36,7 @@ script#control-view-template(type="text/x-template")
         
       div(slot="footer")
         label Simulating {{(toolpath_progress || 0) | percent}}
-            
-    message(:show.sync=`ask_home_msg`)
-        h3(slot="header") Home Machine
 
-        div(slot="body")
-          p Home the machine?
-
-        div(slot="footer")
-          button.pure-button(@click="home()")
-            | OK
-            
-          button.pure-button(@click='ask_home_msg = false; ask_home = false')
-            | Cancel
-    
     message(:show.sync=`ask_zero_xy_msg`)
         h3(slot="header") XY Origin
 
@@ -497,9 +484,6 @@ script#control-view-template(type="text/x-template")
       section#content4.tab-content
         indicators(:state="state", :template="template")
 
-
-
-
     .override(title="Feed rate override.")
       label Feed
       input(type="range", min="0", max="2", step="0.01",
diff --git a/src/svelte-components/src/components/AdminNetworkView.svelte b/src/svelte-components/src/components/AdminNetworkView.svelte
index 285e2cb..0b7dad3 100644
--- a/src/svelte-components/src/components/AdminNetworkView.svelte
+++ b/src/svelte-components/src/components/AdminNetworkView.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import WifiConnectionDialog from "../dialogs/WifiConnectionDialog.svelte";
   import ChangeHostnameDialog from "../dialogs/ChangeHostnameDialog.svelte";
-  import Paper from "@smui/paper";
   import Button, { Label } from "@smui/button";
   import List, { Item, Graphic, Text, Meta } from "@smui/list";
   import Card from "@smui/card";
diff --git a/src/svelte-components/src/components/DialogHost.svelte b/src/svelte-components/src/components/DialogHost.svelte
new file mode 100644
index 0000000..93de949
--- /dev/null
+++ b/src/svelte-components/src/components/DialogHost.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  import HomeMachineDialog from "../dialogs/HomeMachineDialog.svelte";
+  import { HomeMachine } from "../lib/DialogProps";
+</script>
+
+<HomeMachineDialog {...$HomeMachine} />
diff --git a/src/svelte-components/src/dialogs/HomeMachineDialog.svelte b/src/svelte-components/src/dialogs/HomeMachineDialog.svelte
new file mode 100644
index 0000000..3dca1a6
--- /dev/null
+++ b/src/svelte-components/src/dialogs/HomeMachineDialog.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
+  import Button, { Label } from "@smui/button";
+
+  export let open;
+  export let home: () => any;
+</script>
+
+<Dialog
+  bind:open
+  aria-labelledby="simple-title"
+  aria-describedby="simple-content"
+>
+  <Title id="simple-title">Home Machine</Title>
+
+  <Content id="simple-content">Home the machine?</Content>
+
+  <Actions>
+    <Button>
+      <Label>Cancel</Label>
+    </Button>
+
+    <Button defaultAction use={[InitialFocus]} on:click={home}>
+      <Label>OK</Label>
+    </Button>
+  </Actions>
+</Dialog>
diff --git a/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte b/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte
index cc14505..d6f333c 100644
--- a/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte
+++ b/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
   import Button, { Label } from "@smui/button";
   import TextField from "@smui/textfield";
   import Icon from "@smui/textfield/icon";
@@ -22,7 +22,9 @@
 
   $: {
     connectOrDisconnect = network?.active ? "Disconnect" : "Connect";
-    connectToOrDisconnectFrom = network?.active ? "Disconnect from" : "Connect to";
+    connectToOrDisconnectFrom = network?.active
+      ? "Disconnect from"
+      : "Connect to";
   }
 
   $: if (open) {
@@ -92,6 +94,7 @@
 
     <Button
       defaultAction
+      use={[InitialFocus]}
       on:click={onConfirm}
       disabled={needPassword && (password.length < 8 || password.length > 128)}
     >
diff --git a/src/svelte-components/src/lib/DialogProps.ts b/src/svelte-components/src/lib/DialogProps.ts
new file mode 100644
index 0000000..290f4df
--- /dev/null
+++ b/src/svelte-components/src/lib/DialogProps.ts
@@ -0,0 +1,16 @@
+import { writable } from "svelte/store";
+
+type HomeMachine = {
+    open: boolean,
+    home: () => any
+}
+
+export type DialogPropsTypes = {
+    HomeMachine: HomeMachine
+}
+
+export const HomeMachine = writable<HomeMachine>();
+
+export default {
+    HomeMachine
+};
diff --git a/src/svelte-components/src/main.ts b/src/svelte-components/src/main.ts
index 35ff8bf..9d07eb0 100644
--- a/src/svelte-components/src/main.ts
+++ b/src/svelte-components/src/main.ts
@@ -2,14 +2,34 @@ import 'polyfill-object.fromentries';
 import AdminNetworkView from './components/AdminNetworkView.svelte';
 import { init as initNetworkInfo } from './lib/NetworkInfo';
 
-export function create(component: string, target: HTMLElement, props: Record<string, any>) {
+import DialogHost from "./components/DialogHost.svelte";
+import DialogProps from "./lib/DialogProps";
+import type { DialogPropsTypes } from "./lib/DialogProps";
+
+export function createComponent(component: string, target: HTMLElement, props: Record<string, any>) {
   switch (component) {
     case "AdminNetworkView":
       return new AdminNetworkView({ target, props });
 
+    case "DialogHost":
+      return new DialogHost({ target, props });
+
     default:
       throw new Error("Unknown component");
   }
 }
 
-export { initNetworkInfo };
+export function showDialog<T extends keyof typeof DialogProps>(dialog: T, props: DialogPropsTypes[T]) {
+  switch (dialog) {
+    case "HomeMachine":
+      DialogProps.HomeMachine.set({ ...props, open: true });
+      break;
+
+    default:
+      throw new Error(`Unknown dialog '${dialog}`);
+  }
+}
+
+export {
+  initNetworkInfo
+};
diff --git a/src/svelte-components/src/theme/_smui-theme.scss b/src/svelte-components/src/theme/_smui-theme.scss
index a9e871c..da2b910 100644
--- a/src/svelte-components/src/theme/_smui-theme.scss
+++ b/src/svelte-components/src/theme/_smui-theme.scss
@@ -1,9 +1,9 @@
-@use 'sass:color';
+@use "sass:color";
 
-@use '@material/theme/color-palette';
+@use "@material/theme/color-palette";
 
 // Svelte Colors!
-@use '@material/theme/index' as theme with (
+@use "@material/theme/index" as theme with (
   $primary: #0078e7,
   $secondary: #676778,
   $surface: #fff,
@@ -13,10 +13,19 @@
 );
 
 @use "@material/elevation/mdc-elevation";
-
 @use "@material/list";
+
 @include list.deprecated-core-styles;
 
 :root {
   --mdc-theme-text-primary-on-background: #777;
-}
\ No newline at end of file
+
+  .mdc-dialog .mdc-dialog__content {
+    color: #777;
+  }
+
+  .mdc-dialog .mdc-dialog__title {
+    color: #777;
+    font-weight: bold;
+  }
+}