diff --git a/package-lock.json b/package-lock.json
index 7a711abab2..1c42945463 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4552,7 +4552,7 @@
         "@nextcloud/capabilities": "^1.2.0",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/initial-state": "^3.0.0",
-        "@nextcloud/l10n": "^3.4.0",
+        "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.2",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/sharing": "^0.2.5",
@@ -4567,7 +4567,7 @@
         "emoji-mart-vue-fast": "^15.0.4",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
-        "focus-trap": "^7.6.5",
+        "focus-trap": "^7.6.6",
         "linkifyjs": "^4.3.2",
         "p-queue": "^8.1.0",
         "rehype-external-links": "^3.0.0",
@@ -10570,12 +10570,12 @@
       "peer": true
     },
     "node_modules/focus-trap": {
-      "version": "7.6.5",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz",
-      "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
+      "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
       "license": "MIT",
       "dependencies": {
-        "tabbable": "^6.2.0"
+        "tabbable": "^6.3.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -23270,7 +23270,7 @@
         "@nextcloud/capabilities": "^1.2.0",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/initial-state": "^3.0.0",
-        "@nextcloud/l10n": "^3.4.0",
+        "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.2",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/sharing": "^0.2.5",
@@ -23285,7 +23285,7 @@
         "emoji-mart-vue-fast": "^15.0.4",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
-        "focus-trap": "^7.6.5",
+        "focus-trap": "^7.6.6",
         "linkifyjs": "^4.3.2",
         "p-queue": "^8.1.0",
         "rehype-external-links": "^3.0.0",
@@ -27682,11 +27682,11 @@
       "peer": true
     },
     "focus-trap": {
-      "version": "7.6.5",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.5.tgz",
-      "integrity": "sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
+      "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
       "requires": {
-        "tabbable": "^6.2.0"
+        "tabbable": "^6.3.0"
       }
     },
     "follow-redirects": {
diff --git a/src/components/AppNavigation/ContactsSettings.vue b/src/components/AppNavigation/ContactsSettings.vue
index 4055b9478a..5d26cc395e 100644
--- a/src/components/AppNavigation/ContactsSettings.vue
+++ b/src/components/AppNavigation/ContactsSettings.vue
@@ -23,6 +23,7 @@
 			</CheckboxRadioSwitch>
 			<SettingsSortContacts class="contacts-settings-modal__form__row" />
 		</AppSettingsSection>
+
 		<AppSettingsSection id="address-books" :name="t('contacts', 'Address books')">
 			<div class="contacts-settings-modal__form">
 				<div class="contacts-settings-modal__form__row">
@@ -57,11 +58,12 @@ export default {
 	components: {
 		AppSettingsDialog,
 		AppSettingsSection,
+		NcFormBox,
+		NcFormBoxSwitch,
 		SettingsAddressbook,
 		SettingsNewAddressbook,
 		SettingsImportContacts,
 		SettingsSortContacts,
-		CheckboxRadioSwitch,
 	},
 	props: {
 		open: {
@@ -71,7 +73,6 @@ export default {
 	},
 	data() {
 		return {
-			CONTACTS_SETTINGS,
 			allowSocialSync: loadState('contacts', 'allowSocialSync') !== 'no',
 			enableSocialSync: loadState('contacts', 'enableSocialSync') !== 'no',
 			enableSocialSyncLoading: false,
@@ -111,6 +112,10 @@ export default {
 				await axios.put(generateUrl('apps/contacts/api/v1/social/config/user/enableSocialSync'), {
 					allow: setting,
 				})
+				showSuccess(t('contacts', 'Setting saved'))
+			} catch {
+				showError(t('contacts', 'Failed to save setting'))
+				this.enableSocialSync = !value
 			} finally {
 				this.enableSocialSyncLoading = false
 			}
@@ -125,36 +130,33 @@ export default {
 }
 </script>
 
-<style scoped>
->>> .app-settings__title {
-	padding: 20px 0;
-	margin-bottom: 0;
-}
-
-.app-settings-section {
-	margin-bottom: 45px;
-	padding: 25px 25px 0 25px;
-}
+<style lang="scss" scoped>
+.addressbook-list {
+	list-style: none;
+	padding: 0;
+	margin: 0 0 calc(var(--default-grid-baseline) * 2);
 
-.social-sync__checkbox, .settings-new-addressbook  {
-	margin-bottom: 20px;
-}
+	:deep(.settings-addressbook-list) {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
+		padding: calc(var(--default-grid-baseline) * 2) 0;
+		border-bottom: 1px solid var(--color-border);
 
-.contacts-settings-modal__form__row >>> .material-design-icon {
-	justify-content: flex-start;
-}
+		&:last-child {
+			border-bottom: none;
+		}
 
-.settings-new-addressbook >>> .new-addressbook-input {
-	min-height: 44px;
-	height: 44px;
-	width: 100%;
-}
+		.settings-line__icon {
+			flex-shrink: 0;
+			width: 44px;
+			height: 44px;
+		}
 
-.settings-new-addressbook >>> .icon-confirm {
-	min-height: 44px;
-	height: 44px;
-	border-color: var(--color-border-dark) !important;
-	border-inline-start: none;
+		.addressbook {
+			flex: 1;
+			padding: 0;
+		}
+	}
 }
-
 </style>
diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
index 415fa4891c..bfe0a80376 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -412,6 +412,26 @@ export default {
 .settings-addressbook-list {
 	display: flex;
 	width: 100%;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
+	padding: calc(var(--default-grid-baseline) * 2) 0;
+	border-bottom: 1px solid var(--color-border);
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	.settings-line__icon {
+		flex-shrink: 0;
+		width: 44px;
+		height: 44px;
+	}
+
+	.addressbook {
+		flex: 1;
+		padding: 0;
+	}
+
 	.material-design-icon {
 		justify-content: flex-start;
 	}
diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
index 1bc2cdf13a..e7ac0d2ee8 100644
--- a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
+++ b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
@@ -21,7 +21,32 @@
 			<template #trailing-button-icon>
 				<IconAdd :size="20" />
 			</template>
-		</NcInputField>
+			{{ t('contacts', 'New address book') }}
+		</NcButton>
+		<IconLoading v-if="loading" :size="20" />
+
+		<NcModal v-if="modalOpen" size="small" @close="onModalCancel">
+			<div class="new-addressbook-modal">
+				<NcInputField
+					v-model:model-value="displayName"
+					class="new-addressbook"
+					:disabled="loading"
+					:label="t('contacts', 'Add new address book')"
+					type="text"
+					autocomplete="off"
+					autocorrect="off"
+					spellcheck="false" />
+
+				<div class="new-addressbook-modal__buttons">
+					<NcButton variant="tertiary" :disabled="loading" @click="onModalCancel">
+						{{ t('contacts', 'Cancel') }}
+					</NcButton>
+					<NcButton variant="primary" :disabled="loading || inputErrorState" @click="onModalSubmit">
+						{{ t('contacts', 'Add') }}
+					</NcButton>
+				</div>
+			</div>
+		</NcModal>
 	</div>
 </template>
 
@@ -37,11 +62,14 @@ export default {
 		NcInputField,
 		IconAdd,
 		IconLoading,
+		NcButton,
+		NcModal,
 	},
 	data() {
 		return {
 			loading: false,
 			displayName: '',
+			modalOpen: false,
 		}
 	},
 	computed: {
@@ -55,6 +83,21 @@ export default {
 		},
 	},
 	methods: {
+		openModal() {
+			this.modalOpen = true
+		},
+
+		onModalCancel() {
+			this.modalOpen = false
+			this.displayName = ''
+			this.loading = false
+		},
+
+		async onModalSubmit() {
+			await this.addAddressbook()
+			this.modalOpen = false
+		},
+
 		/**
 		 * Add a new address book
 		 */
@@ -78,3 +121,32 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+
+.new-addressbook-entry {
+	display: flex;
+	width: 100%;
+	justify-content: stretch;
+	margin-top: calc(var(--default-grid-baseline) * 2);
+
+	> * {
+		flex-grow: 1;
+	}
+}
+
+.new-addressbook-modal {
+	padding: calc(var(--default-grid-baseline) * 4);
+	padding-top: calc(var(--default-grid-baseline) * 8);
+	> * {
+		width: 100%;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: end;
+		gap: calc(var(--default-grid-baseline) * 2);
+		margin-top: calc(var(--default-grid-baseline) * 2);
+	}
+}
+</style>
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index ff21cd2b7b..e5aaf35bfe 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -20,18 +20,17 @@
 
 <script>
 import { NcSelect } from '@nextcloud/vue'
-import IconList from 'vue-material-design-icons/FormatListBulletedSquare.vue'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
 
 export default {
 	name: 'SettingsSortContacts',
 
 	components: {
+		NcFormBox,
 		NcSelect,
-		IconList,
 	},
 
 	computed: {
-		/* Order Keys */
 		options() {
 			return [
 				{
@@ -84,5 +83,7 @@ export default {
 <style lang="scss" scoped>
 .sort-contacts {
 	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 2);
 }
 </style>