diff --git a/dashboard/src/components/Whirlpool.vue b/dashboard/src/components/Whirlpool.vue
new file mode 100644
index 000000000..032626fe4
--- /dev/null
+++ b/dashboard/src/components/Whirlpool.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="whirlpool">
+    <div class="ring ring1"></div>
+    <div class="ring ring2"></div>
+    <div class="ring ring3"></div>
+    <div class="ring ring4"></div>
+    <div class="ring ring5"></div>
+    <div class="ring ring6"></div>
+    <div class="ring ring7"></div>
+    <div class="ring ring8"></div>
+    <div class="ring ring9"></div>
+  </div>
+</template>
+
+<style scoped>
+
+.whirlpool {
+  width: 100px;
+  height: 100px;
+  margin: 100px auto;
+  position: relative;
+}
+
+.ring:before {
+  content: '';
+  border-radius: 50%;
+  border: 1px solid #096dbd;
+  height: 30px;
+  width: 100px;
+  position: absolute;
+}
+
+.ring1:before {
+  left: 40px;
+  width: 20px;
+  top: 12px;
+  height: 6px;
+  animation: 2.5s ease 0s infinite spinner;
+}
+
+.ring2:before {
+  left: 35px;
+  width: 30px;
+  top: 10.5px;
+  height: 9px;
+  animation: 2.5s ease 0.1s infinite spinner;
+}
+
+.ring3:before {
+  left: 30px;
+  width: 40px;
+  top: 9px;
+  height: 12px;
+  animation: 2.5s ease 0.2s infinite spinner;
+}
+
+.ring4:before {
+  left: 25px;
+  width: 50px;
+  top: 7.5px;
+  height: 15px;
+  animation: 2.5s ease 0.3s infinite spinner;
+}
+
+.ring5:before {
+  left: 20px;
+  width: 60px;
+  top: 6px;
+  height: 18px;
+  animation: 2.5s ease 0.4s infinite spinner;
+}
+
+.ring6:before {
+  left: 15px;
+  width: 70px;
+  top: 4.5px;
+  height: 21px;
+  animation: 2.5s ease 0.5s infinite spinner;
+}
+
+.ring7:before {
+  left: 10px;
+  width: 80px;
+  top: 3px;
+  height: 24px;
+  animation: 2.5s ease 0.6s infinite spinner;
+}
+
+.ring8:before {
+  left: 5px;
+  width: 90px;
+  top: 1.5px;
+  height: 27px;
+  animation: 2.5s ease 0.7s infinite spinner;
+}
+
+.ring9:before {
+  width: 100px;
+  height: 30px;
+  animation: 2.5s ease 0.8s infinite spinner;
+}
+
+@keyframes spinner {
+  0% {
+    transform: translateY(10px);
+    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+  }
+  50% {
+    transform: translateY(60px);
+    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+  }
+  100% {
+    transform: translateY(10px);
+    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+  }
+}
+
+</style>
diff --git a/dashboard/src/views/RestoreView.vue b/dashboard/src/views/RestoreView.vue
index b171e12d5..20ac419eb 100644
--- a/dashboard/src/views/RestoreView.vue
+++ b/dashboard/src/views/RestoreView.vue
@@ -1,12 +1,13 @@
 <script setup>
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Notification, ProgressBar, Button, SingleSelect, FormGroup, PasswordInput, TextInput, Checkbox } from '@cloudron/pankow';
+import { Notification, Button, SingleSelect, FormGroup, PasswordInput, TextInput, Checkbox } from '@cloudron/pankow';
 import { copyToClipboard } from '@cloudron/pankow/utils';
 import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
 import { redirectIfNeeded, mountlike, s3like } from  '../utils.js';
 import ProvisionModel from '../models/ProvisionModel.js';
 import BackupProviderForm from '../components/BackupProviderForm.vue';
+import Whirlpool from '../components/Whirlpool.vue';
 
 const provisionModel = ProvisionModel.create();
 
