diff --git a/sbom.cdx.json b/sbom.cdx.json
index d80e2687dc..723e96d86c 100644
--- a/sbom.cdx.json
+++ b/sbom.cdx.json
@@ -2,10 +2,10 @@
   "$schema": "http://cyclonedx.org/schema/bom-1.5.schema.json",
   "bomFormat": "CycloneDX",
   "specVersion": "1.5",
-  "serialNumber": "urn:uuid:2ea5bb26-6d13-4bef-a197-dc4166f15869",
+  "serialNumber": "urn:uuid:f65e3579-42de-4d9c-a573-8218a06637a1",
   "version": 1,
   "metadata": {
-    "timestamp": "2026-03-18T11:56:44Z",
+    "timestamp": "2026-03-18T20:45:55Z",
     "tools": [
       {
         "name": "composer",
@@ -82,10 +82,10 @@
       }
     ],
     "component": {
-      "bom-ref": "conductionnl/openregister-dev-feature/REGISTERS-481/entities-page",
+      "bom-ref": "conductionnl/openregister-dev-feature/REGISTERS-482/configuration-page",
       "type": "application",
       "name": "openregister",
-      "version": "dev-feature/REGISTERS-481/entities-page",
+      "version": "dev-feature/REGISTERS-482/configuration-page",
       "group": "conductionnl",
       "description": "Quickly build data registers based on schema.json",
       "author": "Conduction b.v.",
@@ -96,15 +96,15 @@
           }
         }
       ],
