diff --git a/src/UserApp.vue b/src/UserApp.vue
index f7ae3f8c..c55407fc 100644
--- a/src/UserApp.vue
+++ b/src/UserApp.vue
@@ -1,136 +1,152 @@
-
 <!--
   - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
+
 <template>
-	<div id="terms_of_service_content"
-		 class="modal-content"
-		 aria-live="polite">
-		<div class="modal-content__header">
-			<slot name="header" />
-		</div>
-
-		<!-- Scrollable terms of service -->
-		<div ref="termsContent" class="terms-content">
-			<slot />
-		</div>
-
-		<NcButton ref="acceptButton"
-				  class="modal-content__button"
-				  type="primary"
-				  :wide="true"
-				  autofocus
-				  :title="t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service')"
-				  :disabled="!isScrollComplete"
-				  @click.prevent.stop="handleClick"
-				  @keydown.enter="handleClick">
-			{{ t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service') }}
-		</NcButton>
+	<div id="terms_of_service_confirm">
+		<NcModal v-if="showModal"
+			:can-close="hasSigned"
+			@close="handleCloseModal">
+			<ModalContent :is-scroll-complete="hasScrolledToBottom" @click="acceptTerms">
+				<template #header>
+					<h3>{{ t('terms_of_service', 'Terms of service') }}</h3>
+					<select v-if="terms.length > 1" v-model="selectedLanguage">
+						<option v-for="(language, index) in languages" :key="index" :value="index">
+							{{ language }}
+						</option>
+					</select>
+				</template>
+
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<div ref="termsContent"
+					class="text-content"
+					@scroll="checkScroll"
+					v-html="termsBody" />
+			</ModalContent>
+		</NcModal>
 	</div>
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import ModalContent from './components/ModalContent.vue'
 
 export default {
-	name: 'ModalContent',
+	name: 'UserApp',
 
 	components: {
-		NcButton,
+		NcModal,
+		ModalContent,
+	},
+
+	data() {
+		return {
+			showModal: false,
+			hasSigned: false,
+			terms: {},
+			languages: [],
+			selectedLanguage: 0,
+			termsId: 0,
+			termsBody: '',
+			publicContent: null,
+			hasScrolledToBottom: false,
+		}
 	},
 
-	props: {
-		isScrollComplete: {
-			type: Boolean,
-			default: false,
+	watch: {
+		selectedLanguage(newLanguage) {
+			this.selectTerms(newLanguage)
 		},
 	},
 
 	mounted() {
-		this.$nextTick(() => {
-			this.$refs.acceptButton.$el.focus()
-		})
+		this.loadTerms()
 	},
 
 	methods: {
-		handleClick() {
-			if (this.isScrollComplete) {
-				this.$emit('click')
+		async loadTerms() {
+			try {
+				const response = await axios.get(generateUrl('/apps/terms_of_service/terms'))
+				this.hasSigned = response.data.hasSigned
+				this.terms = response.data.terms
+
+				const language = OC.getLanguage().split('-')[0]
+
+				if (!this.terms.length || this.hasSigned) {
+					return
+				}
+
+				this.publicContent = document.getElementById('files-public-content')
+				if (this.publicContent !== null) {
+					this.publicContent.style.visibility = 'hidden'
+				}
+
+				this.selectTerms(0)
+				if (this.terms.length > 1) {
+					Object.keys(this.terms).forEach((index) => {
+						if (language === this.terms[index].languageCode) {
+							this.selectedLanguage = index
+						}
+
+						this.languages.push(response.data.languages[this.terms[index].languageCode])
+					})
+				}
+
+				this.showTerms()
+			} catch (error) {
+				console.error('Error loading terms:', error)
 			}
 		},
-	},
-}
-</script>
 
-<style lang="scss" scoped>
-#terms_of_service_content.modal-content,
-.modal-content {
-	padding: 0 12px;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	color: var(--color-main-text);
-
-	&__header {
-		padding-top: 12px;
-	}
-
-	h3 {
-		float: left;
-		font-weight: 800;
-	}
-
-	&__button {
-		margin: 8px 0 12px 0;
-	}
-
-	.terms-content {
-		height: 100%;
-		overflow-y: auto;
-		flex: 1;
-	}
-
-	select {
-		float: right;
-		padding: 0 12px;
-
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		&:hover {
-			border-color: var(--color-primary-element);
-		}
-	}
+		selectTerms(index) {
+			this.termsBody = this.terms[index].renderedBody
+			this.termsId = this.terms[index].id
+		},
 
-	:deep div.text-content {
-		height: 100%;
-		overflow: auto;
-		text-align: left;
+		showTerms() {
+			this.showModal = true
+			this.$nextTick(() => {
+				this.checkScroll()
+			})
+		},
 
-		h3 {
-			font-weight: 800;
-		}
+		acceptTerms() {
+			this.hasSigned = true
+			this.showModal = false
 
-		p {
-			padding-top: 5px;
-			padding-bottom: 5px;
-		}
+			let url = '/apps/terms_of_service/sign'
+			if (this.$root.source === 'public') {
+				url = '/apps/terms_of_service/sign_public'
+			}
 
-		ol {
-			padding-left: 12px;
-		}
+			axios.post(
+				generateUrl(url),
+				{ termId: this.termsId },
+			).then(() => {
+				window.location.reload()
+			})
+		},
 
-		ul {
-			list-style-type: disc;
-			padding-left: 25px;
-		}
+		handleCloseModal() {
+			this.showModal = false
+		},
 
-		a {
-			text-decoration: underline;
-			color: var(--color-main-text) !important;
-		}
-	}
+		checkScroll() {
+			const termsContent = this.$refs.termsContent
+			const isScrollable = termsContent.scrollHeight > termsContent.clientHeight
+
+			this.hasScrolledToBottom = !isScrollable || (termsContent.scrollHeight - termsContent.scrollTop <= termsContent.clientHeight + 1)
+		},
+	},
 }
-</style>
+</script>
 
+<style lang="scss" scoped>
+:deep .modal-container {
+	display: flex;
+	height: 100%;
+}
+</style>
diff --git a/src/components/ModalContent.vue b/src/components/ModalContent.vue
index 52872f9b..68c966b9 100644
--- a/src/components/ModalContent.vue
+++ b/src/components/ModalContent.vue
@@ -1,147 +1,143 @@
 <!--
-  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div id="terms_of_service_confirm">
-		<NcModal v-if="showModal"
-				 :can-close="hasSigned"
-				 @close="handleCloseModal">
-			<ModalContent :is-scroll-complete="hasScrolledToBottom" @click="acceptTerms">
-				<template #header>
-					<h3>{{ t('terms_of_service', 'Terms of service') }}</h3>
-					<select v-if="terms.length > 1" v-model="selectedLanguage">
-						<option v-for="(language, index) in languages" :key="index" :value="index">
-							{{ language }}
-						</option>
-					</select>
-				</template>
-
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div ref="termsContent"
-					 class="text-content"
-					 @scroll="checkScroll"
-					 v-html="termsBody" />
-			</ModalContent>
-		</NcModal>
+	<div id="terms_of_service_content"
+		class="modal-content"
+		aria-live="polite">
+		<!-- Sticky Header -->
+		<div class="modal-content__header">
+			<slot name="header" />
+		</div>
+
+		<!-- Scrollable terms of service -->
+		<div ref="termsContent" class="terms-content">
+			<slot />
+		</div>
+
+		<!-- Sticky button -->
+		<NcButton ref="acceptButton"
+			class="modal-content__button"
+			type="primary"
+			:wide="true"
+			autofocus
+			:title="t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service')"
+			:disabled="!isScrollComplete"
+			@click.prevent.stop="handleClick"
+			@keydown.enter="handleClick">
+			{{ t('terms_of_service', 'I acknowledge that I have read and agree to the above terms of service') }}
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import ModalContent from './components/ModalContent.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
-	name: 'UserApp',
+	name: 'ModalContent',
 
 	components: {
-		NcModal,
-		ModalContent,
+		NcButton,
 	},
 
-	data() {
-		return {
-			showModal: false,
-			hasSigned: false,
-			terms: {},
-			languages: [],
-			selectedLanguage: 0,
-			termsId: 0,
-			termsBody: '',
-			publicContent: null,
-			hasScrolledToBottom: false,
-		}
-	},
-
-	watch: {
-		selectedLanguage(newLanguage) {
-			this.selectTerms(newLanguage)
+	props: {
+		isScrollComplete: {
+			type: Boolean,
+			default: false,
 		},
 	},
 
 	mounted() {
-		this.loadTerms()
+		this.$nextTick(() => {
+			this.$refs.acceptButton.$el.focus()
+		})
 	},
 
 	methods: {
-		async loadTerms() {
-			try {
-				const response = await axios.get(generateUrl('/apps/terms_of_service/terms'))
-				this.hasSigned = response.data.hasSigned
-				this.terms = response.data.terms
-
-				const language = OC.getLanguage().split('-')[0]
-
-				if (!this.terms.length || this.hasSigned) {
-					return
-				}
-
-				this.publicContent = document.getElementById('files-public-content')
-				if (this.publicContent !== null) {
-					this.publicContent.style.visibility = 'hidden'
-				}
-
-				this.selectTerms(0)
-				if (this.terms.length > 1) {
-					Object.keys(this.terms).forEach((index) => {
-						if (language === this.terms[index].languageCode) {
-							this.selectedLanguage = index
-						}
-
-						this.languages.push(response.data.languages[this.terms[index].languageCode])
-					})
-				}
-
-				this.showTerms()
-			} catch (error) {
-				console.error('Error loading terms:', error)
+		handleClick() {
+			if (this.isScrollComplete) {
+				this.$emit('click')
 			}
 		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+/* Little hack to strengthen the css selector so links with dark mode on the registration page are readable */
+#terms_of_service_content.modal-content,
+.modal-content {
+	padding: 0 12px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	color: var(--color-main-text);
+
+	&__header {
+		padding-top: 12px;
+	}
+
+	h3 {
+		float: left;
+		font-weight: 800;
+	}
+
+	&__button {
+		margin: 8px 0 12px 0;
+	}
+
+	.terms-content {
+		height: 100%;
+		overflow-y: auto;
+		flex: 1;
+	}
+
+	select {
+		float: right;
+		padding: 0 12px;
+		/**
+		 * Need to overwrite the rules of guest.css
+		 */
+		color: var(--color-main-text);
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
+	}
+	/**
+	 * Basic Markdown support
+	 */
+	:deep div.text-content {
+		height: 100%;
+		overflow: auto;
+		text-align: left;
+
+		h3 {
+			font-weight: 800;
+		}
 
-		selectTerms(index) {
-			this.termsBody = this.terms[index].renderedBody
-			this.termsId = this.terms[index].id
-		},
-
-		showTerms() {
-			this.showModal = true
-			this.$nextTick(() => {
-				this.checkScroll() // Initial check
-			})
-		},
-
-		acceptTerms() {
-			this.hasSigned = true
-			this.showModal = false
-
-			let url = '/apps/terms_of_service/sign'
-			if (this.$root.source === 'public') {
-				url = '/apps/terms_of_service/sign_public'
-			}
-
-			axios.post(
-				generateUrl(url),
-				{ termId: this.termsId },
-			).then(() => {
-				window.location.reload()
-			})
-		},
+		p {
+			padding-top: 5px;
+			padding-bottom: 5px;
+		}
 
-		handleCloseModal() {
-			this.showModal = false
-		},
+		ol {
+			padding-left: 12px;
+		}
 
-		checkScroll() {
-			const termsContent = this.$refs.termsContent
-			const isScrollable = termsContent.scrollHeight > termsContent.clientHeight
+		ul {
+			list-style-type: disc;
+			padding-left: 25px;
+		}
 
-			this.hasScrolledToBottom = !isScrollable || (termsContent.scrollHeight - termsContent.scrollTop <= termsContent.clientHeight + 1)
-		},
-	},
+		a {
+			text-decoration: underline;
+			color: var(--color-main-text) !important;
+		}
+	}
 }
-</script>
+</style>
 
 <style lang="scss" scoped>
 :deep .modal-container {