@@ -313,18 +314,14 @@ onMounted(async () => {
   <div class="container" v-if="ready">
     <Notification />
 
-    <Transition name="slide-fade" mode="out-in">
-      <div class="view" v-if="waitingForRestore" style="text-align: center;">
-        <div>
-          <h3>Please wait while Cloudron is restoring</h3>
-          <ProgressBar mode="indeterminate" :show-label="false" :slim="true"/>
-          <h3>{{ progressMessage }}</h3>
-        </div>
-        <div style="position: absolute; bottom: 10px; text-align: center; width: 100%; font-size: 12px;">
-          <span v-show="taskMinutesActive >= 4">If restore appears stuck, it can be restarted by running <code @click="onCopyToClipboard('systemctl restart box')">systemctl restart box</code> and reloading this page.</span>
-          <br/>
-          <br/>
-          You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code>
+    <Transition name="fade-scale" mode="out-in">
+      <div class="view" v-if="waitingForRestore" style="max-width: unset; height: 100%;">
+        <div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
+          <Whirlpool v-if="waitingForDnsSetup" />
+          <h1>Please wait while Cloudron is restoring ...</h1>
+          <h4 style="margin-top: 0">{{ progressMessage }}</h4>
+          <small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
+          <p v-show="taskMinutesActive >= 4">If restore appears stuck, it can be restarted by running <code @click="onCopyToClipboard('systemctl restart box')">systemctl restart box</code> and reloading this page.</p>
         </div>
       </div>
 
@@ -420,7 +417,6 @@ onMounted(async () => {
           <Button @click="onSubmit()" :disabled="busy || !isFormValid" :loading="busy">Restore</Button>
           <a class="setup" href="/setup.html">Looking to setup?</a>
         </div>
-
       </div>
     </Transition>
   </div>
diff --git a/dashboard/src/views/SetupView.vue b/dashboard/src/views/SetupView.vue
index b19b051a7..6946dcc0d 100644
--- a/dashboard/src/views/SetupView.vue
+++ b/dashboard/src/views/SetupView.vue
@@ -7,6 +7,7 @@ import { redirectIfNeeded } from '../utils.js';
 import DomainsModel from '../models/DomainsModel.js';
 import ProvisionModel from '../models/ProvisionModel.js';
 import DomainProviderForm from '../components/DomainProviderForm.vue';
+import Whirlpool from '../components/Whirlpool.vue';
 
 const provisionModel = ProvisionModel.create();
 
@@ -173,17 +174,7 @@ onMounted(async () => {
     <Transition name="fade-scale" mode="out-in">
       <div class="view" v-if="waitingForDnsSetup" style="max-width: unset; height: 100%;">
         <div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
-          <div class="whirlpool" v-if="waitingForDnsSetup">
-            <div class="ring ring1"></div>
-            <div class="ring ring2"></div>
-            <div class="ring ring3"></div>
-            <div class="ring ring4"></div>
-            <div class="ring ring5"></div>
-            <div class="ring ring6"></div>
-            <div class="ring ring7"></div>
-            <div class="ring ring8"></div>
-            <div class="ring ring9"></div>
-          </div>
+          <Whirlpool v-if="waitingForDnsSetup"/>
           <h1>Please wait while Cloudron is setting up the dashboard ...</h1>
           <h4 style="margin-top: 0">{{ progressMessage }}</h4>
           <small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
@@ -281,115 +272,4 @@ onMounted(async () => {
   font-size: 0.9em;
 }
 
-.whirlpool {
-  width: 100px;
-  height: 100px;
-  margin: 100px auto;
-  position: relative;
-}
-
-.ring:before
-{
-  content: '';
-  border-radius: 50%;
-  border: 1px solid #096dbd;
-  height: 30px;
-  width: 100px;
-  position: absolute;
-}
-
-.ring1:before
-{
-  left: 40px;
-  width: 20px;
-  top: 12px;
-  height: 6px;
-  animation: 2.5s ease 0s infinite spinner;
-}
-
-.ring2:before
-{
-  left: 35px;
-  width: 30px;
-  top: 10.5px;
-  height: 9px;
-  animation: 2.5s ease 0.1s infinite spinner;
-}
-
-.ring3:before
-{
-  left: 30px;
-  width: 40px;
-  top: 9px;
-  height: 12px;
-  animation: 2.5s ease 0.2s infinite spinner;
-}
-
-.ring4:before
-{
-  left: 25px;
-  width: 50px;
-  top: 7.5px;
-  height: 15px;
-  animation: 2.5s ease 0.3s infinite spinner;
-}
-
-.ring5:before
-{
-  left: 20px;
-  width: 60px;
-  top: 6px;
-  height: 18px;
-  animation: 2.5s ease 0.4s infinite spinner;
-}
-
-.ring6:before
-{
-  left: 15px;
-  width: 70px;
-  top: 4.5px;
-  height: 21px;
-  animation: 2.5s ease 0.5s infinite spinner;
-}
-
-.ring7:before
-{
-  left: 10px;
-  width: 80px;
-  top: 3px;
-  height: 24px;
-  animation: 2.5s ease 0.6s infinite spinner;
-}
-
-.ring8:before
-{
-  left: 5px;
-  width: 90px;
-  top: 1.5px;
-  height: 27px;
-  animation: 2.5s ease 0.7s infinite spinner;
-}
-
-.ring9:before
-{
-  width: 100px;
-  height: 30px;
-  animation: 2.5s ease 0.8s infinite spinner;
-}
-
-@keyframes spinner {
-  0% {
-    transform: translateY(10px);
-    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
-  }
-  50% {
-    transform: translateY(60px);
-    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
-  }
-  100% {
-    transform: translateY(10px);
-    animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
-  }
-}
-
 </style>