-      "purl": "pkg:composer/conductionnl/openregister@dev-feature/REGISTERS-481/entities-page",
+      "purl": "pkg:composer/conductionnl/openregister@dev-feature/REGISTERS-482/configuration-page",
       "properties": [
         {
           "name": "cdx:composer:package:distReference",
-          "value": "036430b648ef929a58ff599165fdd4a2f43d8237"
+          "value": "f496d30112c18cd1767173ea65e9a9a55ff1d97b"
         },
         {
           "name": "cdx:composer:package:sourceReference",
-          "value": "036430b648ef929a58ff599165fdd4a2f43d8237"
+          "value": "f496d30112c18cd1767173ea65e9a9a55ff1d97b"
         },
         {
           "name": "cdx:composer:package:type",
@@ -55484,7 +55484,7 @@
       "ref": "webonyx/graphql-php-15.31.1.0"
     },
     {
-      "ref": "conductionnl/openregister-dev-feature/REGISTERS-481/entities-page",
+      "ref": "conductionnl/openregister-dev-feature/REGISTERS-482/configuration-page",
       "dependsOn": [
         "adbario/php-dot-notation-3.3.0.0",
         "elasticsearch/elasticsearch-8.19.0.0",
diff --git a/src/components/cards/ConfigurationCard.vue b/src/components/cards/ConfigurationCard.vue
index bf1bcdebff..9b06f0f73d 100644
--- a/src/components/cards/ConfigurationCard.vue
+++ b/src/components/cards/ConfigurationCard.vue
@@ -1,56 +1,95 @@
 <template>
-	<div class="configurationCard"
-		:class="{
-			'configurationCard--imported': isImported,
-			'configurationCard--local': isImported && isLocalConfiguration,
-			'configurationCard--external': isImported && !isLocalConfiguration
-		}">
-		<div class="cardHeader">
-			<h2 v-tooltip.bottom="configuration.description || configuration.config?.description">
-				<CogOutline :size="20" />
-				{{ configuration.title || configuration.config?.title }}
-				<!-- Status Badges -->
+	<CnCard
+		:title="cardTitle"
+		:description="description"
+		:active="isImported"
+		:active-variant="isLocalConfiguration ? 'warning' : 'success'">
+		<template #icon>
+			<CogOutline :size="20" />
+		</template>
+
+		<!-- Status Badges -->
+		<template #labels>
+			<span class="cn-card__labels">
 				<template v-if="isImported">
 					<template v-if="isLocalConfiguration">
-						<span class="configBadge configBadge--local">
-							<CheckCircle :size="16" />
-							Local
-						</span>
-						<span v-if="displayConfiguration.app" class="configBadge configBadge--app">
-							<ApplicationCog :size="16" />
-							{{ displayConfiguration.app }}
-						</span>
+						<CnStatusBadge
+							label="Local"
+							variant="warning"
+							:solid="true">
+							<template #icon>
+								<CheckCircle :size="16" />
+							</template>
+						</CnStatusBadge>
+						<CnStatusBadge
+							v-if="displayConfiguration.app"
+							:label="displayConfiguration.app"
+							variant="default"
+							:solid="true">
+							<template #icon>
+								<ApplicationCog :size="16" />
+							</template>
+						</CnStatusBadge>
 					</template>
-					<span v-else class="configBadge configBadge--external">
-						<Cloud :size="16" />
-						External
-					</span>
-					<span v-if="!isLocalConfiguration && displayConfiguration.syncEnabled" class="configBadge" :class="'configBadge--sync-' + displayConfiguration.syncStatus">
-						<Sync v-if="displayConfiguration.syncStatus === 'success'" :size="16" />
-						<AlertCircle v-else-if="displayConfiguration.syncStatus === 'failed'" :size="16" />
-						<ClockOutline v-else :size="16" />
-						{{ getSyncStatusText(displayConfiguration) }}
-					</span>
-					<span v-if="hasUpdateAvailable" class="configBadge configBadge--update">
-						<Update :size="16" />
-						Update Available
-					</span>
-					<span v-if="isPublished" class="configBadge configBadge--published">
-						<CloudUploadOutline :size="16" />
-						Published
-					</span>
+					<CnStatusBadge
+						v-else
+						label="External"
+						variant="success"
+						:solid="true">
+						<template #icon>
+							<Cloud :size="16" />
+						</template>
+					</CnStatusBadge>
+					<CnStatusBadge
+						v-if="!isLocalConfiguration && displayConfiguration.syncEnabled"
+						:label="getSyncStatusText(displayConfiguration)"
+						:variant="syncBadgeVariant"
+						:solid="true">
+						<template #icon>
+							<Sync v-if="displayConfiguration.syncStatus === 'success'" :size="16" />
+							<AlertCircle v-else-if="displayConfiguration.syncStatus === 'failed'" :size="16" />
+							<ClockOutline v-else :size="16" />
+						</template>
+					</CnStatusBadge>
+					<CnStatusBadge
+						v-if="hasUpdateAvailable"
+						label="Update Available"
+						variant="warning"
+						:solid="true">
+						<template #icon>
+							<Update :size="16" />
+						</template>
+					</CnStatusBadge>
+					<CnStatusBadge
+						v-if="isPublished"
+						label="Published"
+						variant="error"
+						:solid="true">
+						<template #icon>
+							<CloudUploadOutline :size="16" />
+						</template>
+					</CnStatusBadge>
 				</template>
 				<template v-else>
-					<!-- For discovered/external configurations -->
-					<span v-if="configuration.config?.app" class="configBadge configBadge--app">
-						{{ configuration.config.app }}
-					</span>
-					<span class="configBadge configBadge--discovered">
-						<Magnify :size="16" />
-						Discovered
-					</span>
+					<CnStatusBadge
+						v-if="configuration.config?.app"
+						:label="configuration.config.app"
+						variant="default"
+						:solid="true" />
+					<CnStatusBadge
+						label="Discovered"
+						variant="primary"
+						:solid="true">
+						<template #icon>
+							<Magnify :size="16" />
+						</template>
+					</CnStatusBadge>
 				</template>
-			</h2>
+			</span>
+		</template>
+
+		<!-- Actions -->
+		<template #actions>
 			<NcActions :primary="true" menu-name="Actions">
 				<template #icon>
 					<DotsHorizontal :size="20" />
@@ -122,23 +161,18 @@
 					</NcActionButton>
 				</template>
 			</NcActions>
-		</div>
-
-		<!-- Configuration Details -->
-		<div class="configurationDetails">
-			<p v-if="description" class="configurationDescription">
-				{{ description }}
-			</p>
+		</template>
 
-			<!-- Meta information footer (organization, repo, stars, versions) -->
-			<div v-if="hasMetadata" class="cardMeta">
+		<!-- Meta information footer -->
+		<template v-if="hasMetadata" #footer>
+			<div class="cn-card__footer">
 				<!-- Repository link -->
 				<a
 					v-if="repositoryFullName"
 					:href="repositoryUrl"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="metaItem metaLink">
+					class="cn-card__footer-link">
 					<SourceBranch :size="16" />
 					{{ repositoryFullName }}
 				</a>
@@ -149,46 +183,47 @@
 					:href="displayConfiguration.organization.url"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="metaItem metaLink">
+					class="cn-card__footer-link">
 					<OfficeBuilding :size="16" />
 					{{ displayConfiguration.organization.name }}
 				</a>
 
 				<!-- Stars count -->
-				<span v-if="displayConfiguration.stars" class="metaItem">
+				<span v-if="displayConfiguration.stars" class="configurationCard__meta-item">
 					<Star :size="16" />
 					{{ displayConfiguration.stars }}
 				</span>
 
 				<!-- App ID badge (fallback if no repo info) -->
-				<span v-if="displayConfiguration.app && !repositoryFullName" class="metaItem">
+				<span v-if="displayConfiguration.app && !repositoryFullName" class="configurationCard__meta-item">
 					<ApplicationCog :size="16" />
 					{{ displayConfiguration.app }}
 				</span>
 
 				<!-- Source type (fallback if no repo info) -->
-				<span v-if="displayConfiguration.sourceType && !repositoryFullName" class="metaItem">
+				<span v-if="displayConfiguration.sourceType && !repositoryFullName" class="configurationCard__meta-item">
 					<Cloud :size="16" />
 					{{ getSourceTypeLabel(displayConfiguration.sourceType) }}
 				</span>
 
 				<!-- Version info -->
-				<span v-if="displayConfiguration.version || displayConfiguration.localVersion" class="metaItem">
+				<span v-if="displayConfiguration.version || displayConfiguration.localVersion" class="configurationCard__meta-item">
 					<Tag :size="16" />
 					v{{ displayConfiguration.version || displayConfiguration.localVersion }}
 				</span>
 
-				<span v-if="displayConfiguration.remoteVersion && displayConfiguration.remoteVersion !== (displayConfiguration.version || displayConfiguration.localVersion)" class="metaItem">
+				<span v-if="displayConfiguration.remoteVersion && displayConfiguration.remoteVersion !== (displayConfiguration.version || displayConfiguration.localVersion)" class="configurationCard__meta-item">
 					<Update :size="16" />
 					v{{ displayConfiguration.remoteVersion }} available
 				</span>
 			</div>
-		</div>
-	</div>
+		</template>
+	</CnCard>
 </template>
 
 <script>
 import { NcActions, NcActionButton } from '@nextcloud/vue'
+import { CnCard, CnStatusBadge } from '@conduction/nextcloud-vue'
 import CogOutline from 'vue-material-design-icons/CogOutline.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
@@ -234,6 +269,8 @@ import { configurationStore, navigationStore } from '../../store/store.js'
 export default {
 	name: 'ConfigurationCard',
 	components: {
+		CnCard,
+		CnStatusBadge,
 		NcActions,
 		NcActionButton,
 		CogOutline,
@@ -278,6 +315,14 @@ export default {
 		}
 	},
 	computed: {
+		/**
+		 * Card title from either format
+		 *
+		 * @return {string}
+		 */
+		cardTitle() {
+			return this.configuration.title || this.configuration.config?.title || ''
+		},
 		/**
 		 * Check if this is a discovered configuration (has config.app structure)
 		 *
@@ -402,8 +447,6 @@ export default {
 			const displayConfig = this.displayConfiguration
 			const originalConfig = this.configuration
 
-			// Debug logging removed for production
-
 			// Check isLocal property from either source (boolean true or string 'true')
 			const isLocal = displayConfig.isLocal ?? originalConfig.isLocal
 			if (isLocal === true || isLocal === 'true') {
@@ -428,9 +471,7 @@ export default {
 		 * @return {boolean}
 		 */
 		isRemoteConfiguration() {
-			const result = this.isImported && this.displayConfiguration.sourceType && this.displayConfiguration.sourceType !== 'local'
-
-			return result
+			return this.isImported && this.displayConfiguration.sourceType && this.displayConfiguration.sourceType !== 'local'
 		},
 		/**
 		 * Check if update is available
@@ -464,6 +505,17 @@ export default {
 			const config = this.displayConfiguration
 			return config.url || config.sourceUrl || null
 		},
+		/**
+		 * Get the sync badge variant based on sync status
+		 *
+		 * @return {string}
+		 */
+		syncBadgeVariant() {
+			const status = this.displayConfiguration.syncStatus
+			if (status === 'success') return 'success'
+			if (status === 'failed') return 'error'
+			return 'default'
+		},
 		/**
 		 * Check if configuration has any metadata to display in footer
 		 *
@@ -581,16 +633,12 @@ export default {
 						if (!existsInStore) {
 							configurationStore.configurationList.push(importedConfig)
 						}
-
-						// Debug logging removed for production
 					} else {
 						// Not imported
 						this.importedConfigId = null
-						// Debug logging removed for production
 					}
 				}
 			} catch (error) {
-				// Debug logging removed for production
 				// On error, assume not imported
 				this.importedConfigId = null
 			} finally {
@@ -652,37 +700,34 @@ export default {
 		 * Handle view action
 		 */
 		handleView() {
-			const config = this.existingConfiguration || this.displayConfiguration
 			if (this.isDiscovered && this.existingConfiguration) {
 				// For discovered configs that are imported, open the local one
 				configurationStore.setConfigurationItem(this.existingConfiguration)
 				navigationStore.setModal('viewConfiguration')
 			} else {
-				this.$emit('view', config)
+				this.$emit('view', this.existingConfiguration || this.displayConfiguration)
 			}
 		},
 		/**
 		 * Handle edit action
 		 */
 		handleEdit() {
-			const config = this.existingConfiguration || this.displayConfiguration
 			if (this.isDiscovered && this.existingConfiguration) {
 				configurationStore.setConfigurationItem(this.existingConfiguration)
 				navigationStore.setModal('editConfiguration')
 			} else {
-				this.$emit('edit', config)
+				this.$emit('edit', this.existingConfiguration || this.displayConfiguration)
 			}
 		},
 		/**
 		 * Handle export action
 		 */
 		handleExport() {
-			const config = this.existingConfiguration || this.displayConfiguration
 			if (this.isDiscovered && this.existingConfiguration) {
 				configurationStore.setConfigurationItem(this.existingConfiguration)
 				navigationStore.setModal('exportConfiguration')
 			} else {
-				this.$emit('export', config)
+				this.$emit('export', this.existingConfiguration || this.displayConfiguration)
 			}
 		},
 		/**
@@ -697,31 +742,23 @@ export default {
 		 * Handle delete action
 		 */
 		handleDelete() {
-			const config = this.existingConfiguration || this.displayConfiguration
-			if (this.isDiscovered && this.existingConfiguration) {
-				configurationStore.setConfigurationItem(this.existingConfiguration)
-				navigationStore.setDialog('deleteConfiguration')
-			} else {
-				this.$emit('delete', config)
-			}
+			this.$emit('delete', this.existingConfiguration || this.displayConfiguration)
 		},
 		/**
 		 * Handle check version action
 		 */
 		handleCheckVersion() {
-			const config = this.existingConfiguration || this.displayConfiguration
-			this.$emit('check-version', config)
+			this.$emit('check-version', this.existingConfiguration || this.displayConfiguration)
 		},
 		/**
 		 * Handle preview update action
 		 */
 		handlePreviewUpdate() {
-			const config = this.existingConfiguration || this.displayConfiguration
 			if (this.isDiscovered && this.existingConfiguration) {
 				configurationStore.setConfigurationItem(this.existingConfiguration)
 				navigationStore.setModal('previewConfiguration')
 			} else {
-				this.$emit('preview-update', config)
+				this.$emit('preview-update', this.existingConfiguration || this.displayConfiguration)
 			}
 		},
 	},
@@ -729,198 +766,11 @@ export default {
 </script>
 
 <style scoped>
-.configurationCard {
-	border: 2px solid var(--color-border);
-	border-radius: 8px;
-	padding: 16px;
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	transition: all 0.2s;
-	background-color: var(--color-main-background);
-}
-
-.configurationCard:hover {
-	border-color: var(--color-primary);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.configurationCard--imported {
-	/* Base imported style - will be overridden by local/external */
-}
-
-/* Local configuration card (orange border) */
-.configurationCard--local {
-	border-color: var(--color-warning);
-	background-color: rgba(var(--color-warning-rgb), 0.05);
-}
-
-.configurationCard--local:hover {
-	border-color: var(--color-warning);
-	box-shadow: 0 2px 8px rgba(var(--color-warning-rgb), 0.2);
-}
-
-/* External configuration card (green border) */
-.configurationCard--external {
-	border-color: var(--color-success);
-	background-color: rgba(var(--color-success-rgb), 0.05);
-}
-
-.configurationCard--external:hover {
-	border-color: var(--color-success);
-	box-shadow: 0 2px 8px rgba(var(--color-success-rgb), 0.2);
-}
-
-.cardHeader {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	justify-content: space-between;
-}
-
-.cardHeader h2 {
-	margin: 0;
-	font-size: 1.1em;
-	flex: 1;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-wrap: wrap;
-}
-
-.configurationDetails {
-	margin-top: 0.5rem;
-}
-
-.configurationDescription {
-	color: var(--color-text-lighter);
-	font-size: 0.9em;
-	margin: 0 0 1rem 0;
-	line-height: 1.5;
-}
-
-.cardMeta {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12px;
-	padding-top: 8px;
-	border-top: 1px solid var(--color-border);
-}
-
-.metaItem {
-	display: flex;
+.configurationCard__meta-item {
+	display: inline-flex;
 	align-items: center;
 	gap: 4px;
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
-
-.metaLink {
-	color: var(--color-primary);
-	text-decoration: none;
-	transition: all 0.2s;
-}
-
-.metaLink:hover {
-	color: var(--color-primary-element);
-	text-decoration: underline;
-}
-
-.configurationInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.configurationInfoItem {
-	display: flex;
-	gap: 0.5rem;
-}
-
-.configurationInfoItem strong {
-	min-width: 120px;
-}
-
-.urlText {
-	font-family: monospace;
-	font-size: 0.9em;
-	color: var(--color-primary);
-	word-break: break-all;
-}
-
-.badge-success {
-	display: inline-block;
-	padding: 2px 8px;
-	border-radius: 10px;
-	background-color: var(--color-success);
-	color: white;
-	font-size: 0.85em;
-	font-weight: 500;
-}
-
-/* Configuration Badges */
-.configBadge {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 2px 8px;
-	border-radius: 12px;
-	font-size: 0.75em;
-	font-weight: 600;
-	vertical-align: middle;
-}
-
-/* Local configuration badge (orange/warning) */
-.configBadge--local {
-	background-color: var(--color-warning);
-	color: var(--color-main-background);
-}
-
-/* External configuration badge (green/success) */
-.configBadge--external {
-	background-color: var(--color-success);
-	color: white;
-}
-
-/* App source badge (gray/secondary) */
-.configBadge--app {
-	background-color: var(--color-background-dark);
-	color: var(--color-text-lighter);
-	text-transform: uppercase;
-}
-
-/* Discovered badge */
-.configBadge--discovered {
-	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element-text);
-}
-
-/* Sync status badges */
-.configBadge--sync-success {
-	background-color: var(--color-success-light);
-	color: var(--color-success-dark);
-}
-
-.configBadge--sync-failed {
-	background-color: var(--color-error-light);
-	color: var(--color-error-dark);
-}
-
-.configBadge--sync-pending,
-.configBadge--sync-never {
-	background-color: var(--color-background-dark);
-	color: var(--color-text-lighter);
-}
-
-/* Update available badge */
-.configBadge--update {
-	background-color: var(--color-warning);
-	color: var(--color-main-text);
-}
-
-/* Published badge (red/error) */
-.configBadge--published {
-	background-color: var(--color-error);
-	color: white;
-}
 </style>
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 9573ca99a4..a15c5cb29a 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -10,7 +10,6 @@ import { navigationStore } from '../store/store.js'
 		<PublishRegister />
 		<DeleteRegister />
 		<EditConfiguration v-if="navigationStore.modal === 'editConfiguration'" />
-		<DeleteConfiguration v-if="navigationStore.dialog === 'deleteConfiguration'" />
 		<ImportConfiguration />
 		<ExportConfiguration />
 		<PublishConfiguration />
@@ -59,7 +58,6 @@ import ExportRegister from './register/ExportRegister.vue'
 import PublishRegister from './register/PublishRegister.vue'
 import DeleteRegister from './register/DeleteRegister.vue'
 import EditConfiguration from './configuration/EditConfiguration.vue'
-import DeleteConfiguration from './configuration/DeleteConfiguration.vue'
 import ImportConfiguration from './configuration/ImportConfiguration.vue'
 import ExportConfiguration from './configuration/ExportConfiguration.vue'
 import PublishConfiguration from './configuration/PublishConfiguration.vue'
@@ -106,7 +104,6 @@ export default {
 		PublishRegister,
 		DeleteRegister,
 		EditConfiguration,
-		DeleteConfiguration,
 		ImportConfiguration,
 		ExportConfiguration,
 		PublishConfiguration,
diff --git a/src/modals/configuration/DeleteConfiguration.vue b/src/modals/configuration/DeleteConfiguration.vue
deleted file mode 100644
index c97bc28f29..0000000000
--- a/src/modals/configuration/DeleteConfiguration.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { configurationStore, navigationStore } from '../../store/store.js'
-</script>
-
-<template>
-	<NcDialog v-if="navigationStore.modal === 'deleteConfiguration'"
-		title="Delete Configuration"
-		size="small"
-		:can-close="false">
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
-
-		<div class="formContainer">
-			<p>Are you sure you want to delete the configuration "{{ configurationStore.configurationItem?.title }}"?</p>
-			<p>This action cannot be undone.</p>
-		</div>
-
-		<template #actions>
-			<NcButton @click="closeModal">
-				<template #icon>
-					<Cancel :size="20" />
-				</template>
-				Cancel
-			</NcButton>
-			<NcButton
-				:disabled="loading"
-				type="error"
-				@click="deleteConfiguration">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Delete v-else :size="20" />
-				</template>
-				Delete
-			</NcButton>
-		</template>
-	</NcDialog>
-</template>
-
-<script>
-import {
-	NcButton,
-	NcDialog,
-	NcLoadingIcon,
-	NcNoteCard,
-} from '@nextcloud/vue'
-
-import Cancel from 'vue-material-design-icons/Cancel.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
-
-export default {
-	name: 'DeleteConfiguration',
-	components: {
-		NcDialog,
-		NcButton,
-		NcLoadingIcon,
-		NcNoteCard,
-		// Icons
-		Cancel,
-		Delete,
-	},
-	data() {
-		return {
-			loading: false,
-			error: null,
-		}
-	},
-	methods: {
-		closeModal() {
-			navigationStore.setModal(false)
-			this.loading = false
-			this.error = null
-		},
-		async deleteConfiguration() {
-			this.loading = true
-			this.error = null
-
-			try {
-				await configurationStore.deleteConfiguration(configurationStore.configurationItem)
-				this.closeModal()
-			} catch (error) {
-				this.error = error.message || 'Failed to delete configuration'
-			} finally {
-				this.loading = false
-			}
-		},
-	},
-}
-</script>
-
-<style>
-.formContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-</style>
diff --git a/src/modals/configuration/EditConfiguration.vue b/src/modals/configuration/EditConfiguration.vue
index 52ffa15372..a3ef2e12ad 100644
--- a/src/modals/configuration/EditConfiguration.vue
+++ b/src/modals/configuration/EditConfiguration.vue
@@ -3,522 +3,480 @@ import { configurationStore, navigationStore, organisationStore, applicationStor
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'editConfiguration'"
-		:name="configurationStore.configurationItem?.id ? 'Edit Configuration' : 'New Configuration'"
-		size="large"
-		:can-close="true"
-		:open="true"
-		@update:open="handleDialogClose">
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
+	<CnTabbedFormDialog
+		ref="dialog"
+		:tabs="dialogTabs"
+		:item="configurationStore.configurationItem?.id ? configurationStore.configurationItem : null"
+		entity-name="Configuration"
+		:show-create-another="true"
+		:disable-save="!configurationItem.title.trim()"
+		@confirm="saveConfiguration"
+		@close="closeModal"
+		@reset="resetForm">
+		<!-- Settings Tab -->
+		<template #tab-settings="{ loading: dialogLoading }">
+			<NcTextField
+				:disabled="dialogLoading"
+				label="Title *"
+				:value.sync="configurationItem.title"
+				:error="!configurationItem.title.trim()"
+				placeholder="Enter configuration title" />
 
-		<div class="tabContainer">
-			<BTabs v-model="activeTab" content-class="mt-3" justified>
-				<!-- Settings Tab -->
-				<BTab active>
-					<template #title>
-						<Cog :size="16" />
-						<span>Settings</span>
-					</template>
-
-					<div class="form-editor">
-						<NcTextField
-							label="Title *"
-							placeholder="Enter configuration title"
-							:value="configurationStore.configurationItem?.title || ''"
-							:error="!configurationStore.configurationItem?.title?.trim?.()"
-							@update:value="updateTitle" />
+			<NcTextArea
+				:disabled="dialogLoading"
+				label="Description"
+				:value.sync="configurationItem.description"
+				placeholder="Enter configuration description (optional)" />
 
-						<NcTextArea
-							label="Description"
-							placeholder="Enter configuration description (optional)"
-							:value="configurationStore.configurationItem?.description || ''"
-							@update:value="updateDescription" />
-
-						<div class="selectField">
-							<label for="type-select">Type</label>
-							<NcSelect
-								id="type-select"
-								v-model="selectedType"
-								:options="typeOptions"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								placeholder="Select configuration type..."
-								@input="updateType">
-								<template #option="{ label, description }">
-									<div class="option-content">
-										<span class="option-title">{{ label }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								Configuration type (default, application, etc.)
-							</p>
+			<div class="selectField">
+				<label for="type-select">Type</label>
+				<NcSelect
+					id="type-select"
+					v-model="selectedType"
+					:disabled="dialogLoading"
+					:options="typeOptions"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					placeholder="Select configuration type..."
+					@input="updateType">
+					<template #option="{ label, description }">
+						<div class="option-content">
+							<span class="option-title">{{ label }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
-
-						<NcTextField
-							label="App ID"
-							placeholder="myapp"
-							:value="configurationStore.configurationItem?.app || ''"
-							@update:value="updateApp">
-							<template #helper-text-message>
-								<p>Application identifier for this configuration (optional)</p>
-							</template>
-						</NcTextField>
-
-						<!-- Organisation is automatically set to active organisation by backend -->
-					</div>
-				</BTab>
-
-				<!-- Configuration Tab -->
-				<BTab>
-					<template #title>
-						<Database :size="16" />
-						<span>Configuration</span>
 					</template>
+				</NcSelect>
+				<p class="field-hint">
+					Configuration type (default, application, etc.)
+				</p>
+			</div>
 
-					<div class="form-editor">
-						<div class="selectField">
-							<label for="registers-select">Registers</label>
-							<NcSelect
-								id="registers-select"
-								v-model="selectedRegisters"
-								:options="registerOptions"
-								:loading="loadingRegisters"
-								:multiple="true"
-								label="title"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search registers..."
-								:close-on-select="false"
-								@search-change="searchRegisters"
-								@input="updateRegisters">
-								<template #option="{ title, description }">
-									<div class="option-content">
-										<span class="option-title">{{ title }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingRegisters">Searching...</span>
-									<span v-else>No registers found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedRegisters.length }} register(s) selected
-							</p>
-						</div>
+			<NcTextField
+				:disabled="dialogLoading"
+				label="App ID"
+				:value.sync="configurationItem.app"
+				placeholder="myapp">
+				<template #helper-text-message>
+					<p>Application identifier for this configuration (optional)</p>
+				</template>
+			</NcTextField>
+		</template>
 
-						<div class="selectField">
-							<label for="schemas-select">Schemas</label>
-							<NcSelect
-								id="schemas-select"
-								v-model="selectedSchemas"
-								:options="schemaOptions"
-								:loading="loadingSchemas"
-								:multiple="true"
-								label="title"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search schemas..."
-								:close-on-select="false"
-								@search-change="searchSchemas"
-								@input="updateSchemas">
-								<template #option="{ title, description }">
-									<div class="option-content">
-										<span class="option-title">{{ title }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingSchemas">Searching...</span>
-									<span v-else>No schemas found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedSchemas.length }} schema(s) selected
-							</p>
+		<!-- Configuration Tab -->
+		<template #tab-configuration="{ loading: dialogLoading }">
+			<div class="selectField">
+				<label for="registers-select">Registers</label>
+				<NcSelect
+					id="registers-select"
+					v-model="selectedRegisters"
+					:disabled="dialogLoading"
+					:options="registerOptions"
+					:loading="loadingRegisters"
+					:multiple="true"
+					label="title"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search registers..."
+					:close-on-select="false"
+					@search-change="searchRegisters"
+					@input="updateRegisters">
+					<template #option="{ title, description }">
+						<div class="option-content">
+							<span class="option-title">{{ title }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+					<template #no-options>
+						<span v-if="loadingRegisters">Searching...</span>
+						<span v-else>No registers found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedRegisters.length }} register(s) selected
+				</p>
+			</div>
 
-						<div class="selectField">
-							<label for="objects-select">Objects</label>
-							<NcSelect
-								id="objects-select"
-								v-model="selectedObjects"
-								:options="objectOptions"
-								:loading="loadingObjects"
-								:multiple="true"
-								label="title"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search objects..."
-								:close-on-select="false"
-								:disabled="selectedRegisters.length === 0 && selectedSchemas.length === 0"
-								@search-change="searchObjects"
-								@input="updateObjects">
-								<template #option="{ title, description }">
-									<div class="option-content">
-										<span class="option-title">{{ title }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingObjects">Searching...</span>
-									<span v-else-if="selectedRegisters.length === 0 && selectedSchemas.length === 0">Please select registers or schemas first</span>
-									<span v-else>No objects found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedObjects.length }} object(s) selected
-								<span v-if="selectedRegisters.length === 0 && selectedSchemas.length === 0"> - filtered by selected registers/schemas</span>
-							</p>
+			<div class="selectField">
+				<label for="schemas-select">Schemas</label>
+				<NcSelect
+					id="schemas-select"
+					v-model="selectedSchemas"
+					:disabled="dialogLoading"
+					:options="schemaOptions"
+					:loading="loadingSchemas"
+					:multiple="true"
+					label="title"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search schemas..."
+					:close-on-select="false"
+					@search-change="searchSchemas"
+					@input="updateSchemas">
+					<template #option="{ title, description }">
+						<div class="option-content">
+							<span class="option-title">{{ title }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+					<template #no-options>
+						<span v-if="loadingSchemas">Searching...</span>
+						<span v-else>No schemas found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedSchemas.length }} schema(s) selected
+				</p>
+			</div>
 
-						<div class="selectField">
-							<label for="sources-select">Data Sources</label>
-							<NcSelect
-								id="sources-select"
-								v-model="selectedSources"
-								:options="sourceOptions"
-								:loading="loadingSources"
-								:multiple="true"
-								label="title"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search data sources..."
-								:close-on-select="false"
-								@search-change="searchSources"
-								@input="updateSources">
-								<template #option="{ title, description }">
-									<div class="option-content">
-										<span class="option-title">{{ title }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingSources">Searching...</span>
-									<span v-else>No sources found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedSources.length }} source(s) selected
-							</p>
+			<div class="selectField">
+				<label for="objects-select">Objects</label>
+				<NcSelect
+					id="objects-select"
+					v-model="selectedObjects"
+					:disabled="dialogLoading || (selectedRegisters.length === 0 && selectedSchemas.length === 0)"
+					:options="objectOptions"
+					:loading="loadingObjects"
+					:multiple="true"
+					label="title"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search objects..."
+					:close-on-select="false"
+					@search-change="searchObjects"
+					@input="updateObjects">
+					<template #option="{ title, description }">
+						<div class="option-content">
+							<span class="option-title">{{ title }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+					<template #no-options>
+						<span v-if="loadingObjects">Searching...</span>
+						<span v-else-if="selectedRegisters.length === 0 && selectedSchemas.length === 0">Please select registers or schemas first</span>
+						<span v-else>No objects found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedObjects.length }} object(s) selected
+					<span v-if="selectedRegisters.length === 0 && selectedSchemas.length === 0"> - filtered by selected registers/schemas</span>
+				</p>
+			</div>
 
-						<div class="selectField">
-							<label for="agents-select">Agents</label>
-							<NcSelect
-								id="agents-select"
-								v-model="selectedAgents"
-								:options="agentOptions"
-								:loading="loadingAgents"
-								:multiple="true"
-								label="name"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search agents..."
-								:close-on-select="false"
-								@search-change="searchAgents"
-								@input="updateAgents">
-								<template #option="{ name, description }">
-									<div class="option-content">
-										<span class="option-title">{{ name }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingAgents">Searching...</span>
-									<span v-else>No agents found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedAgents.length }} agent(s) selected
-							</p>
+			<div class="selectField">
+				<label for="sources-select">Data Sources</label>
+				<NcSelect
+					id="sources-select"
+					v-model="selectedSources"
+					:disabled="dialogLoading"
+					:options="sourceOptions"
+					:loading="loadingSources"
+					:multiple="true"
+					label="title"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search data sources..."
+					:close-on-select="false"
+					@search-change="searchSources"
+					@input="updateSources">
+					<template #option="{ title, description }">
+						<div class="option-content">
+							<span class="option-title">{{ title }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+					<template #no-options>
+						<span v-if="loadingSources">Searching...</span>
+						<span v-else>No sources found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedSources.length }} source(s) selected
+				</p>
+			</div>
 
-						<div class="selectField">
-							<label for="views-select">Views</label>
-							<NcSelect
-								id="views-select"
-								v-model="selectedViews"
-								:options="viewOptions"
-								:loading="loadingViews"
-								:multiple="true"
-								label="name"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search views..."
-								:close-on-select="false"
-								@search-change="searchViews"
-								@input="updateViews">
-								<template #option="{ name, description }">
-									<div class="option-content">
-										<span class="option-title">{{ name }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingViews">Searching...</span>
-									<span v-else>No views found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedViews.length }} view(s) selected
-							</p>
+			<div class="selectField">
+				<label for="agents-select">Agents</label>
+				<NcSelect
+					id="agents-select"
+					v-model="selectedAgents"
+					:disabled="dialogLoading"
+					:options="agentOptions"
+					:loading="loadingAgents"
+					:multiple="true"
+					label="name"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search agents..."
+					:close-on-select="false"
+					@search-change="searchAgents"
+					@input="updateAgents">
+					<template #option="{ name, description }">
+						<div class="option-content">
+							<span class="option-title">{{ name }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+					<template #no-options>
+						<span v-if="loadingAgents">Searching...</span>
+						<span v-else>No agents found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedAgents.length }} agent(s) selected
+				</p>
+			</div>
 
