--- a/ViewerPlugin/WebApplication/viewer.html	Wed Aug 26 19:47:36 2026 +0200
+++ b/ViewerPlugin/WebApplication/viewer.html	Wed Aug 26 20:00:28 2026 +0200
@@ -418,17 +418,17 @@
             <div>
               <template v-for="prop in annotationProperties">
                 <div v-if="prop.type === 'readonly'" class="d-flex align-items-baseline border-bottom py-1 gap-2">
-                  <span class="text-muted small flex-shrink-0" style="width:8em">{{prop.label}}</span>
+                  <span class="text-muted small flex-shrink-0" style="width:5em">{{prop.label}}</span>
                   <span class="text-break small">{{prop.value}}</span>
                 </div>
                 <div v-else-if="prop.type === 'editable'" class="d-flex align-items-center border-bottom py-1 gap-2">
-                  <label class="text-muted small flex-shrink-0 mb-0" style="width:8em">{{prop.label}}</label>
+                  <label class="text-muted small flex-shrink-0 mb-0" style="width:5em">{{prop.label}}</label>
                   <input type="text" class="form-control form-control-sm small flex-grow-1"
                          v-model="prop.value"
                          v-on:change="UpdateAnnotationProperty(prop)">
                 </div>
                 <div v-else-if="prop.type === 'dropdown'" class="d-flex align-items-center border-bottom py-1 gap-2">
-                  <label class="text-muted small flex-shrink-0 mb-0" style="width:8em">{{prop.label}}</label>
+                  <label class="text-muted small flex-shrink-0 mb-0" style="width:5em">{{prop.label}}</label>
                   <select class="form-select form-select-sm small flex-grow-1"
                           v-model="prop.value"
                           v-on:change="UpdateAnnotationProperty(prop)">

--- a/ViewerPlugin/WebApplication/viewer.js	Wed Aug 26 19:47:36 2026 +0200
+++ b/ViewerPlugin/WebApplication/viewer.js	Wed Aug 26 20:00:28 2026 +0200
@@ -241,6 +241,12 @@
               if (geometry !== null) {
                 var feature = new ol.Feature(geometry);
                 feature.set('layer-id', layerId);
+
+                var note = response.data.features[i]['note'];
+                if (note !== undefined) {
+                  feature.set('note', note);
+                }
+
                 that.drawSource.addFeature(feature);
               }
             }
@@ -275,6 +281,12 @@
 
           if (item !== null) {
             item['layer-id'] = feature.get('layer-id');
+
+            var note = feature.get('note');
+            if (note !== undefined) {
+              item['note'] = note;
+            }
+
             features.push(item);
           }
         });
@@ -418,6 +430,7 @@
     UpdateAnnotationProperty: function(prop) {
       if (this.selectedFeature && prop.featureProp) {
         this.selectedFeature.set(prop.featureProp, prop.value);
+        this.SaveUserFeatures();
       }
     },
 
@@ -973,6 +986,8 @@
             that.AddReadOnlyProperty('Area', FormatArea(geometry.getArea(), that.map.getView().getProjection()));
           }
 
+          that.AddEditableProperty('Note', feature.get('note') || '', 'note');
+
           /*
           // TODO
           that.AddReadOnlyProperty('Length', '1.23 mm');