diff --git a/public/index.html b/public/index.html
index aec5dcd9..0ca6eee1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,6 @@
     <noscript>
       <strong>We're sorry but Frappe Books doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <!-- built files will replace body.innerHTML -->
   </body>
 </html>
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index 211faaf6..2cf9c0bb 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -17,7 +17,7 @@
     :style="{ opacity }"
     v-if="show"
   >
-    <feather-icon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
+    <FeatherIcon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
     <div @click="actionClicked" :class="actionText ? 'cursor-pointer' : ''">
       <p class="text-base">{{ message }}</p>
       <button
@@ -36,8 +36,12 @@
 </template>
 <script>
 import { getColorClass } from '../colors';
+import FeatherIcon from './FeatherIcon.vue';
 
 export default {
+  components: {
+    FeatherIcon,
+  },
   data() {
     return {
       opacity: 0,
@@ -77,10 +81,6 @@ export default {
     },
   },
   mounted() {
-    const mountTarget = document.createElement('div');
-    mountTarget.id = 'toast-target';
-    this.$el.parentElement.append(mountTarget);
-
     setTimeout(() => {
       this.opacity = 1;
     }, 50);
diff --git a/src/index.html b/src/index.html
index 289c744f..f4c834cb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,5 @@
     <% } %>
 </head>
 <body>
-    <div id="app"></div>
 </body>
 </html>
diff --git a/src/main.js b/src/main.js
index aedd48fb..e9da80ce 100644
--- a/src/main.js
+++ b/src/main.js
@@ -84,7 +84,7 @@ import { showToast, stringifyCircular } from './utils';
     console.error(err, vm, info);
   };
 
-  app.mount('#app');
+  app.mount('body');
 })();
 
 function registerIpcRendererListeners() {
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index 79a8b2ef..0af4b623 100644
--- a/src/pages/Desk.vue
+++ b/src/pages/Desk.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex overflow-hidden">
     <Sidebar
-      class="w-44 flex-shrink-0"
+      class="w-48 flex-shrink-0"
       @change-db-file="$emit('change-db-file')"
     />
     <div class="flex flex-1 overflow-y-hidden bg-white">
@@ -26,7 +26,7 @@
       <div
         id="toast-container"
         class="absolute bottom-0 flex flex-col items-center mb-3"
-        style="width: calc(100% - 11rem)"
+        style="width: calc(100% - 12rem)"
       >
         <div id="toast-target" />
       </div>
diff --git a/src/utils.js b/src/utils.js
index 0f7cbf53..b1802f80 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -5,7 +5,7 @@ import { ipcRenderer } from 'electron';
 import frappe, { t } from 'frappe';
 import { isPesa } from 'frappe/utils';
 import lodash from 'lodash';
-import { createApp } from 'vue';
+import { createApp, h } from 'vue';
 import { handleErrorWithDialog } from './errorHandling';
 import { IPC_ACTIONS, IPC_MESSAGES } from './messages';
 
@@ -335,13 +335,24 @@ export async function getSavePath(name, extention) {
   return { canceled, filePath };
 }
 
+function replaceAndAppendMount(app, replaceId) {
+  const fragment = document.createDocumentFragment();
+  const target = document.getElementById(replaceId);
+  const parent = target.parentElement;
+  const clone = target.cloneNode();
+
+  app.mount(fragment);
+  target.replaceWith(fragment);
+  parent.append(clone);
+}
+
 export function showToast(props) {
-  createApp({
-    el: '#toast-target',
-    render(createElement) {
-      return createElement(Toast, { props });
+  const toast = createApp({
+    render() {
+      return h(Toast, { ...props });
     },
   });
+  replaceAndAppendMount(toast, 'toast-target');
 }
 
 export function titleCase(phrase) {
@@ -444,6 +455,8 @@ export function stringifyCircular(
   });
 }
 
+window.showToast = showToast;
+
 export function checkForUpdates(force = false) {
   ipcRenderer.invoke(IPC_ACTIONS.CHECK_FOR_UPDATES, force);
 }