-						<div class="selectField">
-							<label for="managed-applications-select">Applications</label>
-							<NcSelect
-								id="managed-applications-select"
-								v-model="selectedManagedApplications"
-								:options="applicationOptions"
-								:loading="loadingApplications"
-								:multiple="true"
-								label="name"
-								track-by="id"
-								:label-outside="true"
-								:filterable="true"
-								placeholder="Search applications..."
-								:close-on-select="false"
-								@search-change="searchApplications"
-								@input="updateManagedApplications">
-								<template #option="{ name, description }">
-									<div class="option-content">
-										<span class="option-title">{{ name }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingApplications">Searching...</span>
-									<span v-else>No applications found</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ selectedManagedApplications.length }} application(s) selected
-							</p>
+			<div class="selectField">
+				<label for="views-select">Views</label>
+				<NcSelect
+					id="views-select"
+					v-model="selectedViews"
+					:disabled="dialogLoading"
+					:options="viewOptions"
+					:loading="loadingViews"
+					:multiple="true"
+					label="name"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search views..."
+					:close-on-select="false"
+					@search-change="searchViews"
+					@input="updateViews">
+					<template #option="{ name, description }">
+						<div class="option-content">
+							<span class="option-title">{{ name }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
-					</div>
-				</BTab>
-
-				<!-- Management Tab -->
-				<BTab>
-					<template #title>
-						<CloudSync :size="16" />
-						<span>Management</span>
 					</template>
+					<template #no-options>
+						<span v-if="loadingViews">Searching...</span>
+						<span v-else>No views found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedViews.length }} view(s) selected
+				</p>
+			</div>
 
-					<div class="form-editor">
-						<div class="selectField">
-							<label for="source-type-select">Source Type *</label>
-							<NcSelect
-								id="source-type-select"
-								v-model="selectedSourceType"
-								:options="sourceTypeOptions"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								placeholder="Select source type..."
-								@input="updateSourceType">
-								<template #option="{ label, description }">
-									<div class="option-content">
-										<span class="option-title">{{ label }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								Determines where the configuration is managed
-							</p>
+			<div class="selectField">
+				<label for="managed-applications-select">Applications</label>
+				<NcSelect
+					id="managed-applications-select"
+					v-model="selectedManagedApplications"
+					:disabled="dialogLoading"
+					:options="applicationOptions"
+					:loading="loadingApplications"
+					:multiple="true"
+					label="name"
+					track-by="id"
+					:label-outside="true"
+					:filterable="true"
+					placeholder="Search applications..."
+					:close-on-select="false"
+					@search-change="searchApplications"
+					@input="updateManagedApplications">
+					<template #option="{ name, description }">
+						<div class="option-content">
+							<span class="option-title">{{ name }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+					<template #no-options>
+						<span v-if="loadingApplications">Searching...</span>
+						<span v-else>No applications found</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ selectedManagedApplications.length }} application(s) selected
+				</p>
+			</div>
+		</template>
 
