From 6b25e41af7a27f94c3399083e3f18d00243ec37b Mon Sep 17 00:00:00 2001
From: DaxServer <daxserver@icloud.com>
Date: Wed, 13 Aug 2025 16:18:43 +0200
Subject: [PATCH] refactor(wikibase-schema-editor): harmonize component
 structure

---
 .kiro/specs/wikibase-schema-editor/tasks.md   |  59 +-
 frontend/.eslintrc-auto-import.json           |   4 +-
 frontend/auto-imports.d.ts                    |  10 +-
 frontend/components.d.ts                      |   8 +-
 .../components/ColumnPalette.vue              | 115 ++-
 .../__tests__/useColumnConversion.test.ts     | 191 -----
 .../composables/useColumnConversion.ts        |  39 -
 .../stores/project.store.ts                   |  23 +
 .../components/ClaimEditor.vue                | 668 ++++++++++++++++++
 .../components/QualifiersEditor.vue           | 293 +++-----
 .../components/ReferencesEditor.vue           | 421 +++++------
 .../components/SingleQualifierEditor.vue      |  97 +++
 .../components/SingleReferenceEditor.vue      | 114 +++
 .../components/StatementEditor.vue            | 505 ++++++-------
 .../components/StatementManager.vue           | 120 ++++
 .../components/StatementPreview.vue           | 149 ----
 .../components/StatementsEditor.vue           | 342 ---------
 .../components/TermSection.vue                |  26 +-
 .../components/TermsEditor.vue                |   5 +-
 .../components/ValidationDisplay.vue          | 316 +++++----
 .../components/WikibaseSchemaEditor.vue       | 234 +-----
 .../useSchemaCompletenessValidation.ts        |   4 +-
 .../wikibase-schema/stores/schema.store.ts    |   2 +
 23 files changed, 1807 insertions(+), 1938 deletions(-)
 delete mode 100644 frontend/src/features/data-processing/composables/__tests__/useColumnConversion.test.ts
 delete mode 100644 frontend/src/features/data-processing/composables/useColumnConversion.ts
 create mode 100644 frontend/src/features/wikibase-schema/components/ClaimEditor.vue
 create mode 100644 frontend/src/features/wikibase-schema/components/SingleQualifierEditor.vue
 create mode 100644 frontend/src/features/wikibase-schema/components/SingleReferenceEditor.vue
 create mode 100644 frontend/src/features/wikibase-schema/components/StatementManager.vue
 delete mode 100644 frontend/src/features/wikibase-schema/components/StatementPreview.vue
 delete mode 100644 frontend/src/features/wikibase-schema/components/StatementsEditor.vue

diff --git a/.kiro/specs/wikibase-schema-editor/tasks.md b/.kiro/specs/wikibase-schema-editor/tasks.md
index 1136d0c..ac3bd13 100644
--- a/.kiro/specs/wikibase-schema-editor/tasks.md
+++ b/.kiro/specs/wikibase-schema-editor/tasks.md
@@ -200,66 +200,9 @@
   - Update validation to trigger on dragstart events
   - _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7_
 
-- [ ] 34. Implement autosave functionality in schema store
+- [x] 34. Implement autosave functionality in schema store
   - Write tests for immediate Pinia store updates on all schema changes
   - Write tests for isDirty flag management and lastSyncedAt tracking
   - Write tests for automatic store persistence without manual save operations
   - Implement autosave mutations in schema store for all schema operations
   - _Requirements: 10.1, 10.2, 10.8_
-
-- [ ] 35. Remove save/cancel buttons from TermsEditor component
-  - Write tests for immediate term mapping updates without save buttons
-  - Write tests for automatic language selection persistence
-  - Remove save/cancel buttons from TermsEditor interface
-  - Update TermsEditor to use autosave store mutations
-  - _Requirements: 3.6, 3.7, 10.5_
-
-- [ ] 36. Remove save/cancel buttons from StatementEditor component
-  - Write tests for immediate statement configuration updates without save buttons
-  - Write tests for automatic property selection and rank changes persistence
-  - Remove save/cancel buttons from StatementEditor interface
-  - Update StatementEditor to use autosave store mutations
-  - _Requirements: 4.7, 4.8, 5.6, 5.7, 10.5_
-
-- [ ] 37. Remove save/cancel buttons from QualifiersEditor component
-  - Write tests for immediate qualifier updates without save buttons
-  - Write tests for automatic qualifier property and value mapping persistence
-  - Remove save/cancel buttons from QualifiersEditor interface
-  - Update QualifiersEditor to use autosave store mutations
-  - _Requirements: 6.6, 6.7, 10.5_
-
-- [ ] 38. Remove save/cancel buttons from ReferencesEditor component
-  - Write tests for immediate reference updates without save buttons
-  - Write tests for automatic reference property and value mapping persistence
-  - Remove save/cancel buttons from ReferencesEditor interface
-  - Update ReferencesEditor to use autosave store mutations
-  - _Requirements: 7.6, 7.7, 10.5_
-
-- [ ] 39. Ensure existing manual backend sync works with autosave store state
-  - Write tests to verify existing backend sync functionality works with autosave-enabled store
-  - Write tests to confirm manual "Save to Server" button continues to work as currently implemented
-  - Verify existing persistence layer correctly reads from autosave-updated Pinia store state
-  - Ensure no changes to existing manual backend synchronization behavior
-  - _Requirements: 10.3, 10.4_
-
-- [ ] 40. Update drag-and-drop operations to use autosave
-  - Write tests for immediate store updates on column drop operations
-  - Write tests for automatic mapping persistence without confirmation dialogs
-  - Update all drop zone handlers to use autosave store mutations
-  - Remove any remaining save/cancel patterns from drag-and-drop workflows
-  - _Requirements: 10.1, 10.2, 10.5_
-
-- [ ] 41. Update schema selection workflow for autosave
-  - Write tests for autosave enablement when loading existing schemas
-  - Write tests for autosave enablement when creating new schemas
-  - Update SchemaSelector to initialize autosave behavior on schema selection
-  - Ensure seamless transition from selection to autosave-enabled editor
-  - _Requirements: 9.4, 9.5, 9.8_
-
-- [ ] 42. Update all existing test cases for autosave behavior
-  - Update TermsEditor tests to expect immediate store updates instead of save button interactions
-  - Update StatementEditor tests to expect automatic persistence instead of manual save operations
-  - Update QualifiersEditor and ReferencesEditor tests for autosave behavior
-  - Update drag-and-drop tests to expect immediate store persistence
-  - Update schema store tests to validate autosave mutations and dirty flag management
-  - _Requirements: 10.1, 10.2, 10.5, 10.8_
diff --git a/frontend/.eslintrc-auto-import.json b/frontend/.eslintrc-auto-import.json
index 0c60450..c2b5912 100644
--- a/frontend/.eslintrc-auto-import.json
+++ b/frontend/.eslintrc-auto-import.json
@@ -49,6 +49,7 @@
     "SchemaCompletenessResult": true,
     "SchemaDragDropContext": true,
     "SchemaRequest": true,
+    "ShallowRef": true,
     "Slot": true,
     "Slots": true,
     "StatementRank": true,
@@ -106,6 +107,7 @@
     "getActivePinia": true,
     "getCurrentInstance": true,
     "getCurrentScope": true,
+    "getCurrentWatcher": true,
     "h": true,
     "ignorableWatch": true,
     "inject": true,
@@ -115,6 +117,7 @@
     "isReactive": true,
     "isReadonly": true,
     "isRef": true,
+    "isShallow": true,
     "makeDestructurable": true,
     "mapActions": true,
     "mapGetters": true,
@@ -218,7 +221,6 @@
     "useClipboardItems": true,
     "useCloned": true,
     "useColorMode": true,
-    "useColumnConversion": true,
     "useColumnDataTypeIndicators": true,
     "useColumnGeneration": true,
     "useConfirm": true,
diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
index b63dbc1..d7b4647 100644
--- a/frontend/auto-imports.d.ts
+++ b/frontend/auto-imports.d.ts
@@ -45,6 +45,7 @@ declare global {
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -54,6 +55,7 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const isShallow: typeof import('vue')['isShallow']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
@@ -157,7 +159,6 @@ declare global {
   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
-  const useColumnConversion: typeof import('./src/features/data-processing/composables/useColumnConversion')['useColumnConversion']
   const useColumnDataTypeIndicators: typeof import('./src/features/data-processing/composables/useColumnDataTypeIndicators')['useColumnDataTypeIndicators']
   const useColumnGeneration: typeof import('./src/features/data-processing/composables/useColumnGeneration')['useColumnGeneration']
   const useConfirm: typeof import('primevue/useconfirm')['useConfirm']
@@ -217,7 +218,6 @@ declare global {
   const useInterval: typeof import('@vueuse/core')['useInterval']
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
-  const useLanguageDropZone: typeof import('./src/features/data-processing/composables/useLanguageDropZone')['useLanguageDropZone']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
@@ -270,7 +270,6 @@ declare global {
   const useSchemaApi: typeof import('./src/features/wikibase-schema/composables/useSchemaApi')['useSchemaApi']
   const useSchemaBuilder: typeof import('./src/features/wikibase-schema/composables/useSchemaBuilder')['useSchemaBuilder']
   const useSchemaCompletenessValidation: typeof import('./src/features/wikibase-schema/composables/useSchemaCompletenessValidation')['useSchemaCompletenessValidation']
-  const useSchemaDropZone: typeof import('./src/features/wikibase-schema/composables/useSchemaDropZone')['useSchemaDropZone']
   const useSchemaPersistence: typeof import('./src/features/wikibase-schema/composables/useSchemaPersistence')['useSchemaPersistence']
   const useSchemaSelection: typeof import('./src/features/wikibase-schema/composables/useSchemaSelection')['useSchemaSelection']
   const useSchemaStore: typeof import('./src/features/wikibase-schema/stores/schema.store')['useSchemaStore']
@@ -356,7 +355,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
   export type { FileUploadUploaderEvent } from 'primevue/fileupload'
@@ -443,6 +442,7 @@ declare module 'vue' {
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
@@ -452,6 +452,7 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly isShallow: UnwrapRef<typeof import('vue')['isShallow']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -555,7 +556,6 @@ declare module 'vue' {
     readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
-    readonly useColumnConversion: UnwrapRef<typeof import('./src/features/data-processing/composables/useColumnConversion')['useColumnConversion']>
     readonly useColumnDataTypeIndicators: UnwrapRef<typeof import('./src/features/data-processing/composables/useColumnDataTypeIndicators')['useColumnDataTypeIndicators']>
     readonly useColumnGeneration: UnwrapRef<typeof import('./src/features/data-processing/composables/useColumnGeneration')['useColumnGeneration']>
     readonly useConfirm: UnwrapRef<typeof import('primevue/useconfirm')['useConfirm']>
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 2b874b2..6bb4d2b 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     Button: typeof import('primevue/button')['default']
     Card: typeof import('primevue/card')['default']
     Chip: typeof import('primevue/chip')['default']
+    ClaimEditor: typeof import('./src/features/wikibase-schema/components/ClaimEditor.vue')['default']
     Column: typeof import('primevue/column')['default']
     ColumnPalette: typeof import('./src/features/data-processing/components/ColumnPalette.vue')['default']
     ConfirmDialog: typeof import('primevue/confirmdialog')['default']
@@ -20,13 +21,10 @@ declare module 'vue' {
     DataTable: typeof import('primevue/datatable')['default']
     DataTabPanel: typeof import('./src/features/data-processing/components/DataTabPanel.vue')['default']
     DefaultLayout: typeof import('./src/core/layouts/DefaultLayout.vue')['default']
-    Dialog: typeof import('primevue/dialog')['default']
-    Dropdown: typeof import('primevue/dropdown')['default']
     FileUpload: typeof import('primevue/fileupload')['default']
     Header: typeof import('./src/shared/components/Header.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
     ItemEditor: typeof import('./src/features/wikibase-schema/components/ItemEditor.vue')['default']
-    LanguageDropZone: typeof import('./src/features/data-processing/components/LanguageDropZone.vue')['default']
     MainContent: typeof import('./src/shared/components/MainContent.vue')['default']
     OpenProject: typeof import('./src/features/project-management/pages/OpenProject.vue')['default']
     Paginator: typeof import('primevue/paginator')['default']
@@ -43,10 +41,12 @@ declare module 'vue' {
     SchemaTabPanel: typeof import('./src/features/wikibase-schema/components/SchemaTabPanel.vue')['default']
     Select: typeof import('primevue/select')['default']
     Sidebar: typeof import('./src/shared/components/Sidebar.vue')['default']
+    SingleQualifierEditor: typeof import('./src/features/wikibase-schema/components/SingleQualifierEditor.vue')['default']
+    SingleReferenceEditor: typeof import('./src/features/wikibase-schema/components/SingleReferenceEditor.vue')['default']
     StatementConfigEditor: typeof import('./src/features/wikibase-schema/components/StatementConfigEditor.vue')['default']
     StatementEditor: typeof import('./src/features/wikibase-schema/components/StatementEditor.vue')['default']
+    StatementManager: typeof import('./src/features/wikibase-schema/components/StatementManager.vue')['default']
     StatementPreview: typeof import('./src/features/wikibase-schema/components/StatementPreview.vue')['default']
-    StatementsEditor: typeof import('./src/features/wikibase-schema/components/StatementsEditor.vue')['default']
     Tab: typeof import('primevue/tab')['default']
     TabList: typeof import('primevue/tablist')['default']
     TabPanel: typeof import('primevue/tabpanel')['default']
diff --git a/frontend/src/features/data-processing/components/ColumnPalette.vue b/frontend/src/features/data-processing/components/ColumnPalette.vue
index 609d98c..5bbb1a3 100644
--- a/frontend/src/features/data-processing/components/ColumnPalette.vue
+++ b/frontend/src/features/data-processing/components/ColumnPalette.vue
@@ -2,7 +2,6 @@
 const projectStore = useProjectStore()
 const dragDropStore = useDragDropStore()
 
-const { convertProjectColumnsToColumnInfo } = useColumnConversion()
 const { formatDataTypeDisplayName, generateColumnTooltip, getDataTypeIcon, getDataTypeSeverity } =
   useColumnDataTypeIndicators()
 
@@ -12,10 +11,6 @@ const { triggerDragStartValidation } = useValidation()
 // Sample data visibility state (hidden by default)
 const showSampleData = ref(false)
 
-const dataColumns = computed(() => {
-  return convertProjectColumnsToColumnInfo(projectStore.columns, projectStore.data)
-})
-
 const handleDragStart = (event: DragEvent, dataCol: ColumnInfo) => {
   if (!event.dataTransfer) return
 
@@ -50,7 +45,7 @@ const formatSampleValues = (sampleValues: string[]) => {
 </script>
 
 <template>
-  <div class="column-palette h-full p-4">
+  <div class="column-palette p-4 bg-slate-50 border border-slate-200 rounded-lg shadow-sm">
     <!-- Header with toggle switch -->
     <div class="flex justify-between items-center mb-4">
       <div>
@@ -72,66 +67,62 @@ const formatSampleValues = (sampleValues: string[]) => {
     </div>
 
     <!-- Content Area -->
-    <div>
-      <!-- Column chips -->
-      <div class="flex flex-wrap gap-3">
+    <!-- Column chips -->
+    <div class="flex gap-3">
+      <div
+        v-for="col in projectStore.columnsForSchema"
+        :key="col.name"
+        :data-testid="'column-chip'"
+        :class="{
+          'opacity-50': dragDropStore.isDragging && dragDropStore.draggedColumn?.name === col.name,
+          'cursor-grab': !dragDropStore.isDragging,
+          'cursor-grabbing':
+            dragDropStore.isDragging && dragDropStore.draggedColumn?.name === col.name,
+        }"
+        class="column-chip transition-opacity duration-200 hover:-translate-y-0.5 active:translate-y-0"
+        draggable="true"
+        @dragstart="handleDragStart($event, col)"
+        @dragend="handleDragEnd"
+      >
         <div
-          v-for="col in dataColumns"
-          :key="col.name"
-          :data-testid="'column-chip'"
-          :class="{
-            'opacity-50':
-              dragDropStore.isDragging && dragDropStore.draggedColumn?.name === col.name,
-            'cursor-grab': !dragDropStore.isDragging,
-            'cursor-grabbing':
-              dragDropStore.isDragging && dragDropStore.draggedColumn?.name === col.name,
-          }"
-          class="column-chip transition-opacity duration-200 hover:-translate-y-0.5 active:translate-y-0"
-          draggable="true"
-          @dragstart="handleDragStart($event, col)"
-          @dragend="handleDragEnd"
+          class="bg-white border border-slate-300 rounded-lg p-3 shadow-sm hover:shadow-md hover:border-blue-300 transition-all duration-200"
+          :title="generateColumnTooltip(col)"
         >
+          <div class="flex items-center gap-2">
+            <i
+              :class="getDataTypeIcon(col.dataType)"
+              class="text-surface-600 text-xs"
+              :title="`${formatDataTypeDisplayName(col.dataType)} column`"
+            />
+            <span class="font-small text-surface-900">{{ col.name }}</span>
+            <Tag
+              :value="formatDataTypeDisplayName(col.dataType)"
+              :severity="getDataTypeSeverity(col.dataType)"
+              class="text-xs"
+              :title="`Database type: ${col.dataType}`"
+            />
+            <i
+              v-if="col.nullable"
+              class="pi pi-question-circle text-surface-400 text-xs"
+              title="This column allows null values"
+            />
+          </div>
+
+          <div
+            v-if="showSampleData && col.sampleValues && col.sampleValues.length > 0"
+            class="text-xs text-surface-600"
+            data-testid="sample-values"
+            :title="`Sample values: ${col.sampleValues.slice(0, 5).join(', ')}${col.sampleValues.length > 5 ? '...' : ''}`"
+          >
+            {{ formatSampleValues(col.sampleValues) }}
+          </div>
+
           <div
-            class="bg-white border border-surface-300 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow"
-            :title="generateColumnTooltip(col)"
+            v-if="col.uniqueCount !== undefined"
+            class="text-xs text-surface-500 mt-1"
+            :title="`This column has ${col.uniqueCount.toLocaleString()} unique values`"
           >
-            <div class="flex items-center gap-2 mb-2">
-              <i
-                :class="getDataTypeIcon(col.dataType)"
-                class="text-surface-600 text-sm"
-                :title="`${formatDataTypeDisplayName(col.dataType)} column`"
-              />
-              <span class="font-medium text-surface-900">{{ col.name }}</span>
-              <Chip
-                :label="formatDataTypeDisplayName(col.dataType)"
-                size="small"
-                :severity="getDataTypeSeverity(col.dataType)"
-                class="text-xs"
-                :title="`Database type: ${col.dataType}`"
-              />
-              <i
-                v-if="col.nullable"
-                class="pi pi-question-circle text-surface-400 text-xs"
-                title="This column allows null values"
-              />
-            </div>
-
-            <div
-              v-if="showSampleData && col.sampleValues && col.sampleValues.length > 0"
-              class="text-xs text-surface-600"
-              data-testid="sample-values"
-              :title="`Sample values: ${col.sampleValues.slice(0, 5).join(', ')}${col.sampleValues.length > 5 ? '...' : ''}`"
-            >
-              {{ formatSampleValues(col.sampleValues) }}
-            </div>
-
-            <div
-              v-if="col.uniqueCount !== undefined"
-              class="text-xs text-surface-500 mt-1"
-              :title="`This column has ${col.uniqueCount.toLocaleString()} unique values`"
-            >
-              {{ col.uniqueCount.toLocaleString() }} unique values
-            </div>
+            {{ col.uniqueCount.toLocaleString() }} unique values
           </div>
         </div>
       </div>
diff --git a/frontend/src/features/data-processing/composables/__tests__/useColumnConversion.test.ts b/frontend/src/features/data-processing/composables/__tests__/useColumnConversion.test.ts
deleted file mode 100644
index cc18bb2..0000000
--- a/frontend/src/features/data-processing/composables/__tests__/useColumnConversion.test.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { describe, test, expect } from 'bun:test'
-import { useColumnConversion } from '@frontend/features/data-processing/composables/useColumnConversion'
-import type { ProjectColumn } from '@frontend/features/data-processing/composables/useColumnGeneration'
-
-describe('useColumnConversion', () => {
-  const { convertProjectColumnsToColumnInfo } = useColumnConversion()
-
-  test('should convert ProjectColumn to ColumnInfo correctly', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'name',
-        header: 'Name',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-      {
-        field: 'age',
-        header: 'Age',
-        type: 'INTEGER',
-        pk: false,
-        isInteger: true,
-        isDate: false,
-      },
-    ]
-
-    const sampleData = [
-      { name: 'John Doe', age: 25 },
-      { name: 'Jane Smith', age: 30 },
-      { name: 'Bob Johnson', age: 35 },
-    ]
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, sampleData)
-
-    expect(result).toHaveLength(2)
-
-    // Test first column (name)
-    expect(result[0]?.name).toBe('name')
-    expect(result[0]?.dataType).toBe('VARCHAR')
-    expect(result[0]?.sampleValues).toEqual(['John Doe', 'Jane Smith', 'Bob Johnson'])
-    expect(result[0]?.nullable).toBe(false)
-    expect(result[0]?.uniqueCount).toBe(3)
-
-    // Test second column (age)
-    expect(result[1]?.name).toBe('age')
-    expect(result[1]?.dataType).toBe('INTEGER')
-    expect(result[1]?.sampleValues).toEqual(['25', '30', '35'])
-    expect(result[1]?.nullable).toBe(false)
-    expect(result[1]?.uniqueCount).toBe(3)
-  })
-
-  test('should handle nullable columns correctly', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'optional_field',
-        header: 'Optional Field',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-    ]
-
-    const sampleData = [
-      { optional_field: 'value1' },
-      { optional_field: null },
-      { optional_field: 'value2' },
-      { optional_field: undefined },
-    ]
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, sampleData)
-
-    expect(result[0]?.nullable).toBe(true)
-    expect(result[0]?.sampleValues).toEqual(['value1', 'value2'])
-    expect(result[0]?.uniqueCount).toBe(2) // Only non-null values counted
-  })
-
-  test('should handle empty sample data', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'test_field',
-        header: 'Test Field',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-    ]
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, [])
-
-    expect(result[0]?.sampleValues).toEqual([])
-    expect(result[0]?.nullable).toBe(false)
-    expect(result[0]?.uniqueCount).toBeUndefined()
-  })
-
-  test('should limit sample values to first 5 rows', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'test_field',
-        header: 'Test Field',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-    ]
-
-    const sampleData = Array.from({ length: 10 }, (_, i) => ({
-      test_field: `value${i}`,
-    }))
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, sampleData)
-
-    expect(result[0]?.sampleValues).toHaveLength(5)
-    expect(result[0]?.sampleValues).toEqual(['value0', 'value1', 'value2', 'value3', 'value4'])
-  })
-
-  test('should remove duplicate sample values', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'category',
-        header: 'Category',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-    ]
-
-    const sampleData = [
-      { category: 'A' },
-      { category: 'B' },
-      { category: 'A' },
-      { category: 'C' },
-      { category: 'B' },
-    ]
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, sampleData)
-
-    expect(result[0]?.sampleValues).toEqual(['A', 'B', 'C'])
-    expect(result[0]?.uniqueCount).toBe(3)
-  })
-
-  test('should convert all values to strings', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'mixed_field',
-        header: 'Mixed Field',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-    ]
-
-    const sampleData = [
-      { mixed_field: 123 },
-      { mixed_field: true },
-      { mixed_field: 'string' },
-      { mixed_field: 45.67 },
-    ]
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, sampleData)
-
-    expect(result[0]?.sampleValues).toEqual(['123', 'true', 'string', '45.67'])
-    expect(result[0]?.sampleValues.every((val) => typeof val === 'string')).toBe(true)
-  })
-
-  test('should handle columns not present in sample data', () => {
-    const projectColumns: ProjectColumn[] = [
-      {
-        field: 'missing_field',
-        header: 'Missing Field',
-        type: 'VARCHAR',
-        pk: false,
-        isInteger: false,
-        isDate: false,
-      },
-    ]
-
-    const sampleData = [{ other_field: 'value1' }, { other_field: 'value2' }]
-
-    const result = convertProjectColumnsToColumnInfo(projectColumns, sampleData)
-
-    expect(result[0]?.sampleValues).toEqual([])
-    expect(result[0]?.nullable).toBe(true) // All values are undefined, so nullable
-    expect(result[0]?.uniqueCount).toBeUndefined()
-  })
-})
diff --git a/frontend/src/features/data-processing/composables/useColumnConversion.ts b/frontend/src/features/data-processing/composables/useColumnConversion.ts
deleted file mode 100644
index 128a5d6..0000000
--- a/frontend/src/features/data-processing/composables/useColumnConversion.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { ProjectColumn } from '@frontend/features/data-processing/composables/useColumnGeneration'
-import type { ColumnInfo } from '@frontend/shared/types/wikibase-schema'
-
-/**
- * Composable for converting project columns to column info format
- */
-export const useColumnConversion = () => {
-  /**
-   * Converts ProjectColumn array to ColumnInfo array for use with ColumnPalette
-   */
-  const convertProjectColumnsToColumnInfo = (
-    projectColumns: ProjectColumn[],
-    sampleData: Record<string, unknown>[] = [],
-  ): ColumnInfo[] => {
-    return projectColumns.map((col) => {
-      // Get all values for this column
-      const columnValues = sampleData.map((_row) => _row[col.field])
-
-      // Filter non-null values and get unique set
-      const nonNullValues = columnValues.filter((value) => value !== null && value !== undefined)
-      const uniqueValues = new Set(nonNullValues)
-
-      // Get sample values (first 5 unique string values)
-      const sampleValues = [...uniqueValues].slice(0, 5).map((value) => String(value))
-
-      return {
-        name: col.field,
-        dataType: col.type,
-        sampleValues,
-        nullable: columnValues.length > nonNullValues.length,
-        uniqueCount: uniqueValues.size || undefined,
-      }
-    })
-  }
-
-  return {
-    convertProjectColumnsToColumnInfo,
-  }
-}
diff --git a/frontend/src/features/project-management/stores/project.store.ts b/frontend/src/features/project-management/stores/project.store.ts
index dd76e9d..366456b 100644
--- a/frontend/src/features/project-management/stores/project.store.ts
+++ b/frontend/src/features/project-management/stores/project.store.ts
@@ -49,12 +49,35 @@ export const useProjectStore = defineStore('project', () => {
     isLoading.value = false
   }
 
+  const columnsForSchema = computed(() => {
+    return columns.value.map((col) => {
+      // Get all values for this column
+      const columnValues = data.value.map((_row) => _row[col.field])
+
+      // Filter non-null values and get unique set
+      const nonNullValues = columnValues.filter((value) => value !== null && value !== undefined)
+      const uniqueValues = new Set(nonNullValues)
+
+      // Get sample values (first 5 unique string values)
+      const sampleValues = [...uniqueValues].slice(0, 5).map((value) => String(value))
+
+      return {
+        name: col.field,
+        dataType: col.type,
+        sampleValues,
+        nullable: columnValues.length > nonNullValues.length,
+        uniqueCount: uniqueValues.size || undefined,
+      }
+    })
+  })
+
   return {
     // State
     data,
     meta,
     isLoading,
     columns,
+    columnsForSchema,
 
     // Actions
     fetchProject,
diff --git a/frontend/src/features/wikibase-schema/components/ClaimEditor.vue b/frontend/src/features/wikibase-schema/components/ClaimEditor.vue
new file mode 100644
index 0000000..34a4b84
--- /dev/null
+++ b/frontend/src/features/wikibase-schema/components/ClaimEditor.vue
@@ -0,0 +1,668 @@
+<script setup lang="ts">
+// Props
+interface Props {
+  valueMapping: ValueMapping
+  property: PropertyReference
+  rank: StatementRank
+  statementId?: UUID
+  statementIndex?: number
+  qualifiers?: PropertyValueMap[]
+  references?: ReferenceSchemaMapping[]
+  disabled?: boolean
+  showValidation?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  statementId: undefined,
+  statementIndex: 1,
+  qualifiers: () => [],
+  references: () => [],
+  disabled: false,
+  showValidation: true,
+})
+
+// Emits
+interface Emits {
+  'value-changed': [value: ValueMapping]
+  'rank-changed': [rank: StatementRank]
+  'qualifiers-changed': [qualifiers: PropertyValueMap[]]
+  'references-changed': [references: ReferenceSchemaMapping[]]
+}
+
+const emit = defineEmits<Emits>()
+
+// Composables
+const {
+  currentMapping,
+  valueTypes,
+  isColumnType,
+  isConstantType,
+  isExpressionType,
+  sourceValue,
+  updateValueType,
+  updateColumnSource,
+  validateMapping,
+} = useValueMapping()
+
+const {
+  dropZoneClasses,
+  handleDragOver,
+  handleDragEnter,
+  handleDragLeave,
+  handleDrop,
+  setOnColumnDrop,
+} = useStatementDropZone()
+
+// Local state
+const validationErrors = ref<string[]>([])
+
+// Qualifiers state
+const isAddingQualifier = ref(false)
+const editingQualifierIndex = ref<number | null>(null)
+
+// References state
+const isAddingReference = ref(false)
+const isAddingSnakToReference = ref<number | null>(null)
+const editingSnakInfo = ref<{ referenceIndex: number; snakIndex: number } | null>(null)
+
+// Rank options
+const rankOptions = [
+  { label: 'Preferred', value: 'preferred' as StatementRank, icon: 'pi pi-star-fill' },
+  { label: 'Normal', value: 'normal' as StatementRank, icon: 'pi pi-circle' },
+  { label: 'Deprecated', value: 'deprecated' as StatementRank, icon: 'pi pi-times-circle' },
+]
+
+// Initialize current mapping from props
+watch(
+  () => props.valueMapping,
+  (newMapping) => {
+    if (newMapping) {
+      currentMapping.value = { ...newMapping }
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+// Watch for validation changes
+watch(
+  () => currentMapping.value,
+  () => {
+    const validation = validateMapping(currentMapping.value)
+    validationErrors.value = validation.errors
+  },
+  { deep: true, immediate: true },
+)
+
+// Methods
+const handleValueTypeChange = (newType: 'column' | 'constant' | 'expression') => {
+  updateValueType(newType)
+  emit('value-changed', currentMapping.value)
+}
+
+const handleColumnSelection = (columnInfo: ColumnInfo) => {
+  if (currentMapping.value.type !== 'column') return
+
+  updateColumnSource(columnInfo)
+  emit('value-changed', currentMapping.value)
+}
+
+const handleConstantOrExpressionChange = (value: string | undefined) => {
+  if (!value) return
+  if (currentMapping.value.type === 'column') return
+
+  currentMapping.value.source = value
+  emit('value-changed', currentMapping.value)
+}
+
+const clearColumnSelection = () => {
+  if (currentMapping.value.type === 'column') {
+    currentMapping.value.source = {
+      columnName: '',
+      dataType: 'VARCHAR',
+    }
+    emit('value-changed', currentMapping.value)
+  }
+}
+
+const handleRankChanged = (newRank: StatementRank) => {
+  emit('rank-changed', newRank)
+}
+
+// Qualifiers methods
+const startAddingQualifier = () => {
+  isAddingQualifier.value = true
+  editingQualifierIndex.value = null
+}
+
+const startEditingQualifier = (index: number) => {
+  isAddingQualifier.value = true
+  editingQualifierIndex.value = index
+}
+
+const cancelAddingQualifier = () => {
+  isAddingQualifier.value = false
+  editingQualifierIndex.value = null
+}
+
+const handleQualifierSave = (qualifier: PropertyValueMap) => {
+  const currentQualifiers = [...(props.qualifiers || [])]
+  if (editingQualifierIndex.value !== null) {
+    currentQualifiers[editingQualifierIndex.value] = qualifier
+  } else {
+    currentQualifiers.push(qualifier)
+  }
+
+  emit('qualifiers-changed', currentQualifiers)
+  cancelAddingQualifier()
+}
+
+const removeQualifier = (qualifierIndex: number) => {
+  const currentQualifiers = (props.qualifiers || []).filter((_, index) => index !== qualifierIndex)
+  emit('qualifiers-changed', currentQualifiers)
+}
+
+const getValueTypeIcon = (valueType: string): string => {
+  const valueTypeOptions = [
+    { label: 'Column', value: 'column', icon: 'pi pi-database' },
+    { label: 'Constant', value: 'constant', icon: 'pi pi-lock' },
+    { label: 'Expression', value: 'expression', icon: 'pi pi-code' },
+  ]
+  const option = valueTypeOptions.find((opt) => opt.value === valueType)
+  return option?.icon || 'pi pi-question'
+}
+
+// References methods
+const startAddingReference = () => {
+  isAddingReference.value = true
+  isAddingSnakToReference.value = null
+  editingSnakInfo.value = null
+}
+
+const startAddingSnakToReference = (referenceIndex: number) => {
+  isAddingSnakToReference.value = referenceIndex
+  isAddingReference.value = false
+  editingSnakInfo.value = null
+}
+
+const startEditingSnak = (referenceIndex: number, snakIndex: number) => {
+  isAddingReference.value = false
+  isAddingSnakToReference.value = null
+  editingSnakInfo.value = { referenceIndex, snakIndex }
+}
+
+const cancelAddingReference = () => {
+  isAddingReference.value = false
+  isAddingSnakToReference.value = null
+  editingSnakInfo.value = null
+}
+
+const handleSnakSave = (snak: PropertyValueMap) => {
+  const currentReferences = [...(props.references || [])]
+
+  if (isAddingReference.value) {
+    // Create a new reference with the first snak
+    const reference: ReferenceSchemaMapping = {
+      id: crypto.randomUUID(),
+      snaks: [snak],
+    }
+    currentReferences.push(reference)
+  } else if (isAddingSnakToReference.value !== null) {
+    // Add snak to existing reference
+    const currentReference = currentReferences[isAddingSnakToReference.value]
+    if (currentReference) {
+      const updatedReference: ReferenceSchemaMapping = {
+        id: currentReference.id || crypto.randomUUID(),
+        snaks: [...(currentReference.snaks || []), snak],
+      }
+      currentReferences[isAddingSnakToReference.value] = updatedReference
+    }
+  } else if (editingSnakInfo.value !== null) {
+    // Update existing snak
+    const currentReference = currentReferences[editingSnakInfo.value.referenceIndex]
+    if (currentReference) {
+      const updatedReference: ReferenceSchemaMapping = {
+        id: currentReference.id,
+        snaks: currentReference.snaks.map((s, i) =>
+          i === editingSnakInfo.value!.snakIndex ? snak : s,
+        ),
+      }
+      currentReferences[editingSnakInfo.value.referenceIndex] = updatedReference
+    }
+  }
+
+  emit('references-changed', currentReferences)
+  cancelAddingReference()
+}
+
+const removeReference = (referenceIndex: number) => {
+  const currentReferences = (props.references || []).filter((_, index) => index !== referenceIndex)
+  emit('references-changed', currentReferences)
+}
+
+const removeSnakFromReference = (referenceIndex: number, snakIndex: number) => {
+  const currentReferences = [...(props.references || [])]
+  const currentReference = currentReferences[referenceIndex]
+  if (currentReference) {
+    const updatedReference: ReferenceSchemaMapping = {
+      id: currentReference.id || crypto.randomUUID(),
+      snaks: (currentReference.snaks || []).filter((_, index) => index !== snakIndex),
+    }
+    currentReferences[referenceIndex] = updatedReference
+    emit('references-changed', currentReferences)
+  }
+}
+
+const getPropertyDisplayText = (property: PropertyReference): string => {
+  return property.label || property.id
+}
+
+const getValueDisplayText = (value: ValueMapping): string => {
+  if (value.type === 'column') {
+    return typeof value.source === 'string' ? value.source : value.source.columnName
+  }
+  return typeof value.source === 'string' ? value.source : 'No mapping'
+}
+
+// Set up column drop callback
+setOnColumnDrop((columnInfo: ColumnInfo) => {
+  if (props.disabled || currentMapping.value.type !== 'column') return
+  handleColumnSelection(columnInfo)
+})
+</script>
+
+<template>
+  <Card class="bg-white shadow-md border border-gray-200 rounded-lg overflow-hidden">
+    <template #header>
+      <div class="flex items-center gap-2 px-4 py-2 border-b bg-gray-50">
+        <i class="pi pi-file-edit text-primary" />
+        <span class="font-semibold">Statement {{ statementIndex }}</span>
+      </div>
+    </template>
+    <template #content>
+      <div class="space-y-3">
+        <!-- Statement Rank -->
+        <div class="space-y-1">
+          <label class="block text-sm font-medium text-surface-700">Rank</label>
+          <div class="flex gap-1">
+            <Button
+              v-for="option in rankOptions"
+              :key="option.value"
+              :label="option.label"
+              :icon="option.icon"
+              :severity="rank === option.value ? 'primary' : 'secondary'"
+              size="small"
+              :disabled="disabled"
+              @click="handleRankChanged(option.value)"
+            />
+          </div>
+        </div>
+
+        <!-- Value Type and Source Layout -->
+        <div class="flex gap-3">
+          <!-- Value Type Selection -->
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-surface-700">
+              Value Type
+              <span class="text-red-500">*</span>
+            </label>
+            <Select
+              :model-value="currentMapping.type"
+              :options="valueTypes"
+              option-label="label"
+              option-value="value"
+              placeholder="Select value type"
+              :disabled="disabled"
+              @update:model-value="handleValueTypeChange"
+            >
+              <template #option="{ option }">
+                <div class="flex items-center gap-2">
+                  <i :class="option.icon" />
+                  <span>{{ option.label }}</span>
+                </div>
+              </template>
+              <template #value="{ value }">
+                <div
+                  v-if="value"
+                  class="flex items-center gap-2"
+                >
+                  <i :class="valueTypes.find((t) => t.value === value)?.icon" />
+                  <span>{{ valueTypes.find((t) => t.value === value)?.label }}</span>
+                </div>
+              </template>
+            </Select>
+          </div>
+
+          <!-- Value Source Configuration -->
+          <div class="flex-1 space-y-1">
+            <label class="block text-sm font-medium text-surface-700">
+              Value Source
+              <span class="text-red-500">*</span>
+            </label>
+
+            <!-- Column Drop Zone -->
+            <div
+              v-if="isColumnType"
+              :class="dropZoneClasses"
+              class="border-2 border-dashed rounded-lg p-3 text-center transition-all duration-200 ease-in-out"
+              @dragover="handleDragOver"
+              @dragenter="handleDragEnter"
+              @dragleave="handleDragLeave"
+              @drop="handleDrop"
+            >
+              <!-- Show dropped column info if column is selected -->
+              <div
+                v-if="currentMapping.type === 'column' && currentMapping.source.columnName"
+                class="flex items-center justify-center gap-3"
+              >
+                <div
+                  class="flex items-center gap-2 bg-white border border-surface-200 rounded px-3 py-2"
+                >
+                  <i class="pi pi-database text-primary-600" />
+                  <span class="font-medium text-surface-900">
+                    {{ currentMapping.source.columnName }}
+                  </span>
+                  <Tag
+                    :value="currentMapping.source.dataType"
+                    size="small"
+                    severity="secondary"
+                  />
+                </div>
+                <Button
+                  v-tooltip="'Clear column selection'"
+                  icon="pi pi-times"
+                  size="small"
+                  severity="secondary"
+                  text
+                  :disabled="disabled"
+                  @click="clearColumnSelection"
+                />
+              </div>
+
+              <!-- Show drop zone message if no column selected -->
+              <div
+                v-else
+                class="flex items-center justify-center gap-2 text-surface-600"
+              >
+                <i class="pi pi-upload" />
+                <span class="text-sm font-medium">Drop column here</span>
+              </div>
+            </div>
+
+            <!-- Constant/Expression Input -->
+            <InputText
+              v-else-if="isConstantType || isExpressionType"
+              :model-value="sourceValue"
+              :placeholder="isConstantType ? 'Enter constant value...' : 'Enter expression...'"
+              :disabled="disabled"
+              class="w-full"
+              @update:model-value="handleConstantOrExpressionChange"
+            />
+          </div>
+        </div>
+
+        <!-- Validation Errors -->
+        <div
+          v-if="showValidation && validationErrors.length > 0"
+          class="space-y-2"
+        >
+          <div
+            v-for="(error, index) in validationErrors"
+            :key="index"
+            class="flex items-center gap-2 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2"
+          >
+            <i class="pi pi-exclamation-triangle" />
+            <span>{{ error }}</span>
+          </div>
+        </div>
+
+        <!-- Qualifiers Section -->
+        <div class="qualifiers-editor mt-4">
+          <!-- Header with Add Button -->
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+              <i class="pi pi-tags text-surface-600 text-sm" />
+              <span class="text-sm font-medium text-surface-900">
+                Qualifiers
+                <span
+                  v-if="(qualifiers || []).length > 0"
+                  class="text-xs text-surface-500 font-normal ml-1"
+                >
+                  ({{ (qualifiers || []).length }})
+                </span>
+              </span>
+            </div>
+
+            <Button
+              v-if="!isAddingQualifier"
+              icon="pi pi-plus"
+              size="small"
+              severity="secondary"
+              text
+              @click="startAddingQualifier"
+            />
+          </div>
+
+          <!-- Existing Qualifiers List -->
+          <div
+            v-if="(qualifiers || []).length > 0"
+            class="space-y-1"
+            data-testid="qualifiers-list"
+          >
+            <div
+              v-for="(qualifier, index) in qualifiers"
+              :key="`qualifier-${qualifier.property.id}-${index}`"
+              class="flex items-center justify-between p-2 bg-surface-50 border border-surface-200 rounded text-sm hover:bg-surface-100 transition-colors"
+              data-testid="qualifier-item"
+            >
+              <div class="flex items-center gap-2 flex-1">
+                <!-- Property Info -->
+                <Tag
+                  :value="qualifier.property.id"
+                  size="small"
+                  severity="info"
+                />
+                <span class="font-medium text-surface-900">
+                  {{ qualifier.property.label || qualifier.property.id }}
+                </span>
+
+                <!-- Relationship Arrow -->
+                <i class="pi pi-arrow-right text-surface-400 text-xs" />
+
+                <!-- Value Info -->
+                <Tag
+                  :value="
+                    qualifier.value.type === 'column'
+                      ? qualifier.value.source.columnName
+                      : qualifier.value.source
+                  "
+                  size="small"
+                  severity="secondary"
+                />
+              </div>
+
+              <!-- Actions -->
+              <div class="flex items-center gap-1">
+                <Button
+                  v-tooltip="'Edit qualifier'"
+                  icon="pi pi-pencil"
+                  size="small"
+                  severity="secondary"
+                  text
+                  data-testid="edit-qualifier-button"
+                  @click="startEditingQualifier(index)"
+                />
+                <Button
+                  v-tooltip="'Remove qualifier'"
+                  icon="pi pi-trash"
+                  size="small"
+                  severity="danger"
+                  text
+                  data-testid="remove-qualifier-button"
+                  @click="removeQualifier(index)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Add/Edit Qualifier -->
+          <SingleQualifierEditor
+            v-if="isAddingQualifier"
+            :qualifier="
+              editingQualifierIndex !== null ? (qualifiers || [])[editingQualifierIndex] : undefined
+            "
+            :is-editing="editingQualifierIndex !== null"
+            @save="handleQualifierSave"
+            @cancel="cancelAddingQualifier"
+          />
+        </div>
+
+        <!-- References Section -->
+        <div class="references-editor mt-4">
+          <!-- Header with Add Button -->
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+              <i class="pi pi-bookmark text-surface-600 text-sm" />
+              <span class="text-sm font-medium text-surface-900">
+                References
+                <span
+                  v-if="(references || []).length > 0"
+                  class="text-xs text-surface-500 font-normal ml-1"
+                >
+                  ({{ (references || []).length }})
+                </span>
+              </span>
+            </div>
+
+            <Button
+              v-if="!isAddingReference"
+              icon="pi pi-plus"
+              size="small"
+              severity="secondary"
+              text
+              @click="startAddingReference"
+            />
+          </div>
+
+          <!-- Existing References List -->
+          <div
+            v-if="(references || []).length > 0"
+            class="space-y-1"
+            data-testid="references-list"
+          >
+            <!-- Individual References -->
+            <div
+              v-for="(reference, referenceIndex) in references"
+              :key="`reference-${reference.id}`"
+              class="border border-surface-200 rounded bg-surface-50"
+              data-testid="reference-item"
+            >
+              <!-- Reference Header -->
+              <div
+                class="flex items-center justify-between p-2 border-b border-surface-200 bg-orange-50"
+              >
+                <div class="flex items-center gap-2 text-sm font-medium text-orange-700">
+                  <i class="pi pi-bookmark text-xs" />
+                  <span>Reference {{ referenceIndex + 1 }}</span>
+                  <span class="text-xs text-surface-500 font-normal">
+                    ({{ reference.snaks.length }}
+                    {{ reference.snaks.length === 1 ? 'property' : 'properties' }})
+                  </span>
+                </div>
+
+                <div class="flex items-center gap-1">
+                  <Button
+                    v-tooltip="'Add property to this reference'"
+                    icon="pi pi-plus"
+                    size="small"
+                    severity="secondary"
+                    text
+                    @click="startAddingSnakToReference(referenceIndex)"
+                  />
+                  <Button
+                    v-tooltip="'Remove entire reference'"
+                    icon="pi pi-trash"
+                    size="small"
+                    severity="danger"
+                    text
+                    data-testid="remove-reference-button"
+                    @click="removeReference(referenceIndex)"
+                  />
+                </div>
+              </div>
+
+              <!-- Reference Snaks (Property-Value Pairs) -->
+              <div class="p-2 space-y-1">
+                <div
+                  v-for="(snak, snakIndex) in reference.snaks"
+                  :key="`reference-${reference.id}-snak-${snakIndex}`"
+                  class="flex items-center justify-between p-2 bg-white border border-surface-200 rounded text-sm hover:bg-surface-50 transition-colors"
+                  data-testid="reference-snak"
+                >
+                  <div class="flex items-center gap-2 flex-1">
+                    <!-- Property Info -->
+                    <Tag
+                      :value="snak.property.id"
+                      size="small"
+                      severity="info"
+                    />
+                    <span class="font-medium text-surface-900">
+                      {{ getPropertyDisplayText(snak.property) }}
+                    </span>
+
+                    <!-- Relationship Arrow -->
+                    <i class="pi pi-arrow-right text-surface-400 text-xs" />
+
+                    <!-- Value Info -->
+                    <Tag
+                      :value="getValueDisplayText(snak.value)"
+                      size="small"
+                      severity="secondary"
+                    />
+                  </div>
+
+                  <!-- Snak Actions -->
+                  <div class="flex items-center gap-1">
+                    <Button
+                      v-tooltip="'Edit this property'"
+                      icon="pi pi-pencil"
+                      size="small"
+                      severity="secondary"
+                      text
+                      data-testid="edit-snak-button"
+                      @click="startEditingSnak(referenceIndex, snakIndex)"
+                    />
+                    <Button
+                      v-tooltip="'Remove this property from reference'"
+                      icon="pi pi-times"
+                      size="small"
+                      severity="danger"
+                      text
+                      data-testid="remove-snak-button"
+                      @click="removeSnakFromReference(referenceIndex, snakIndex)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Add/Edit Reference -->
+          <SingleReferenceEditor
+            v-if="isAddingReference || isAddingSnakToReference !== null || editingSnakInfo !== null"
+            :snak="
+              editingSnakInfo
+                ? (references || [])[editingSnakInfo.referenceIndex]?.snaks[
+                    editingSnakInfo.snakIndex
+                  ]
+                : undefined
+            "
+            :is-editing="editingSnakInfo !== null"
+            :is-adding-to-reference="isAddingSnakToReference !== null"
+            @save="handleSnakSave"
+            @cancel="cancelAddingReference"
+          />
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
diff --git a/frontend/src/features/wikibase-schema/components/QualifiersEditor.vue b/frontend/src/features/wikibase-schema/components/QualifiersEditor.vue
index 12a5b74..1a8dc5b 100644
--- a/frontend/src/features/wikibase-schema/components/QualifiersEditor.vue
+++ b/frontend/src/features/wikibase-schema/components/QualifiersEditor.vue
@@ -1,70 +1,82 @@
 <script setup lang="ts">
 // Props
-interface QualifiersEditorProps {
+interface Props {
   statementId: UUID
-  qualifiers?: PropertyValueMap[]
-  availableColumns?: ColumnInfo[]
-  disabled?: boolean
+  qualifiers: PropertyValueMap[]
 }
 
-const props = withDefaults(defineProps<QualifiersEditorProps>(), {
-  qualifiers: () => [],
-  availableColumns: () => [],
-  disabled: false,
-})
+const props = defineProps<Props>()
+const schemaStore = useSchemaStore()
 
-// Emits
-interface QualifiersEditorEmits {
-  'add-qualifier': [statementId: UUID, qualifier: PropertyValueMap]
-  'remove-qualifier': [statementId: UUID, qualifierIndex: number]
-  'update-qualifier': [statementId: UUID, qualifierIndex: number, qualifier: PropertyValueMap]
-}
-
-const emit = defineEmits<QualifiersEditorEmits>()
-
-// Local state for adding new qualifier
 const isAddingQualifier = ref(false)
-const selectedPropertyId = ref('')
-const selectedValue = ref<ValueMapping | null>(null)
-const validationErrors = ref<string[]>([])
+const editingQualifierIndex = ref<number | null>(null)
 
 // Computed properties
 const qualifiers = computed(() => props.qualifiers || [])
 
-const shouldShowEmptyState = computed(
-  () => qualifiers.value.length === 0 && !isAddingQualifier.value,
-)
-
 // Methods
 const startAddingQualifier = () => {
   isAddingQualifier.value = true
-  selectedPropertyId.value = ''
-  selectedValue.value = null
+  editingQualifierIndex.value = null
+}
+
+const startEditingQualifier = (index: number) => {
+  isAddingQualifier.value = true
+  editingQualifierIndex.value = index
 }
 
 const cancelAddingQualifier = () => {
   isAddingQualifier.value = false
-  selectedPropertyId.value = ''
-  selectedValue.value = null
+  editingQualifierIndex.value = null
 }
 
-const handleQualifierSubmit = () => {
-  if (!selectedPropertyId.value || !selectedValue.value) return
-
-  const qualifier: PropertyValueMap = {
-    property: {
-      id: selectedPropertyId.value,
-      dataType: selectedValue.value.dataType,
-    },
-    value: selectedValue.value,
+const handleQualifierSave = (qualifier: PropertyValueMap) => {
+  if (editingQualifierIndex.value !== null) {
+    const statement = schemaStore.statements.find((s: any) => s.id === props.statementId)
+    if (statement) {
+      const updatedQualifiers = [...(statement.qualifiers || [])]
+      updatedQualifiers[editingQualifierIndex.value] = qualifier
+      schemaStore.updateStatement(
+        props.statementId,
+        statement.property,
+        statement.value,
+        statement.rank,
+        updatedQualifiers,
+        statement.references,
+      )
+    }
+  } else {
+    const statement = schemaStore.statements.find((s: any) => s.id === props.statementId)
+    if (statement) {
+      const updatedQualifiers = [...(statement.qualifiers || []), qualifier]
+      schemaStore.updateStatement(
+        props.statementId,
+        statement.property,
+        statement.value,
+        statement.rank,
+        updatedQualifiers,
+        statement.references,
+      )
+    }
   }
-
-  emit('add-qualifier', props.statementId, qualifier)
   cancelAddingQualifier()
 }
 
 const removeQualifier = (qualifierIndex: number) => {
-  emit('remove-qualifier', props.statementId, qualifierIndex)
+  const statement = schemaStore.statements.find((s: any) => s.id === props.statementId)
+  if (statement) {
+    const updatedQualifiers = (statement.qualifiers || []).filter(
+      (_: any, index: number) => index !== qualifierIndex,
+    )
+    schemaStore.updateStatement(
+      props.statementId,
+      statement.property,
+      statement.value,
+      statement.rank,
+      updatedQualifiers,
+      statement.references,
+    )
+  }
 }
 
 const getValueTypeIcon = (valueType: string): string => {
@@ -76,36 +88,31 @@ const getValueTypeIcon = (valueType: string): string => {
   const option = valueTypeOptions.find((opt) => opt.value === valueType)
   return option?.icon || 'pi pi-question'
 }
-
-const onValidationChanged = (_: any, errors: string[]) => {
-  validationErrors.value = errors
-}
 </script>
 
 <template>
-  <div class="qualifiers-editor space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
+  <div class="qualifiers-editor">
+    <!-- Header with Add Button -->
+    <div class="flex items-center justify-between mb-3">
       <div class="flex items-center gap-2">
-        <i class="pi pi-tags text-surface-600" />
-        <h4 class="text-md font-medium text-surface-900">
+        <i class="pi pi-tags text-surface-600 text-sm" />
+        <span class="text-sm font-medium text-surface-900">
           Qualifiers
           <span
             v-if="qualifiers.length > 0"
-            class="text-sm text-surface-500 font-normal"
+            class="text-xs text-surface-500 font-normal ml-1"
           >
             ({{ qualifiers.length }})
           </span>
-        </h4>
+        </span>
       </div>
 
       <Button
         v-if="!isAddingQualifier"
         icon="pi pi-plus"
-        label="Add Qualifier"
         size="small"
         severity="secondary"
-        :disabled="disabled"
+        text
         @click="startAddingQualifier"
       />
     </div>
@@ -116,149 +123,69 @@ const onValidationChanged = (_: any, errors: string[]) => {
       class="space-y-2"
       data-testid="qualifiers-list"
     >
-      <!-- Qualifiers Display Container -->
       <div
-        class="border-l-4 border-primary-200 pl-4 bg-gradient-to-r from-primary-25 to-transparent"
+        v-for="(qualifier, index) in qualifiers"
+        :key="`qualifier-${qualifier.property.id}-${index}`"
+        class="flex items-center justify-between p-2 bg-surface-50 border border-surface-200 rounded text-sm hover:bg-surface-100 transition-colors"
+        data-testid="qualifier-item"
       >
-        <div class="space-y-3">
-          <!-- Qualifiers Header -->
-          <div class="flex items-center gap-2 text-sm font-medium text-primary-700 mb-3">
-            <i class="pi pi-angle-right text-xs" />
-            <span>Statement qualifiers</span>
-          </div>
-
-          <!-- Individual Qualifiers -->
-          <div
-            v-for="(qualifier, index) in qualifiers"
-            :key="`qualifier-${index}`"
-            class="relative"
-            data-testid="qualifier-item"
-          >
-            <!-- Connector Line -->
-            <div class="absolute left-0 top-0 bottom-0 w-px bg-primary-200" />
-
-            <!-- Qualifier Content -->
-            <div
-              class="flex items-center justify-between p-3 ml-4 bg-surface-50 border border-surface-200 rounded-lg shadow-sm hover:shadow-md transition-shadow"
-            >
-              <div class="flex items-center gap-3 flex-1">
-                <!-- Qualifier Indicator -->
-                <div class="flex items-center gap-1 text-primary-600">
-                  <i class="pi pi-angle-right text-xs" />
-                  <span class="text-xs font-medium">Q{{ index + 1 }}</span>
-                </div>
-
-                <!-- Property Info -->
-                <div
-                  class="flex items-center gap-2"
-                  data-testid="qualifier-property"
-                >
-                  <Tag
-                    :value="qualifier.property.id"
-                    size="small"
-                    severity="info"
-                  />
-                  <span class="font-medium text-surface-900">
-                    {{ qualifier.property.label || qualifier.property.id }}
-                  </span>
-                </div>
-
-                <!-- Relationship Arrow -->
-                <i class="pi pi-arrow-right text-surface-400 text-sm" />
+        <div class="flex items-center gap-2 flex-1">
+          <!-- Property Info -->
+          <Tag
+            :value="qualifier.property.id"
+            size="small"
+            severity="info"
+          />
+          <span class="font-medium text-surface-900">
+            {{ qualifier.property.label || qualifier.property.id }}
+          </span>
 
-                <!-- Value Info -->
-                <div
-                  class="flex items-center gap-2"
-                  data-testid="qualifier-value"
-                >
-                  <i
-                    :class="getValueTypeIcon(qualifier.value.type)"
-                    class="text-surface-600 text-sm"
-                  />
-                  <Tag
-                    :value="
-                      qualifier.value.type === 'column'
-                        ? qualifier.value.source.columnName
-                        : qualifier.value.source
-                    "
-                    size="small"
-                    severity="secondary"
-                  />
-                  <span class="text-xs text-surface-500">
-                    {{ qualifier.value.dataType }}
-                  </span>
-                </div>
-              </div>
+          <!-- Relationship Arrow -->
+          <i class="pi pi-arrow-right text-surface-400 text-xs" />
 
-              <!-- Actions -->
-              <div class="flex items-center gap-1">
-                <Button
-                  v-tooltip="'Remove qualifier'"
-                  icon="pi pi-trash"
-                  size="small"
-                  severity="danger"
-                  text
-                  :disabled="disabled"
-                  data-testid="remove-qualifier-button"
-                  @click="removeQualifier(index)"
-                />
-              </div>
-            </div>
-          </div>
+          <!-- Value Info -->
+          <Tag
+            :value="
+              qualifier.value.type === 'column'
+                ? qualifier.value.source.columnName
+                : qualifier.value.source
+            "
+            size="small"
+            severity="secondary"
+          />
         </div>
-      </div>
-    </div>
 
-    <!-- Add Qualifier Form -->
-    <div
-      v-if="isAddingQualifier"
-      class="border border-surface-200 rounded-lg p-4 bg-surface-25"
-    >
-      <div class="flex items-center justify-between mb-4">
-        <h5 class="font-medium text-surface-900">Add New Qualifier</h5>
-
-        <div class="flex justify-end gap-2 mt-4">
+        <!-- Actions -->
+        <div class="flex items-center gap-1">
           <Button
-            label="Cancel"
-            severity="secondary"
+            v-tooltip="'Edit qualifier'"
+            icon="pi pi-pencil"
             size="small"
-            @click="cancelAddingQualifier"
+            severity="secondary"
+            text
+            data-testid="edit-qualifier-button"
+            @click="startEditingQualifier(index)"
           />
           <Button
-            label="Add Qualifier"
+            v-tooltip="'Remove qualifier'"
+            icon="pi pi-trash"
             size="small"
-            :disabled="!selectedPropertyId || !selectedValue || validationErrors.length > 0"
-            @click="handleQualifierSubmit"
+            severity="danger"
+            text
+            data-testid="remove-qualifier-button"
+            @click="removeQualifier(index)"
           />
         </div>
       </div>
-
-      <!-- Use the reusable PropertyValueMappingEditor component -->
-      <PropertyValueMappingEditor
-        v-model:property-id="selectedPropertyId"
-        v-model:value-mapping="selectedValue"
-        validation-path="qualifier"
-        @validation-changed="onValidationChanged"
-      />
     </div>
 
-    <!-- Empty State -->
-    <div
-      v-if="shouldShowEmptyState"
-      class="text-center py-8 border-2 border-dashed border-surface-200 rounded-lg bg-surface-25"
-      data-testid="qualifiers-empty-state"
-    >
-      <div class="space-y-3">
-        <div class="text-surface-400">
-          <i class="pi pi-tags text-3xl" />
-        </div>
-        <div class="space-y-1">
-          <h5 class="text-md font-medium text-surface-600">No qualifiers configured</h5>
-          <p class="text-sm text-surface-500">
-            Add qualifiers to provide additional context to this statement
-          </p>
-        </div>
-      </div>
-    </div>
+    <!-- Add/Edit Qualifier -->
+    <SingleQualifierEditor
+      v-if="isAddingQualifier"
+      :qualifier="editingQualifierIndex !== null ? qualifiers[editingQualifierIndex] : undefined"
+      :is-editing="editingQualifierIndex !== null"
+      @save="handleQualifierSave"
+      @cancel="cancelAddingQualifier"
+    />
   </div>
 </template>
diff --git a/frontend/src/features/wikibase-schema/components/ReferencesEditor.vue b/frontend/src/features/wikibase-schema/components/ReferencesEditor.vue
index e2ba7bb..7a31739 100644
--- a/frontend/src/features/wikibase-schema/components/ReferencesEditor.vue
+++ b/frontend/src/features/wikibase-schema/components/ReferencesEditor.vue
@@ -2,83 +2,50 @@
 // Props
 interface ReferencesEditorProps {
   statementId: UUID
-  references?: ReferenceSchemaMapping[]
-  availableColumns?: ColumnInfo[]
-  disabled?: boolean
+  references: ReferenceSchemaMapping[]
 }
 
-const props = withDefaults(defineProps<ReferencesEditorProps>(), {
-  references: () => [],
-  availableColumns: () => [],
-  disabled: false,
-})
+const props = defineProps<ReferencesEditorProps>()
 
-// Emits
-interface ReferencesEditorEmits {
-  'add-reference': [statementId: UUID, reference: ReferenceSchemaMapping]
-  'remove-reference': [statementId: UUID, referenceIndex: number]
-  'update-reference': [statementId: UUID, referenceIndex: number, reference: ReferenceSchemaMapping]
-  'add-snak-to-reference': [statementId: UUID, referenceIndex: number, snak: PropertyValueMap]
-  'remove-snak-from-reference': [statementId: UUID, referenceIndex: number, snakIndex: number]
-}
-
-const emit = defineEmits<ReferencesEditorEmits>()
+// Store
+const schemaStore = useSchemaStore()
 
-// Local state for adding new reference
+// Local state
 const isAddingReference = ref(false)
 const isAddingSnakToReference = ref<number | null>(null) // Index of reference we're adding a snak to
-const selectedPropertyId = ref('')
-const selectedValue = ref<ValueMapping | null>(null)
-const validationErrors = ref<string[]>([])
+const editingSnakInfo = ref<{ referenceIndex: number; snakIndex: number } | null>(null)
 
 // Computed properties
 const references = computed(() => props.references || [])
 
-const shouldShowEmptyState = computed(
-  () => references.value.length === 0 && !isAddingReference.value,
-)
-
-const { clearSelection } = usePropertySelection()
-
 // Methods
 const startAddingReference = () => {
   isAddingReference.value = true
   isAddingSnakToReference.value = null
-  clearSelection()
-  selectedPropertyId.value = ''
-  selectedValue.value = null
+  editingSnakInfo.value = null
 }
 
 const startAddingSnakToReference = (referenceIndex: number) => {
   isAddingSnakToReference.value = referenceIndex
   isAddingReference.value = false
-  clearSelection()
-  selectedPropertyId.value = ''
-  selectedValue.value = null
+  editingSnakInfo.value = null
 }
 
-const cancelAddingReference = () => {
+const startEditingSnak = (referenceIndex: number, snakIndex: number) => {
   isAddingReference.value = false
   isAddingSnakToReference.value = null
-  clearSelection()
-  selectedPropertyId.value = ''
-  selectedValue.value = null
+  editingSnakInfo.value = { referenceIndex, snakIndex }
 }
 
-const handleReferenceSubmit = () => {
-  if (!selectedPropertyId.value || !selectedValue.value) return
-
-  // Find the property by ID
-  const property = {
-    id: selectedPropertyId.value,
-    dataType: selectedValue.value.dataType,
-    label: '',
-  } as PropertyReference
+const cancelAddingReference = () => {
+  isAddingReference.value = false
+  isAddingSnakToReference.value = null
+  editingSnakInfo.value = null
+}
 
-  const snak: PropertyValueMap = {
-    property,
-    value: selectedValue.value,
-  }
+const handleSnakSave = (snak: PropertyValueMap) => {
+  const statement = schemaStore.statements.find((s: any) => s.id === props.statementId)
+  if (!statement) return
 
   if (isAddingReference.value) {
     // Create a new reference with the first snak
@@ -86,34 +53,102 @@ const handleReferenceSubmit = () => {
       id: crypto.randomUUID(),
       snaks: [snak],
     }
-    emit('add-reference', props.statementId, reference)
+    const updatedReferences = [...statement.references, reference]
+    schemaStore.updateStatement(
+      props.statementId,
+      statement.property,
+      statement.value,
+      statement.rank,
+      statement.qualifiers,
+      updatedReferences,
+    )
   } else if (isAddingSnakToReference.value !== null) {
     // Add snak to existing reference
-    emit('add-snak-to-reference', props.statementId, isAddingSnakToReference.value, snak)
+    const updatedReferences = [...statement.references]
+    const currentReference = updatedReferences[isAddingSnakToReference.value]
+    if (currentReference) {
+      const updatedReference: ReferenceSchemaMapping = {
+        id: currentReference.id || crypto.randomUUID(),
+        snaks: [...(currentReference.snaks || []), snak],
+      }
+      updatedReferences[isAddingSnakToReference.value] = updatedReference
+      schemaStore.updateStatement(
+        props.statementId,
+        statement.property,
+        statement.value,
+        statement.rank,
+        statement.qualifiers || [],
+        updatedReferences,
+      )
+    }
+  } else if (editingSnakInfo.value !== null) {
+    // Update existing snak
+    const updatedReferences = [...statement.references]
+    const currentReference = updatedReferences[editingSnakInfo.value.referenceIndex]
+    if (currentReference) {
+      const updatedReference: ReferenceSchemaMapping = {
+        id: currentReference.id,
+        snaks: currentReference.snaks.map((s, i) =>
+          i === editingSnakInfo.value!.snakIndex ? snak : s,
+        ),
+      }
+      updatedReferences[editingSnakInfo.value.referenceIndex] = updatedReference
+      schemaStore.updateStatement(
+        props.statementId,
+        statement.property,
+        statement.value,
+        statement.rank,
+        statement.qualifiers,
+        updatedReferences,
+      )
+    }
   }
 
   cancelAddingReference()
 }
 
 const removeReference = (referenceIndex: number) => {
-  emit('remove-reference', props.statementId, referenceIndex)
+  const statement = schemaStore.statements.find((s: any) => s.id === props.statementId)
+  if (statement) {
+    const updatedReferences = statement.references.filter(
+      (_: any, index: number) => index !== referenceIndex,
+    )
+    schemaStore.updateStatement(
+      props.statementId,
+      statement.property,
+      statement.value,
+      statement.rank,
+      statement.qualifiers,
+      updatedReferences,
+    )
+  }
 }
 
 const removeSnakFromReference = (referenceIndex: number, snakIndex: number) => {
-  emit('remove-snak-from-reference', props.statementId, referenceIndex, snakIndex)
-}
-
-const getValueTypeIcon = (valueType: string): string => {
-  const icons = {
-    column: 'pi pi-database',
-    constant: 'pi pi-tag',
-    expression: 'pi pi-code',
+  const statement = schemaStore.statements.find((s: any) => s.id === props.statementId)
+  if (statement && statement.references && statement.references[referenceIndex]) {
+    const updatedReferences = [...statement.references]
+    const currentReference = updatedReferences[referenceIndex]
+    if (currentReference) {
+      const updatedReference: ReferenceSchemaMapping = {
+        id: currentReference.id || crypto.randomUUID(),
+        snaks: (currentReference.snaks || []).filter(
+          (_: any, index: number) => index !== snakIndex,
+        ),
+      }
+      updatedReferences[referenceIndex] = updatedReference
+      schemaStore.updateStatement(
+        props.statementId,
+        statement.property,
+        statement.value,
+        statement.rank,
+        statement.qualifiers || [],
+        updatedReferences,
+      )
+    }
   }
-  return icons[valueType as keyof typeof icons] || 'pi pi-question'
 }
 
-const getReferenceNumber = (index: number): string => `R${index + 1}`
-
 const getPropertyDisplayText = (property: PropertyReference): string => {
   return property.label || property.id
 }
@@ -124,39 +159,31 @@ const getValueDisplayText = (value: ValueMapping): string => {
   }
   return typeof value.source === 'string' ? value.source : 'No mapping'
 }
-
-const getSnakNumber = (referenceIndex: number, snakIndex: number): string =>
-  `R${referenceIndex + 1}.${snakIndex + 1}`
-
-const onValidationChanged = (_: any, errors: string[]) => {
-  validationErrors.value = errors
-}
 </script>
 
 <template>
-  <div class="references-editor space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
+  <div class="references-editor">
+    <!-- Header with Add Button -->
+    <div class="flex items-center justify-between mb-3">
       <div class="flex items-center gap-2">
-        <i class="pi pi-bookmark text-surface-600" />
-        <h4 class="text-md font-medium text-surface-900">
+        <i class="pi pi-bookmark text-surface-600 text-sm" />
+        <span class="text-sm font-medium text-surface-900">
           References
           <span
             v-if="references.length > 0"
-            class="text-sm text-surface-500 font-normal"
+            class="text-xs text-surface-500 font-normal ml-1"
           >
             ({{ references.length }})
           </span>
-        </h4>
+        </span>
       </div>
 
       <Button
         v-if="!isAddingReference"
         icon="pi pi-plus"
-        label="Add Reference"
         size="small"
         severity="secondary"
-        :disabled="disabled"
+        text
         @click="startAddingReference"
       />
     </div>
@@ -164,182 +191,116 @@ const onValidationChanged = (_: any, errors: string[]) => {
     <!-- Existing References List -->
     <div
       v-if="references.length > 0"
-      class="space-y-4"
+      class="space-y-2"
       data-testid="references-list"
     >
       <!-- Individual References -->
       <div
         v-for="(reference, referenceIndex) in references"
         :key="`reference-${reference.id}`"
-        class="border-l-4 border-orange-200 pl-4 bg-gradient-to-r from-orange-25 to-transparent rounded-r-lg"
+        class="border border-surface-200 rounded bg-surface-50"
         data-testid="reference-item"
       >
-        <div class="space-y-3 py-3">
-          <!-- Reference Header -->
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2 text-sm font-medium text-orange-700">
-              <i class="pi pi-bookmark text-xs" />
-              <span>{{ getReferenceNumber(referenceIndex) }}</span>
-              <span class="text-xs text-surface-500 font-normal">
-                ({{ reference.snaks.length }}
-                {{ reference.snaks.length === 1 ? 'property' : 'properties' }})
+        <!-- Reference Header -->
+        <div class="flex items-center justify-between p-2 border-b border-surface-200 bg-orange-50">
+          <div class="flex items-center gap-2 text-sm font-medium text-orange-700">
+            <i class="pi pi-bookmark text-xs" />
+            <span>Reference {{ referenceIndex + 1 }}</span>
+            <span class="text-xs text-surface-500 font-normal">
+              ({{ reference.snaks.length }}
+              {{ reference.snaks.length === 1 ? 'property' : 'properties' }})
+            </span>
+          </div>
+
+          <div class="flex items-center gap-1">
+            <Button
+              v-tooltip="'Add property to this reference'"
+              icon="pi pi-plus"
+              size="small"
+              severity="secondary"
+              text
+              @click="startAddingSnakToReference(referenceIndex)"
+            />
+            <Button
+              v-tooltip="'Remove entire reference'"
+              icon="pi pi-trash"
+              size="small"
+              severity="danger"
+              text
+              data-testid="remove-reference-button"
+              @click="removeReference(referenceIndex)"
+            />
+          </div>
+        </div>
+
+        <!-- Reference Snaks (Property-Value Pairs) -->
+        <div class="p-2 space-y-1">
+          <div
+            v-for="(snak, snakIndex) in reference.snaks"
+            :key="`reference-${reference.id}-snak-${snakIndex}`"
+            class="flex items-center justify-between p-2 bg-white border border-surface-200 rounded text-sm hover:bg-surface-50 transition-colors"
+            data-testid="reference-snak"
+          >
+            <div class="flex items-center gap-2 flex-1">
+              <!-- Property Info -->
+              <Tag
+                :value="snak.property.id"
+                size="small"
+                severity="info"
+              />
+              <span class="font-medium text-surface-900">
+                {{ getPropertyDisplayText(snak.property) }}
               </span>
+
+              <!-- Relationship Arrow -->
+              <i class="pi pi-arrow-right text-surface-400 text-xs" />
+
+              <!-- Value Info -->
+              <Tag
+                :value="getValueDisplayText(snak.value)"
+                size="small"
+                severity="secondary"
+              />
             </div>
 
+            <!-- Snak Actions -->
             <div class="flex items-center gap-1">
               <Button
-                v-tooltip="'Add property to this reference'"
-                icon="pi pi-plus"
+                v-tooltip="'Edit this property'"
+                icon="pi pi-pencil"
                 size="small"
                 severity="secondary"
                 text
-                :disabled="disabled"
-                @click="startAddingSnakToReference(referenceIndex)"
+                data-testid="edit-snak-button"
+                @click="startEditingSnak(referenceIndex, snakIndex)"
               />
               <Button
-                v-tooltip="'Remove entire reference'"
-                icon="pi pi-trash"
+                v-tooltip="'Remove this property from reference'"
+                icon="pi pi-times"
                 size="small"
                 severity="danger"
                 text
-                :disabled="disabled"
-                data-testid="remove-reference-button"
-                @click="removeReference(referenceIndex)"
+                data-testid="remove-snak-button"
+                @click="removeSnakFromReference(referenceIndex, snakIndex)"
               />
             </div>
           </div>
-
-          <!-- Reference Snaks (Property-Value Pairs) -->
-          <div class="space-y-2 ml-4">
-            <div
-              v-for="(snak, snakIndex) in reference.snaks"
-              :key="`snak-${referenceIndex}-${snakIndex}`"
-              class="flex items-center justify-between p-3 bg-surface-50 border border-surface-200 rounded-lg shadow-sm hover:shadow-md transition-shadow"
-              data-testid="reference-snak"
-            >
-              <div class="flex items-center gap-3 flex-1">
-                <!-- Snak Indicator -->
-                <div class="flex items-center gap-1 text-orange-600">
-                  <i class="pi pi-angle-right text-xs" />
-                  <span class="text-xs font-medium">
-                    {{ getSnakNumber(referenceIndex, snakIndex) }}
-                  </span>
-                </div>
-
-                <!-- Property Info -->
-                <div
-                  class="flex items-center gap-2"
-                  data-testid="snak-property"
-                >
-                  <Tag
-                    :value="snak.property.id"
-                    size="small"
-                    severity="info"
-                  />
-                  <span class="font-medium text-surface-900">
-                    {{ getPropertyDisplayText(snak.property) }}
-                  </span>
-                </div>
-
-                <!-- Relationship Arrow -->
-                <i class="pi pi-arrow-right text-surface-400 text-sm" />
-
-                <!-- Value Info -->
-                <div
-                  class="flex items-center gap-2"
-                  data-testid="snak-value"
-                >
-                  <i
-                    :class="getValueTypeIcon(snak.value.type)"
-                    class="text-surface-600 text-sm"
-                  />
-                  <Tag
-                    :value="getValueDisplayText(snak.value)"
-                    size="small"
-                    severity="secondary"
-                  />
-                  <span class="text-xs text-surface-500">
-                    {{ snak.value.dataType }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- Snak Actions -->
-              <div class="flex items-center gap-1">
-                <Button
-                  v-tooltip="'Remove this property from reference'"
-                  icon="pi pi-times"
-                  size="small"
-                  severity="danger"
-                  text
-                  :disabled="disabled"
-                  data-testid="remove-snak-button"
-                  @click="removeSnakFromReference(referenceIndex, snakIndex)"
-                />
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
 
-    <!-- Add Reference/Snak Form -->
-    <div
-      v-if="isAddingReference || isAddingSnakToReference !== null"
-      class="border border-surface-200 rounded-lg p-4 bg-surface-25"
-    >
-      <div class="flex items-center justify-between mb-4">
-        <h5 class="font-medium text-surface-900">
-          {{
-            isAddingReference
-              ? 'Add New Reference'
-              : `Add Property to ${getReferenceNumber(isAddingSnakToReference!)}`
-          }}
-        </h5>
-        <!-- Action buttons -->
-        <div class="flex justify-end gap-2 mt-4">
-          <Button
-            label="Cancel"
-            severity="secondary"
-            outlined
-            @click="cancelAddingReference"
-          />
-          <Button
-            :label="isAddingReference ? 'Add Reference' : 'Add Property'"
-            :disabled="!selectedPropertyId || !selectedValue || validationErrors.length > 0"
-            @click="handleReferenceSubmit"
-          />
-        </div>
-      </div>
-
-      <PropertyValueMappingEditor
-        v-model:property-id="selectedPropertyId"
-        v-model:value-mapping="selectedValue"
-        validation-path="reference"
-        @validation-changed="onValidationChanged"
-      />
-    </div>
-
-    <!-- Empty State -->
-    <div
-      v-if="shouldShowEmptyState"
-      class="text-center py-8 border-2 border-dashed border-surface-200 rounded-lg bg-surface-25"
-      data-testid="references-empty-state"
-    >
-      <div class="space-y-3">
-        <div class="text-surface-400">
-          <i class="pi pi-bookmark text-3xl" />
-        </div>
-        <div class="space-y-1">
-          <h5 class="text-md font-medium text-surface-600">No references configured</h5>
-          <p class="text-sm text-surface-500">
-            Add references to cite sources and provide provenance for this statement
-          </p>
-          <p class="text-xs text-surface-400 mt-2">
-            Each reference can contain multiple property-value pairs
-          </p>
-        </div>
-      </div>
-    </div>
+    <!-- Add/Edit Reference -->
+    <SingleReferenceEditor
+      v-if="isAddingReference || isAddingSnakToReference !== null || editingSnakInfo !== null"
+      :existing-snak="
+        editingSnakInfo
+          ? references[editingSnakInfo.referenceIndex]?.snaks[editingSnakInfo.snakIndex] || null
+          : null
+      "
+      :is-editing="editingSnakInfo !== null"
+      :is-adding-to-reference="isAddingSnakToReference !== null"
+      @save="handleSnakSave"
+      @cancel="cancelAddingReference"
+    />
   </div>
 </template>
diff --git a/frontend/src/features/wikibase-schema/components/SingleQualifierEditor.vue b/frontend/src/features/wikibase-schema/components/SingleQualifierEditor.vue
new file mode 100644
index 0000000..362ce7d
--- /dev/null
+++ b/frontend/src/features/wikibase-schema/components/SingleQualifierEditor.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+// Props
+interface Props {
+  qualifier?: PropertyValueMap
+  isEditing?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  qualifier: undefined,
+  isEditing: false,
+})
+
+// Emits
+interface Emits {
+  save: [qualifier: PropertyValueMap]
+  cancel: []
+}
+
+const emit = defineEmits<Emits>()
+
+// Local state
+const selectedPropertyId = ref('')
+const selectedValue = ref<ValueMapping | null>(null)
+const validationErrors = ref<string[]>([])
+
+// Initialize form with existing qualifier data if editing
+watchEffect(() => {
+  if (props.isEditing && props.qualifier) {
+    selectedPropertyId.value = props.qualifier.property.id
+    selectedValue.value = { ...props.qualifier.value }
+  } else {
+    selectedPropertyId.value = ''
+    selectedValue.value = null
+  }
+})
+
+// Methods
+const handleSubmit = () => {
+  if (!selectedPropertyId.value || !selectedValue.value) return
+
+  const qualifier: PropertyValueMap = {
+    property: {
+      id: selectedPropertyId.value,
+      dataType: selectedValue.value.dataType,
+    } as PropertyReference,
+    value: selectedValue.value,
+  }
+
+  emit('save', qualifier)
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const onValidationChanged = (_: any, errors: string[]) => {
+  validationErrors.value = errors
+}
+
+// Computed
+const isFormValid = computed(() => {
+  return selectedPropertyId.value && selectedValue.value && validationErrors.value.length === 0
+})
+</script>
+
+<template>
+  <div class="single-qualifier-editor border border-surface-200 rounded-lg p-4 bg-surface-25">
+    <div class="flex items-center justify-between mb-4">
+      <h5 class="font-medium text-surface-900">
+        {{ isEditing ? 'Edit Qualifier' : 'Add New Qualifier' }}
+      </h5>
+
+      <div class="flex justify-end gap-2">
+        <Button
+          label="Cancel"
+          severity="secondary"
+          size="small"
+          @click="handleCancel"
+        />
+        <Button
+          :label="isEditing ? 'Update Qualifier' : 'Add Qualifier'"
+          size="small"
+          :disabled="!isFormValid"
+          @click="handleSubmit"
+        />
+      </div>
+    </div>
+
+    <!-- Property-Value Mapping Editor -->
+    <PropertyValueMappingEditor
+      v-model:property-id="selectedPropertyId"
+      v-model:value-mapping="selectedValue"
+      validation-path="qualifier"
+      @validation-changed="onValidationChanged"
+    />
+  </div>
+</template>
diff --git a/frontend/src/features/wikibase-schema/components/SingleReferenceEditor.vue b/frontend/src/features/wikibase-schema/components/SingleReferenceEditor.vue
new file mode 100644
index 0000000..5f1ab22
--- /dev/null
+++ b/frontend/src/features/wikibase-schema/components/SingleReferenceEditor.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+// Props
+interface Props {
+  snak?: PropertyValueMap
+  isEditing?: boolean
+  isAddingToReference?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  snak: undefined,
+  isEditing: false,
+  isAddingToReference: false,
+})
+
+// Emits
+interface Emits {
+  save: [snak: PropertyValueMap]
+  cancel: []
+}
+
+const emit = defineEmits<Emits>()
+
+// Local state
+const selectedPropertyId = ref('')
+const selectedValue = ref<ValueMapping | null>(null)
+const validationErrors = ref<string[]>([])
+
+const { clearSelection } = usePropertySelection()
+
+// Initialize form with existing snak data if editing
+watchEffect(() => {
+  if (props.isEditing && props.snak) {
+    selectedPropertyId.value = props.snak.property.id
+    selectedValue.value = { ...props.snak.value }
+  } else {
+    clearSelection()
+    selectedPropertyId.value = ''
+    selectedValue.value = null
+  }
+})
+
+// Methods
+const handleSubmit = () => {
+  if (!selectedPropertyId.value || !selectedValue.value) return
+
+  const snak: PropertyValueMap = {
+    property: {
+      id: selectedPropertyId.value,
+      dataType: selectedValue.value.dataType,
+    } as PropertyReference,
+    value: selectedValue.value,
+  }
+
+  emit('save', snak)
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const onValidationChanged = (_: any, errors: string[]) => {
+  validationErrors.value = errors
+}
+
+// Computed
+const isFormValid = computed(() => {
+  return selectedPropertyId.value && selectedValue.value && validationErrors.value.length === 0
+})
+
+const formTitle = computed(() => {
+  if (props.isEditing) return 'Edit Reference Property'
+  if (props.isAddingToReference) return 'Add Property to Reference'
+  return 'Add New Reference'
+})
+
+const submitButtonLabel = computed(() => {
+  if (props.isEditing) return 'Update Property'
+  if (props.isAddingToReference) return 'Add Property'
+  return 'Add Reference'
+})
+</script>
+
+<template>
+  <div class="single-reference-editor border border-surface-200 rounded-lg p-4 bg-surface-25">
+    <div class="flex items-center justify-between mb-4">
+      <h5 class="font-medium text-surface-900">
+        {{ formTitle }}
+      </h5>
+
+      <div class="flex justify-end gap-2">
+        <Button
+          label="Cancel"
+          severity="secondary"
+          size="small"
+          @click="handleCancel"
+        />
+        <Button
+          :label="submitButtonLabel"
+          size="small"
+          :disabled="!isFormValid"
+          @click="handleSubmit"
+        />
+      </div>
+    </div>
+
+    <!-- Property-Value Mapping Editor -->
+    <PropertyValueMappingEditor
+      v-model:property-id="selectedPropertyId"
+      v-model:value-mapping="selectedValue"
+      validation-path="reference"
+      @validation-changed="onValidationChanged"
+    />
+  </div>
+</template>
diff --git a/frontend/src/features/wikibase-schema/components/StatementEditor.vue b/frontend/src/features/wikibase-schema/components/StatementEditor.vue
index 8a7bfb8..b872877 100644
--- a/frontend/src/features/wikibase-schema/components/StatementEditor.vue
+++ b/frontend/src/features/wikibase-schema/components/StatementEditor.vue
@@ -1,353 +1,276 @@
 <script setup lang="ts">
 // Props
-interface StatementEditorProps {
-  modelValue?: {
-    property: PropertyReference | null
-    value: ValueMapping
-    rank: StatementRank
-    qualifiers?: PropertyValueMap[]
-    references?: ReferenceSchemaMapping[]
-  }
-  availableColumns?: ColumnInfo[]
-  disabled?: boolean
+interface Props {
+  statement?: StatementSchemaMapping
+  index?: number
+  canMoveUp?: boolean
+  canMoveDown?: boolean
+  isNewStatement?: boolean
 }
 
-const props = withDefaults(defineProps<StatementEditorProps>(), {
-  modelValue: () => ({
-    property: null,
-    value: {
-      type: 'column',
-      source: {
-        columnName: '',
-        dataType: 'VARCHAR',
-      },
-      dataType: 'string',
-    },
-    rank: 'normal',
-    qualifiers: [],
-    references: [],
-  }),
-  availableColumns: () => [],
-  disabled: false,
+const props = withDefaults(defineProps<Props>(), {
+  isNewStatement: false,
+  index: 0,
+  canMoveUp: false,
+  canMoveDown: false,
 })
 
-// Emits
-interface StatementEditorEmits {
-  'update:modelValue': [
-    value: {
-      property: PropertyReference | null
-      value: ValueMapping
-      rank: StatementRank
-      qualifiers?: PropertyValueMap[]
-      references?: ReferenceSchemaMapping[]
-    },
-  ]
-  save: []
-  cancel: []
-}
-
-const emit = defineEmits<StatementEditorEmits>()
-
-// Composables
-const {
-  localStatement,
-  rankOptions,
-  isValidStatement,
-  handleRankChange,
-  handleColumnDrop,
-  initializeStatement,
-  setAvailableColumns,
-} = useStatementEditor()
-
-const { setOnColumnDrop } = useStatementDropZone()
-
-// Set up the column drop callback
-setOnColumnDrop((_column) => {
-  handleColumnDrop(_column)
-  emitUpdate()
-})
-
-// Generate a temporary statement ID for qualifier management
-const tempStatementId = ref(crypto.randomUUID())
-
-// Local qualifiers state
-const localQualifiers = ref<PropertyValueMap[]>(props.modelValue?.qualifiers || [])
-
-// Local references state
-const localReferences = ref<ReferenceSchemaMapping[]>(props.modelValue?.references || [])
-
-// Local state for PropertyValueMappingEditor
-const localPropertyId = ref(props.modelValue?.property?.id || '')
-const localValueMapping = ref<ValueMapping>(
-  props.modelValue?.value || {
-    type: 'column',
+const emit = defineEmits<{
+  'move-up': []
+  'move-down': []
+  'validation-changed': [isValid: boolean, errors: string[]]
+  'save-new-statement': [statement: Omit<StatementSchemaMapping, 'id'>]
+  'cancel-new-statement': []
+  'add-statement': []
+}>()
+
+// Store
+const schemaStore = useSchemaStore()
+
+// Local state for new statements
+const localStatement = ref<{
+  property: PropertyReference | null
+  value: ValueMapping
+  rank: StatementRank
+  qualifiers: PropertyValueMap[]
+  references: ReferenceSchemaMapping[]
+}>({
+  property: null,
+  value: {
+    type: 'column' as const,
     source: {
       columnName: '',
-      dataType: 'VARCHAR',
+      dataType: 'VARCHAR' as const,
     },
-    dataType: 'string',
-  },
-)
-
-// Validation state
-const validationErrors = ref<string[]>([])
-
-// Methods
-const emitUpdate = () => {
-  emit('update:modelValue', {
-    ...localStatement.value,
-    qualifiers: localQualifiers.value,
-    references: localReferences.value,
-  })
-}
+    dataType: 'string' as const,
+  } as ValueMapping,
+  rank: 'normal' as StatementRank,
+  qualifiers: [] as PropertyValueMap[],
+  references: [] as ReferenceSchemaMapping[],
+})
 
-const handleSave = () => {
-  if (isValidStatement.value && validationErrors.value.length === 0) {
-    emit('save')
-  }
-}
+// Computed for current statement data
+const currentStatement = computed(() => {
+  return props.isNewStatement ? localStatement.value : props.statement!
+})
 
-const handleCancel = () => {
-  emit('cancel')
-}
+// Validation
+const isValidStatement = computed(() => {
+  return currentStatement.value.property !== null
+})
 
+// Event handlers
 const handlePropertyChanged = (property: PropertyReference | null) => {
-  if (property) {
+  if (props.isNewStatement) {
     localStatement.value.property = property
-    localPropertyId.value = property.id
-  } else {
-    localStatement.value.property = null
-    localPropertyId.value = ''
+  } else if (property && props.statement) {
+    schemaStore.updateStatement(
+      props.statement.id as UUID,
+      property,
+      props.statement.value,
+      props.statement.rank,
+      props.statement.qualifiers,
+      props.statement.references,
+    )
   }
-  emitUpdate()
 }
 
-const handleValueChanged = (valueMapping: ValueMapping) => {
-  localStatement.value.value = { ...valueMapping }
-  localValueMapping.value = { ...valueMapping }
-  emitUpdate()
-}
-
-const handleRankChangeWithEmit = (newRank: StatementRank) => {
-  handleRankChange(newRank)
-  emitUpdate()
-}
-
-// Qualifier handling methods
-// @ts-expect-error ToDo Fix
-const handleAddQualifier = (statementId: UUID, qualifier: PropertyValueMap) => {
-  localQualifiers.value.push(qualifier)
-  emitUpdate()
-}
-
-// @ts-expect-error ToDo Fix
-const handleRemoveQualifier = (statementId: UUID, qualifierIndex: number) => {
-  if (qualifierIndex >= 0 && qualifierIndex < localQualifiers.value.length) {
-    localQualifiers.value.splice(qualifierIndex, 1)
-    emitUpdate()
+const handleValueChanged = (value: ValueMapping) => {
+  if (props.isNewStatement) {
+    localStatement.value.value = value
+  } else if (props.statement) {
+    schemaStore.updateStatement(
+      props.statement.id as UUID,
+      props.statement.property,
+      value,
+      props.statement.rank,
+      props.statement.qualifiers,
+      props.statement.references,
+    )
   }
 }
 
-const handleUpdateQualifier = (
-  // @ts-expect-error ToDo Fix
-  statementId: UUID,
-  qualifierIndex: number,
-  qualifier: PropertyValueMap,
-) => {
-  if (qualifierIndex >= 0 && qualifierIndex < localQualifiers.value.length) {
-    localQualifiers.value[qualifierIndex] = qualifier
-    emitUpdate()
+const handleRankChanged = (rank: StatementRank) => {
+  if (props.isNewStatement) {
+    localStatement.value.rank = rank
+  } else if (props.statement) {
+    schemaStore.updateStatement(
+      props.statement.id as UUID,
+      props.statement.property,
+      props.statement.value,
+      rank,
+      props.statement.qualifiers,
+      props.statement.references,
+    )
   }
 }
 
-// Reference handling methods
-// @ts-expect-error ToDo Fix
-const handleAddReference = (statementId: UUID, reference: ReferenceSchemaMapping) => {
-  localReferences.value.push(reference)
-  emitUpdate()
-}
-
-// @ts-expect-error ToDo Fix
-const handleRemoveReference = (statementId: UUID, referenceIndex: number) => {
-  if (referenceIndex >= 0 && referenceIndex < localReferences.value.length) {
-    localReferences.value.splice(referenceIndex, 1)
-    emitUpdate()
+const handleQualifiersChanged = (qualifiers: PropertyValueMap[]) => {
+  if (props.isNewStatement) {
+    localStatement.value.qualifiers = qualifiers
+  } else if (props.statement) {
+    schemaStore.updateStatement(
+      props.statement.id as UUID,
+      props.statement.property,
+      props.statement.value,
+      props.statement.rank,
+      qualifiers,
+      props.statement.references,
+    )
   }
 }
 
-const handleUpdateReference = (
-  // @ts-expect-error ToDo Fix
-  statementId: UUID,
-  referenceIndex: number,
-  reference: ReferenceSchemaMapping,
-) => {
-  if (referenceIndex >= 0 && referenceIndex < localReferences.value.length) {
-    localReferences.value[referenceIndex] = reference
-    emitUpdate()
+const handleReferencesChanged = (references: ReferenceSchemaMapping[]) => {
+  if (props.isNewStatement) {
+    localStatement.value.references = references
+  } else if (props.statement) {
+    schemaStore.updateStatement(
+      props.statement.id as UUID,
+      props.statement.property,
+      props.statement.value,
+      props.statement.rank,
+      props.statement.qualifiers,
+      references,
+    )
   }
 }
 
-const handleAddSnakToReference = (
-  // @ts-expect-error ToDo Fix
-  statementId: UUID,
-  referenceIndex: number,
-  snak: PropertyValueMap,
-) => {
-  if (referenceIndex >= 0 && referenceIndex < localReferences.value.length) {
-    const reference = localReferences.value[referenceIndex]
-    if (reference) {
-      reference.snaks.push(snak)
-      emitUpdate()
-    }
+const handleRemoveStatement = () => {
+  if (props.statement) {
+    schemaStore.removeStatement(props.statement.id as UUID)
   }
 }
 
-const handleRemoveSnakFromReference = (
-  // @ts-expect-error ToDo Fix
-  statementId: UUID,
-  referenceIndex: number,
-  snakIndex: number,
-) => {
-  const reference = localReferences.value[referenceIndex]
-  if (
-    referenceIndex >= 0 &&
-    referenceIndex < localReferences.value.length &&
-    reference &&
-    snakIndex >= 0 &&
-    snakIndex < reference.snaks.length
-  ) {
-    reference.snaks.splice(snakIndex, 1)
-    emitUpdate()
+const handleSaveNewStatement = () => {
+  if (props.isNewStatement && isValidStatement.value && localStatement.value.property) {
+    emit('save-new-statement', {
+      property: localStatement.value.property,
+      value: localStatement.value.value,
+      rank: localStatement.value.rank,
+      qualifiers: localStatement.value.qualifiers,
+      references: localStatement.value.references,
+    })
   }
 }
 
-// Watch for external changes
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue) {
-      initializeStatement(newValue)
-      // Update local state for PropertyValueMappingEditor
-      localPropertyId.value = newValue.property?.id || ''
-      localValueMapping.value = { ...newValue.value }
-    }
-  },
-  { deep: true, immediate: true },
-)
-
-// Watch for available columns changes
-watch(
-  () => props.availableColumns,
-  (newColumns) => {
-    setAvailableColumns(newColumns)
-  },
-  { deep: true, immediate: true },
-)
-
-// Watch for qualifiers changes
-watch(
-  () => props.modelValue?.qualifiers,
-  (newQualifiers) => {
-    localQualifiers.value = newQualifiers || []
-  },
-  { deep: true, immediate: true },
-)
-
-// Watch for references changes
-watch(
-  () => props.modelValue?.references,
-  (newReferences) => {
-    localReferences.value = newReferences || []
-  },
-  { deep: true, immediate: true },
-)
-
-const onValidationChanged = (_: any, errors: string[]) => {
-  validationErrors.value = errors
+const handleCancelNewStatement = () => {
+  if (props.isNewStatement) {
+    emit('cancel-new-statement')
+  }
 }
 </script>
 
 <template>
-  <div class="statement-editor space-y-6 p-6 border border-surface-200 rounded-lg bg-surface-50">
+  <div
+    class="statement-editor space-y-4 p-4 border border-surface-200 rounded-lg"
+    :class="index % 2 === 0 ? 'bg-white' : 'bg-slate-50'"
+  >
     <!-- Header -->
     <div class="flex items-center justify-between">
-      <h4 class="text-lg font-semibold text-surface-900">Configure Statement</h4>
       <div class="flex items-center gap-2">
+        <!-- Move Up -->
         <Button
-          label="Cancel"
+          v-if="canMoveUp"
+          v-tooltip="'Move up'"
+          icon="pi pi-chevron-up"
+          size="small"
           severity="secondary"
+          text
+          @click="$emit('move-up')"
+        />
+
+        <!-- Move Down -->
+        <Button
+          v-if="canMoveDown"
+          v-tooltip="'Move down'"
+          icon="pi pi-chevron-down"
           size="small"
-          @click="handleCancel"
+          severity="secondary"
+          text
+          @click="$emit('move-down')"
         />
+
+        <!-- Remove -->
         <Button
-          label="Save"
-          :disabled="!isValidStatement || validationErrors.length > 0"
+          v-tooltip="'Remove statement'"
+          icon="pi pi-trash"
           size="small"
-          @click="handleSave"
+          severity="danger"
+          text
+          @click="handleRemoveStatement"
         />
       </div>
     </div>
 
-    <!-- Property-Value Mapping -->
-    <PropertyValueMappingEditor
-      v-model:property-id="localPropertyId"
-      v-model:value-mapping="localValueMapping"
-      validation-path="statement"
-      @property-changed="handlePropertyChanged"
-      @value-changed="handleValueChanged"
-      @validation-changed="onValidationChanged"
-    />
+    <!-- Property and Value Layout -->
+    <div class="flex gap-6">
+      <!-- Property Selection (Left) -->
+      <div class="flex-0 space-y-2">
+        <label class="block text-sm font-medium text-surface-700">
+          Property
+          <span class="text-red-500">*</span>
+        </label>
+        <PropertySelector
+          :model-value="currentStatement.property"
+          placeholder="Search for a property..."
+          @update="handlePropertyChanged"
+        />
+        <!-- Data Type Display -->
+        <div class="flex items-center gap-2 text-sm">
+          <i class="pi pi-info-circle" />
+          <span class="text-surface-700 font-medium">
+            {{ currentStatement.property?.dataType }}
+          </span>
+        </div>
+      </div>
 
-    <!-- Statement Rank -->
-    <div class="space-y-2">
-      <label class="block text-sm font-medium text-surface-700">Statement Rank</label>
-      <div class="flex gap-2">
-        <Button
-          v-for="option in rankOptions"
-          :key="option.value"
-          :label="option.label"
-          :icon="option.icon"
-          :severity="localStatement.rank === option.value ? 'primary' : 'secondary'"
-          size="small"
-          @click="handleRankChangeWithEmit(option.value as StatementRank)"
+      <!-- Value Configuration with Rank (Right) -->
+      <div
+        v-if="currentStatement.property"
+        class="flex-1 space-y-4"
+      >
+        <ClaimEditor
+          :value-mapping="currentStatement.value"
+          :property="currentStatement.property"
+          :rank="currentStatement.rank"
+          :statement-id="!isNewStatement ? (statement!.id as UUID) : undefined"
+          :statement-index="(index || 0) + 1"
+          :qualifiers="currentStatement.qualifiers || []"
+          :references="currentStatement.references || []"
+          @value-changed="handleValueChanged"
+          @rank-changed="handleRankChanged"
+          @qualifiers-changed="handleQualifiersChanged"
+          @references-changed="handleReferencesChanged"
         />
+
+        <!-- Add New Statement Button -->
+        <div v-if="!isNewStatement">
+          <Button
+            label="Add New Statement"
+            icon="pi pi-plus"
+            severity="secondary"
+            outlined
+            @click="$emit('add-statement')"
+          />
+        </div>
       </div>
     </div>
 
-    <!-- Qualifiers Section -->
-    <div class="border-t border-surface-200 pt-6">
-      <QualifiersEditor
-        :statement-id="tempStatementId"
-        :qualifiers="localQualifiers"
-        :available-columns="availableColumns"
-        :disabled="disabled"
-        @add-qualifier="handleAddQualifier"
-        @remove-qualifier="handleRemoveQualifier"
-        @update-qualifier="handleUpdateQualifier"
+    <!-- New Statement Actions -->
+    <div
+      v-if="isNewStatement"
+      class="flex justify-end gap-2 pt-4 border-t border-surface-200"
+    >
+      <Button
+        label="Cancel"
+        severity="secondary"
+        @click="handleCancelNewStatement"
       />
-    </div>
-
-    <!-- References Section -->
-    <div class="border-t border-surface-200 pt-6">
-      <ReferencesEditor
-        :statement-id="tempStatementId"
-        :references="localReferences"
-        :available-columns="availableColumns"
-        :disabled="disabled"
-        @add-reference="handleAddReference"
-        @remove-reference="handleRemoveReference"
-        @update-reference="handleUpdateReference"
-        @add-snak-to-reference="handleAddSnakToReference"
-        @remove-snak-from-reference="handleRemoveSnakFromReference"
+      <Button
+        label="Save Statement"
+        :disabled="!isValidStatement"
+        @click="handleSaveNewStatement"
       />
     </div>
-
-    <!-- Preview -->
-    <StatementPreview
-      v-if="isValidStatement"
-      :statement="localStatement"
-      :qualifiers="localQualifiers"
-      :references="localReferences"
-    />
   </div>
 </template>
diff --git a/frontend/src/features/wikibase-schema/components/StatementManager.vue b/frontend/src/features/wikibase-schema/components/StatementManager.vue
new file mode 100644
index 0000000..0dedfb7
--- /dev/null
+++ b/frontend/src/features/wikibase-schema/components/StatementManager.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// Store
+const schemaStore = useSchemaStore()
+
+// State for new statement creation
+const isAddingStatement = ref(false)
+
+// Computed properties
+const statements = computed(() => schemaStore.statements)
+
+// Methods
+const handleAddStatement = () => {
+  isAddingStatement.value = true
+}
+
+const handleReorderStatements = (fromIndex: number, toIndex: number) => {
+  const statementsCopy = [...schemaStore.statements]
+  const [movedStatement] = statementsCopy.splice(fromIndex, 1)
+
+  if (movedStatement) {
+    statementsCopy.splice(toIndex, 0, movedStatement)
+
+    // Update the statements array in the store
+    schemaStore.statements.splice(0, schemaStore.statements.length, ...statementsCopy)
+    schemaStore.markDirty()
+  }
+}
+
+const handleSaveNewStatement = (statement: Omit<StatementSchemaMapping, 'id'>) => {
+  schemaStore.addStatement(
+    statement.property,
+    statement.value,
+    statement.rank,
+    statement.qualifiers,
+    statement.references,
+  )
+  isAddingStatement.value = false
+}
+
+const handleCancelNewStatement = () => {
+  isAddingStatement.value = false
+}
+</script>
+
+<template>
+  <div class="statements-list space-y-4">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <i class="pi pi-list text-surface-600" />
+        <h4 class="text-md font-medium text-surface-900">
+          Statements
+          <span
+            v-if="statements.length > 0"
+            class="text-sm text-surface-500 font-normal"
+          >
+            ({{ statements.length }})
+          </span>
+        </h4>
+      </div>
+
+      <Button
+        icon="pi pi-plus"
+        label="Add Statement"
+        size="small"
+        severity="primary"
+        @click="handleAddStatement"
+      />
+    </div>
+
+    <!-- Add New Statement Editor -->
+    <div
+      v-if="isAddingStatement"
+      class="statement-editor p-4 border border-blue-200 rounded-lg bg-blue-50 shadow-sm"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <h4 class="text-lg font-semibold text-surface-900">Add New Statement</h4>
+      </div>
+
+      <StatementEditor
+        :is-new-statement="true"
+        @save-new-statement="handleSaveNewStatement"
+        @cancel-new-statement="handleCancelNewStatement"
+      />
+    </div>
+
+    <!-- Statements List -->
+    <div
+      v-if="statements.length > 0"
+      class="space-y-4"
+    >
+      <StatementEditor
+        v-for="(statement, index) in statements"
+        :key="statement.id"
+        :statement="statement"
+        :index="index"
+        :can-move-up="index > 0"
+        :can-move-down="index < statements.length - 1"
+        @move-up="handleReorderStatements(index, index - 1)"
+        @move-down="handleReorderStatements(index, index + 1)"
+      />
+    </div>
+
+    <!-- Empty State -->
+    <div
+      v-if="statements.length === 0 && !isAddingStatement"
+      class="text-center py-12 border-2 border-dashed border-slate-300 rounded-lg bg-slate-100"
+    >
+      <div class="space-y-3">
+        <div class="text-surface-400">
+          <i class="pi pi-list text-4xl" />
+        </div>
+        <div class="space-y-1">
+          <h4 class="text-lg font-medium text-surface-600">No statements configured</h4>
+          <p class="text-surface-500">Add properties and values to define your item structure</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/features/wikibase-schema/components/StatementPreview.vue b/frontend/src/features/wikibase-schema/components/StatementPreview.vue
deleted file mode 100644
index 0c04673..0000000
--- a/frontend/src/features/wikibase-schema/components/StatementPreview.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-// Props
-interface StatementPreviewProps {
-  statement: {
-    property: PropertyReference | null
-    value: ValueMapping
-    rank: StatementRank
-  }
-  qualifiers?: PropertyValueMap[]
-  references?: ReferenceSchemaMapping[]
-}
-
-withDefaults(defineProps<StatementPreviewProps>(), {
-  qualifiers: () => [],
-  references: () => [],
-})
-
-// Rank options for severity mapping
-const rankOptions = [
-  { value: 'preferred', severity: 'success' },
-  { value: 'normal', severity: 'info' },
-  { value: 'deprecated', severity: 'warn' },
-]
-</script>
-
-<template>
-  <div class="border-t border-surface-200 pt-4">
-    <h5 class="text-sm font-medium text-surface-700 mb-2">Preview</h5>
-    <div class="bg-white border border-surface-200 rounded p-3 text-sm">
-      <div class="flex items-center gap-2 mb-1">
-        <Tag
-          :value="statement.property?.id"
-          size="small"
-          severity="info"
-        />
-        <span class="font-medium">
-          {{ statement.property?.label || statement.property?.id }}
-        </span>
-      </div>
-      <div class="flex items-center gap-2 text-surface-600 ml-4">
-        <i class="pi pi-arrow-right text-xs" />
-        <Tag
-          :value="
-            statement.value.type === 'column'
-              ? statement.value.source.columnName
-              : statement.value.source
-          "
-          size="small"
-          severity="secondary"
-        />
-        <span class="text-xs">{{ statement.value.dataType }}</span>
-        <Tag
-          :value="statement.rank"
-          :severity="rankOptions.find((r) => r.value === statement.rank)?.severity"
-          size="small"
-        />
-      </div>
-
-      <!-- Qualifiers Preview -->
-      <div
-        v-if="qualifiers.length > 0"
-        class="ml-8 mt-3 border-l-2 border-primary-200 pl-3 bg-gradient-to-r from-primary-25 to-transparent rounded-r"
-        data-testid="qualifiers-preview"
-      >
-        <div class="text-xs text-primary-700 font-medium mb-2 flex items-center gap-1">
-          <i class="pi pi-tags text-xs" />
-          <span>Qualifiers ({{ qualifiers.length }}):</span>
-        </div>
-        <div class="space-y-2">
-          <div
-            v-for="(qualifier, index) in qualifiers"
-            :key="`preview-qualifier-${index}`"
-            class="flex items-center gap-2 text-xs text-surface-600 p-2 bg-white/50 rounded border border-primary-100"
-            data-testid="qualifier-preview-item"
-          >
-            <div class="flex items-center gap-1 text-primary-600">
-              <i class="pi pi-angle-right text-xs" />
-              <span class="font-medium">Q{{ index + 1 }}</span>
-            </div>
-            <span class="font-medium">
-              {{ qualifier.property.label || qualifier.property.id }}:
-            </span>
-            <Tag
-              :value="
-                qualifier.value.type === 'column'
-                  ? qualifier.value.source.columnName
-                  : qualifier.value.source
-              "
-              size="small"
-              severity="secondary"
-            />
-            <span class="text-surface-400">{{ qualifier.value.dataType }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- References Preview -->
-      <div
-        v-if="references.length > 0"
-        class="ml-8 mt-3 border-l-2 border-orange-200 pl-3 bg-gradient-to-r from-orange-25 to-transparent rounded-r"
-        data-testid="references-preview"
-      >
-        <div class="text-xs text-orange-700 font-medium mb-2 flex items-center gap-1">
-          <i class="pi pi-bookmark text-xs" />
-          <span>References ({{ references.length }}):</span>
-        </div>
-        <div class="space-y-3">
-          <div
-            v-for="(reference, refIndex) in references"
-            :key="`preview-reference-${reference.id}`"
-            class="p-2 bg-white/50 rounded border border-orange-100"
-            data-testid="reference-preview-item"
-          >
-            <div class="flex items-center gap-1 text-orange-600 mb-2">
-              <i class="pi pi-bookmark text-xs" />
-              <span class="font-medium text-xs">R{{ refIndex + 1 }}</span>
-              <span class="text-xs text-surface-500">
-                ({{ reference.snaks.length }}
-                {{ reference.snaks.length === 1 ? 'property' : 'properties' }})
-              </span>
-            </div>
-            <div class="space-y-1 ml-3">
-              <div
-                v-for="(snak, snakIndex) in reference.snaks"
-                :key="`preview-snak-${refIndex}-${snakIndex}`"
-                class="flex items-center gap-2 text-xs text-surface-600"
-                data-testid="reference-snak-preview-item"
-              >
-                <div class="flex items-center gap-1 text-orange-600">
-                  <i class="pi pi-angle-right text-xs" />
-                  <span class="font-medium">R{{ refIndex + 1 }}.{{ snakIndex + 1 }}</span>
-                </div>
-                <span class="font-medium">{{ snak.property.label || snak.property.id }}:</span>
-                <Tag
-                  :value="
-                    snak.value.type === 'column' ? snak.value.source.columnName : snak.value.source
-                  "
-                  size="small"
-                  severity="secondary"
-                />
-                <span class="text-surface-400">{{ snak.value.dataType }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/features/wikibase-schema/components/StatementsEditor.vue b/frontend/src/features/wikibase-schema/components/StatementsEditor.vue
deleted file mode 100644
index 8e23a26..0000000
--- a/frontend/src/features/wikibase-schema/components/StatementsEditor.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<script setup lang="ts">
-// Define props
-interface StatementsEditorProps {
-  isAddingStatement?: boolean
-}
-
-defineProps<StatementsEditorProps>()
-
-// Define emits
-interface StatementsEditorEmits {
-  'add-statement': []
-  'edit-statement': [statementId: UUID]
-  'remove-statement': [statementId: UUID]
-  'reorder-statements': [fromIndex: number, toIndex: number]
-}
-
-const emit = defineEmits<StatementsEditorEmits>()
-
-// Use schema store
-const schemaStore = useSchemaStore()
-
-// Computed properties
-const statements = computed(() => schemaStore.statements)
-
-// Group statements by property for display
-const statementsByProperty = computed(() => {
-  const grouped = new Map<string, Array<(typeof statements.value)[0]>>()
-
-  statements.value.forEach((statement) => {
-    const propertyId = statement.property.id
-    if (!grouped.has(propertyId)) {
-      grouped.set(propertyId, [])
-    }
-    const group = grouped.get(propertyId)
-    if (group) {
-      group.push(statement)
-    }
-  })
-
-  return grouped
-})
-
-// Methods
-const handleAddStatement = () => {
-  emit('add-statement')
-}
-
-const handleEditStatement = (statementId: UUID) => {
-  emit('edit-statement', statementId)
-}
-
-const handleRemoveStatement = (statementId: UUID) => {
-  emit('remove-statement', statementId)
-  schemaStore.removeStatement(statementId)
-}
-
-const handleReorderStatements = (fromIndex: number, toIndex: number) => {
-  emit('reorder-statements', fromIndex, toIndex)
-  // Note: Actual reordering logic would be implemented in the store
-  // For now, we just emit the event
-}
-
-const getRankSeverity = (rank: string) => {
-  switch (rank) {
-    case 'preferred':
-      return 'success'
-    case 'deprecated':
-      return 'warn'
-    default:
-      return 'secondary'
-  }
-}
-
-const getRankIcon = (rank: string) => {
-  switch (rank) {
-    case 'preferred':
-      return 'pi pi-star-fill'
-    case 'deprecated':
-      return 'pi pi-exclamation-triangle'
-    default:
-      return 'pi pi-circle'
-  }
-}
-</script>
-
-<template>
-  <div class="statements-editor space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="text-lg font-semibold">Statements</h3>
-      <Button
-        icon="pi pi-plus"
-        label="Add Statement"
-        size="small"
-        class="flex items-center gap-2"
-        @click="handleAddStatement"
-      />
-    </div>
-
-    <!-- Statements List -->
-    <div
-      v-if="statements.length > 0"
-      class="space-y-4"
-    >
-      <!-- Property Groups -->
-      <div
-        v-for="[propertyId, propertyStatements] in statementsByProperty"
-        :key="propertyId"
-        class="border border-surface-200 rounded-lg bg-surface-50"
-      >
-        <!-- Statements for this property -->
-        <div
-          v-for="(statement, index) in propertyStatements"
-          :key="statement.id"
-          class="border-b border-surface-200 last:border-b-0"
-        >
-          <!-- Main Statement -->
-          <div class="p-4">
-            <div class="flex items-start justify-between">
-              <!-- Hierarchical Statement Display -->
-              <div class="flex-1 space-y-2">
-                <!-- Property-Value Relationship Header -->
-                <div class="flex items-center gap-3">
-                  <!-- Rank Indicator -->
-                  <div class="flex items-center gap-2">
-                    <i
-                      :class="getRankIcon(statement.rank)"
-                      class="text-sm"
-                      :style="{
-                        color:
-                          getRankSeverity(statement.rank) === 'success'
-                            ? '#10b981'
-                            : getRankSeverity(statement.rank) === 'warn'
-                              ? '#f59e0b'
-                              : '#6b7280',
-                      }"
-                    />
-                    <Tag
-                      :value="statement.rank"
-                      :severity="getRankSeverity(statement.rank)"
-                      size="small"
-                    />
-                  </div>
-
-                  <!-- Property Label/ID -->
-                  <div class="font-semibold text-surface-900 text-lg">
-                    {{ statement.property.label || statement.property.id }}
-                  </div>
-                </div>
-
-                <!-- Property-Value Relationship Details -->
-                <div class="ml-6 space-y-1">
-                  <div class="flex items-center gap-2 text-sm text-surface-600">
-                    <span class="font-medium">Property:</span>
-                    <Tag
-                      :value="statement.property.id"
-                      size="small"
-                      severity="info"
-                    />
-                    <span class="text-surface-500">•</span>
-                    <span>{{ statement.property.dataType }}</span>
-                  </div>
-
-                  <div class="flex items-center gap-2 text-sm text-surface-600">
-                    <span class="font-medium">Value:</span>
-                    <Tag
-                      :value="
-                        typeof statement.value.source === 'string'
-                          ? statement.value.source
-                          : statement.value.source.columnName
-                      "
-                      size="small"
-                      severity="secondary"
-                    />
-                    <span class="text-surface-500">•</span>
-                    <span>{{ statement.value.type }}</span>
-                    <span class="text-surface-500">•</span>
-                    <span>{{ statement.value.dataType }}</span>
-                  </div>
-
-                  <!-- Column Data Type (if column mapping) -->
-                  <div
-                    v-if="statement.value.type === 'column'"
-                    class="flex items-center gap-2 text-sm text-surface-500 ml-4"
-                  >
-                    <i class="pi pi-database text-xs" />
-                    <span>Column Type:</span>
-                    <span class="font-mono">{{ (statement.value.source as any).dataType }}</span>
-                  </div>
-                </div>
-
-                <!-- Action Buttons -->
-                <div class="flex items-center gap-2">
-                  <!-- Move Up -->
-                  <Button
-                    v-if="index > 0"
-                    v-tooltip="'Move up'"
-                    icon="pi pi-chevron-up"
-                    size="small"
-                    severity="secondary"
-                    text
-                    @click="handleReorderStatements(index, index - 1)"
-                  />
-
-                  <!-- Move Down -->
-                  <Button
-                    v-if="index < statements.length - 1"
-                    v-tooltip="'Move down'"
-                    icon="pi pi-chevron-down"
-                    size="small"
-                    severity="secondary"
-                    text
-                    @click="handleReorderStatements(index, index + 1)"
-                  />
-
-                  <!-- Edit -->
-                  <Button
-                    v-tooltip="'Edit statement'"
-                    icon="pi pi-pencil"
-                    size="small"
-                    severity="secondary"
-                    text
-                    @click="handleEditStatement(statement.id as UUID)"
-                  />
-
-                  <!-- Remove -->
-                  <Button
-                    v-tooltip="'Remove statement'"
-                    icon="pi pi-trash"
-                    size="small"
-                    severity="danger"
-                    text
-                    @click="handleRemoveStatement(statement.id as UUID)"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- Qualifiers and References Hierarchy -->
-            <div
-              v-if="statement.qualifiers.length > 0 || statement.references.length > 0"
-              class="border-t border-surface-200 bg-surface-25"
-            >
-              <div class="p-4 space-y-3">
-                <!-- Qualifiers Section -->
-                <div
-                  v-if="statement.qualifiers.length > 0"
-                  class="space-y-2"
-                >
-                  <div class="flex items-center gap-2 text-sm font-medium text-surface-700">
-                    <i class="pi pi-tags" />
-                    <span>Qualifiers ({{ statement.qualifiers.length }})</span>
-                  </div>
-                  <div class="ml-6 space-y-1">
-                    <div
-                      v-for="(qualifier, qIndex) in statement.qualifiers"
-                      :key="`${statement.id}-qualifier-${qIndex}`"
-                      class="flex items-center gap-2 text-sm text-surface-600 py-1"
-                    >
-                      <i class="pi pi-angle-right text-xs text-surface-400" />
-                      <span class="font-medium">
-                        {{ qualifier.property.label || qualifier.property.id }}:
-                      </span>
-                      <Tag
-                        :value="
-                          typeof qualifier.value.source === 'string'
-                            ? qualifier.value.source
-                            : qualifier.value.source.columnName
-                        "
-                        size="small"
-                        severity="secondary"
-                      />
-                      <span class="text-surface-400">{{ qualifier.value.dataType }}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- References Section -->
-                <div
-                  v-if="statement.references.length > 0"
-                  class="space-y-2"
-                >
-                  <div class="flex items-center gap-2 text-sm font-medium text-surface-700">
-                    <i class="pi pi-bookmark" />
-                    <span>References ({{ statement.references.length }})</span>
-                  </div>
-                  <div class="ml-6 space-y-1">
-                    <div
-                      v-for="(reference, rIndex) in statement.references"
-                      :key="`${statement.id}-reference-${rIndex}`"
-                      class="space-y-1"
-                    >
-                      <div class="text-xs text-surface-500 font-medium">
-                        Reference {{ rIndex + 1 }} ({{ reference.snaks.length }} properties)
-                      </div>
-                      <div
-                        v-for="(snak, snakIndex) in reference.snaks"
-                        :key="`${reference.id}-snak-${snakIndex}`"
-                        class="flex items-center gap-2 text-sm text-surface-600 py-1 ml-2"
-                      >
-                        <i class="pi pi-angle-right text-xs text-surface-400" />
-                        <span class="font-medium">
-                          {{ snak.property.label || snak.property.id }}:
-                        </span>
-                        <Tag
-                          :value="
-                            typeof snak.value.source === 'string'
-                              ? snak.value.source
-                              : snak.value.source.columnName
-                          "
-                          size="small"
-                          severity="secondary"
-                        />
-                        <span class="text-surface-400">{{ snak.value.dataType }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Empty State -->
-    <div
-      v-if="statements.length === 0 && !isAddingStatement"
-      class="text-center py-12 border-2 border-dashed border-surface-200 rounded-lg bg-surface-25"
-    >
-      <div class="space-y-3">
-        <div class="text-surface-400">
-          <i class="pi pi-list text-4xl" />
-        </div>
-        <div class="space-y-1">
-          <h4 class="text-lg font-medium text-surface-600">No statements configured</h4>
-          <p class="text-surface-500">Add properties and values to define your item structure</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/features/wikibase-schema/components/TermSection.vue b/frontend/src/features/wikibase-schema/components/TermSection.vue
index bd327ea..61d7054 100644
--- a/frontend/src/features/wikibase-schema/components/TermSection.vue
+++ b/frontend/src/features/wikibase-schema/components/TermSection.vue
@@ -7,6 +7,7 @@ interface Props {
   testId: string
   validationPath: string
   values: Label | Alias
+  sectionIndex: number
 }
 
 const props = defineProps<Props>()
@@ -23,14 +24,21 @@ const validation = computed(() => getPathValidationStatus(props.validationPath))
 const validationIcon = computed(() => getValidationIcon(props.validationPath))
 
 // Compute border and background classes based on validation status
-const containerClasses = computed(() => [
-  'border rounded-lg p-4',
-  validation.value.hasErrors
-    ? 'border-red-300 bg-red-50'
-    : validation.value.hasWarnings
-      ? 'border-yellow-300 bg-yellow-50'
-      : 'border-surface-200',
-])
+const containerClasses = computed(() => {
+  const baseClasses = 'border rounded-lg p-3 shadow-sm'
+
+  if (validation.value.hasErrors) {
+    return `${baseClasses} border-red-300 bg-red-50`
+  }
+
+  if (validation.value.hasWarnings) {
+    return `${baseClasses} border-yellow-300 bg-yellow-50`
+  }
+
+  // Alternating backgrounds for normal state
+  const bgClass = props.sectionIndex % 2 === 0 ? 'bg-white' : 'bg-slate-50'
+  return `${baseClasses} border-slate-200 ${bgClass}`
+})
 
 // Compute total issues count
 const totalIssues = computed(
@@ -96,7 +104,7 @@ const { getAcceptedLanguages } = useTermsEditor()
           v-for="displayItem in mappingDisplayData"
           :key="`${termType}-${displayItem.languageCode}`"
           :data-testid="`${termType}-mapping-${displayItem.languageCode}`"
-          class="flex items-center justify-between p-3 bg-surface-50 rounded-lg border"
+          class="flex items-center justify-between p-3 bg-white rounded-lg border border-surface-300 shadow-sm"
         >
           <div class="flex items-center space-x-3">
             <Chip
diff --git a/frontend/src/features/wikibase-schema/components/TermsEditor.vue b/frontend/src/features/wikibase-schema/components/TermsEditor.vue
index a00b6fb..bf096bb 100644
--- a/frontend/src/features/wikibase-schema/components/TermsEditor.vue
+++ b/frontend/src/features/wikibase-schema/components/TermsEditor.vue
@@ -3,7 +3,7 @@ const schemaStore = useSchemaStore()
 </script>
 
 <template>
-  <div class="terms-editor space-y-6">
+  <div class="terms-editor space-y-4">
     <!-- Labels Section -->
     <TermSection
       title="Labels"
@@ -13,6 +13,7 @@ const schemaStore = useSchemaStore()
       test-id="label-drop-zone"
       validation-path="item.terms.labels"
       :values="schemaStore.labels"
+      :section-index="0"
     />
 
     <!-- Descriptions Section -->
@@ -24,6 +25,7 @@ const schemaStore = useSchemaStore()
       test-id="description-drop-zone"
       validation-path="item.terms.descriptions"
       :values="schemaStore.descriptions"
+      :section-index="1"
     />
 
     <!-- Aliases Section -->
@@ -35,6 +37,7 @@ const schemaStore = useSchemaStore()
       test-id="alias-drop-zone"
       validation-path="item.terms.aliases"
       :values="schemaStore.aliases"
+      :section-index="2"
     />
   </div>
 </template>
diff --git a/frontend/src/features/wikibase-schema/components/ValidationDisplay.vue b/frontend/src/features/wikibase-schema/components/ValidationDisplay.vue
index 0c5d50c..8120ffc 100644
--- a/frontend/src/features/wikibase-schema/components/ValidationDisplay.vue
+++ b/frontend/src/features/wikibase-schema/components/ValidationDisplay.vue
@@ -188,184 +188,188 @@ const clearAll = () => {
 </script>
 
 <template>
-  <!-- Full Error Display Mode -->
-  <div
-    v-if="mode === 'full' && validationStore.hasAnyIssues"
-    class="w-full"
-  >
-    <!-- Error Summary -->
+  <div class="mb-4">
+    <!-- Full Error Display Mode -->
     <div
-      v-if="showSummary"
-      class="error-summary mb-4"
+      v-if="mode === 'full' && validationStore.hasAnyIssues"
+      class="w-full"
     >
-      <div class="flex items-center gap-2 text-sm">
-        <i
-          v-if="validationStore.hasErrors"
-          class="pi pi-exclamation-triangle text-red-500"
-        />
-        <i
-          v-else-if="validationStore.hasWarnings"
-          class="pi pi-info-circle text-yellow-500"
-        />
-        <span class="font-medium">
-          {{ errorCount }} {{ errorCount === 1 ? 'error' : 'errors' }}
-          <span v-if="validationStore.hasWarnings">
-            , {{ warningCount }} {{ warningCount === 1 ? 'warning' : 'warnings' }}
+      <!-- Error Summary -->
+      <div
+        v-if="showSummary"
+        class="error-summary mb-4"
+      >
+        <div class="flex items-center gap-2 text-sm">
+          <i
+            v-if="validationStore.hasErrors"
+            class="pi pi-exclamation-triangle text-red-500"
+          />
+          <i
+            v-else-if="validationStore.hasWarnings"
+            class="pi pi-info-circle text-yellow-500"
+          />
+          <span class="font-medium">
+            {{ errorCount }} {{ errorCount === 1 ? 'error' : 'errors' }}
+            <span v-if="validationStore.hasWarnings">
+              , {{ warningCount }} {{ warningCount === 1 ? 'warning' : 'warnings' }}
+            </span>
           </span>
-        </span>
+        </div>
       </div>
-    </div>
 
-    <!-- Error List -->
-    <div class="error-list space-y-2">
-      <!-- Errors -->
-      <div
-        v-for="error in errors"
-        :key="`error-${error.path}-${error.code}`"
-        class="transition-all duration-200 ease-in-out hover:shadow-sm"
-        :class="getErrorClasses(error)"
-      >
-        <div class="flex items-start gap-3">
-          <i class="pi pi-times-circle text-red-500 mt-0.5 flex-shrink-0" />
-          <div class="flex-1 min-w-0">
-            <div class="break-words font-medium text-red-700">
-              {{ formatErrorMessage(error) }}
+      <!-- Error List -->
+      <div class="error-list space-y-2">
+        <!-- Errors -->
+        <div
+          v-for="error in errors"
+          :key="`error-${error.path}-${error.code}`"
+          class="transition-all duration-200 ease-in-out hover:shadow-sm"
+          :class="getErrorClasses(error)"
+        >
+          <div class="flex items-start gap-3">
+            <i class="pi pi-times-circle text-red-500 mt-0.5 flex-shrink-0" />
+            <div class="flex-1 min-w-0">
+              <div class="break-words font-medium text-red-700">
+                {{ formatErrorMessage(error) }}
+              </div>
+              <div
+                v-if="showPath"
+                class="font-mono text-xs text-gray-500 mt-1"
+              >
+                {{ error.path }}
+              </div>
             </div>
-            <div
-              v-if="showPath"
-              class="font-mono text-xs text-gray-500 mt-1"
-            >
-              {{ error.path }}
+            <Button
+              v-if="showDismiss"
+              icon="pi pi-times"
+              text
+              rounded
+              size="small"
+              severity="secondary"
+              class="flex-shrink-0"
+              @click="dismissError(error)"
+            />
+          </div>
+        </div>
+
+        <!-- Warnings -->
+        <div
+          v-for="warning in warnings"
+          :key="`warning-${warning.path}-${warning.code}`"
+          class="transition-all duration-200 ease-in-out hover:shadow-sm"
+          :class="getErrorClasses(warning)"
+        >
+          <div class="flex items-start gap-3">
+            <i class="pi pi-exclamation-triangle text-yellow-500 mt-0.5 flex-shrink-0" />
+            <div class="flex-1 min-w-0">
+              <div class="break-words font-medium text-yellow-700">
+                {{ formatErrorMessage(warning) }}
+              </div>
+              <div
+                v-if="showPath"
+                class="font-mono text-xs text-gray-500 mt-1"
+              >
+                {{ warning.path }}
+              </div>
             </div>
+            <Button
+              v-if="showDismiss"
+              icon="pi pi-times"
+              text
+              rounded
+              size="small"
+              severity="secondary"
+              class="flex-shrink-0"
+              @click="dismissWarning(warning)"
+            />
           </div>
-          <Button
-            v-if="showDismiss"
-            icon="pi pi-times"
-            text
-            rounded
-            size="small"
-            severity="secondary"
-            class="flex-shrink-0"
-            @click="dismissError(error)"
-          />
         </div>
       </div>
 
-      <!-- Warnings -->
+      <!-- Clear All Button -->
       <div
-        v-for="warning in warnings"
-        :key="`warning-${warning.path}-${warning.code}`"
-        class="transition-all duration-200 ease-in-out hover:shadow-sm"
-        :class="getErrorClasses(warning)"
+        v-if="showClearAll && validationStore.hasAnyIssues"
+        class="mt-4 text-center"
       >
-        <div class="flex items-start gap-3">
-          <i class="pi pi-exclamation-triangle text-yellow-500 mt-0.5 flex-shrink-0" />
-          <div class="flex-1 min-w-0">
-            <div class="break-words font-medium text-yellow-700">
-              {{ formatErrorMessage(warning) }}
-            </div>
-            <div
-              v-if="showPath"
-              class="font-mono text-xs text-gray-500 mt-1"
-            >
-              {{ warning.path }}
-            </div>
-          </div>
-          <Button
-            v-if="showDismiss"
-            icon="pi pi-times"
-            text
-            rounded
-            size="small"
-            severity="secondary"
-            class="flex-shrink-0"
-            @click="dismissWarning(warning)"
-          />
-        </div>
+        <Button
+          label="Clear All"
+          icon="pi pi-trash"
+          text
+          size="small"
+          severity="secondary"
+          @click="clearAll"
+        />
       </div>
     </div>
 
-    <!-- Clear All Button -->
+    <!-- Status Bar Mode -->
     <div
-      v-if="showClearAll && validationStore.hasAnyIssues"
-      class="mt-4 text-center"
+      v-else-if="
+        mode === 'status' && (validationStore.hasAnyIssues || isDragInProgress || !compact)
+      "
+      class="validation-status-bar"
     >
-      <Button
-        label="Clear All"
-        icon="pi pi-trash"
-        text
-        size="small"
-        severity="secondary"
-        @click="clearAll"
-      />
-    </div>
-  </div>
-
-  <!-- Status Bar Mode -->
-  <div
-    v-else-if="mode === 'status' && (validationStore.hasAnyIssues || isDragInProgress || !compact)"
-    class="validation-status-bar"
-  >
-    <div :class="statusClasses">
-      <i :class="statusIcon" />
-      <span class="font-medium">{{ statusMessage }}</span>
-
-      <!-- Detailed breakdown -->
-      <div
-        v-if="showDetails && validationStore.hasAnyIssues && !isDragInProgress"
-        class="flex items-center gap-4 ml-2 text-xs"
-      >
-        <span
-          v-if="validationStore.hasErrors"
-          class="flex items-center gap-1"
-        >
-          <i class="pi pi-times-circle text-red-500" />
-          {{ validationStore.errorCount }}
-          {{ validationStore.errorCount === 1 ? 'error' : 'errors' }}
-        </span>
-        <span
-          v-if="validationStore.hasWarnings"
-          class="flex items-center gap-1"
+      <div :class="statusClasses">
+        <i :class="statusIcon" />
+        <span class="font-medium">{{ statusMessage }}</span>
+
+        <!-- Detailed breakdown -->
+        <div
+          v-if="showDetails && validationStore.hasAnyIssues && !isDragInProgress"
+          class="flex items-center gap-4 ml-2 text-xs"
         >
-          <i class="pi pi-exclamation-triangle text-yellow-500" />
-          {{ validationStore.warningCount }}
-          {{ validationStore.warningCount === 1 ? 'warning' : 'warnings' }}
-        </span>
-      </div>
+          <span
+            v-if="validationStore.hasErrors"
+            class="flex items-center gap-1"
+          >
+            <i class="pi pi-times-circle text-red-500" />
+            {{ validationStore.errorCount }}
+            {{ validationStore.errorCount === 1 ? 'error' : 'errors' }}
+          </span>
+          <span
+            v-if="validationStore.hasWarnings"
+            class="flex items-center gap-1"
+          >
+            <i class="pi pi-exclamation-triangle text-yellow-500" />
+            {{ validationStore.warningCount }}
+            {{ validationStore.warningCount === 1 ? 'warning' : 'warnings' }}
+          </span>
+        </div>
 
-      <!-- Clear all button -->
-      <Button
-        v-if="showClearAll && validationStore.hasAnyIssues && !isDragInProgress"
-        label="Clear All"
-        icon="pi pi-trash"
-        text
-        size="small"
-        severity="secondary"
-        class="ml-auto"
-        @click="clearAll"
-      />
+        <!-- Clear all button -->
+        <Button
+          v-if="showClearAll && validationStore.hasAnyIssues && !isDragInProgress"
+          label="Clear All"
+          icon="pi pi-trash"
+          text
+          size="small"
+          severity="secondary"
+          class="ml-auto"
+          @click="clearAll"
+        />
+      </div>
     </div>
-  </div>
 
-  <!-- Suggestions Mode -->
-  <div
-    v-else-if="mode === 'suggestions' && hasSuggestions"
-    class="validation-suggestions mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg"
-  >
-    <div class="flex items-start gap-2">
-      <i class="pi pi-lightbulb text-blue-600 mt-0.5 flex-shrink-0" />
-      <div class="flex-1">
-        <h4 class="text-sm font-medium text-blue-800 mb-2">Suggestions</h4>
-        <ul class="space-y-1">
-          <li
-            v-for="(suggestion, index) in suggestions"
-            :key="index"
-            class="text-sm text-blue-700 flex items-start gap-1"
-          >
-            <span class="text-blue-400 mt-1">•</span>
-            <span>{{ suggestion }}</span>
-          </li>
-        </ul>
+    <!-- Suggestions Mode -->
+    <div
+      v-else-if="mode === 'suggestions' && hasSuggestions"
+      class="validation-suggestions mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg"
+    >
+      <div class="flex items-start gap-2">
+        <i class="pi pi-lightbulb text-blue-600 mt-0.5 flex-shrink-0" />
+        <div class="flex-1">
+          <h4 class="text-sm font-medium text-blue-800 mb-2">Suggestions</h4>
+          <ul class="space-y-1">
+            <li
+              v-for="(suggestion, index) in suggestions"
+              :key="index"
+              class="text-sm text-blue-700 flex items-start gap-1"
+            >
+              <span class="text-blue-400 mt-1">•</span>
+              <span>{{ suggestion }}</span>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
diff --git a/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue b/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue
index 9f0de4f..bbb064d 100644
--- a/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue
+++ b/frontend/src/features/wikibase-schema/components/WikibaseSchemaEditor.vue
@@ -12,12 +12,9 @@ const emit = defineEmits<WikibaseSchemaEditorEmits>()
 const schemaStore = useSchemaStore()
 const dragDropStore = useDragDropStore()
 const validationStore = useValidationStore()
-const projectStore = useProjectStore()
 
 // Composables
 const { showError, showSuccess } = useErrorHandling()
-const { convertProjectColumnsToColumnInfo } = useColumnConversion()
-const { setAvailableColumns, initializeStatement, resetStatement } = useStatementEditor()
 
 // Schema selection workflow composable
 const {
@@ -35,30 +32,6 @@ const { saveSchema, canSave, isSaving, saveStatus } = useSchemaPersistence()
 // Reactive state
 const isInitialized = ref(false)
 const isConfiguringItem = ref(false)
-const isAddingStatement = ref(false)
-const editingStatementId = ref<string | null>(null)
-
-// Local statement state with qualifiers
-const currentStatementWithQualifiers = ref<{
-  property: PropertyReference | null
-  value: ValueMapping
-  rank: StatementRank
-  qualifiers?: PropertyValueMap[]
-  references?: ReferenceSchemaMapping[]
-}>({
-  property: null,
-  value: {
-    type: 'column',
-    source: {
-      columnName: '',
-      dataType: 'VARCHAR',
-    },
-    dataType: 'string',
-  },
-  rank: 'normal',
-  qualifiers: [],
-  references: [],
-})
 
 // Computed properties
 const schemaTitle = computed(() => {
@@ -76,19 +49,6 @@ const hasItem = computed(() => {
   )
 })
 
-// Available columns for statement editor
-const availableColumns = computed(() => {
-  const columns = convertProjectColumnsToColumnInfo(projectStore.columns, projectStore.data)
-  // Update the composable with available columns
-  setAvailableColumns(columns)
-  return columns
-})
-
-// Check if we're in statement editing mode
-const isEditingStatement = computed(() => {
-  return isAddingStatement.value || editingStatementId.value !== null
-})
-
 // Lifecycle
 onMounted(async () => {
   await initializeEditor()
@@ -196,123 +156,6 @@ const getSaveButtonSeverity = () => {
   return undefined
 }
 
-const handleAddStatement = () => {
-  // Reset statement editor to default state
-  resetStatement()
-  currentStatementWithQualifiers.value = {
-    property: null,
-    value: {
-      type: 'column',
-      source: {
-        columnName: '',
-        dataType: 'VARCHAR',
-      },
-      dataType: 'string',
-    },
-    rank: 'normal',
-    qualifiers: [],
-    references: [],
-  }
-  editingStatementId.value = null
-  isAddingStatement.value = true
-}
-
-const handleEditStatement = (statementId: UUID) => {
-  const statement = schemaStore.statements.find((s) => s.id === statementId)
-  if (statement) {
-    // Load existing statement data for editing including qualifiers and references
-    currentStatementWithQualifiers.value = {
-      property: statement.property,
-      value: { ...statement.value },
-      rank: statement.rank,
-      qualifiers: [...(statement.qualifiers || [])],
-      references: [...(statement.references || [])],
-    }
-    initializeStatement({
-      property: statement.property,
-      value: { ...statement.value },
-      rank: statement.rank,
-    })
-    editingStatementId.value = statementId
-    isAddingStatement.value = false
-  }
-}
-
-const handleRemoveStatement = (statementId: UUID) => {
-  schemaStore.removeStatement(statementId)
-}
-
-const handleReorderStatements = (fromIndex: number, toIndex: number) => {
-  // TODO: Implement reorder logic in schema store
-  console.log('Reorder statements from', fromIndex, 'to', toIndex)
-}
-
-// Statement editor event handlers
-const handleStatementUpdate = (statement: {
-  property: PropertyReference | null
-  value: ValueMapping
-  rank: StatementRank
-  qualifiers?: PropertyValueMap[]
-  references?: ReferenceSchemaMapping[]
-}) => {
-  currentStatementWithQualifiers.value = statement
-  // Also update the composable state for backward compatibility
-  initializeStatement({
-    property: statement.property,
-    value: statement.value,
-    rank: statement.rank,
-  })
-}
-
-const handleStatementSave = () => {
-  const currentStatement = currentStatementWithQualifiers.value
-  if (!currentStatement?.property) return
-
-  if (editingStatementId.value) {
-    // Update existing statement using the proper store method
-    schemaStore.updateStatement(
-      editingStatementId.value as UUID,
-      currentStatement.property,
-      currentStatement.value,
-      currentStatement.rank,
-      currentStatement.qualifiers || [],
-      currentStatement.references || [],
-    )
-  } else {
-    // Add new statement
-    schemaStore.addStatement(
-      currentStatement.property,
-      currentStatement.value,
-      currentStatement.rank,
-      currentStatement.qualifiers || [],
-      currentStatement.references || [],
-    )
-  }
-
-  // Close statement editor
-  handleCancelStatementEdit()
-}
-
-const handleCancelStatementEdit = () => {
-  isAddingStatement.value = false
-  editingStatementId.value = null
-  currentStatementWithQualifiers.value = {
-    property: null,
-    value: {
-      type: 'column',
-      source: {
-        columnName: '',
-        dataType: 'VARCHAR',
-      },
-      dataType: 'string',
-    },
-    rank: 'normal',
-    qualifiers: [],
-    references: [],
-  }
-  resetStatement()
-}
-
 // Cleanup
 onUnmounted(() => {
   dragDropStore.$reset()
@@ -323,12 +166,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="schema-editor-container">
+  <div>
     <!-- Schema Selector View -->
-    <div
-      v-if="showSchemaSelector"
-      class="schema-selector-view"
-    >
+    <div v-if="showSchemaSelector">
       <SchemaSelector
         :on-schema-selected="selectSchema"
         :on-create-new="createNewSchema"
@@ -338,17 +178,15 @@ onUnmounted(() => {
     <!-- Main Editor View -->
     <div
       v-else-if="showMainEditor"
-      class="main-editor-view flex gap-6"
+      class="flex flex-col gap-6"
     >
       <!-- Column Palette Section -->
-      <div class="column-palette-section w-80 flex-shrink-0">
-        <ColumnPalette />
-      </div>
+      <ColumnPalette />
 
       <!-- Schema Canvas Section -->
-      <div class="schema-canvas-section flex-1 bg-gray-50 rounded-lg shadow p-8 font-sans">
+      <div class="flex-1 bg-white border border-surface-200 rounded-lg p-6 font-sans shadow-sm">
         <!-- Toolbar -->
-        <div class="schema-toolbar flex items-center justify-between mb-6">
+        <div class="flex items-center justify-between mb-6">
           <div class="flex items-center gap-4">
             <Button
               data-testid="back-to-selector-btn"
@@ -358,7 +196,7 @@ onUnmounted(() => {
               aria-label="Back to schema selector"
               @click="backToSelector"
             />
-            <h1 class="schema-title text-xl font-semibold">{{ schemaTitle }}</h1>
+            <h1 class="text-xl font-semibold">{{ schemaTitle }}</h1>
             <div
               v-if="schemaStore.isLoading"
               class="toolbar-loading"
@@ -434,28 +272,18 @@ onUnmounted(() => {
         </div>
 
         <!-- Validation Status Bar -->
-        <div class="mb-4">
-          <ValidationDisplay
-            mode="status"
-            :show-details="true"
-            :show-clear-all="true"
-          />
-        </div>
-
-        <!-- Detailed Validation Feedback -->
-        <div
-          v-if="validationStore.hasAnyIssues"
-          class="mb-4"
-        >
-          <ValidationDisplay mode="full" />
-        </div>
+        <ValidationDisplay
+          mode="status"
+          :show-details="true"
+          :show-clear-all="true"
+        />
 
         <!-- Schema Content -->
-        <div class="bg-white rounded-md p-6 shadow-sm">
+        <div class="py-4">
           <!-- Empty State -->
           <div
-            v-if="!hasItem && isInitialized && !isAddingStatement"
-            class="empty-item-placeholder text-center py-12"
+            v-if="!hasItem && isInitialized"
+            class="text-center py-12"
           >
             <div class="text-gray-500 mb-4">
               <i class="pi pi-box text-4xl" />
@@ -472,10 +300,7 @@ onUnmounted(() => {
           </div>
 
           <!-- Item Configuration (when item exists) -->
-          <div
-            v-else-if="hasItem"
-            class="item-configuration"
-          >
+          <div v-else-if="hasItem">
             <div class="mb-6">
               <div class="flex items-center justify-between mb-4">
                 <span class="font-medium text-lg">
@@ -507,29 +332,9 @@ onUnmounted(() => {
               <!-- Terms Editor Integration -->
               <TermsEditor />
 
-              <!-- Statements Editor Integration -->
+              <!-- Statement Manager Integration -->
               <div class="mt-6">
-                <StatementsEditor
-                  :is-adding-statement="isAddingStatement"
-                  @add-statement="handleAddStatement"
-                  @edit-statement="handleEditStatement"
-                  @remove-statement="handleRemoveStatement"
-                  @reorder-statements="handleReorderStatements"
-                />
-
-                <!-- Statement Editor (only visible when adding/editing) -->
-                <div
-                  v-if="isEditingStatement"
-                  class="mt-6"
-                >
-                  <StatementEditor
-                    :model-value="currentStatementWithQualifiers"
-                    :available-columns="availableColumns"
-                    @update:model-value="handleStatementUpdate"
-                    @save="handleStatementSave"
-                    @cancel="handleCancelStatementEdit"
-                  />
-                </div>
+                <StatementManager />
               </div>
             </div>
           </div>
@@ -549,10 +354,9 @@ onUnmounted(() => {
     <!-- Loading State -->
     <div
       v-else-if="isLoadingSchema"
-      class="loading-view flex items-center justify-center py-12"
+      class="flex items-center justify-center py-12"
     >
       <ProgressSpinner
-        style="width: 50px; height: 50px"
         stroke-width="4"
         animation-duration="1s"
       />
diff --git a/frontend/src/features/wikibase-schema/composables/useSchemaCompletenessValidation.ts b/frontend/src/features/wikibase-schema/composables/useSchemaCompletenessValidation.ts
index 55ce71c..b071180 100644
--- a/frontend/src/features/wikibase-schema/composables/useSchemaCompletenessValidation.ts
+++ b/frontend/src/features/wikibase-schema/composables/useSchemaCompletenessValidation.ts
@@ -151,7 +151,7 @@ export const useSchemaCompletenessValidation = () => {
           path: fieldPath,
           message: getStatementFieldMessage(fieldPath),
           severity: 'error',
-          component: 'StatementEditor',
+          component: 'StatementManager',
         })
       }
     }
@@ -168,7 +168,7 @@ export const useSchemaCompletenessValidation = () => {
     } else if (fieldPath.includes('terms.labels')) {
       return 'TermsEditor'
     } else if (fieldPath.includes('statements')) {
-      return 'StatementEditor'
+      return 'StatementManager'
     }
     return 'WikibaseSchemaEditor'
   }
diff --git a/frontend/src/features/wikibase-schema/stores/schema.store.ts b/frontend/src/features/wikibase-schema/stores/schema.store.ts
index 666ff03..63ade45 100644
--- a/frontend/src/features/wikibase-schema/stores/schema.store.ts
+++ b/frontend/src/features/wikibase-schema/stores/schema.store.ts
@@ -6,6 +6,7 @@ import { ItemId } from '@backend/types/wikibase-schema'
 import type {
   ColumnMapping,
   Label,
+  Alias,
   PropertyReference,
   PropertyValueMap,
   ReferenceSchemaMapping,
@@ -266,6 +267,7 @@ export const useSchemaStore = defineStore('schema', () => {
     addQualifierToStatement,
     removeQualifierFromStatement,
     markAsSaved,
+    markDirty,
     $reset,
     setLoading,
   }