diff --git a/ui/arduino/main.css b/ui/arduino/main.css
index defb54c..ad387c6 100644
--- a/ui/arduino/main.css
+++ b/ui/arduino/main.css
@@ -8,7 +8,6 @@
 }
 
 * {
-  /* box-sizing: border-box; */
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
@@ -643,3 +642,32 @@ button.small .icon {
 #code-editor .cm-panel.cm-search [name="close"] {
   position: relative;
 }
+
+#overlay {
+  position: fixed;
+  display: flex;
+  background: rgba(255, 255, 255, 0.5);
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s;
+  pointer-events: none;
+  opacity: 0;
+}
+
+#overlay.open {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  pointer-events: all;
+  cursor: wait;
+  opacity: 1;
+}
+
+#overlay.open > * {
+  background: white;
+  padding: 1em 1.5em;
+}
diff --git a/ui/arduino/main.js b/ui/arduino/main.js
index 6098973..f7d1ef7 100644
--- a/ui/arduino/main.js
+++ b/ui/arduino/main.js
@@ -19,18 +19,27 @@ function App(state, emit) {
     `
   }
 
+  let overlay = html`<div id="overlay" class="closed"></div>`
+
   if (state.diskFiles == null) {
     emit('load-disk-files')
-    return html`<div id="app"><p>Loading files...</p></div>`
+    overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
   }
 
-  if (state.isRemoving) return html`<div id="app"><p>Removing...</p></div>`
-  if (state.isConnecting) return html`<div id="app"><p>Connecting...</p></div>`
-  if (state.isLoadingFiles) return html`<div id="app"><p>Loading files...</p></div>`
-  if (state.isSaving) return html`<div id="app"><p>Saving file... ${state.savingProgress}</p></div>`
-  if (state.isTransferring) return html`<div id="app"><p>Transferring file... ${state.transferringProgress}</p></div>`
+  if (state.isRemoving) overlay = html`<div id="overlay" class="open"><p>Removing...</p></div>`
+  if (state.isConnecting) overlay = html`<div id="overlay" class="open"><p>Connecting...</p></div>`
+  if (state.isLoadingFiles) overlay = html`<div id="overlay" class="open"><p>Loading files...</p></div>`
+  if (state.isSaving) overlay = html`<div id="overlay" class="open"><p>Saving file... ${state.savingProgress}</p></div>`
+  if (state.isTransferring) overlay = html`<div id="overlay" class="open"><p>Transferring file... ${state.transferringProgress}</p></div>`
+
+  const view = state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit)
+  return html`
+    <div id="app">
+      ${view}
+      ${overlay}
+    </div>
+  `
 
-  return state.view == 'editor' ? EditorView(state, emit) : FileManagerView(state, emit)
 }
 
 window.addEventListener('load', () => {
diff --git a/ui/arduino/views/editor.js b/ui/arduino/views/editor.js
index fbef046..fd93b08 100644
--- a/ui/arduino/views/editor.js
+++ b/ui/arduino/views/editor.js
@@ -1,13 +1,11 @@
 function EditorView(state, emit) {
   return html`
-    <div id="app">
-      <div class="working-area">
-        ${Toolbar(state, emit)}
-        ${Tabs(state, emit)}
-        ${CodeEditor(state, emit)}
-        ${ReplPanel(state, emit)}
-      </div>
-      ${ConnectionDialog(state, emit)}
+    <div class="working-area">
+      ${Toolbar(state, emit)}
+      ${Tabs(state, emit)}
+      ${CodeEditor(state, emit)}
+      ${ReplPanel(state, emit)}
     </div>
+    ${ConnectionDialog(state, emit)}
   `
 }
diff --git a/ui/arduino/views/file-manager.js b/ui/arduino/views/file-manager.js
index a193edd..04626ec 100644
--- a/ui/arduino/views/file-manager.js
+++ b/ui/arduino/views/file-manager.js
@@ -7,44 +7,42 @@ function FileManagerView(state, emit) {
   }
 
   return html`
-    <div id="app">
-      <div class="working-area">
-        ${Toolbar(state, emit)}
-        <div id="file-manager">
-          <div id="board-files">
-            <div class="device-header">
-              <img class="icon" src="media/${state.isConnected?'connect':'disconnect'}.svg" />
-              <div onclick=${() => emit('open-connection-dialog')} class="text">
-                <span>${boardFullPath}</span>
-              </div>
-              <button disabled=${!state.isConnected} onclick=${() => emit('create-folder', 'board')}>
-                <img class="icon" src="media/new-folder.svg" />
-              </button>
-              <button disabled=${!state.isConnected} onclick=${() => emit('create-file', 'board')}>
-                <img class="icon" src="media/new-file.svg" />
-              </button>
+    <div class="working-area">
+      ${Toolbar(state, emit)}
+      <div id="file-manager">
+        <div id="board-files">
+          <div class="device-header">
+            <img class="icon" src="media/${state.isConnected?'connect':'disconnect'}.svg" />
+            <div onclick=${() => emit('open-connection-dialog')} class="text">
+              <span>${boardFullPath}</span>
             </div>
-            ${BoardFileList(state, emit)}
+            <button disabled=${!state.isConnected} onclick=${() => emit('create-folder', 'board')}>
+              <img class="icon" src="media/new-folder.svg" />
+            </button>
+            <button disabled=${!state.isConnected} onclick=${() => emit('create-file', 'board')}>
+              <img class="icon" src="media/new-file.svg" />
+            </button>
           </div>
-          ${FileActions(state, emit)}
-          <div id="disk-files">
-            <div class="device-header">
-              <img class="icon" src="media/computer.svg" />
-              <div class="text" onclick=${() => emit('select-disk-navigation-root')}>
-                <span>${diskFullPath}</span>
-              </div>
-              <button onclick=${() => emit('create-folder', 'disk')}>
-                <img class="icon" src="media/new-folder.svg" />
-              </button>
-              <button onclick=${() => emit('create-file', 'disk')}>
-                <img class="icon" src="media/new-file.svg" />
-              </button>
+          ${BoardFileList(state, emit)}
+        </div>
+        ${FileActions(state, emit)}
+        <div id="disk-files">
+          <div class="device-header">
+            <img class="icon" src="media/computer.svg" />
+            <div class="text" onclick=${() => emit('select-disk-navigation-root')}>
+              <span>${diskFullPath}</span>
             </div>
-            ${DiskFileList(state, emit)}
+            <button onclick=${() => emit('create-folder', 'disk')}>
+              <img class="icon" src="media/new-folder.svg" />
+            </button>
+            <button onclick=${() => emit('create-file', 'disk')}>
+              <img class="icon" src="media/new-file.svg" />
+            </button>
           </div>
+          ${DiskFileList(state, emit)}
         </div>
       </div>
-      ${ConnectionDialog(state, emit)}
     </div>
+    ${ConnectionDialog(state, emit)}
   `
 }