-						<NcTextField
-							v-if="selectedSourceType && selectedSourceType.value !== 'local'"
-							label="Source URL"
-							placeholder="https://raw.githubusercontent.com/..."
-							:value="configurationStore.configurationItem?.sourceUrl || ''"
-							@update:value="updateSourceUrl">
-							<template #helper-text-message>
-								<p>The URL to the remote configuration file (JSON or YAML)</p>
-							</template>
-						</NcTextField>
-
-						<NcTextField
-							label="Version"
-							placeholder="1.0.0"
-							:value="configurationStore.configurationItem?.version || ''"
-							@update:value="updateVersion">
-							<template #helper-text-message>
-								<p>Semantic version (e.g., 1.0.0, 2.1.3)</p>
-							</template>
-						</NcTextField>
-
-						<div class="selectField">
-							<label for="application-select">Owner Application</label>
-							<NcSelect
-								id="application-select"
-								v-model="selectedApplication"
-								:options="applicationOptions"
-								label="name"
-								track-by="id"
-								:label-outside="true"
-								placeholder="Select owner application (optional)..."
-								@input="updateApplication">
-								<template #option="{ name, description }">
-									<div class="option-content">
-										<span class="option-title">{{ name }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-							</NcSelect>
-							<p v-if="selectedApplication" class="field-hint">
-								Owner: {{ selectedApplication.name }}
-							</p>
-							<p v-else class="field-hint">
-								The application that owns this configuration (optional)
-							</p>
+		<!-- Management Tab -->
+		<template #tab-management="{ loading: dialogLoading }">
+			<div class="selectField">
+				<label for="source-type-select">Source Type *</label>
+				<NcSelect
+					id="source-type-select"
+					v-model="selectedSourceType"
+					:disabled="dialogLoading"
+					:options="sourceTypeOptions"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					placeholder="Select source type..."
+					@input="updateSourceType">
+					<template #option="{ label, description }">
+						<div class="option-content">
+							<span class="option-title">{{ label }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					Determines where the configuration is managed
+				</p>
+			</div>
 
-						<NcTextField
-							label="Local Version"
-							placeholder="1.0.0"
-							:value="configurationStore.configurationItem?.localVersion || ''"
-							@update:value="updateLocalVersion">
-							<template #helper-text-message>
-								<p>Current version installed locally (semantic versioning)</p>
-							</template>
-						</NcTextField>
+			<NcTextField
+				v-if="selectedSourceType && selectedSourceType.value !== 'local'"
+				:disabled="dialogLoading"
+				label="Source URL"
+				:value.sync="configurationItem.sourceUrl"
+				placeholder="https://raw.githubusercontent.com/...">
+				<template #helper-text-message>
+					<p>The URL to the remote configuration file (JSON or YAML)</p>
+				</template>
+			</NcTextField>
 
-						<NcTextField
-							v-if="configurationStore.configurationItem?.remoteVersion"
-							label="Remote Version (Read-only)"
-							:value="configurationStore.configurationItem?.remoteVersion || '-'"
-							:disabled="true">
-							<template #helper-text-message>
-								<p>Last checked version from remote source</p>
-							</template>
-						</NcTextField>
+			<NcTextField
+				:disabled="dialogLoading"
+				label="Version"
+				:value.sync="configurationItem.version"
+				placeholder="1.0.0">
+				<template #helper-text-message>
+					<p>Semantic version (e.g., 1.0.0, 2.1.3)</p>
+				</template>
+			</NcTextField>
 
-						<div class="checkboxField">
-							<NcCheckboxRadioSwitch
-								:checked="configurationStore.configurationItem?.autoUpdate || false"
-								@update:checked="updateAutoUpdate">
-								Enable Auto-Update
-							</NcCheckboxRadioSwitch>
-							<p class="field-hint">
-								Automatically import updates when a new version is detected
-							</p>
+			<div class="selectField">
+				<label for="application-select">Owner Application</label>
+				<NcSelect
+					id="application-select"
+					v-model="selectedApplication"
+					:disabled="dialogLoading"
+					:options="applicationOptions"
+					label="name"
+					track-by="id"
+					:label-outside="true"
+					placeholder="Select owner application (optional)..."
+					@input="updateApplication">
+					<template #option="{ name, description }">
+						<div class="option-content">
+							<span class="option-title">{{ name }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+				</NcSelect>
+				<p v-if="selectedApplication" class="field-hint">
+					Owner: {{ selectedApplication.name }}
+				</p>
+				<p v-else class="field-hint">
+					The application that owns this configuration (optional)
+				</p>
+			</div>
 
-						<div class="selectField">
-							<label for="notification-groups-select">Notification Groups</label>
-							<NcSelect
-								id="notification-groups-select"
-								v-model="selectedNotificationGroups"
-								:options="notificationGroupOptions"
-								:multiple="true"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								placeholder="Select groups to notify..."
-								:close-on-select="false"
-								@input="updateNotificationGroups">
-								<template #option="{ label }">
-									<span>{{ label }}</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								Groups that will receive notifications when updates are available (admin is always included)
-							</p>
-						</div>
+			<NcTextField
+				:disabled="dialogLoading"
+				label="Local Version"
+				:value.sync="configurationItem.localVersion"
+				placeholder="1.0.0">
+				<template #helper-text-message>
+					<p>Current version installed locally (semantic versioning)</p>
+				</template>
+			</NcTextField>
+
+			<NcTextField
+				v-if="configurationItem.remoteVersion"
+				label="Remote Version (Read-only)"
+				:value="configurationItem.remoteVersion || '-'"
+				:disabled="true">
+				<template #helper-text-message>
+					<p>Last checked version from remote source</p>
+				</template>
+			</NcTextField>
 
-						<NcNoteCard v-if="selectedSourceType && selectedSourceType.value === 'github'" type="info">
-							<p>GitHub Integration Settings</p>
-						</NcNoteCard>
+			<div class="checkboxField">
+				<NcCheckboxRadioSwitch
+					:disabled="dialogLoading"
+					:checked.sync="configurationItem.autoUpdate">
+					Enable Auto-Update
+				</NcCheckboxRadioSwitch>
+				<p class="field-hint">
+					Automatically import updates when a new version is detected
+				</p>
+			</div>
 
-						<NcTextField
-							v-if="selectedSourceType && selectedSourceType.value === 'github'"
-							label="GitHub Repository"
-							placeholder="owner/repository"
-							:value="configurationStore.configurationItem?.githubRepo || ''"
-							@update:value="updateGithubRepo">
-							<template #helper-text-message>
-								<p>Repository in format: owner/repo</p>
-							</template>
-						</NcTextField>
+			<div class="selectField">
+				<label for="notification-groups-select">Notification Groups</label>
+				<NcSelect
+					id="notification-groups-select"
+					v-model="selectedNotificationGroups"
+					:disabled="dialogLoading"
+					:options="notificationGroupOptions"
+					:multiple="true"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					placeholder="Select groups to notify..."
+					:close-on-select="false"
+					@input="updateNotificationGroups">
+					<template #option="{ label }">
+						<span>{{ label }}</span>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					Groups that will receive notifications when updates are available (admin is always included)
+				</p>
+			</div>
 
-						<NcTextField
-							v-if="selectedSourceType && selectedSourceType.value === 'github'"
-							label="GitHub Branch"
-							placeholder="main"
-							:value="configurationStore.configurationItem?.githubBranch || 'main'"
-							@update:value="updateGithubBranch">
-							<template #helper-text-message>
-								<p>Branch to push/pull configurations</p>
-							</template>
-						</NcTextField>
+			<NcNoteCard v-if="selectedSourceType && selectedSourceType.value === 'github'" type="info">
+				<p>GitHub Integration Settings</p>
+			</NcNoteCard>
 
-						<NcTextField
-							v-if="selectedSourceType && selectedSourceType.value === 'github'"
-							label="GitHub Path"
-							placeholder="configs/configuration.json"
-							:value="configurationStore.configurationItem?.githubPath || ''"
-							@update:value="updateGithubPath">
-							<template #helper-text-message>
-								<p>Path within the repository for the configuration file</p>
-							</template>
-						</NcTextField>
-					</div>
-				</BTab>
-			</BTabs>
-		</div>
+			<NcTextField
+				v-if="selectedSourceType && selectedSourceType.value === 'github'"
+				:disabled="dialogLoading"
+				label="GitHub Repository"
+				:value.sync="configurationItem.githubRepo"
+				placeholder="owner/repository">
+				<template #helper-text-message>
+					<p>Repository in format: owner/repo</p>
+				</template>
+			</NcTextField>
 
-		<template #actions>
-			<NcButton @click="closeModal">
-				<template #icon>
-					<Cancel :size="20" />
+			<NcTextField
+				v-if="selectedSourceType && selectedSourceType.value === 'github'"
+				:disabled="dialogLoading"
+				label="GitHub Branch"
+				:value.sync="configurationItem.githubBranch"
+				placeholder="main">
+				<template #helper-text-message>
+					<p>Branch to push/pull configurations</p>
 				</template>
-				Cancel
-			</NcButton>
-			<NcButton
-				:disabled="loading || !isValid"
-				type="primary"
-				@click="saveConfiguration">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSave v-else :size="20" />
+			</NcTextField>
+
+			<NcTextField
+				v-if="selectedSourceType && selectedSourceType.value === 'github'"
+				:disabled="dialogLoading"
+				label="GitHub Path"
+				:value.sync="configurationItem.githubPath"
+				placeholder="configs/configuration.json">
+				<template #helper-text-message>
+					<p>Path within the repository for the configuration file</p>
 				</template>
-				Save
-			</NcButton>
+			</NcTextField>
 		</template>
-	</NcDialog>
+	</CnTabbedFormDialog>
 </template>
 
 <script>
 import {
-	NcButton,
 	NcCheckboxRadioSwitch,
-	NcDialog,
-	NcLoadingIcon,
 	NcNoteCard,
 	NcSelect,
 	NcTextField,
 	NcTextArea,
 } from '@nextcloud/vue'
+import { CnTabbedFormDialog } from '@conduction/nextcloud-vue'
 
-import { BTabs, BTab } from 'bootstrap-vue'
-
-import Cancel from 'vue-material-design-icons/Cancel.vue'
-import ContentSave from 'vue-material-design-icons/ContentSave.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Database from 'vue-material-design-icons/Database.vue'
 import CloudSync from 'vue-material-design-icons/CloudSync.vue'
@@ -526,28 +484,42 @@ import CloudSync from 'vue-material-design-icons/CloudSync.vue'
 export default {
 	name: 'EditConfiguration',
 	components: {
-		NcDialog,
-		NcButton,
+		CnTabbedFormDialog,
 		NcCheckboxRadioSwitch,
-		NcLoadingIcon,
 		NcNoteCard,
 		NcSelect,
 		NcTextField,
 		NcTextArea,
-		BTabs,
-		BTab,
-		// Icons
-		Cancel,
-		ContentSave,
-		Cog,
-		Database,
-		CloudSync,
 	},
 	data() {
 		return {
-			loading: false,
-			error: null,
-			activeTab: 0,
+			configurationItem: {
+				title: '',
+				description: null,
+				type: 'default',
+				app: '',
+				version: '1.0.0',
+				application: '',
+				owner: '',
+				organisation: null,
+				registers: [],
+				schemas: [],
+				objects: [],
+				sources: [],
+				agents: [],
+				views: [],
+				applications: [],
+				sourceType: 'local',
+				isLocal: true,
+				sourceUrl: null,
+				localVersion: '1.0.0',
+				remoteVersion: null,
+				autoUpdate: false,
+				notificationGroups: [],
+				githubRepo: null,
+				githubBranch: 'main',
+				githubPath: null,
+			},
 			selectedRegisters: [],
 			selectedSchemas: [],
 			selectedObjects: [],
@@ -557,7 +529,6 @@ export default {
 			selectedManagedApplications: [],
 			selectedApplication: null,
 			selectedType: null,
-			// Management tab selections
 			selectedSourceType: null,
 			selectedNotificationGroups: [],
 			// Loading states for searches
@@ -587,9 +558,12 @@ export default {
 		}
 	},
 	computed: {
-		isValid() {
-			const item = configurationStore.configurationItem
-			return Boolean(item?.title?.trim())
+		dialogTabs() {
+			return [
+				{ id: 'settings', title: 'Settings', icon: Cog },
+				{ id: 'configuration', title: 'Configuration', icon: Database },
+				{ id: 'management', title: 'Management', icon: CloudSync },
+			]
 		},
 		sourceTypeOptions() {
 			return [
@@ -607,17 +581,14 @@ export default {
 			]
 		},
 		notificationGroupOptions() {
-			// In a real implementation, this would fetch from Nextcloud groups API
-			// For now, return common groups
 			return [
 				{ value: 'admin', label: 'Administrators' },
 				{ value: 'users', label: 'All Users' },
 			]
 		},
 	},
-	async created() {
-		// Organisations and applications are now hot-loaded at app startup
-		// Only refresh if somehow they're empty (shouldn't happen in normal flow)
+	mounted() {
+		// Refresh stores if empty
 		if (!organisationStore.organisationList || organisationStore.organisationList.length === 0) {
 			organisationStore.refreshOrganisationList()
 		}
@@ -625,7 +596,7 @@ export default {
 			applicationStore.refreshApplicationList()
 		}
 
-		// Perform initial searches for Configuration tab entities (load top 10)
+		// Perform initial searches for Configuration tab entities
 		this.searchRegisters('')
 		this.searchSchemas('')
 		this.searchSources('')
@@ -633,14 +604,168 @@ export default {
 		this.searchViews('')
 		this.searchApplications('')
 
-		// Initialize configurationItem if it doesn't exist
-		if (!configurationStore.configurationItem) {
-			configurationStore.configurationItem = {
+		// Initialize from store
+		this.initializeConfigurationItem()
+	},
+	methods: {
+		initializeConfigurationItem() {
+			if (configurationStore.configurationItem?.id) {
+				this.configurationItem = {
+					...this.configurationItem,
+					...configurationStore.configurationItem,
+				}
+
+				// Load Settings tab selections
+				if (this.configurationItem.type) {
+					this.selectedType = this.typeOptions.find(
+						t => t.value === this.configurationItem.type,
+					) || this.typeOptions[0]
+				} else {
+					this.selectedType = this.typeOptions[0]
+				}
+
+				// Load Management tab selections
+				if (this.configurationItem.sourceType) {
+					this.selectedSourceType = this.sourceTypeOptions.find(
+						st => st.value === this.configurationItem.sourceType,
+					) || null
+				}
+				if (this.configurationItem.notificationGroups && Array.isArray(this.configurationItem.notificationGroups)) {
+					this.selectedNotificationGroups = this.configurationItem.notificationGroups.map(groupValue =>
+						this.notificationGroupOptions.find(g => g.value === groupValue),
+					).filter(Boolean)
+				}
+
+				// Load selected application
+				if (this.configurationItem.application) {
+					this.selectedApplication = applicationStore.applicationList.find(
+						a => a.uuid === this.configurationItem.application,
+					) || null
+				}
+
+				// Load existing entity selections
+				this.loadExistingSelections()
+			} else {
+				// New configuration defaults
+				this.selectedType = this.typeOptions[0]
+				this.selectedSourceType = this.sourceTypeOptions[0]
+			}
+		},
+		async loadExistingSelections() {
+			const item = this.configurationItem
+
+			// Load selected registers
+			if (item.registers && Array.isArray(item.registers) && item.registers.length > 0) {
+				this.loadingRegisters = true
+				try {
+					const promises = item.registers.map(id =>
+						fetch(`/index.php/apps/openregister/api/registers/${id}`).then(r => r.json()),
+					)
+					this.selectedRegisters = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected registers:', error)
+				} finally {
+					this.loadingRegisters = false
+				}
+			}
+
+			// Load selected schemas
+			if (item.schemas && Array.isArray(item.schemas) && item.schemas.length > 0) {
+				this.loadingSchemas = true
+				try {
+					const promises = item.schemas.map(id =>
+						fetch(`/index.php/apps/openregister/api/schemas/${id}`).then(r => r.json()),
+					)
+					this.selectedSchemas = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected schemas:', error)
+				} finally {
+					this.loadingSchemas = false
+				}
+			}
+
+			// Load selected objects
+			if (item.objects && Array.isArray(item.objects) && item.objects.length > 0) {
+				this.loadingObjects = true
+				try {
+					const promises = item.objects.map(id =>
+						fetch(`/index.php/apps/openregister/api/objects/${id}`).then(r => r.json()),
+					)
+					this.selectedObjects = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected objects:', error)
+				} finally {
+					this.loadingObjects = false
+				}
+			}
+
+			// Load selected sources
+			if (item.sources && Array.isArray(item.sources) && item.sources.length > 0) {
+				this.loadingSources = true
+				try {
+					const promises = item.sources.map(id =>
+						fetch(`/index.php/apps/openregister/api/sources/${id}`).then(r => r.json()),
+					)
+					this.selectedSources = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected sources:', error)
+				} finally {
+					this.loadingSources = false
+				}
+			}
+
+			// Load selected agents
+			if (item.agents && Array.isArray(item.agents) && item.agents.length > 0) {
+				this.loadingAgents = true
+				try {
+					const promises = item.agents.map(id =>
+						fetch(`/index.php/apps/openregister/api/agents/${id}`).then(r => r.json()),
+					)
+					this.selectedAgents = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected agents:', error)
+				} finally {
+					this.loadingAgents = false
+				}
+			}
+
+			// Load selected views
+			if (item.views && Array.isArray(item.views) && item.views.length > 0) {
+				this.loadingViews = true
+				try {
+					const promises = item.views.map(id =>
+						fetch(`/index.php/apps/openregister/api/views/${id}`).then(r => r.json()),
+					)
+					this.selectedViews = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected views:', error)
+				} finally {
+					this.loadingViews = false
+				}
+			}
+
+			// Load selected managed applications
+			if (item.applications && Array.isArray(item.applications) && item.applications.length > 0) {
+				this.loadingApplications = true
+				try {
+					const promises = item.applications.map(id =>
+						fetch(`/index.php/apps/openregister/api/applications/${id}`).then(r => r.json()),
+					)
+					this.selectedManagedApplications = await Promise.all(promises)
+				} catch (error) {
+					console.error('Error loading selected applications:', error)
+				} finally {
+					this.loadingApplications = false
+				}
+			}
+		},
+		resetForm() {
+			this.configurationItem = {
 				title: '',
 				description: null,
 				type: 'default',
 				app: '',
-				version: '1.0.0', // Default semantic version
+				version: '1.0.0',
 				application: '',
 				owner: '',
 				organisation: null,
@@ -650,9 +775,9 @@ export default {
 				sources: [],
 				agents: [],
 				views: [],
-				// Management tab defaults
+				applications: [],
 				sourceType: 'local',
-				isLocal: true, // New configurations are local by default
+				isLocal: true,
 				sourceUrl: null,
 				localVersion: '1.0.0',
 				remoteVersion: null,
@@ -668,301 +793,57 @@ export default {
 			this.selectedSources = []
 			this.selectedAgents = []
 			this.selectedViews = []
+			this.selectedManagedApplications = []
 			this.selectedApplication = null
-			this.selectedType = this.typeOptions[0] // 'default'
-			// Management tab defaults
-			this.selectedSourceType = this.sourceTypeOptions[0] // 'local'
+			this.selectedType = this.typeOptions[0]
+			this.selectedSourceType = this.sourceTypeOptions[0]
 			this.selectedNotificationGroups = []
-		} else {
-			// Load existing selections
-			this.loadExistingSelections()
-		}
-	},
-	methods: {
-		updateTitle(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.title = value
-		},
-		updateDescription(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.description = value
-		},
-		updateVersion(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.version = value
 		},
+		// Update methods for select fields
 		updateType(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.type = value ? value.value : 'default'
+			this.configurationItem.type = value ? value.value : 'default'
 			this.selectedType = value
 		},
-		updateApp(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.app = value || ''
-		},
 		updateApplication(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Store the application UUID
-			configurationStore.configurationItem.application = value ? value.uuid : ''
+			this.configurationItem.application = value ? value.uuid : ''
 			this.selectedApplication = value
 		},
 		updateRegisters(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected register objects
-			configurationStore.configurationItem.registers = value.map(r => parseInt(r.id))
+			this.configurationItem.registers = value.map(r => parseInt(r.id))
 			this.selectedRegisters = value
 		},
 		updateSchemas(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected schema objects
-			configurationStore.configurationItem.schemas = value.map(s => parseInt(s.id))
+			this.configurationItem.schemas = value.map(s => parseInt(s.id))
 			this.selectedSchemas = value
 		},
 		updateObjects(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected object objects
-			configurationStore.configurationItem.objects = value.map(o => parseInt(o.id))
+			this.configurationItem.objects = value.map(o => parseInt(o.id))
 			this.selectedObjects = value
 		},
 		updateSources(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected source objects
-			configurationStore.configurationItem.sources = value.map(s => parseInt(s.id))
+			this.configurationItem.sources = value.map(s => parseInt(s.id))
 			this.selectedSources = value
 		},
 		updateAgents(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected agent objects
-			configurationStore.configurationItem.agents = value.map(a => parseInt(a.id))
+			this.configurationItem.agents = value.map(a => parseInt(a.id))
 			this.selectedAgents = value
 		},
 		updateViews(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected view objects
-			configurationStore.configurationItem.views = value.map(v => parseInt(v.id))
+			this.configurationItem.views = value.map(v => parseInt(v.id))
 			this.selectedViews = value
 		},
 		updateManagedApplications(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			// Extract IDs from selected application objects
-			configurationStore.configurationItem.applications = value.map(a => parseInt(a.id))
+			this.configurationItem.applications = value.map(a => parseInt(a.id))
 			this.selectedManagedApplications = value
 		},
-		// Management tab update methods
 		updateSourceType(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.sourceType = value ? value.value : 'local'
+			this.configurationItem.sourceType = value ? value.value : 'local'
 			this.selectedSourceType = value
 		},
-		updateSourceUrl(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.sourceUrl = value
-		},
-		updateLocalVersion(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.localVersion = value
-		},
-		updateAutoUpdate(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.autoUpdate = value
-		},
 		updateNotificationGroups(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.notificationGroups = value.map(g => g.value)
+			this.configurationItem.notificationGroups = value.map(g => g.value)
 			this.selectedNotificationGroups = value
 		},
-		updateGithubRepo(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.githubRepo = value
-		},
-		updateGithubBranch(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.githubBranch = value
-		},
-		updateGithubPath(value) {
-			if (!configurationStore.configurationItem) {
-				configurationStore.configurationItem = {}
-			}
-			configurationStore.configurationItem.githubPath = value
-		},
-		async loadExistingSelections() {
-			const item = configurationStore.configurationItem
-			if (item) {
-				// Load selected application (from already loaded list)
-				if (item.application) {
-					this.selectedApplication = applicationStore.applicationList.find(
-						a => a.uuid === item.application,
-					) || null
-				}
-				// Organisation is automatically set by backend based on active organisation
-
-				// Load Settings tab selections
-				if (item.type) {
-					this.selectedType = this.typeOptions.find(
-						t => t.value === item.type,
-					) || this.typeOptions[0] // Default to 'default'
-				} else {
-					this.selectedType = this.typeOptions[0] // Default to 'default'
-				}
-
-				// Load Management tab selections
-				if (item.sourceType) {
-					this.selectedSourceType = this.sourceTypeOptions.find(
-						st => st.value === item.sourceType,
-					) || null
-				}
-				if (item.notificationGroups && Array.isArray(item.notificationGroups)) {
-					this.selectedNotificationGroups = item.notificationGroups.map(groupValue =>
-						this.notificationGroupOptions.find(g => g.value === groupValue),
-					).filter(Boolean)
-				}
-
-				// Load selected registers by fetching them individually
-				if (item.registers && Array.isArray(item.registers) && item.registers.length > 0) {
-					this.loadingRegisters = true
-					try {
-						const promises = item.registers.map(id =>
-							fetch(`/index.php/apps/openregister/api/registers/${id}`).then(r => r.json()),
-						)
-						this.selectedRegisters = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected registers:', error)
-					} finally {
-						this.loadingRegisters = false
-					}
-				}
-
-				// Load selected schemas by fetching them individually
-				if (item.schemas && Array.isArray(item.schemas) && item.schemas.length > 0) {
-					this.loadingSchemas = true
-					try {
-						const promises = item.schemas.map(id =>
-							fetch(`/index.php/apps/openregister/api/schemas/${id}`).then(r => r.json()),
-						)
-						this.selectedSchemas = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected schemas:', error)
-					} finally {
-						this.loadingSchemas = false
-					}
-				}
-
-				// Load selected objects by fetching them individually
-				if (item.objects && Array.isArray(item.objects) && item.objects.length > 0) {
-					this.loadingObjects = true
-					try {
-						const promises = item.objects.map(id =>
-							fetch(`/index.php/apps/openregister/api/objects/${id}`).then(r => r.json()),
-						)
-						this.selectedObjects = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected objects:', error)
-					} finally {
-						this.loadingObjects = false
-					}
-				}
-
-				// Load selected sources by fetching them individually
-				if (item.sources && Array.isArray(item.sources) && item.sources.length > 0) {
-					this.loadingSources = true
-					try {
-						const promises = item.sources.map(id =>
-							fetch(`/index.php/apps/openregister/api/sources/${id}`).then(r => r.json()),
-						)
-						this.selectedSources = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected sources:', error)
-					} finally {
-						this.loadingSources = false
-					}
-				}
-
-				// Load selected agents by fetching them individually
-				if (item.agents && Array.isArray(item.agents) && item.agents.length > 0) {
-					this.loadingAgents = true
-					try {
-						const promises = item.agents.map(id =>
-							fetch(`/index.php/apps/openregister/api/agents/${id}`).then(r => r.json()),
-						)
-						this.selectedAgents = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected agents:', error)
-					} finally {
-						this.loadingAgents = false
-					}
-				}
-
-				// Load selected views by fetching them individually
-				if (item.views && Array.isArray(item.views) && item.views.length > 0) {
-					this.loadingViews = true
-					try {
-						const promises = item.views.map(id =>
-							fetch(`/index.php/apps/openregister/api/views/${id}`).then(r => r.json()),
-						)
-						this.selectedViews = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected views:', error)
-					} finally {
-						this.loadingViews = false
-					}
-				}
-
-				// Load selected managed applications by fetching them individually
-				if (item.applications && Array.isArray(item.applications) && item.applications.length > 0) {
-					this.loadingApplications = true
-					try {
-						const promises = item.applications.map(id =>
-							fetch(`/index.php/apps/openregister/api/applications/${id}`).then(r => r.json()),
-						)
-						this.selectedManagedApplications = await Promise.all(promises)
-					} catch (error) {
-						console.error('Error loading selected applications:', error)
-					} finally {
-						this.loadingApplications = false
-					}
-				}
-			}
-		},
 		// Search methods with debouncing
 		searchRegisters(query) {
 			clearTimeout(this.registerSearchDebounce)
@@ -972,7 +853,6 @@ export default {
 					const response = await fetch(`/index.php/apps/openregister/api/registers?_search=${encodeURIComponent(query)}&_limit=10`)
 					const data = await response.json()
 					this.registerOptions = data.results || data || []
-					// Include already selected items
 					this.selectedRegisters.forEach(selected => {
 						if (!this.registerOptions.find(r => r.id === selected.id)) {
 							this.registerOptions.unshift(selected)
@@ -994,7 +874,6 @@ export default {
 					const response = await fetch(`/index.php/apps/openregister/api/schemas?_search=${encodeURIComponent(query)}&_limit=10`)
 					const data = await response.json()
 					this.schemaOptions = data.results || data || []
-					// Include already selected items
 					this.selectedSchemas.forEach(selected => {
 						if (!this.schemaOptions.find(s => s.id === selected.id)) {
 							this.schemaOptions.unshift(selected)
@@ -1013,29 +892,22 @@ export default {
 			this.objectSearchDebounce = setTimeout(async () => {
 				this.loadingObjects = true
 				try {
-					// Build filter params based on selected registers and schemas
 					const params = new URLSearchParams()
 					params.append('_search', query)
 					params.append('_limit', '10')
-
-					// Filter by selected registers
 					if (this.selectedRegisters.length > 0) {
 						this.selectedRegisters.forEach(register => {
 							params.append('_register[]', register.id)
 						})
 					}
-
-					// Filter by selected schemas
 					if (this.selectedSchemas.length > 0) {
 						this.selectedSchemas.forEach(schema => {
 							params.append('_schema[]', schema.id)
 						})
 					}
-
 					const response = await fetch(`/index.php/apps/openregister/api/objects?${params.toString()}`)
 					const data = await response.json()
 					this.objectOptions = data.results || data || []
-					// Include already selected items
 					this.selectedObjects.forEach(selected => {
 						if (!this.objectOptions.find(o => o.id === selected.id)) {
 							this.objectOptions.unshift(selected)
@@ -1057,7 +929,6 @@ export default {
 					const response = await fetch(`/index.php/apps/openregister/api/sources?_search=${encodeURIComponent(query)}&_limit=10`)
 					const data = await response.json()
 					this.sourceOptions = data.results || data || []
-					// Include already selected items
 					this.selectedSources.forEach(selected => {
 						if (!this.sourceOptions.find(s => s.id === selected.id)) {
 							this.sourceOptions.unshift(selected)
@@ -1079,7 +950,6 @@ export default {
 					const response = await fetch(`/index.php/apps/openregister/api/agents?_search=${encodeURIComponent(query)}&_limit=10`)
 					const data = await response.json()
 					this.agentOptions = data.results || data || []
-					// Include already selected items
 					this.selectedAgents.forEach(selected => {
 						if (!this.agentOptions.find(a => a.id === selected.id)) {
 							this.agentOptions.unshift(selected)
@@ -1101,7 +971,6 @@ export default {
 					const response = await fetch(`/index.php/apps/openregister/api/views?_search=${encodeURIComponent(query)}&_limit=10`)
 					const data = await response.json()
 					this.viewOptions = data.results || data || []
-					// Include already selected items
 					this.selectedViews.forEach(selected => {
 						if (!this.viewOptions.find(v => v.id === selected.id)) {
 							this.viewOptions.unshift(selected)
@@ -1123,7 +992,6 @@ export default {
 					const response = await fetch(`/index.php/apps/openregister/api/applications?_search=${encodeURIComponent(query)}&_limit=10`)
 					const data = await response.json()
 					this.applicationOptions = data.results || data || []
-					// Include already selected items
 					this.selectedManagedApplications.forEach(selected => {
 						if (!this.applicationOptions.find(a => a.id === selected.id)) {
 							this.applicationOptions.unshift(selected)
@@ -1137,13 +1005,7 @@ export default {
 				}
 			}, 300)
 		},
-		handleDialogClose() {
-			this.closeModal()
-		},
 		closeModal() {
-			navigationStore.setModal(false)
-			this.loading = false
-			this.error = null
 			this.selectedRegisters = []
 			this.selectedSchemas = []
 			this.selectedObjects = []
@@ -1151,18 +1013,27 @@ export default {
 			this.selectedAgents = []
 			this.selectedViews = []
 			this.selectedApplication = null
+			navigationStore.setModal(false)
 		},
 		async saveConfiguration() {
-			this.loading = true
-			this.error = null
+			if (!this.configurationItem.title.trim()) {
+				this.$refs.dialog.setResult({ error: 'Configuration title is required' })
+				return
+			}
 
 			try {
-				await configurationStore.saveConfiguration(configurationStore.configurationItem)
-				this.closeModal()
+				const { response } = await configurationStore.saveConfiguration({
+					...this.configurationItem,
+				})
+
+				if (response.ok) {
+					this.$refs.dialog.setResult({ success: true })
+				}
 			} catch (error) {
-				this.error = error.message || 'Failed to save configuration'
-			} finally {
-				this.loading = false
+				console.error('Error saving configuration:', error)
+				this.$refs.dialog.setResult({
+					error: error.message || 'An error occurred while saving the configuration',
+				})
 			}
 		},
 	},
@@ -1170,17 +1041,6 @@ export default {
 </script>
 
 <style scoped>
-.tabContainer {
-	width: 100%;
-}
-
-.form-editor {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	padding: 1rem 0;
-}
-
 .selectField {
 	display: flex;
 	flex-direction: column;
@@ -1222,18 +1082,3 @@ export default {
 	word-break: break-word;
 }
 </style>
-
-<style>
-/* Tab styling - must be unscoped to affect Bootstrap Vue components */
-.nav-tabs .nav-link {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.5rem;
-}
-
-.nav-tabs .nav-link span {
-	display: inline-flex;
-	align-items: center;
-}
-</style>
diff --git a/src/modals/configuration/ImportConfiguration.vue b/src/modals/configuration/ImportConfiguration.vue
index 6ae320762a..a9bef2b493 100644
--- a/src/modals/configuration/ImportConfiguration.vue
+++ b/src/modals/configuration/ImportConfiguration.vue
@@ -3,309 +3,274 @@ import { configurationStore, navigationStore, registerStore, schemaStore } from
 </script>
 
 <template>
-	<NcDialog v-if="navigationStore.modal === 'importConfiguration'"
-		name="importConfiguration"
-		title="Import Configuration"
+	<CnTabbedFormDialog
+		v-if="navigationStore.modal === 'importConfiguration'"
+		ref="dialog"
+		dialog-title="Import Configuration"
+		entity-name="Configuration"
+		confirm-label="Import"
 		size="large"
-		:can-close="!loading"
-		@update:open="closeModal">
-		<NcNoteCard v-if="success" type="success">
-			<p>{{ successMessage }}</p>
-		</NcNoteCard>
-
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
-
-		<div class="tabContainer">
-			<BTabs v-model="activeTab" content-class="mt-3" justified>
-				<!-- Discover Tab -->
-				<BTab active>
-					<template #title>
-						<Magnify :size="16" />
-						<span>Discover</span>
-					</template>
-					<div class="tabContent">
-						<p class="tabDescription">
-							Search GitHub and GitLab for OpenRegister configurations created by the community.
-						</p>
-
-						<!-- Token Warning -->
-						<NcNoteCard v-if="!hasGithubToken || !hasGitlabToken" type="warning">
-							<p>
-								<strong>{{ getTokenWarningTitle() }}</strong><br>
-								{{ getTokenWarningMessage() }}
-							</p>
-							<p style="margin-top: 8px;">
-								<a :href="settingsUrl" target="_blank" style="color: var(--color-primary-element); font-weight: 600;">
-									→ Configure API Tokens in Settings
-								</a>
-							</p>
-						</NcNoteCard>
-
-						<div class="searchContainer">
-							<NcTextField
-								:value.sync="searchQuery"
-								label="Search configurations"
-								placeholder="Enter search terms or leave empty to browse all"
-								@keyup.enter="searchConfigurations">
-								<Magnify :size="20" />
-							</NcTextField>
-
-							<NcButton
-								class="github-button"
-								:disabled="!hasGithubToken || searchLoading"
-								@click="searchSource = 'github'; searchConfigurations()">
-								<template #icon>
-									<Github :size="20" />
-								</template>
-								{{ t('openregister', 'Search GitHub') }}
-							</NcButton>
-
-							<NcButton
-								class="gitlab-button"
-								:disabled="!hasGitlabToken || searchLoading"
-								@click="searchSource = 'gitlab'; searchConfigurations()">
-								<template #icon>
-									<Gitlab :size="20" />
-								</template>
-								{{ t('openregister', 'Search GitLab') }}
-							</NcButton>
-						</div>
-
-						<!-- Individual Token Warnings -->
-						<div v-if="!hasGithubToken || !hasGitlabToken" class="token-warnings">
-							<div v-if="!hasGithubToken" class="token-warning-item">
-								<Github :size="16" />
-								<span>GitHub token not configured - Search disabled</span>
-							</div>
-							<div v-if="!hasGitlabToken" class="token-warning-item">
-								<Gitlab :size="16" />
-								<span>GitLab token not configured - Search disabled</span>
-							</div>
-						</div>
-
-						<NcLoadingIcon v-if="searchLoading" :size="64" />
-
-						<!-- Search Error -->
-						<NcNoteCard v-else-if="searchError" type="error">
-							<p><strong>Search Failed</strong></p>
-							<p>{{ searchError }}</p>
-						</NcNoteCard>
-
-						<div v-else-if="searchResults.length > 0" class="resultsGrid">
-							<ConfigurationCard
-								v-for="(result, index) in searchResults"
-								:key="index"
-								:configuration="result"
-								@import="importDiscoveredConfiguration(result)"
-								@check-version="handleCheckVersion" />
-						</div>
-
-						<NcEmptyContent v-else-if="hasSearched"
-							name="No configurations found"
-							description="Try adjusting your search terms or browse a different source.">
-							<template #icon>
-								<Magnify :size="64" />
-							</template>
-						</NcEmptyContent>
-					</div>
-				</BTab>
-
-				<!-- GitHub/GitLab Tab -->
-				<BTab>
-					<template #title>
-						<Github :size="16" />
-						<span>GitHub / GitLab</span>
+		:tabs="dialogTabs"
+		:item="null"
+		:show-create-another="false"
+		:disable-save="!canImport"
+		success-text="Configuration imported successfully!"
+		@confirm="performImport"
+		@close="closeModal"
+		@update:active-tab="activeTab = $event">
+		<template #confirm-icon>
+			<ImportIcon :size="20" />
+		</template>
+
+		<!-- Synchronization Settings - Below Tabs -->
+		<template #below-tabs>
+			<div class="syncSettings">
+				<h4>{{ t('openregister', 'Synchronization Settings') }}</h4>
+				<NcCheckboxRadioSwitch
+					:checked="syncEnabled"
+					type="switch"
+					@update:checked="syncEnabled = $event">
+					{{ t('openregister', 'Enable automatic synchronization') }}
+				</NcCheckboxRadioSwitch>
+
+				<NcTextField
+					v-if="syncEnabled"
+					:value.sync="syncInterval"
+					type="number"
+					label="Sync Interval (hours)"
+					placeholder="24"
+					:min="1"
+					:max="168">
+					<template #helper>
+						{{ t('openregister', 'How often to check for updates (1-168 hours)') }}
 					</template>
-					<div class="tabContent">
-						<p class="tabDescription">
-							Import a configuration from a specific GitHub or GitLab repository and branch.
-						</p>
-
-						<NcSelect
-							v-model="repoSource"
-							:options="['GitHub', 'GitLab']"
-							input-label="Source Platform" />
-
-						<NcTextField
-							v-if="repoSource === 'GitHub'"
-							:value.sync="repoOwner"
-							label="Repository Owner"
-							placeholder="e.g., ConductionNL" />
-
-						<NcTextField
-							v-if="repoSource === 'GitLab'"
-							:value.sync="repoNamespace"
-							label="Namespace"
-							placeholder="e.g., conduction" />
-
-						<NcTextField
-							:value.sync="repoName"
-							:label="repoSource === 'GitHub' ? 'Repository Name' : 'Project Name'"
-							placeholder="e.g., openregister" />
-
-						<NcButton
-							:disabled="!canFetchBranches"
-							@click="fetchBranches">
-							<template #icon>
-								<SourceBranch :size="20" />
-							</template>
-							Load Branches
-						</NcButton>
-
-						<NcSelect
-							v-if="branches.length > 0"
-							v-model="selectedBranch"
-							:options="branches"
-							input-label="Branch"
-							@change="fetchConfigurationFiles" />
-
-						<div v-if="configFiles.length > 0" class="filesGrid">
-							<div
-								v-for="file in configFiles"
-								:key="file.path"
-								class="fileCard"
-								:class="{ selected: selectedFile === file }"
-								@click="selectedFile = file">
-								<h4>{{ file.config.title }}</h4>
-								<p class="fileDescription">
-									{{ file.config.description || 'No description' }}
-								</p>
-								<span class="filePath">{{ file.path }}</span>
-								<span class="fileVersion">v{{ file.config.version }}</span>
-							</div>
-						</div>
-					</div>
-				</BTab>
-
-				<!-- URL Tab -->
-				<BTab>
-					<template #title>
-						<LinkVariant :size="16" />
-						<span>Import from URL</span>
+				</NcTextField>
+			</div>
+		</template>
+
+		<!-- Discover Tab -->
+		<template #tab-discover>
+			<p class="tabDescription">
+				Search GitHub and GitLab for OpenRegister configurations created by the community.
+			</p>
+
+			<!-- Token Warning -->
+			<NcNoteCard v-if="!hasGithubToken || !hasGitlabToken" type="warning">
+				<p>
+					<strong>{{ getTokenWarningTitle() }}</strong><br>
+					{{ getTokenWarningMessage() }}
+				</p>
+				<p style="margin-top: 8px;">
+					<a :href="settingsUrl" target="_blank" style="color: var(--color-primary-element); font-weight: 600;">
+						→ Configure API Tokens in Settings
+					</a>
+				</p>
+			</NcNoteCard>
+
+			<div class="searchContainer">
+				<NcTextField
+					:value.sync="searchQuery"
+					label="Search configurations"
+					placeholder="Enter search terms or leave empty to browse all"
+					@keyup.enter="searchConfigurations">
+					<Magnify :size="20" />
+				</NcTextField>
+
+				<NcButton
+					class="github-button"
+					:disabled="!hasGithubToken || searchLoading"
+					@click="searchSource = 'github'; searchConfigurations()">
+					<template #icon>
+						<Github :size="20" />
 					</template>
-					<div class="tabContent">
-						<p class="tabDescription">
-							Import a configuration from a direct URL. The URL must point to a valid OpenRegister JSON file.
-						</p>
-
-						<NcTextField
-							:value.sync="importUrl"
-							label="Configuration URL"
-							placeholder="https://example.com/config.json"
-							@input="urlError = null" />
-
-						<NcNoteCard v-if="urlError" type="warning">
-							<p>{{ urlError }}</p>
-						</NcNoteCard>
-					</div>
-				</BTab>
-
-				<!-- File Upload Tab -->
-				<BTab>
-					<template #title>
-						<FileUpload :size="16" />
-						<span>Import from File</span>
+					{{ t('openregister', 'Search GitHub') }}
+				</NcButton>
+
+				<NcButton
+					class="gitlab-button"
+					:disabled="!hasGitlabToken || searchLoading"
+					@click="searchSource = 'gitlab'; searchConfigurations()">
+					<template #icon>
+						<Gitlab :size="20" />
 					</template>
-					<div class="tabContent">
-						<p class="tabDescription">
-							Upload a configuration JSON file from your computer.
-						</p>
-
-						<div class="fileUploadZone"
-							:class="{ 'dragover': isDragging }"
-							@click="!selectedUploadFile && $refs.fileInput.click()"
-							@drop.prevent="handleFileDrop"
-							@dragover.prevent="isDragging = true"
-							@dragleave.prevent="isDragging = false">
-							<input
-								id="configFileInput"
-								ref="fileInput"
-								type="file"
-								accept=".json,application/json"
-								style="display: none;"
-								@change="handleFileSelect">
-
-							<FileUpload :size="48" class="uploadIcon" />
-
-							<p v-if="!selectedUploadFile" class="uploadText">
-								<strong>Drop your configuration file here</strong><br>
-								or click anywhere to browse
-							</p>
-
-							<div v-else class="selectedFileInfo">
-								<Check :size="32" class="checkIcon" />
-								<p><strong>{{ selectedUploadFile.name }}</strong></p>
-								<p class="fileSize">
-									{{ formatFileSize(selectedUploadFile.size) }}
-								</p>
-								<NcButton @click.stop="clearFileSelection">
-									<template #icon>
-										<Cancel :size="20" />
-									</template>
-									Clear
-								</NcButton>
-							</div>
-						</div>
-
-						<NcNoteCard v-if="fileError" type="error">
-							<p>{{ fileError }}</p>
-						</NcNoteCard>
-					</div>
-				</BTab>
-			</BTabs>
-		</div>
-
-		<!-- Synchronization Settings - Always Visible -->
-		<div v-if="!success" class="syncSettings">
-			<h4>{{ t('openregister', 'Synchronization Settings') }}</h4>
-			<NcCheckboxRadioSwitch
-				:checked="syncEnabled"
-				type="switch"
-				@update:checked="syncEnabled = $event">
-				{{ t('openregister', 'Enable automatic synchronization') }}
-			</NcCheckboxRadioSwitch>
+					{{ t('openregister', 'Search GitLab') }}
+				</NcButton>
+			</div>
+
+			<!-- Individual Token Warnings -->
+			<div v-if="!hasGithubToken || !hasGitlabToken" class="token-warnings">
+				<div v-if="!hasGithubToken" class="token-warning-item">
+					<Github :size="16" />
+					<span>GitHub token not configured - Search disabled</span>
+				</div>
+				<div v-if="!hasGitlabToken" class="token-warning-item">
+					<Gitlab :size="16" />
+					<span>GitLab token not configured - Search disabled</span>
+				</div>
+			</div>
+
+			<NcLoadingIcon v-if="searchLoading" :size="64" />
+
+			<!-- Search Error -->
+			<NcNoteCard v-else-if="searchError" type="error">
+				<p><strong>Search Failed</strong></p>
+				<p>{{ searchError }}</p>
+			</NcNoteCard>
+
+			<div v-else-if="searchResults.length > 0" class="resultsGrid">
+				<ConfigurationCard
+					v-for="(result, index) in searchResults"
+					:key="index"
+					:configuration="result"
+					@import="importDiscoveredConfiguration(result)"
+					@check-version="handleCheckVersion" />
+			</div>
+
+			<NcEmptyContent v-else-if="hasSearched"
+				name="No configurations found"
+				description="Try adjusting your search terms or browse a different source.">
+				<template #icon>
+					<Magnify :size="64" />
+				</template>
+			</NcEmptyContent>
+		</template>
+
+		<!-- GitHub/GitLab Tab -->
+		<template #tab-repository="{ loading: dialogLoading }">
+			<p class="tabDescription">
+				Import a configuration from a specific GitHub or GitLab repository and branch.
+			</p>
+
+			<NcSelect
+				v-model="repoSource"
+				:disabled="dialogLoading"
+				:options="['GitHub', 'GitLab']"
+				input-label="Source Platform" />
 
 			<NcTextField
-				v-if="syncEnabled"
-				:value.sync="syncInterval"
-				type="number"
-				label="Sync Interval (hours)"
-				placeholder="24"
-				:min="1"
-				:max="168">
-				<template #helper>
-					{{ t('openregister', 'How often to check for updates (1-168 hours)') }}
-				</template>
-			</NcTextField>
-		</div>
+				v-if="repoSource === 'GitHub'"
+				:disabled="dialogLoading"
+				:value.sync="repoOwner"
+				label="Repository Owner"
+				placeholder="e.g., ConductionNL" />
+
+			<NcTextField
+				v-if="repoSource === 'GitLab'"
+				:disabled="dialogLoading"
+				:value.sync="repoNamespace"
+				label="Namespace"
+				placeholder="e.g., conduction" />
+
+			<NcTextField
+				:disabled="dialogLoading"
+				:value.sync="repoName"
+				:label="repoSource === 'GitHub' ? 'Repository Name' : 'Project Name'"
+				placeholder="e.g., openregister" />
 
-		<template #actions>
-			<NcButton :disabled="loading" @click="closeModal">
-				<template #icon>
-					<Cancel :size="20" />
-				</template>
-				{{ t('openregister', 'Cancel') }}
-			</NcButton>
 			<NcButton
-				:disabled="loading || !canImport"
-				type="primary"
-				@click="performImport">
+				:disabled="!canFetchBranches || dialogLoading"
+				@click="fetchBranches">
 				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Import v-else :size="20" />
+					<SourceBranch :size="20" />
 				</template>
-				{{ t('openregister', 'Import') }}
+				Load Branches
 			</NcButton>
+
+			<NcSelect
+				v-if="branches.length > 0"
+				v-model="selectedBranch"
+				:disabled="dialogLoading"
+				:options="branches"
+				input-label="Branch"
+				@change="fetchConfigurationFiles" />
+
+			<div v-if="configFiles.length > 0" class="filesGrid">
+				<div
+					v-for="file in configFiles"
+					:key="file.path"
+					class="fileCard"
+					:class="{ selected: selectedFile === file }"
+					@click="selectedFile = file">
+					<h4>{{ file.config.title }}</h4>
+					<p class="fileDescription">
+						{{ file.config.description || 'No description' }}
+					</p>
+					<span class="filePath">{{ file.path }}</span>
+					<span class="fileVersion">v{{ file.config.version }}</span>
+				</div>
+			</div>
+		</template>
+
+		<!-- URL Tab -->
+		<template #tab-url="{ loading: dialogLoading }">
+			<p class="tabDescription">
+				Import a configuration from a direct URL. The URL must point to a valid OpenRegister JSON file.
+			</p>
+
+			<NcTextField
+				:disabled="dialogLoading"
+				:value.sync="importUrl"
+				label="Configuration URL"
+				placeholder="https://example.com/config.json"
+				@input="urlError = null" />
+
+			<NcNoteCard v-if="urlError" type="warning">
+				<p>{{ urlError }}</p>
+			</NcNoteCard>
+		</template>
+
+		<!-- File Upload Tab -->
+		<template #tab-file>
+			<p class="tabDescription">
+				Upload a configuration JSON file from your computer.
+			</p>
+
+			<div class="fileUploadZone"
+				:class="{ 'dragover': isDragging }"
+				@click="!selectedUploadFile && $refs.fileInput.click()"
+				@drop.prevent="handleFileDrop"
+				@dragover.prevent="isDragging = true"
+				@dragleave.prevent="isDragging = false">
+				<input
+					id="configFileInput"
+					ref="fileInput"
+					type="file"
+					accept=".json,application/json"
+					style="display: none;"
+					@change="handleFileSelect">
+
+				<FileUpload :size="48" class="uploadIcon" />
+
+				<p v-if="!selectedUploadFile" class="uploadText">
+					<strong>Drop your configuration file here</strong><br>
+					or click anywhere to browse
+				</p>
+
+				<div v-else class="selectedFileInfo">
+					<Check :size="32" class="checkIcon" />
+					<p><strong>{{ selectedUploadFile.name }}</strong></p>
+					<p class="fileSize">
+						{{ formatFileSize(selectedUploadFile.size) }}
+					</p>
+					<NcButton @click.stop="clearFileSelection">
+						<template #icon>
+							<Cancel :size="20" />
+						</template>
+						Clear
+					</NcButton>
+				</div>
+			</div>
+
+			<NcNoteCard v-if="fileError" type="error">
+				<p>{{ fileError }}</p>
+			</NcNoteCard>
 		</template>
-	</NcDialog>
+	</CnTabbedFormDialog>
 </template>
 
 <script>
 import {
 	NcButton,
-	NcDialog,
 	NcLoadingIcon,
 	NcNoteCard,
 	NcCheckboxRadioSwitch,
@@ -313,11 +278,10 @@ import {
 	NcSelect,
 	NcEmptyContent,
 } from '@nextcloud/vue'
+import { CnTabbedFormDialog } from '@conduction/nextcloud-vue'
 
-import { BTabs, BTab } from 'bootstrap-vue'
-
+import ImportIcon from 'vue-material-design-icons/Import.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
-import Import from 'vue-material-design-icons/Import.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Github from 'vue-material-design-icons/Github.vue'
 import Gitlab from 'vue-material-design-icons/Gitlab.vue'
@@ -335,35 +299,28 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 export default {
 	name: 'ImportConfiguration',
 	components: {
-		NcDialog,
+		CnTabbedFormDialog,
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
 		NcCheckboxRadioSwitch,
-		BTabs,
-		BTab,
 		NcTextField,
 		NcSelect,
 		NcEmptyContent,
 		ConfigurationCard,
 		// Icons
+		ImportIcon,
 		Cancel,
-		Import,
 		Magnify,
 		Github,
 		Gitlab,
 		SourceBranch,
-		LinkVariant,
 		FileUpload,
 		Check,
 	},
 	data() {
 		return {
 			activeTab: 0,
-			loading: false,
-			success: false,
-			successMessage: '',
-			error: null,
 
 			// Token availability
 			hasGithubToken: false,
@@ -403,6 +360,14 @@ export default {
 	},
 
 	computed: {
+		dialogTabs() {
+			return [
+				{ id: 'discover', title: 'Discover', icon: Magnify },
+				{ id: 'repository', title: 'GitHub / GitLab', icon: Github },
+				{ id: 'url', title: 'Import from URL', icon: LinkVariant },
+				{ id: 'file', title: 'Import from File', icon: FileUpload },
+			]
+		},
 		settingsUrl() {
 			return window.location.origin + '/index.php/settings/admin/openregister#api-tokens'
 		},
@@ -413,8 +378,11 @@ export default {
 			return this.repoNamespace && this.repoName
 		},
 		canImport() {
-		// Tab 0: Discover (imports are handled per-card, not via main button)
-		// Tab 1: GitHub/GitLab
+			// Tab 0: Discover (imports are handled per-card, not via main button)
+			if (this.activeTab === 0) {
+				return false
+			}
+			// Tab 1: GitHub/GitLab
 			if (this.activeTab === 1) {
 				return this.selectedFile !== null
 			}
@@ -434,31 +402,17 @@ export default {
 		await this.checkTokenAvailability()
 	},
 	methods: {
-		/**
-		 * Check if API tokens are configured
-		 */
 		async checkTokenAvailability() {
 			try {
 				const response = await axios.get(generateUrl('/apps/openregister/api/settings/api-tokens'))
-				// Check if tokens exist and are not empty strings
-				// The backend returns masked tokens, so we just check if they exist
 				this.hasGithubToken = !!(response.data.github_token && response.data.github_token.length > 0)
 				this.hasGitlabToken = !!(response.data.gitlab_token && response.data.gitlab_token.length > 0)
-
-				// Debug logging removed for production
 			} catch (error) {
-				// Debug logging removed for production
-				// Assume no tokens if check fails
 				this.hasGithubToken = false
 				this.hasGitlabToken = false
 			}
 		},
 
-		/**
-		 * Get token warning title based on which tokens are missing
-		 *
-		 * @return {string}
-		 */
 		getTokenWarningTitle() {
 			if (!this.hasGithubToken && !this.hasGitlabToken) {
 				return 'API Tokens Not Configured'
@@ -469,11 +423,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Get token warning message based on which tokens are missing
-		 *
-		 * @return {string}
-		 */
 		getTokenWarningMessage() {
 			if (!this.hasGithubToken && !this.hasGitlabToken) {
 				return 'Discovery requires API tokens for GitHub and/or GitLab. Configure your tokens in the settings to enable search.'
@@ -485,14 +434,10 @@ export default {
 		},
 
 		closeModal() {
-			navigationStore.setModal(false)
 			this.resetForm()
+			navigationStore.setModal(false)
 		},
 		resetForm() {
-			this.loading = false
-			this.success = false
-			this.successMessage = ''
-			this.error = null
 			this.searchQuery = ''
 			this.searchResults = []
 			this.searchError = null
@@ -515,7 +460,6 @@ export default {
 		async searchConfigurations() {
 			this.searchLoading = true
 			this.hasSearched = true
-			this.error = null
 			this.searchError = null
 			this.searchResults = []
 
@@ -525,19 +469,13 @@ export default {
 					this.searchQuery,
 				)
 			} catch (error) {
-				// Set search-specific error for contextual display in the Discover tab
 				this.searchError = error.message || 'Failed to search configurations'
-				// Also set general error for top-level display
-				this.error = error.message || 'Failed to search configurations'
 				console.error('Search error:', error)
 			} finally {
 				this.searchLoading = false
 			}
 		},
 		async importDiscoveredConfiguration(result) {
-			this.loading = true
-			this.error = null
-
 			try {
 				// Determine import method based on source
 				if (result.repository) {
@@ -563,20 +501,17 @@ export default {
 					})
 				}
 
-				this.successMessage = 'Configuration imported successfully!'
-				this.success = true
 				// Refresh all lists to show newly imported entities
 				await Promise.all([
 					configurationStore.refreshConfigurationList(),
 					registerStore.refreshRegisterList(),
 					schemaStore.refreshSchemaList(),
 				])
-				setTimeout(() => this.closeModal(), 1500)
+				this.$refs.dialog.setResult({ success: true })
 			} catch (error) {
-				// Don't show error if configuration already exists (UI shows this visually)
 				const errorMessage = error.message || 'Failed to import configuration'
 				if (!errorMessage.includes('already exists')) {
-					this.error = errorMessage
+					this.$refs.dialog.setResult({ error: errorMessage })
 				}
 				// Always refresh all lists to update UI
 				await Promise.all([
@@ -584,13 +519,9 @@ export default {
 					registerStore.refreshRegisterList(),
 					schemaStore.refreshSchemaList(),
 				])
-			} finally {
-				this.loading = false
 			}
 		},
 		async fetchBranches() {
-			this.loading = true
-			this.error = null
 			this.branches = []
 			this.selectedBranch = null
 			this.configFiles = []
@@ -614,16 +545,12 @@ export default {
 					await this.fetchConfigurationFiles()
 				}
 			} catch (error) {
-				this.error = error.message || 'Failed to fetch branches'
-			} finally {
-				this.loading = false
+				this.$refs.dialog.setResult({ error: error.message || 'Failed to fetch branches' })
 			}
 		},
 		async fetchConfigurationFiles() {
 			if (!this.selectedBranch) return
 
-			this.loading = true
-			this.error = null
 			this.configFiles = []
 			this.selectedFile = null
 
@@ -637,17 +564,12 @@ export default {
 					params,
 				)
 			} catch (error) {
-				this.error = error.message || 'Failed to fetch configuration files'
-			} finally {
-				this.loading = false
+				this.$refs.dialog.setResult({ error: error.message || 'Failed to fetch configuration files' })
 			}
 		},
 		async performImport() {
-			this.loading = true
-			this.error = null
-
 			try {
-			// Tab 1: GitHub/GitLab
+				// Tab 1: GitHub/GitLab
 				if (this.activeTab === 1) {
 					const params = {
 						path: this.selectedFile.path,
@@ -670,21 +592,16 @@ export default {
 							...params,
 						})
 					}
-
-					this.successMessage = `Configuration imported from ${this.repoSource}!`
 				} else if (this.activeTab === 2) {
 					// Tab 2: URL
-					// Validate URL
 					try {
-						// eslint-disable-next-line no-new
-						const validUrl = new URL(this.importUrl) // URL validation successful
-						// Use validUrl.href to avoid no-new and no-void rule violations
+						const validUrl = new URL(this.importUrl)
 						if (!validUrl.href) {
 							throw new Error('Invalid URL')
 						}
 					} catch {
 						this.urlError = 'Please enter a valid URL'
-						this.loading = false
+						this.$refs.dialog.setResult({ error: 'Please enter a valid URL' })
 						return
 					}
 
@@ -693,26 +610,22 @@ export default {
 						syncEnabled: this.syncEnabled,
 						syncInterval: parseInt(this.syncInterval),
 					})
-
-					this.successMessage = 'Configuration imported from URL!'
 				} else if (this.activeTab === 3) {
 					// Tab 3: File Upload
 					await this.importFromFile()
-					this.successMessage = 'Configuration imported from file!'
 				}
 
-				this.success = true
 				// Refresh all lists to show newly imported entities
 				await Promise.all([
 					configurationStore.refreshConfigurationList(),
 					registerStore.refreshRegisterList(),
 					schemaStore.refreshSchemaList(),
 				])
-				setTimeout(() => this.closeModal(), 1500)
+				this.$refs.dialog.setResult({ success: true })
 			} catch (error) {
-				this.error = error.message || 'Failed to import configuration'
-			} finally {
-				this.loading = false
+				this.$refs.dialog.setResult({
+					error: error.message || 'Failed to import configuration',
+				})
 			}
 		},
 		handleFileSelect(event) {
@@ -731,13 +644,11 @@ export default {
 		validateAndSetFile(file) {
 			this.fileError = null
 
-			// Validate file type
 			if (!file.name.endsWith('.json')) {
 				this.fileError = 'Please upload a JSON file'
 				return
 			}
 
-			// Validate file size (max 10MB)
 			if (file.size > 10 * 1024 * 1024) {
 				this.fileError = 'File is too large (max 10MB)'
 				return
@@ -780,7 +691,6 @@ export default {
 			return response.data
 		},
 		async handleCheckVersion(configuration) {
-			// Handle check version for already imported configurations
 			try {
 				const response = await axios.post(
 					generateUrl(`/apps/openregister/api/configurations/${configuration.id}/check-version`),
@@ -794,7 +704,6 @@ export default {
 					showSuccess('Configuration is up to date')
 				}
 
-				// Refresh the list to show updated version info
 				await configurationStore.refreshConfigurationList()
 			} catch (error) {
 				console.error('Failed to check version:', error)
@@ -806,17 +715,6 @@ export default {
 </script>
 
 <style scoped>
-.tabContainer {
-	width: 100%;
-}
-
-.tabContent {
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
 .tabDescription {
 	color: var(--color-text-lighter);
 	margin-bottom: 8px;
@@ -890,7 +788,7 @@ export default {
 }
 
 .syncSettings {
-	margin: 24px 0;
+	margin: 0;
 	padding: 20px;
 	border: 1px solid var(--color-border);
 	border-radius: 8px;
diff --git a/src/views/configuration/ConfigurationsIndex.vue b/src/views/configuration/ConfigurationsIndex.vue
index 6de22b00db..fb58c65778 100644
--- a/src/views/configuration/ConfigurationsIndex.vue
+++ b/src/views/configuration/ConfigurationsIndex.vue
@@ -4,265 +4,165 @@ import { configurationStore, navigationStore } from '../../store/store.js'
 
 <template>
 	<NcAppContent>
-		<div class="viewContainer">
-			<!-- Header -->
-			<div class="viewHeader">
-				<h1 class="viewHeaderTitleIndented">
-					{{ t('openregister', 'Configurations') }}
-				</h1>
-				<p>{{ t('openregister', 'Manage your system configurations and settings') }}</p>
-			</div>
+		<CnIndexPage
+			ref="indexPage"
+			title="Configurations"
+			description="Manage your system configurations and settings"
+			:show-title="true"
+			:schema="configurationSchema"
+			:objects="configurationStore.configurationList"
+			:columns="tableColumns"
+			:pagination="paginationData"
+			:view-mode="viewMode"
+			:selectable="true"
+			:selected-ids="selectedConfigurations"
+			:show-form-dialog="false"
+			:show-copy-action="false"
+			:show-edit-action="false"
+			:actions="customActions"
+			:show-mass-import="false"
+			:show-mass-export="false"
+			:show-mass-copy="false"
+			:show-mass-delete="false"
+			show-view-toggle
+			add-label="Create Configuration"
+			empty-text="No configurations found"
+			:loading="configurationStore.loading"
+			:refreshing="isRefreshing"
+			@add="configurationStore.setConfigurationItem(null); navigationStore.setModal('editConfiguration')"
+			@refresh="handleRefresh"
+			@page-changed="onPageChanged"
+			@page-size-changed="onPageSizeChanged"
+			@view-mode-change="viewMode = $event"
+			@delete="onDeleteConfiguration"
+			@select="selectedConfigurations = $event">
+			<!-- Action bar: import button -->
+			<template #action-items>
+				<NcActionButton
+					close-after-click
+					@click="navigationStore.setModal('importConfiguration')">
+					<template #icon>
+						<CloudUpload :size="20" />
+					</template>
+					Import Configuration
+				</NcActionButton>
+			</template>
 
-			<!-- Actions Bar -->
-			<div class="viewActionsBar">
-				<div class="viewInfo">
-					<span class="viewTotalCount">
-						{{ t('openregister', 'Showing {showing} of {total} configurations', { showing: paginatedConfigurations.length, total: configurationStore.configurationList.length }) }}
-					</span>
-					<span v-if="selectedConfigurations.length > 0" class="viewIndicator">
-						({{ t('openregister', '{count} selected', { count: selectedConfigurations.length }) }})
-					</span>
+			<!-- Custom card template -->
+			<template #card="{ object }">
+				<ConfigurationCard
+					:configuration="object"
+					@view="handleView(object)"
+					@edit="handleEdit(object)"
+					@export="handleExport(object)"
+					@delete="$refs.indexPage.openDeleteDialog(object)"
+					@check-version="checkVersion(object)"
+					@preview-update="previewUpdate(object)" />
+			</template>
+
+			<!-- Custom column: title with description -->
+			<template #column-title="{ row }">
+				<div class="titleContent">
+					<strong>{{ row.title }}</strong>
+					<span v-if="row.description" class="textDescription textEllipsis">{{ row.description }}</span>
 				</div>
-				<div class="viewActions">
-					<div class="viewModeSwitchContainer">
-						<NcCheckboxRadioSwitch
-							v-model="viewMode"
-							v-tooltip="'See configurations as cards'"
-							:button-variant="true"
-							value="cards"
-							name="view_mode_radio"
-							type="radio"
-							button-variant-grouped="horizontal">
-							Cards
-						</NcCheckboxRadioSwitch>
-						<NcCheckboxRadioSwitch
-							v-model="viewMode"
-							v-tooltip="'See configurations as a table'"
-							:button-variant="true"
-							value="table"
-							name="view_mode_radio"
-							type="radio"
-							button-variant-grouped="horizontal">
-							Table
-						</NcCheckboxRadioSwitch>
-					</div>
+			</template>
 
-					<NcActions
-						:force-name="true"
-						:inline="3"
-						menu-name="Actions">
-						<NcActionButton
-							:primary="true"
-							close-after-click
-							@click="configurationStore.setConfigurationItem(null); navigationStore.setModal('editConfiguration')">
-							<template #icon>
-								<Plus :size="20" />
-							</template>
-							Create Configuration
-						</NcActionButton>
-						<NcActionButton
-							close-after-click
-							@click="navigationStore.setModal('importConfiguration')">
+			<!-- Custom column: source type -->
+			<template #column-sourceType="{ row }">
+				{{ getSourceTypeLabel(row.sourceType) }}
+			</template>
+
+			<!-- Custom column: status badges -->
+			<template #column-status="{ row }">
+				<div class="statusBadgesContainer">
+					<template v-if="row.isLocal">
+						<CnStatusBadge
+							label="Local"
+							variant="warning"
+							:solid="true">
 							<template #icon>
-								<CloudUpload :size="20" />
+								<CheckCircle :size="16" />
 							</template>
-							Import Configuration
-						</NcActionButton>
-						<NcActionButton
-							close-after-click
-							@click="configurationStore.refreshConfigurationList()">
+						</CnStatusBadge>
+						<CnStatusBadge
+							v-if="row.app"
+							:label="row.app"
+							variant="default"
+							:solid="true">
 							<template #icon>
-								<Refresh :size="20" />
+								<ApplicationCog :size="16" />
 							</template>
-							Refresh
-						</NcActionButton>
-					</NcActions>
+						</CnStatusBadge>
+					</template>
+					<CnStatusBadge
+						v-else
+						label="External"
+						variant="success"
+						:solid="true">
+						<template #icon>
+							<Cloud :size="16" />
+						</template>
+					</CnStatusBadge>
+					<CnStatusBadge
+						v-if="!row.isLocal && row.syncEnabled"
+						:label="getSyncStatusText(row)"
+						:variant="getSyncBadgeVariant(row)"
+						:solid="true">
+						<template #icon>
+							<Sync v-if="row.syncStatus === 'success'" :size="16" />
+							<AlertCircle v-else-if="row.syncStatus === 'failed'" :size="16" />
+							<ClockOutline v-else :size="16" />
+						</template>
+					</CnStatusBadge>
+					<CnStatusBadge
+						v-if="hasUpdateAvailable(row)"
+						label="Update Available"
+						variant="warning"
+						:solid="true">
+						<template #icon>
+							<Update :size="16" />
+						</template>
+					</CnStatusBadge>
 				</div>
-			</div>
+			</template>
 
-			<!-- Loading, Error, and Empty States -->
-			<NcEmptyContent v-if="configurationStore.loading || configurationStore.error || !configurationStore.configurationList.length"
-				:name="emptyContentName"
-				:description="emptyContentDescription">
-				<template #icon>
-					<NcLoadingIcon v-if="configurationStore.loading" :size="64" />
-					<CogOutline v-else :size="64" />
-				</template>
-			</NcEmptyContent>
+			<!-- Custom column: local version -->
+			<template #column-localVersion="{ row }">
+				{{ row.localVersion || '-' }}
+			</template>
 
-			<!-- Content -->
-			<div v-else>
-				<template v-if="viewMode === 'cards'">
-					<div class="cardGrid">
-						<ConfigurationCard
-							v-for="configuration in paginatedConfigurations"
-							:key="configuration.id"
-							:configuration="configuration"
-							@view="handleView(configuration)"
-							@edit="handleEdit(configuration)"
-							@export="handleExport(configuration)"
-							@delete="handleDelete(configuration)"
-							@check-version="checkVersion(configuration)"
-							@preview-update="previewUpdate(configuration)" />
-					</div>
-				</template>
-				<template v-else>
-					<div class="viewTableContainer">
-						<table class="viewTable">
-							<thead>
-								<tr>
-									<th class="tableColumnCheckbox">
-										<NcCheckboxRadioSwitch
-											:checked="allSelected"
-											:indeterminate="someSelected"
-											@update:checked="toggleSelectAll" />
-									</th>
-									<th>{{ t('openregister', 'Title') }}</th>
-									<th>{{ t('openregister', 'Source') }}</th>
-									<th>{{ t('openregister', 'Local Version') }}</th>
-									<th>{{ t('openregister', 'Remote Version') }}</th>
-									<th>{{ t('openregister', 'Status') }}</th>
-									<th>{{ t('openregister', 'Updated') }}</th>
-									<th class="tableColumnActions">
-										{{ t('openregister', 'Actions') }}
-									</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr v-for="configuration in paginatedConfigurations"
-									:key="configuration.id"
-									class="viewTableRow"
-									:class="{ viewTableRowSelected: selectedConfigurations.includes(configuration.id) }">
-									<td class="tableColumnCheckbox">
-										<NcCheckboxRadioSwitch
-											:checked="selectedConfigurations.includes(configuration.id)"
-											@update:checked="(checked) => toggleConfigurationSelection(configuration.id, checked)" />
-									</td>
-									<td class="tableColumnTitle">
-										<div class="titleContent">
-											<strong>{{ configuration.title }}</strong>
-											<span v-if="configuration.description" class="textDescription textEllipsis">{{ configuration.description }}</span>
-										</div>
-									</td>
-									<td>{{ getSourceTypeLabel(configuration.sourceType) }}</td>
-									<td>{{ configuration.localVersion || '-' }}</td>
-									<td>{{ configuration.remoteVersion || '-' }}</td>
-									<td>
-										<div class="statusPillsContainer">
-											<template v-if="configuration.isLocal">
-												<span class="configBadge configBadge--local">
-													<CheckCircle :size="16" />
-													Local
-												</span>
-												<span v-if="configuration.app" class="configBadge configBadge--app">
-													<ApplicationCog :size="16" />
-													{{ configuration.app }}
-												</span>
-											</template>
-											<span v-else class="configBadge configBadge--external">
-												<Cloud :size="16" />
-												External
-											</span>
-											<span v-if="!configuration.isLocal && configuration.syncEnabled" class="configBadge" :class="'configBadge--sync-' + configuration.syncStatus">
-												<Sync v-if="configuration.syncStatus === 'success'" :size="16" />
-												<AlertCircle v-else-if="configuration.syncStatus === 'failed'" :size="16" />
-												<ClockOutline v-else :size="16" />
-												{{ getSyncStatusText(configuration) }}
-											</span>
-											<span v-if="hasUpdateAvailable(configuration)" class="configBadge configBadge--update">
-												<Update :size="16" />
-												Update Available
-											</span>
-										</div>
-									</td>
-									<td>{{ configuration.updated ? new Date(configuration.updated).toLocaleDateString({day: '2-digit', month: '2-digit', year: 'numeric'}) + ', ' + new Date(configuration.updated).toLocaleTimeString({hour: '2-digit', minute: '2-digit', second: '2-digit'}) : '-' }}</td>
-									<td class="tableColumnActions">
-										<NcActions :primary="false">
-											<template #icon>
-												<DotsHorizontal :size="20" />
-											</template>
-											<NcActionButton close-after-click @click="configurationStore.setConfigurationItem(configuration); navigationStore.setModal('viewConfiguration')">
-												<template #icon>
-													<Eye :size="20" />
-												</template>
-												View
-											</NcActionButton>
-											<NcActionButton close-after-click @click="configurationStore.setConfigurationItem(configuration); navigationStore.setModal('editConfiguration')">
-												<template #icon>
-													<Pencil :size="20" />
-												</template>
-												Edit
-											</NcActionButton>
-											<NcActionButton v-if="isRemoteConfiguration(configuration)" close-after-click @click="checkVersion(configuration)">
-												<template #icon>
-													<Sync :size="20" />
-												</template>
-												Check Version
-											</NcActionButton>
-											<NcActionButton v-if="hasUpdateAvailable(configuration)" close-after-click @click="previewUpdate(configuration)">
-												<template #icon>
-													<EyeOutline :size="20" />
-												</template>
-												Preview Update
-											</NcActionButton>
-											<NcActionButton close-after-click @click="configurationStore.setConfigurationItem(configuration); navigationStore.setModal('exportConfiguration')">
-												<template #icon>
-													<Download :size="20" />
-												</template>
-												Export
-											</NcActionButton>
-											<NcActionButton close-after-click @click="configurationStore.setConfigurationItem(configuration); navigationStore.setDialog('deleteConfiguration')">
-												<template #icon>
-													<TrashCanOutline :size="20" />
-												</template>
-												Delete
-											</NcActionButton>
-										</NcActions>
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</template>
-			</div>
+			<!-- Custom column: remote version -->
+			<template #column-remoteVersion="{ row }">
+				{{ row.remoteVersion || '-' }}
+			</template>
 
-			<!-- Pagination -->
-			<PaginationComponent
-				v-if="configurationStore.configurationList.length > 0"
-				:current-page="pagination.page || 1"
-				:total-pages="Math.ceil(configurationStore.configurationList.length / (pagination.limit || 20))"
-				:total-items="configurationStore.configurationList.length"
-				:current-page-size="pagination.limit || 20"
-				:min-items-to-show="10"
-				@page-changed="onPageChanged"
-				@page-size-changed="onPageSizeChanged" />
-		</div>
+			<!-- Custom column: updated -->
+			<template #column-updated="{ row }">
+				{{ row.updated ? new Date(row.updated).toLocaleDateString({day: '2-digit', month: '2-digit', year: 'numeric'}) + ', ' + new Date(row.updated).toLocaleTimeString({hour: '2-digit', minute: '2-digit', second: '2-digit'}) : '-' }}
+			</template>
+		</CnIndexPage>
 	</NcAppContent>
 </template>
 
 <script>
-import { NcAppContent, NcEmptyContent, NcLoadingIcon, NcActions, NcActionButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcAppContent, NcActionButton } from '@nextcloud/vue'
+import { CnIndexPage, CnStatusBadge } from '@conduction/nextcloud-vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import CogOutline from 'vue-material-design-icons/CogOutline.vue'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
-import Download from 'vue-material-design-icons/Download.vue'
 import CloudUpload from 'vue-material-design-icons/CloudUpload.vue'
-import Refresh from 'vue-material-design-icons/Refresh.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
-import Update from 'vue-material-design-icons/Update.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Download from 'vue-material-design-icons/Download.vue'
 import Sync from 'vue-material-design-icons/Sync.vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 import Cloud from 'vue-material-design-icons/Cloud.vue'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 import ApplicationCog from 'vue-material-design-icons/ApplicationCog.vue'
+import Update from 'vue-material-design-icons/Update.vue'
 
 import ConfigurationCard from '../../components/cards/ConfigurationCard.vue'
-import PaginationComponent from '../../components/PaginationComponent.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
@@ -270,35 +170,24 @@ export default {
 	name: 'ConfigurationsIndex',
 	components: {
 		NcAppContent,
-		NcEmptyContent,
-		NcLoadingIcon,
-		NcActions,
 		NcActionButton,
-		NcCheckboxRadioSwitch,
+		CnIndexPage,
+		CnStatusBadge,
 		ConfigurationCard,
-		CogOutline,
-		DotsHorizontal,
-		Pencil,
-		TrashCanOutline,
-		Download,
 		CloudUpload,
-		Refresh,
-		Plus,
-		Eye,
-		EyeOutline,
-		Update,
-		Sync,
 		CheckCircle,
 		Cloud,
 		AlertCircle,
 		ClockOutline,
 		ApplicationCog,
-		PaginationComponent,
+		Sync,
+		Update,
 	},
 	data() {
 		return {
 			viewMode: 'cards',
 			selectedConfigurations: [],
+			isRefreshing: false,
 			pagination: {
 				page: 1,
 				limit: 20,
@@ -306,36 +195,91 @@ export default {
 		}
 	},
 	computed: {
-		paginatedConfigurations() {
-			const start = ((this.pagination.page || 1) - 1) * (this.pagination.limit || 20)
-			const end = start + (this.pagination.limit || 20)
-			return configurationStore.configurationList.slice(start, end)
+		configurationSchema() {
+			return {
+				title: 'Configuration',
+				properties: {
+					title: {
+						type: 'string',
+						title: t('openregister', 'Title'),
+						order: 1,
+					},
+					sourceType: {
+						type: 'string',
+						title: t('openregister', 'Source'),
+						order: 2,
+					},
+					localVersion: {
+						type: 'string',
+						title: t('openregister', 'Local Version'),
+						order: 3,
+					},
+					remoteVersion: {
+						type: 'string',
+						title: t('openregister', 'Remote Version'),
+						order: 4,
+					},
+					status: {
+						type: 'string',
+						title: t('openregister', 'Status'),
+						order: 5,
+					},
+					updated: {
+						type: 'string',
+						title: t('openregister', 'Updated'),
+						format: 'date-time',
+						order: 6,
+					},
+				},
+			}
 		},
-		allSelected() {
-			return configurationStore.configurationList.length > 0 && configurationStore.configurationList.every(configuration => this.selectedConfigurations.includes(configuration.id))
+		customActions() {
+			return [
+				{
+					label: 'View',
+					icon: Eye,
+					handler: (row) => this.handleView(row),
+				},
+				{
+					label: 'Edit',
+					icon: Pencil,
+					handler: (row) => this.handleEdit(row),
+				},
+				{
+					label: 'Check Version',
+					icon: Sync,
+					visible: (row) => this.isRemoteConfiguration(row),
+					handler: (row) => this.checkVersion(row),
+				},
+				{
+					label: 'Preview Update',
+					icon: EyeOutline,
+					visible: (row) => this.hasUpdateAvailable(row),
+					handler: (row) => this.previewUpdate(row),
+				},
+				{
+					label: 'Export',
+					icon: Download,
+					handler: (row) => this.handleExport(row),
+				},
+			]
 		},
-		someSelected() {
-			return this.selectedConfigurations.length > 0 && !this.allSelected
+		tableColumns() {
+			return [
+				{ key: 'title', label: t('openregister', 'Title'), sortable: true },
+				{ key: 'sourceType', label: t('openregister', 'Source') },
+				{ key: 'localVersion', label: t('openregister', 'Local Version') },
+				{ key: 'remoteVersion', label: t('openregister', 'Remote Version') },
+				{ key: 'status', label: t('openregister', 'Status') },
+				{ key: 'updated', label: t('openregister', 'Updated'), sortable: true },
+			]
 		},
-		emptyContentName() {
-			if (configurationStore.loading) {
-				return t('openregister', 'Loading configurations...')
-			} else if (configurationStore.error) {
-				return configurationStore.error
-			} else if (!configurationStore.configurationList.length) {
-				return t('openregister', 'No configurations found')
-			}
-			return ''
-		},
-		emptyContentDescription() {
-			if (configurationStore.loading) {
-				return t('openregister', 'Please wait while we fetch your configurations.')
-			} else if (configurationStore.error) {
-				return t('openregister', 'Please try again later.')
-			} else if (!configurationStore.configurationList.length) {
-				return t('openregister', 'No configurations are available.')
-			}
-			return ''
+		paginationData() {
+			const page = this.pagination.page
+			const limit = this.pagination.limit
+			const total = configurationStore.configurationList.length
+			const pages = Math.ceil(total / limit)
+			return { page, pages, total, limit }
 		},
 	},
 	mounted() {
@@ -343,40 +287,15 @@ export default {
 		configurationStore.refreshConfigurationList(null, true)
 	},
 	methods: {
-		toggleSelectAll(checked) {
-			if (checked) {
-				this.selectedConfigurations = configurationStore.configurationList.map(configuration => configuration.id)
-			} else {
-				this.selectedConfigurations = []
-			}
-		},
-		toggleConfigurationSelection(configurationId, checked) {
-			if (checked) {
-				this.selectedConfigurations.push(configurationId)
-			} else {
-				this.selectedConfigurations = this.selectedConfigurations.filter(id => id !== configurationId)
-			}
-		},
-		onPageChanged(page) {
-			this.pagination.page = page
-		},
-		onPageSizeChanged(pageSize) {
-			this.pagination.page = 1
-			this.pagination.limit = pageSize
-		},
 		hasUpdateAvailable(configuration) {
 			if (!configuration.localVersion || !configuration.remoteVersion) {
 				return false
 			}
-			// Simple version comparison - remote version different from local
 			return configuration.remoteVersion !== configuration.localVersion
 		},
 		isRemoteConfiguration(configuration) {
 			return configuration.sourceType && configuration.sourceType !== 'local'
 		},
-		isManualConfiguration(configuration) {
-			return !configuration.sourceType || configuration.sourceType === 'local'
-		},
 		getSourceTypeLabel(sourceType) {
 			const labels = {
 				local: 'Local',
@@ -386,6 +305,34 @@ export default {
 			}
 			return labels[sourceType] || 'Unknown'
 		},
+		getSyncBadgeVariant(configuration) {
+			const status = configuration.syncStatus
+			if (status === 'success') return 'success'
+			if (status === 'failed') return 'error'
+			return 'default'
+		},
+		getSyncStatusText(configuration) {
+			if (configuration.syncStatus === 'success' && configuration.lastSyncDate) {
+				const now = new Date()
+				const lastSync = new Date(configuration.lastSyncDate)
+				const diffInHours = Math.floor((now - lastSync) / (1000 * 60 * 60))
+
+				if (diffInHours < 1) {
+					return 'Synced just now'
+				} else if (diffInHours < 24) {
+					return `Synced ${diffInHours}h ago`
+				} else {
+					const diffInDays = Math.floor(diffInHours / 24)
+					return `Synced ${diffInDays}d ago`
+				}
+			} else if (configuration.syncStatus === 'failed') {
+				return 'Sync failed'
+			} else if (configuration.syncStatus === 'pending') {
+				return 'Sync pending'
+			} else {
+				return 'Never synced'
+			}
+		},
 		async checkVersion(configuration) {
 			try {
 				const response = await axios.post(
@@ -400,7 +347,6 @@ export default {
 					showSuccess('Configuration is up to date')
 				}
 
-				// Refresh the list to show updated version info
 				await configurationStore.refreshConfigurationList()
 			} catch (error) {
 				console.error('Failed to check version:', error)
@@ -419,97 +365,48 @@ export default {
 			configurationStore.setConfigurationItem(configuration)
 			navigationStore.setModal('exportConfiguration')
 		},
-		handleDelete(configuration) {
-			configurationStore.setConfigurationItem(configuration)
-			navigationStore.setDialog('deleteConfiguration')
+		async onDeleteConfiguration(id) {
+			const configuration = configurationStore.configurationList.find(c => c.id === id)
+			if (!configuration) return
+			try {
+				await configurationStore.deleteConfiguration(configuration)
+				this.$refs.indexPage.setSingleDeleteResult({ success: true })
+			} catch (error) {
+				this.$refs.indexPage.setSingleDeleteResult({
+					error: error.message || 'An error occurred while deleting the configuration',
+				})
+			}
 		},
 		previewUpdate(configuration) {
-			// Set the configuration and open preview modal
 			configurationStore.setConfigurationItem(configuration)
 			navigationStore.setModal('previewConfiguration')
 		},
-		getSyncStatusText(configuration) {
-			if (configuration.syncStatus === 'success' && configuration.lastSyncDate) {
-				const now = new Date()
-				const lastSync = new Date(configuration.lastSyncDate)
-				const diffInHours = Math.floor((now - lastSync) / (1000 * 60 * 60))
-
-				if (diffInHours < 1) {
-					return 'Synced just now'
-				} else if (diffInHours < 24) {
-					return `Synced ${diffInHours}h ago`
-				} else {
-					const diffInDays = Math.floor(diffInHours / 24)
-					return `Synced ${diffInDays}d ago`
-				}
-			} else if (configuration.syncStatus === 'failed') {
-				return 'Sync failed'
-			} else if (configuration.syncStatus === 'pending') {
-				return 'Sync pending'
-			} else {
-				return 'Never synced'
+		async handleRefresh() {
+			this.isRefreshing = true
+			try {
+				await configurationStore.refreshConfigurationList()
+			} finally {
+				this.isRefreshing = false
 			}
 		},
+		onPageChanged(page) {
+			this.pagination.page = page
+		},
+		onPageSizeChanged(pageSize) {
+			this.pagination.page = 1
+			this.pagination.limit = pageSize
+		},
 	},
 }
 </script>
 
 <style scoped>
-/* Badge styles for table view only (card view uses ConfigurationCard styles) */
-.configBadge {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 2px 8px;
-	border-radius: 12px;
-	font-size: 0.85em;
-	font-weight: 600;
-	vertical-align: middle;
-}
-
-/* Local configuration badge (green/success) */
-.configBadge--local {
-	background-color: var(--color-success-light);
-	color: var(--color-success-dark);
-}
-
-/* External configuration badge (blue/primary) */
-.configBadge--external {
-	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element-text);
-}
-
-/* App source badge (gray/secondary) */
-.configBadge--app {
-	background-color: var(--color-background-dark);
-	color: var(--color-text-lighter);
-}
-
-/* Sync status badges */
-.configBadge--sync-success {
-	background-color: var(--color-success-light);
-	color: var(--color-success-dark);
-}
-
-.configBadge--sync-failed {
-	background-color: var(--color-error-light);
-	color: var(--color-error-dark);
-}
-
-.configBadge--sync-pending,
-.configBadge--sync-never {
-	background-color: var(--color-background-dark);
-	color: var(--color-text-lighter);
-}
-
-/* Update available badge */
-.configBadge--update {
-	background-color: var(--color-warning);
-	color: var(--color-main-text);
+.titleContent {
+	display: flex;
+	flex-direction: column;
 }
 
-/* Badge container for table view */
-.statusPillsContainer {
+.statusBadgesContainer {
 	display: flex;
 	gap: 6px;
 	flex-wrap: wrap;