diff --git a/packages/web-pkg/src/composables/router/types.ts b/packages/web-pkg/src/composables/router/types.ts
index f0880de49b6..99eff8bdeea 100644
--- a/packages/web-pkg/src/composables/router/types.ts
+++ b/packages/web-pkg/src/composables/router/types.ts
@@ -11,9 +11,13 @@ export type LocationParams = Dictionary<ParamValue>
 export const authContextValues = ['anonymous', 'user', 'publicLink', 'hybrid'] as const
 export type AuthContext = typeof authContextValues[number]
 
+export const pageLayoutValue = ['plain', 'loading', 'application'] as const
+export type PageLayout = typeof pageLayoutValue[number]
+
 export interface WebRouteMeta extends RouteMeta {
   title?: string
   authContext?: AuthContext
+  pageLayout?: PageLayout
   patchCleanPath?: boolean
   contextQueryItems?: string[]
 }
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 40c93f34588..211734d79aa 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -70,18 +70,24 @@ export default defineComponent({
     ...mapGetters(['configuration', 'capabilities', 'getSettingsValue']),
     ...mapGetters('runtime/auth', ['isUserContextReady', 'isPublicLinkContextReady']),
     layout() {
+      const pageLayouts = {
+        plain: LayoutPlain,
+        loading: LayoutLoading,
+        application: LayoutApplication
+      }
+      const pageLayoutKey = this.$route.meta.pageLayout
       if (!this.$route.name || isAnonymousContext(this.$router, this.$route)) {
-        return LayoutPlain
+        return pageLayouts[pageLayoutKey || 'plain']
       }
 
+      const pageLayout = pageLayouts[pageLayoutKey || 'application']
       if (isPublicLinkContext(this.$router, this.$route)) {
-        return this.isPublicLinkContextReady ? LayoutApplication : LayoutLoading
+        return this.isPublicLinkContextReady ? pageLayout : LayoutLoading
       }
       if (isUserContext(this.$router, this.$route)) {
-        return this.isUserContextReady ? LayoutApplication : LayoutLoading
+        return this.isUserContextReady ? pageLayout : LayoutLoading
       }
-
-      return LayoutApplication
+      return pageLayout
     },
     favicon() {
       return this.configuration.currentTheme.logo.favicon
diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index 5dcf63037ac..56dd366f20d 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -1,13 +1,35 @@
 <template>
-  <div>
+  <div
+    class="oc-login oc-height-viewport"
+    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
+  >
+    <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <router-view />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { computed, defineComponent, unref } from '@vue/composition-api'
+import { useRouteMeta, useStore, useTranslations } from 'web-pkg'
 
 export default defineComponent({
-  name: 'PlainLayout'
+  name: 'PlainLayout',
+  setup() {
+    const store = useStore()
+    const { $gettext } = useTranslations()
+    const title = useRouteMeta('title')
+
+    const pageTitle = computed(() => {
+      return $gettext(unref(title))
+    })
+    const backgroundImg = computed(() => {
+      return store.getters.configuration?.currentTheme?.loginPage?.backgroundImg
+    })
+
+    return {
+      pageTitle,
+      backgroundImg
+    }
+  }
 })
 </script>
diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 7497e585cd3..1cda5ce3851 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -1,63 +1,63 @@
 <template>
-  <div
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
-    <h1 class="oc-invisible-sr" v-text="pageTitle" />
-    <div class="oc-login-card-wrapper oc-height-viewport oc-flex oc-flex-center oc-flex-middle">
-      <div class="oc-login-card">
-        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-        <div class="oc-login-card-body oc-width-medium">
-          <h2 class="oc-login-card-title" v-text="cardTitle" />
-          <p v-text="cardHint" />
-        </div>
+  <div class="oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
+    <div class="oc-login-card">
+      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+      <div class="oc-login-card-body oc-width-medium">
+        <h2 class="oc-login-card-title" v-text="cardTitle" />
+        <p v-text="cardHint" />
+      </div>
+      <div class="oc-login-card-footer oc-pt-rm">
+        <p>
+          {{ footerSlogan }}
+        </p>
       </div>
-      <oc-button
-        id="exitAnchor"
-        type="router-link"
-        class="oc-mt-m oc-width-medium"
-        :to="{ name: 'login' }"
-        size="large"
-        appearance="filled"
-        variation="primary"
-        v-text="navigateToLoginText"
-      />
     </div>
+    <oc-button
+      id="exitAnchor"
+      type="router-link"
+      class="oc-mt-m oc-width-medium"
+      :to="{ name: 'login' }"
+      size="large"
+      appearance="filled"
+      variation="primary"
+      v-text="navigateToLoginText"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-import { mapGetters } from 'vuex'
+import { computed, defineComponent } from '@vue/composition-api'
+import { useStore, useTranslations } from 'web-pkg'
 
 export default defineComponent({
   name: 'AccessDeniedPage',
-  computed: {
-    ...mapGetters(['configuration']),
-    pageTitle() {
-      return this.$gettext(this.$route.meta.title)
-    },
-    cardTitle() {
-      return this.$gettext('Logged out')
-    },
-    cardHint() {
-      return this.$gettext('You were automatically logged out for security reasons.')
-    },
-    navigateToLoginText() {
-      return this.$gettext('Log in again')
-    },
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    },
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
+  setup() {
+    const store = useStore()
+    const { $gettext } = useTranslations()
+
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const cardTitle = computed(() => {
+      return $gettext('Logged out')
+    })
+    const cardHint = computed(() => {
+      return $gettext('You were automatically logged out for security reasons.')
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+    const navigateToLoginText = computed(() => {
+      return $gettext('Log in again')
+    })
+
+    return {
+      logoImg,
+      cardTitle,
+      cardHint,
+      footerSlogan,
+      navigateToLoginText
     }
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.oc-login-card-wrapper {
-  flex-flow: column;
-}
-</style>
diff --git a/packages/web-runtime/src/pages/login.vue b/packages/web-runtime/src/pages/login.vue
index 0fe6ddb7910..f3d3384bfa7 100644
--- a/packages/web-runtime/src/pages/login.vue
+++ b/packages/web-runtime/src/pages/login.vue
@@ -1,91 +1,76 @@
 <template>
-  <div
-    v-if="initialized"
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
-    <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-login-card oc-position-center">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div class="oc-login-card-body">
-        <h2 class="oc-login-card-title">
-          <translate :translate-params="{ productName: $_productName }"
-            >Welcome to %{productName}</translate
-          >
-        </h2>
-        <p v-translate>
-          Please click the button below to authenticate and get access to your data.
-        </p>
-        <oc-button
-          id="authenticate"
-          size="large"
-          variation="primary"
-          appearance="filled"
-          class="oc-login-authorize-button"
-          @click="performLogin"
-        >
-          <translate>Login</translate>
-        </oc-button>
-      </div>
-      <div class="oc-login-card-footer">
-        <p>
-          {{ configuration.currentTheme.general.slogan }}
-        </p>
+  <div class="oc-width-1-1 oc-height-1-1">
+    <app-loading-spinner v-if="autoRedirect" />
+    <div v-else class="oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
+      <div class="oc-login-card">
+        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+        <div class="oc-login-card-body oc-width-medium">
+          <h2 class="oc-login-card-title">
+            <translate :translate-params="{ productName }">Welcome to %{productName}</translate>
+          </h2>
+          <p v-translate>
+            Please click the button below to authenticate and get access to your data.
+          </p>
+        </div>
+        <div class="oc-login-card-footer oc-pt-rm">
+          <p>{{ footerSlogan }}</p>
+        </div>
       </div>
+      <oc-button
+        id="authenticate"
+        size="large"
+        variation="primary"
+        appearance="filled"
+        class="oc-mt-m oc-width-medium oc-login-authorize-button"
+        @click="performLogin"
+      >
+        <translate>Login</translate>
+      </oc-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
 import { authService } from '../services/auth'
-import { queryItemAsString, useRouteQuery } from 'web-pkg/src/composables'
-import { defineComponent } from '@vue/composition-api'
+import { queryItemAsString, useRouteQuery, useStore } from 'web-pkg/src/composables'
+import { computed, defineComponent, unref } from '@vue/composition-api'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'LoginPage',
-  setup() {
-    return {
-      redirectUrl: useRouteQuery('redirectUrl')
-    }
+  components: {
+    AppLoadingSpinner
   },
-  data() {
-    return {
-      loading: false,
-      initialized: false
-    }
-  },
-  computed: {
-    ...mapGetters(['configuration']),
-
-    pageTitle() {
-      return this.$gettext(this.$route.meta.title)
-    },
-
-    $_productName() {
-      return this.configuration.currentTheme.general.name
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    },
+  setup() {
+    const store = useStore()
 
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
+    const redirectUrl = useRouteQuery('redirectUrl')
+    const performLogin = () => {
+      authService.loginUser(queryItemAsString(unref(redirectUrl)))
     }
-  },
-
-  created() {
-    if (this.configuration.currentTheme.loginPage.autoRedirect) {
-      this.performLogin()
-    } else {
-      this.initialized = true
+    const autoRedirect = computed(() => {
+      return store.getters.configuration.currentTheme.loginPage.autoRedirect
+    })
+    if (unref(autoRedirect)) {
+      performLogin()
     }
-  },
 
-  methods: {
-    performLogin() {
-      authService.loginUser(queryItemAsString(this.redirectUrl))
+    const productName = computed(() => {
+      return store.getters.configuration.currentTheme.general.name
+    })
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+
+    return {
+      autoRedirect,
+      productName,
+      logoImg,
+      footerSlogan,
+      performLogin
     }
   }
 })
diff --git a/packages/web-runtime/src/pages/logout.vue b/packages/web-runtime/src/pages/logout.vue
index 3309441452b..e3186c4d88b 100644
--- a/packages/web-runtime/src/pages/logout.vue
+++ b/packages/web-runtime/src/pages/logout.vue
@@ -1,15 +1,52 @@
 <template>
-  <div>
-    <p v-translate>Please wait while you're being logged out.</p>
+  <div class="oc-login-card oc-position-center">
+    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+    <div class="oc-login-card-body oc-width-medium">
+      <h2 class="oc-login-card-title" v-text="cardTitle" />
+      <p v-text="cardHint" />
+    </div>
+    <div class="oc-login-card-footer oc-pt-rm">
+      <p>
+        {{ footerSlogan }}
+      </p>
+    </div>
   </div>
 </template>
-<script>
-import { authService } from '../services/auth'
-export default {
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+import { useRouter, useStore, useTranslations } from 'web-pkg'
+import { authService } from 'web-runtime/src/services/auth'
+
+export default defineComponent({
   name: 'LogoutPage',
-  async created() {
-    await authService.logoutUser()
-    this.router.push({ name: 'login' })
+  setup() {
+    const router = useRouter()
+    const store = useStore()
+    const { $gettext } = useTranslations()
+
+    authService.logoutUser().then(() => {
+      router.push({ name: 'login' })
+    })
+
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const cardTitle = computed(() => {
+      return $gettext('Logout in progress')
+    })
+    const cardHint = computed(() => {
+      return $gettext("Please wait while you're being logged out.")
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+
+    return {
+      logoImg,
+      cardTitle,
+      cardHint,
+      footerSlogan
+    }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index 85237c32bc4..3268772c848 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -1,51 +1,54 @@
 <template>
-  <div id="Web" class="oc-height-1-1" :style="{ backgroundImage: 'url(' + backgroundImg + ')' }">
-    <div class="oc-login oc-height-viewport">
-      <div class="oc-login-card oc-position-center">
-        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-        <div class="oc-login-card-body">
-          <h1 v-translate class="oc-login-card-title">Missing or invalid config</h1>
-          <p v-translate>Please check if the file config.json exists and is correct.</p>
-          <p v-translate>Also, make sure to check the browser console for more information.</p>
-        </div>
-        <div class="oc-login-card-footer">
-          <p>
-            <translate>For help visit our</translate>
-            <a v-translate href="https://owncloud.dev/clients/web" target="_blank">documentation</a>
-            <translate>or join our</translate>
-            <a v-translate href="https://talk.owncloud.com/channel/web" target="_blank">chat</a>.
-          </p>
-        </div>
-      </div>
+  <div class="oc-login-card oc-position-center">
+    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+    <div class="oc-login-card-body">
+      <h1 v-translate class="oc-login-card-title">Missing or invalid config</h1>
+      <p v-translate>Please check if the file config.json exists and is correct.</p>
+      <p v-translate>Also, make sure to check the browser console for more information.</p>
+    </div>
+    <div class="oc-login-card-footer">
+      <p>
+        <translate>For help visit our</translate>
+        <a v-translate href="https://owncloud.dev/clients/web" target="_blank">documentation</a>
+        <translate>or join our</translate>
+        <a v-translate href="https://talk.owncloud.com/channel/web" target="_blank">chat</a>.
+      </p>
+      <p>
+        {{ footerSlogan }}
+      </p>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
 import { getBackendVersion, getWebVersion } from '../container/versions'
+import { computed, defineComponent } from '@vue/composition-api'
+import { useStore } from 'web-pkg'
 
-export default {
+export default defineComponent({
   name: 'MissingConfigPage',
+  setup() {
+    const store = useStore()
 
-  computed: {
-    ...mapGetters(['configuration']),
-
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    },
+    const logoImg = computed(() => {
+      return store.getters.configuration?.currentTheme?.logo?.login
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration?.currentTheme?.general?.slogan
+    })
+    const favicon = computed(() => {
+      return store.getters.configuration?.currentTheme?.logo?.favicon
+    })
 
-    favicon() {
-      return this.configuration.currentTheme.logo.favicon
+    return {
+      logoImg,
+      footerSlogan,
+      favicon
     }
   },
 
   metaInfo() {
-    const metaInfo = {}
+    const metaInfo: any = {}
     if (this.favicon) {
       metaInfo.link = [{ rel: 'icon', href: this.favicon }]
     }
@@ -58,5 +61,5 @@ export default {
     metaInfo.meta = [metaGenerator]
     return metaInfo
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index da860832c0a..4c954e829ba 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -1,68 +1,61 @@
 <template>
-  <div
-    class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
-  >
-    <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-login-card oc-position-center">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div v-show="error" class="oc-login-card-body">
-        <h2 v-translate class="oc-login-card-title">Authentication failed</h2>
-        <p v-translate>Please contact the administrator if this error persists.</p>
-      </div>
-      <div v-show="!error" class="oc-login-card-body">
-        <h3 v-translate class="oc-login-card-title">Logging you in</h3>
-        <p v-translate>Please wait, you are being redirected.</p>
-      </div>
-      <div class="oc-login-card-footer">
-        <p>{{ configuration.currentTheme.general.slogan }}</p>
-      </div>
+  <div class="oc-login-card oc-position-center">
+    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+    <div v-show="error" class="oc-login-card-body">
+      <h2 v-translate class="oc-login-card-title">Authentication failed</h2>
+      <p v-translate>Please contact the administrator if this error persists.</p>
+    </div>
+    <div v-show="!error" class="oc-login-card-body">
+      <h3 v-translate class="oc-login-card-title">Logging you in</h3>
+      <p v-translate>Please wait, you are being redirected.</p>
+    </div>
+    <div class="oc-login-card-footer oc-pt-rm">
+      <p>{{ footerSlogan }}</p>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { authService } from '../services/auth'
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, unref } from '@vue/composition-api'
+import { useRoute, useStore } from 'web-pkg'
+import { authService } from 'web-runtime/src/services/auth'
 
-export default {
+export default defineComponent({
   name: 'OidcCallbackPage',
-  data() {
-    return {
-      error: false
-    }
-  },
-
-  computed: {
-    ...mapGetters(['configuration']),
-
-    pageTitle() {
-      return this.$gettext(this.$route.meta.title)
-    },
+  setup() {
+    const store = useStore()
+
+    const error = ref(false)
+
+    const logoImg = computed(() => {
+      return store.getters.configuration.currentTheme.logo.login
+    })
+    const footerSlogan = computed(() => {
+      return store.getters.configuration.currentTheme.general.slogan
+    })
+
+    const route = useRoute()
+    onMounted(() => {
+      if (unref(route).query.error) {
+        error.value = true
+        console.warn(
+          `OAuth error: ${unref(route).query.error} - ${unref(route).query.error_description}`
+        )
+        return
+      }
+
+      if (unref(route).path === '/oidc-silent-redirect') {
+        authService.signInSilentCallback()
+      } else {
+        authService.signInCallback()
+      }
+    })
 
-    backgroundImg() {
-      return this.configuration.currentTheme.loginPage.backgroundImg
-    },
-
-    logoImg() {
-      return this.configuration.currentTheme.logo.login
-    }
-  },
-
-  mounted() {
-    if (this.$route.query.error) {
-      this.error = true
-      console.warn(
-        'OAuth error: ' + this.$route.query.error + ' - ' + this.$route.query.error_description
-      )
-      return
-    }
-
-    if (this.$route.path === '/oidc-silent-redirect') {
-      authService.signInSilentCallback()
-    } else {
-      authService.signInCallback()
+    return {
+      error,
+      logoImg,
+      footerSlogan
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index a1e0cc8ce62..c2590f42702 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -1,50 +1,52 @@
 <template>
-  <div class="oc-height-1-1 oc-link-resolve">
-    <div class="oc-link-resolve-wrapper oc-flex oc-flex-center oc-flex-middle">
-      <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-      <div class="oc-card oc-text-center oc-width-medium">
-        <template v-if="loading">
-          <div class="oc-card-body">
-            <h2 key="private-link-loading">
-              <translate>Resolving private link…</translate>
-            </h2>
-            <oc-spinner class="oc-mt-m" :aria-hidden="true" />
-          </div>
-        </template>
-        <template v-else-if="errorMessage">
-          <div class="oc-card-body oc-link-resolve-error-message">
-            <h2 v-if="isUnacceptedShareError" class="oc-link-resolve-error-title">
-              {{ resource.name }}
-            </h2>
-            <h2 v-else key="private-link-error" class="oc-link-resolve-error-title">
-              <translate>An error occurred while resolving the private link</translate>
-            </h2>
-            <p>{{ errorMessage }}</p>
-            <p
-              v-if="isUnacceptedShareError"
-              v-text="$gettext('Note: You can reload this page after you accept the share.')"
-            ></p>
-          </div>
-        </template>
-      </div>
-      <oc-button
-        v-if="isUnacceptedShareError"
-        type="router-link"
-        variation="primary"
-        appearance="filled"
-        target="_blank"
-        class="oc-mt-m oc-text-center oc-width-medium"
-        :to="sharedWithMeRoute"
-      >
-        <span class="text" v-text="openSharedWithMeLabel" />
-      </oc-button>
+  <div
+    class="oc-link-resolve oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle"
+  >
+    <div class="oc-card oc-text-center oc-width-large">
+      <template v-if="loading">
+        <div class="oc-card-header">
+          <h2 key="private-link-loading">
+            <translate>Resolving private link…</translate>
+          </h2>
+        </div>
+        <div class="oc-card-body">
+          <oc-spinner :aria-hidden="true" />
+        </div>
+      </template>
+      <template v-else-if="errorMessage">
+        <div class="oc-card-header oc-link-resolve-error-title">
+          <h2 v-if="isUnacceptedShareError">
+            {{ resource.name }}
+          </h2>
+          <h2 v-else key="private-link-error">
+            <translate>An error occurred while resolving the private link</translate>
+          </h2>
+        </div>
+        <div class="oc-card-body oc-link-resolve-error-message">
+          <p class="oc-text-xlarge">{{ errorMessage }}</p>
+          <p
+            v-if="isUnacceptedShareError"
+            v-text="$gettext('Note: You can reload this page after you accept the share.')"
+          />
+        </div>
+      </template>
     </div>
+    <oc-button
+      v-if="isUnacceptedShareError"
+      type="router-link"
+      variation="primary"
+      appearance="filled"
+      target="_blank"
+      class="oc-mt-m oc-text-center oc-width-medium"
+      :to="sharedWithMeRoute"
+    >
+      <span class="text" v-text="openSharedWithMeLabel" />
+    </oc-button>
   </div>
 </template>
 
 <script lang="ts">
 import {
-  useRoute,
   useRouteParam,
   useStore,
   useTranslations,
@@ -75,7 +77,6 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const router = useRouter()
-    const route = useRoute()
     const id = useRouteParam('fileId')
     const { $gettext, $gettextInterpolate } = useTranslations()
     const hasSpaces = useCapabilitySpacesEnabled(store)
@@ -83,10 +84,6 @@ export default defineComponent({
     const sharedParentResource: Ref<Resource> = ref()
     const isUnacceptedShareError = ref(false)
 
-    const pageTitle = computed(() => $gettext(unref(route).meta.title))
-    const configuration = computed(() => {
-      return store.getters.configuration
-    })
     const clientService = useClientService()
 
     onMounted(() => {
@@ -146,7 +143,7 @@ export default defineComponent({
         params,
         query: { ...query, ...(scrollTo && { scrollTo }) }
       }
-      return router.push(location)
+      router.push(location)
     })
 
     const getMatchingSpace = (id) => {
@@ -215,8 +212,6 @@ export default defineComponent({
     })
 
     return {
-      pageTitle,
-      configuration,
       errorMessage,
       loading,
       resource,
@@ -230,18 +225,12 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-link-resolve {
-  &-wrapper {
-    flex-flow: column;
-    min-height: 96vh;
-  }
-
   .oc-card {
     background: var(--oc-color-background-highlight);
     border-radius: 15px;
   }
 
-  h2 {
-    font-size: var(--oc-font-size-medium);
+  .oc-card-header h2 {
     margin: 0;
   }
 }
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 8f3082cb22b..d0a71274a65 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="oc-height-1-1 oc-link-resolve">
-    <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
-    <div class="oc-card oc-border oc-rounded oc-position-center oc-text-center oc-width-large">
+  <div
+    class="oc-link-resolve oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle"
+  >
+    <div class="oc-card oc-text-center oc-width-large">
       <template v-if="isLoading">
         <div class="oc-card-header">
           <h2 key="public-link-loading">
@@ -50,10 +51,8 @@
           </div>
         </form>
       </template>
-      <div class="oc-card-footer">
-        <p>
-          {{ footerSlogan }}
-        </p>
+      <div class="oc-card-footer oc-pt-rm">
+        <p>{{ footerSlogan }}</p>
       </div>
     </div>
   </div>
@@ -66,8 +65,6 @@ import { authService } from '../services/auth'
 import {
   queryItemAsString,
   useClientService,
-  useRoute,
-  useRouteMeta,
   useRouteParam,
   useRouteQuery,
   useRouter,
@@ -91,7 +88,6 @@ export default defineComponent({
   setup() {
     const clientService = useClientService()
     const router = useRouter()
-    const route = useRoute()
     const store = useStore()
     const token = useRouteParam('token')
     const redirectUrl = useRouteQuery('redirectUrl')
@@ -224,10 +220,6 @@ export default defineComponent({
 
     const { $gettext } = useTranslations()
     const footerSlogan = computed(() => store.getters.configuration.currentTheme.general.slogan)
-    const pageTitleRaw = useRouteMeta('title')
-    const pageTitle = computed(() => {
-      return $gettext(unref(pageTitleRaw))
-    })
     const passwordFieldLabel = computed(() => {
       return $gettext('Enter password for public link')
     })
@@ -248,7 +240,6 @@ export default defineComponent({
       isLoading,
       errorMessage,
       footerSlogan,
-      pageTitle,
       resolvePublicLinkTask
     }
   }
@@ -257,6 +248,11 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-link-resolve {
+  .oc-card {
+    background: var(--oc-color-background-highlight);
+    border-radius: 15px;
+  }
+
   .oc-text-input-message {
     justify-content: center;
   }