diff --git a/src/resources/lang/en/ui.php b/src/resources/lang/en/ui.php
--- a/src/resources/lang/en/ui.php
+++ b/src/resources/lang/en/ui.php
@@ -65,6 +65,7 @@
         'print' => "Print for backup",
         'pairing-instructions' => "Pair your device using the following QR-Code.",
         'recovery-device' => "Recovery Device",
+        'new-device' => "New Device",
         'deviceid' => "Device ID",
         'list-empty' => "There are currently no devices",
         'delete' => "Delete/Unpair",
diff --git a/src/resources/vue/CompanionApp/Info.vue b/src/resources/vue/CompanionApp/Info.vue
--- a/src/resources/vue/CompanionApp/Info.vue
+++ b/src/resources/vue/CompanionApp/Info.vue
@@ -2,9 +2,7 @@
     <div class="container">
         <div class="card">
             <div class="card-body">
-                <div class="card-title" v-if="companion_id === 'new'">{{ $t('companion.new') }}</div>
-                <div class="card-title" v-else-if="companion_id === 'recovery'">{{ $t('companion.recovery') }}</div>
-                <div class="card-title" v-else>{{ $t('form.companion') }}
+                <div class="card-title">{{ $t('form.companion') }}
                     <btn class="btn-outline-danger button-delete float-end" @click="$refs.deleteDialog.show()" icon="trash-can">{{ $t('companion.delete') }}</btn>
                 </div>
                 <div class="card-text">
@@ -84,22 +82,18 @@
         created() {
             this.companion_id = this.$route.params.companion
 
-            if (this.companion_id !== 'new' && this.companion_id !== 'recovery') {
-                axios.get('/api/v4/companions/' + this.companion_id, { loader: true })
-                    .then(response => {
-                        this.companion = response.data
-                        this.status = response.data.statusInfo
-                    })
-                    .catch(this.$root.errorHandler)
+            axios.get('/api/v4/companions/' + this.companion_id, { loader: true })
+                .then(response => {
+                    this.companion = response.data
+                    this.status = response.data.statusInfo
+                })
+                .catch(this.$root.errorHandler)
 
-                axios.get('/api/v4/companions/' + this.companion_id + '/pairing/', { loader: true })
-                    .then(response => {
-                        this.qrcode = response.data.qrcode
-                    })
-                    .catch(this.$root.errorHandler)
-            } else if (this.companion_id == 'recovery') {
-                this.companion = { name: this.$t("companion.recovery-device") }
-            }
+            axios.get('/api/v4/companions/' + this.companion_id + '/pairing/', { loader: true })
+                .then(response => {
+                    this.qrcode = response.data.qrcode
+                })
+                .catch(this.$root.errorHandler)
         },
         methods: {
             printQRCode() {
diff --git a/src/resources/vue/CompanionApp/List.vue b/src/resources/vue/CompanionApp/List.vue
--- a/src/resources/vue/CompanionApp/List.vue
+++ b/src/resources/vue/CompanionApp/List.vue
@@ -5,9 +5,10 @@
                 <div class="card-title">
                     {{ $t('companion.title') }}
                     <small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
-                    <btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="companion/new" icon="mobile-screen">
+
+                    <btn class="btn-success float-end" @click="createDevice($t('companion.new-device'))" icon="mobile-screen">
                         {{ $t('companion.create') }}
-                    </btn-router>
+                    </btn>
                 </div>
                 <div class="card-text">
                     <p>
@@ -22,9 +23,9 @@
                             {{ $t('companion.description-warning') }}
                         </p>
                         <div>
-                            <btn-router class="btn-success" to="companion/recovery" icon="mobile-screen">
+                            <btn class="btn-success" @click="createDevice($t('companion.recovery-device'))" icon="mobile-screen">
                                 {{ $t('companion.create-recovery-device') }}
-                            </btn-router>
+                            </btn>
                         </div>
                     </div>
                 </div>
@@ -60,6 +61,23 @@
                     this.companions = response.data.list
                 })
                 .catch(this.$root.errorHandler)
+        },
+        methods: {
+            createDevice(name) {
+                // If we already have a device for this purpose, just show that.
+                for (let device of this.companions) {
+                    if (device.name == name) {
+                        this.$router.push({ name: 'companion' , params: { companion: device.id }})
+                        return
+                    }
+                }
+
+                axios.post('/api/v4/companions', {'name': name})
+                    .then(response => {
+                        this.$toast.success(response.data.message)
+                        this.$router.push({ name: 'companion' , params: { companion: response.data.id }})
+                    })
+            }
         }
     }
 </script>