diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c06db20..a43e119 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -26,10 +26,11 @@ import { getCommandRegistry } from './services/commandRegistry';
 import { importFile, type ImportResult } from './services/importService';
 import { exportProject, downloadBlob, type ExportFormat } from './services/exportService';
 import type { ProjectData } from './types/cad.types';
-import { loadProjectDataTyped, createElementTyped, updateElement, deleteElement as apiDeleteElement, createLayerTyped, updateLayer, deleteLayer as apiDeleteLayer, createBlockTyped, updateBlock, deleteBlock as apiDeleteBlock, aiChat } from './services/api';
+import { loadProjectDataTyped, createElementTyped, updateElement, deleteElement as apiDeleteElement, createLayerTyped, updateLayer, deleteLayer as apiDeleteLayer, createBlockTyped, updateBlock, deleteBlock as apiDeleteBlock, aiChat, getSetting, setSetting } from './services/api';
 import { useYjsBinding } from './crdt';
 import { registerBuiltinPlugins, pluginRegistry } from './plugins';
 import type { PluginContext } from './plugins';
+import type { UnitType } from './utils/format';
 import './styles.css';
 import './styles/auth.css';
 import { useAuth } from './contexts/AuthContext';
@@ -99,6 +100,11 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
   const [snapEnabled, setSnapEnabled] = useState(true);
   const [polarEnabled, setPolarEnabled] = useState(false);
 
+  // Units
+  const [unit, setUnit] = useState<UnitType>('mm');
+  const [gridSize, setGridSize] = useState<number>(20);
+  const [scaleFactor, setScaleFactor] = useState<number>(1);
+
   // Right sidebar
   const [activeRightPanel, setActiveRightPanel] = useState<RightPanel>('tool');
   const [selectedElement, setSelectedElement] = useState<CADElement | null>(null);
@@ -328,6 +334,53 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId, token]);
 
+  // Load unit settings from backend on mount
+  React.useEffect(() => {
+    if (!token) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const [unitSetting, gridSetting, scaleSetting] = await Promise.all([
+          getSetting(token, 'cad.unit').catch(() => null),
+          getSetting(token, 'cad.gridSize').catch(() => null),
+          getSetting(token, 'cad.scaleFactor').catch(() => null),
+        ]);
+        if (cancelled) return;
+        if (unitSetting && (unitSetting.value === 'mm' || unitSetting.value === 'cm' || unitSetting.value === 'm')) {
+          setUnit(unitSetting.value as UnitType);
+        }
+        if (gridSetting) {
+          const gs = parseFloat(gridSetting.value);
+          if (!isNaN(gs) && gs > 0) setGridSize(gs);
+        }
+        if (scaleSetting) {
+          const sf = parseFloat(scaleSetting.value);
+          if (!isNaN(sf) && sf > 0) setScaleFactor(sf);
+        }
+      } catch {
+        // Settings not yet stored — use defaults
+      }
+    })();
+    return () => { cancelled = true; };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  // Save unit settings to backend when they change
+  const handleUnitChange = useCallback((newUnit: UnitType) => {
+    setUnit(newUnit);
+    if (token) setSetting(token, 'cad.unit', newUnit).catch(() => {});
+  }, [token]);
+
+  const handleGridSizeChange = useCallback((newSize: number) => {
+    setGridSize(newSize);
+    if (token) setSetting(token, 'cad.gridSize', String(newSize)).catch(() => {});
+  }, [token]);
+
+  const handleScaleFactorChange = useCallback((newFactor: number) => {
+    setScaleFactor(newFactor);
+    if (token) setSetting(token, 'cad.scaleFactor', String(newFactor)).catch(() => {});
+  }, [token]);
+
   // Sync remote → local: when Yjs data changes from other users, update local state
   React.useEffect(() => {
     if (collab.status !== 'connected') return;
@@ -1471,6 +1524,8 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onOpenSettings={() => setSettingsOpen(true)}
         onOpenLeftDrawer={() => setMobileLeftOpen(true)}
         onOpenRightDrawer={() => setMobileRightOpen(true)}
+        unit={unit}
+        onUnitChange={handleUnitChange}
       />
       <RibbonBar
         activeTab={activeRibbonTab}
@@ -1532,6 +1587,9 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           bgConfig={bgConfig}
           remoteCursors={collab.cursors}
           groups={groups}
+          unit={unit}
+          gridSize={gridSize}
+          scaleFactor={scaleFactor}
         />
         <RightSidebar
           activePanel={activeRightPanel}
@@ -1574,6 +1632,8 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           groups={groups}
           onSelectElement={handleSelectElement}
           token={token}
+          unit={unit}
+          scaleFactor={scaleFactor}
         />
       </div>
       <CommandLine
@@ -1595,6 +1655,9 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onTogglePolar={handleTogglePolar}
         onToggleGrid={handleToggleGrid}
         seatCount={seatCount}
+        unit={unit}
+        scaleFactor={scaleFactor}
+        onUnitChange={handleUnitChange}
       />
       <MobileDrawers
         leftOpen={mobileLeftOpen}
@@ -1604,7 +1667,16 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onCloseRight={() => setMobileRightOpen(false)}
         onRightTabChange={setActiveDrawerTab}
       />
-      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+      <SettingsModal
+        open={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+        unit={unit}
+        gridSize={gridSize}
+        scaleFactor={scaleFactor}
+        onUnitChange={handleUnitChange}
+        onGridSizeChange={handleGridSizeChange}
+        onScaleFactorChange={handleScaleFactorChange}
+      />
       <BackgroundImport
         open={bgImportOpen}
         onClose={() => setBgImportOpen(false)}
diff --git a/frontend/src/canvas/RenderEngine.ts b/frontend/src/canvas/RenderEngine.ts
index d8c0164..3c4a2b7 100644
--- a/frontend/src/canvas/RenderEngine.ts
+++ b/frontend/src/canvas/RenderEngine.ts
@@ -18,6 +18,9 @@ export interface RenderOptions {
   backgroundOffsetY: number;
   backgroundRotation: number;
   backgroundOpacity: number;
+  unit?: 'mm' | 'cm' | 'm';
+  scaleFactor?: number;
+  showGridLabels?: boolean;
 }
 
 export interface SelectionState {
@@ -216,6 +219,56 @@ export class RenderEngine {
         this.ctx.lineTo(w, y);
       }
       this.ctx.stroke();
+
+      // Draw axis labels with unit at each major grid line
+      if (this.options.showGridLabels !== false) {
+        const unit = this.options.unit || 'mm';
+        const scaleFactor = this.options.scaleFactor || 1;
+        const transform = this.zoomPan.getTransform();
+        const scale = this.zoomPan.getScale();
+        const worldGridSize = this.options.gridSize * 5; // world units per major line
+
+        this.ctx.fillStyle = '#666680';
+        this.ctx.font = '10px sans-serif';
+        this.ctx.textBaseline = 'top';
+
+        // X-axis labels (top edge)
+        const xStartWorld = Math.floor((-transform.e / scale) / worldGridSize) * worldGridSize;
+        for (let i = 0; i * majorSize + majOffX < w; i++) {
+          const screenX = majOffX + i * majorSize;
+          const worldX = xStartWorld + i * worldGridSize;
+          if (screenX < 30) continue; // skip too-close-to-edge labels
+          const label = this.formatGridLabel(worldX, unit, scaleFactor);
+          this.ctx.fillText(label, screenX + 2, 2);
+        }
+
+        // Y-axis labels (left edge)
+        this.ctx.textAlign = 'left';
+        this.ctx.textBaseline = 'middle';
+        const yStartWorld = Math.floor((-transform.f / scale) / worldGridSize) * worldGridSize;
+        for (let i = 0; i * majorSize + majOffY < h; i++) {
+          const screenY = majOffY + i * majorSize;
+          const worldY = yStartWorld + i * worldGridSize;
+          if (screenY < 15) continue;
+          const label = this.formatGridLabel(worldY, unit, scaleFactor);
+          this.ctx.fillText(label, 2, screenY - 6);
+        }
+
+        this.ctx.textAlign = 'start';
+        this.ctx.textBaseline = 'alphabetic';
+      }
+    }
+  }
+
+  private formatGridLabel(worldVal: number, unit: 'mm' | 'cm' | 'm', scaleFactor: number): string {
+    const mm = worldVal * scaleFactor;
+    switch (unit) {
+      case 'mm':
+        return `${mm.toFixed(0)}mm`;
+      case 'cm':
+        return `${(mm / 10).toFixed(0)}cm`;
+      case 'm':
+        return `${(mm / 1000).toFixed(2)}m`;
     }
   }
 
diff --git a/frontend/src/components/CanvasArea.tsx b/frontend/src/components/CanvasArea.tsx
index 19e1f7e..ae0c252 100644
--- a/frontend/src/components/CanvasArea.tsx
+++ b/frontend/src/components/CanvasArea.tsx
@@ -11,6 +11,7 @@ import { SelectionEngine } from '../canvas/SelectionEngine';
 import { SpatialIndex } from '../canvas/SpatialIndex';
 import { LayerManager } from '../canvas/LayerManager';
 import { GroupManager } from '../tools/modification/GroupTool';
+import { formatCoordinate } from '../utils/format';
 
 const CanvasArea: React.FC<CanvasAreaProps> = ({
   cursorPos, viewMode, onViewChange, gridEnabled, orthoEnabled, snapEnabled,
@@ -18,6 +19,7 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
   activeTool, elements, layers, activeLayerId, onElementCreated, onElementsDeleted, onElementsModified, onCursorMoved, onToolStateChanged,
   onToggleGrid, onToggleOrtho, onToggleSnap, onZoomIn, onZoomOut, onZoomFit, onTextEdit, onCommandTrigger, blocks, onBlockDrop, onSelectionChange, externalSelectionIds, selectedTemplate, bgConfig, remoteCursors, zoomCommand,
   groups,
+  unit = 'mm', gridSize = 20, scaleFactor = 1,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const zoomPanRef = useRef<ZoomPanController | null>(null);
@@ -210,12 +212,15 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
     renderEngine.setOptions({ showGrid: gridEnabled });
     renderEngine.setOptions({ showSnapPoints: snapEnabled });
     renderEngine.setOptions({ showOrtho: orthoEnabled });
+    renderEngine.setOptions({ gridSize, unit, scaleFactor, showGridLabels: true });
     interaction.setSnapEnabled(snapEnabled);
     interaction.setOrthoEnabled(orthoEnabled);
     interaction.setPolarEnabled(polarEnabled);
+    interaction.setUnits(unit, scaleFactor);
+    interaction.setGridSize(gridSize);
     renderEngine.render();
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [gridEnabled, snapEnabled, orthoEnabled, polarEnabled]);
+  }, [gridEnabled, snapEnabled, orthoEnabled, polarEnabled, unit, gridSize, scaleFactor]);
 
   // Sync active tool
   useEffect(() => {
@@ -326,9 +331,9 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
   return (
     <section className="canvas-area" id="canvas-area" aria-label="CAD Zeichenfläche">
       <div className="canvas-coords" role="status" aria-live="polite">
-        <span><span className="canvas-coords-label">X</span><span className="canvas-coords-val" id="coord-x">{cursorPos.x.toFixed(3)}</span></span>
-        <span><span className="canvas-coords-label">Y</span><span className="canvas-coords-val" id="coord-y">{cursorPos.y.toFixed(3)}</span></span>
-        <span style={{ color: 'var(--color-text-faint)' }}>m</span>
+        <span><span className="canvas-coords-label">X</span><span className="canvas-coords-val" id="coord-x">{formatCoordinate(cursorPos.x, unit, scaleFactor)}</span></span>
+        <span><span className="canvas-coords-label">Y</span><span className="canvas-coords-val" id="coord-y">{formatCoordinate(cursorPos.y, unit, scaleFactor)}</span></span>
+        <span style={{ color: 'var(--color-text-faint)' }}>{unit}</span>
       </div>
 
       <canvas
diff --git a/frontend/src/components/PropertiesPanel.tsx b/frontend/src/components/PropertiesPanel.tsx
index e3d5351..1c973f5 100644
--- a/frontend/src/components/PropertiesPanel.tsx
+++ b/frontend/src/components/PropertiesPanel.tsx
@@ -1,26 +1,75 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import type { PropertiesPanelProps } from '../types/ui.types';
+import { formatInputValue, parseDistance, type UnitType } from '../utils/format';
 
-const formatPos = (v: number) => `${v.toFixed(3)} m`;
-const formatDim = (v: number) => `${v.toFixed(2)} m`;
 const parseNum = (s: string) => parseFloat(s.replace(/[^0-9.\-]/g, '')) || 0;
 
-const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, layers, onUpdateProperty, onDelete }) => {
+const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
+  selectedElement,
+  layers,
+  onUpdateProperty,
+  onDelete,
+  unit = 'mm',
+  scaleFactor = 1,
+}) => {
   const el = selectedElement;
-  const x = el ? formatPos(el.x) : '0.000 m';
-  const y = el ? formatPos(el.y) : '0.000 m';
-  const w = el ? formatDim(el.width) : '0.50 m';
-  const h = el ? formatDim(el.height) : '0.50 m';
-  const rot = el ? String(el.properties.rotation ?? 0) : '0';
+
+  // Local input state — allows user to type freely, synced when element or unit changes
+  const [xInput, setXInput] = useState('');
+  const [yInput, setYInput] = useState('');
+  const [wInput, setWInput] = useState('');
+  const [hInput, setHInput] = useState('');
+  const [rotInput, setRotInput] = useState('');
+  const [radiusInput, setRadiusInput] = useState('');
+
+  // Sync displayed values when element changes or unit changes
+  useEffect(() => {
+    if (el) {
+      setXInput(formatInputValue(el.x, unit, scaleFactor));
+      setYInput(formatInputValue(el.y, unit, scaleFactor));
+      setWInput(formatInputValue(el.width, unit, scaleFactor));
+      setHInput(formatInputValue(el.height, unit, scaleFactor));
+      setRotInput(String(el.properties.rotation ?? 0));
+      const radius = el.properties.radius as number | undefined;
+      setRadiusInput(radius !== undefined ? formatInputValue(radius, unit, scaleFactor) : '');
+    }
+  }, [el, unit, scaleFactor]);
+
   const color = (el?.properties.stroke as string) || '#3b82f6';
-  const blockName = el?.properties.blockId || 'Stuhl-Standard';
-  const desc = el?.properties.text as string || 'Standard-Konferenzstuhl 0.5×0.5m';
+  const blockName = el?.properties.blockId || '';
+  const desc = (el?.properties.text as string) || '';
+
+  const handleXChange = (val: string) => {
+    setXInput(val);
+    const world = parseDistance(val, unit, scaleFactor);
+    onUpdateProperty('x', world);
+  };
+  const handleYChange = (val: string) => {
+    setYInput(val);
+    const world = parseDistance(val, unit, scaleFactor);
+    onUpdateProperty('y', world);
+  };
+  const handleWChange = (val: string) => {
+    setWInput(val);
+    const world = parseDistance(val, unit, scaleFactor);
+    onUpdateProperty('width', world);
+  };
+  const handleHChange = (val: string) => {
+    setHInput(val);
+    const world = parseDistance(val, unit, scaleFactor);
+    onUpdateProperty('height', world);
+  };
+  const handleRadiusChange = (val: string) => {
+    setRadiusInput(val);
+    const world = parseDistance(val, unit, scaleFactor);
+    onUpdateProperty('radius', world);
+  };
 
   return (
     <>
       <div className="panel-section">
         <div className="panel-section-title">
-          <span>Auswahl · 1 Stuhl</span>
+          <span>Auswahl {el ? `· ${el.type}` : ''}</span>
           <div style={{ display: 'flex', gap: '4px' }}>
             {onDelete && el && (
               <button
@@ -42,24 +91,30 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
       <div className="panel-section">
         <div className="panel-section-title"><span>Geometrie</span></div>
         <div className="prop-row">
-          <span className="prop-label">Position X</span>
-          <input className="prop-input" type="text" value={x} aria-label="Position X" onChange={(e) => onUpdateProperty('x', e.target.value)} />
+          <span className="prop-label">Position X ({unit})</span>
+          <input className="prop-input" type="text" value={xInput} aria-label="Position X" onChange={(e) => handleXChange(e.target.value)} />
         </div>
         <div className="prop-row">
-          <span className="prop-label">Position Y</span>
-          <input className="prop-input" type="text" value={y} aria-label="Position Y" onChange={(e) => onUpdateProperty('y', e.target.value)} />
+          <span className="prop-label">Position Y ({unit})</span>
+          <input className="prop-input" type="text" value={yInput} aria-label="Position Y" onChange={(e) => handleYChange(e.target.value)} />
         </div>
         <div className="prop-row">
-          <span className="prop-label">Breite</span>
-          <input className="prop-input" type="text" value={w} aria-label="Breite" onChange={(e) => onUpdateProperty('width', e.target.value)} />
+          <span className="prop-label">Breite ({unit})</span>
+          <input className="prop-input" type="text" value={wInput} aria-label="Breite" onChange={(e) => handleWChange(e.target.value)} />
         </div>
         <div className="prop-row">
-          <span className="prop-label">Tiefe</span>
-          <input className="prop-input" type="text" value={h} aria-label="Tiefe" onChange={(e) => onUpdateProperty('height', e.target.value)} />
+          <span className="prop-label">Tiefe ({unit})</span>
+          <input className="prop-input" type="text" value={hInput} aria-label="Tiefe" onChange={(e) => handleHChange(e.target.value)} />
         </div>
+        {el?.type === 'circle' && (
+          <div className="prop-row">
+            <span className="prop-label">Radius ({unit})</span>
+            <input className="prop-input" type="text" value={radiusInput} aria-label="Radius" onChange={(e) => handleRadiusChange(e.target.value)} />
+          </div>
+        )}
         <div className="prop-row">
-          <span className="prop-label">Drehung</span>
-          <input className="prop-input" type="text" value={rot} aria-label="Drehung" onChange={(e) => onUpdateProperty('rotation', e.target.value)} />
+          <span className="prop-label">Drehung (°)</span>
+          <input className="prop-input" type="text" value={rotInput} aria-label="Drehung" onChange={(e) => { setRotInput(e.target.value); onUpdateProperty('rotation', parseNum(e.target.value)); }} />
         </div>
       </div>
 
@@ -69,26 +124,26 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
           <span className="prop-label">Farbe</span>
           <div className="prop-color-row">
             <div className="prop-color-swatch" style={{ background: color }} aria-hidden="true"></div>
-            <input className="prop-swatch-input" type="color" value={color} aria-label="Stuhlfarbe" onChange={(e) => onUpdateProperty('stroke', e.target.value)} />
+            <input className="prop-swatch-input" type="color" value={color} aria-label="Elementfarbe" onChange={(e) => onUpdateProperty('stroke', e.target.value)} />
             <input className="prop-input" type="text" value={color.toUpperCase()} aria-label="Farb-Hex" onChange={(e) => onUpdateProperty('stroke', e.target.value)} />
           </div>
         </div>
         <div className="prop-row">
           <span className="prop-label">Linientyp</span>
           <select className="prop-select" aria-label="Linientyp" value={el?.properties.lineType || 'solid'} onChange={(e) => onUpdateProperty('lineType', e.target.value)}>
-            <option>Solid (durchgehend)</option>
-            <option>Dashed (gestrichelt)</option>
-            <option>Dotted (gepunktet)</option>
-            <option>Dash-Dot</option>
+            <option value="solid">Solid (durchgehend)</option>
+            <option value="dashed">Dashed (gestrichelt)</option>
+            <option value="dotted">Dotted (gepunktet)</option>
+            <option value="dash-dot">Dash-Dot</option>
           </select>
         </div>
         <div className="prop-row">
           <span className="prop-label">Stärke</span>
-          <select className="prop-select" aria-label="Linienstärke" value={String(el?.properties.strokeWidth ?? '0.18')} onChange={(e) => onUpdateProperty('strokeWidth', e.target.value)}>
-            <option>0.18 mm · Normal</option>
-            <option>0.25 mm · Dick</option>
-            <option>0.35 mm · Extra</option>
-            <option>0.50 mm · Max</option>
+          <select className="prop-select" aria-label="Linienstärke" value={String(el?.properties.strokeWidth ?? '1')} onChange={(e) => onUpdateProperty('strokeWidth', parseNum(e.target.value))}>
+            <option value="0.18">0.18 mm · Normal</option>
+            <option value="0.25">0.25 mm · Dick</option>
+            <option value="0.35">0.35 mm · Extra</option>
+            <option value="0.50">0.50 mm · Max</option>
           </select>
         </div>
         <div className="prop-row">
@@ -97,28 +152,25 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({ selectedElement, laye
             {layers.length > 0 ? layers.map((l) => (
               <option key={l.id} value={l.id}>{l.name}</option>
             )) : (
-              <>
-                <option>Bestuhlung · Standard</option>
-                <option>Bestuhlung · VIP</option>
-                <option>Möbel · Tische</option>
-                <option>Bühne</option>
-              </>
+              <option value="">Kein Layer</option>
             )}
           </select>
         </div>
       </div>
 
-      <div className="panel-section">
-        <div className="panel-section-title"><span>Block</span></div>
-        <div className="prop-row">
-          <span className="prop-label">Block-Name</span>
-          <input className="prop-input" type="text" value={blockName} aria-label="Block-Name" onChange={(e) => onUpdateProperty('blockId', e.target.value)} />
+      {el?.type === 'block_instance' && (
+        <div className="panel-section">
+          <div className="panel-section-title"><span>Block</span></div>
+          <div className="prop-row">
+            <span className="prop-label">Block-Name</span>
+            <input className="prop-input" type="text" value={blockName} aria-label="Block-Name" onChange={(e) => onUpdateProperty('blockId', e.target.value)} />
+          </div>
+          <div className="prop-row">
+            <span className="prop-label">Beschreibung</span>
+            <input className="prop-input" type="text" value={desc} aria-label="Beschreibung" onChange={(e) => onUpdateProperty('text', e.target.value)} />
+          </div>
         </div>
-        <div className="prop-row">
-          <span className="prop-label">Beschreibung</span>
-          <input className="prop-input" type="text" value={desc} aria-label="Beschreibung" onChange={(e) => onUpdateProperty('text', e.target.value)} />
-        </div>
-      </div>
+      )}
     </>
   );
 };
diff --git a/frontend/src/components/RightSidebar.tsx b/frontend/src/components/RightSidebar.tsx
index 918ec67..75c2f71 100644
--- a/frontend/src/components/RightSidebar.tsx
+++ b/frontend/src/components/RightSidebar.tsx
@@ -31,6 +31,8 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
   collapsed,
   onToggleCollapse,
   token,
+  unit = 'mm',
+  scaleFactor = 1,
 }) => {
   return (
     <aside className={`rightbar${className ? ' ' + className : ''}${collapsed ? ' rightbar-collapsed' : ''}`} aria-label="Eigenschaften-Panels">
@@ -61,7 +63,7 @@ const RightSidebar: React.FC<RightSidebarProps> = ({
 
       <div className="rightbar-content">
         <div className={`rightbar-panel${activePanel === 'tool' ? ' active' : ''}`} data-panel-content="tool">
-          {activePanel === 'tool' && <PropertiesPanel selectedElement={selectedElement} layers={layers} onDelete={selectedElement && onElementsDeleted ? () => onElementsDeleted([selectedElement.id]) : undefined} onUpdateProperty={(key, value) => {
+          {activePanel === 'tool' && <PropertiesPanel selectedElement={selectedElement} layers={layers} unit={unit} scaleFactor={scaleFactor} onDelete={selectedElement && onElementsDeleted ? () => onElementsDeleted([selectedElement.id]) : undefined} onUpdateProperty={(key, value) => {
           if (!selectedElement || !onUpdateElement) return;
           const updated = { ...selectedElement };
           if (key === 'x' || key === 'y' || key === 'width' || key === 'height') {
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index b641a2f..28de35c 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -1,15 +1,26 @@
 import React, { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import PluginManager from './PluginManager';
+import type { UnitType } from '../utils/format';
 
 export interface SettingsModalProps {
   open: boolean;
   onClose: () => void;
+  unit?: UnitType;
+  gridSize?: number;
+  scaleFactor?: number;
+  onUnitChange?: (unit: UnitType) => void;
+  onGridSizeChange?: (size: number) => void;
+  onScaleFactorChange?: (factor: number) => void;
 }
 
-type SettingsTab = 'personal' | 'password' | 'language' | 'theme' | 'users' | 'plugins' | 'ai';
+type SettingsTab = 'personal' | 'password' | 'language' | 'theme' | 'units' | 'users' | 'plugins' | 'ai';
 
-const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
+const SettingsModal: React.FC<SettingsModalProps> = ({
+  open, onClose,
+  unit = 'mm', gridSize = 20, scaleFactor = 1,
+  onUnitChange, onGridSizeChange, onScaleFactorChange,
+}) => {
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<SettingsTab>('personal');
   const [displayName, setDisplayName] = useState(user?.name || '');
@@ -24,6 +35,20 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
   const [aiApiKey, setAiApiKey] = useState('');
   const [pwMessage, setPwMessage] = useState('');
 
+  // Local state for units tab — syncs with props on open
+  const [localUnit, setLocalUnit] = useState<UnitType>(unit);
+  const [localGridSize, setLocalGridSize] = useState<number>(gridSize);
+  const [localScaleFactor, setLocalScaleFactor] = useState<number>(scaleFactor);
+
+  // Sync local state when modal opens or props change
+  React.useEffect(() => {
+    if (open) {
+      setLocalUnit(unit);
+      setLocalGridSize(gridSize);
+      setLocalScaleFactor(scaleFactor);
+    }
+  }, [open, unit, gridSize, scaleFactor]);
+
   if (!open) return null;
 
   const isAdmin = user?.role === 'admin';
@@ -34,6 +59,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
     { id: 'password', label: 'Passwort' },
     { id: 'language', label: 'Sprache' },
     { id: 'theme', label: 'Theme' },
+    { id: 'units', label: 'Einheiten' },
     { id: 'users', label: 'Benutzer', adminOnly: true },
     { id: 'plugins', label: 'Plugins', adminOnly: true },
     { id: 'ai', label: 'KI' },
@@ -60,6 +86,12 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
     setConfirmPassword('');
   };
 
+  const handleUnitApply = () => {
+    onUnitChange?.(localUnit);
+    onGridSizeChange?.(localGridSize);
+    onScaleFactorChange?.(localScaleFactor);
+  };
+
   const renderTabContent = () => {
     switch (activeTab) {
       case 'personal':
@@ -111,6 +143,49 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
             </div>
           </div>
         );
+      case 'units':
+        return (
+          <div className="settings-tab-content">
+            <label className="settings-label">Maßeinheit</label>
+            <select
+              className="settings-input"
+              value={localUnit}
+              onChange={(e) => setLocalUnit(e.target.value as UnitType)}
+            >
+              <option value="mm">Millimeter (mm)</option>
+              <option value="cm">Zentimeter (cm)</option>
+              <option value="m">Meter (m)</option>
+            </select>
+
+            <label className="settings-label">Rastergröße (Welt-Einheiten)</label>
+            <input
+              className="settings-input"
+              type="number"
+              min={1}
+              value={localGridSize}
+              onChange={(e) => setLocalGridSize(parseFloat(e.target.value) || 20)}
+            />
+            <p style={{ fontSize: '11px', color: 'var(--color-text-muted)', margin: '2px 0 12px' }}>
+              Rasterabstand in Welt-Einheiten. Bei mm mit Scale-Faktor 1 entspricht 20 = 20mm.
+            </p>
+
+            <label className="settings-label">Scale-Faktor (mm pro Welt-Einheit)</label>
+            <input
+              className="settings-input"
+              type="number"
+              min={0.001}
+              step={0.001}
+              value={localScaleFactor}
+              onChange={(e) => setLocalScaleFactor(parseFloat(e.target.value) || 1)}
+            />
+            <p style={{ fontSize: '11px', color: 'var(--color-text-muted)', margin: '2px 0 12px' }}>
+              1 Welt-Einheit = {localScaleFactor} mm. Standard: 1 (1 Welt-Einheit = 1mm).
+              Für echte Meter-Koordinaten: 1000 (1 Welt-Einheit = 1m).
+            </p>
+
+            <button className="settings-btn" onClick={handleUnitApply}>Anwenden</button>
+          </div>
+        );
       case 'users':
         return (
           <div className="settings-tab-content">
diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
index 7f40e42..bbf3543 100644
--- a/frontend/src/components/StatusBar.tsx
+++ b/frontend/src/components/StatusBar.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 import type { StatusBarProps } from '../types/ui.types';
+import { formatCoordinate, type UnitType } from '../utils/format';
 
 const StatusBar: React.FC<StatusBarProps> = ({
   snapEnabled, orthoEnabled, polarEnabled, gridEnabled,
   cursorX, cursorY, activeLayer, activeTool, onlineCount,
   onToggleSnap, onToggleOrtho, onTogglePolar, onToggleGrid, seatCount,
+  unit = 'mm', scaleFactor = 1, onUnitChange,
 }) => {
+  const xDisplay = formatCoordinate(cursorX, unit, scaleFactor);
+  const yDisplay = formatCoordinate(cursorY, unit, scaleFactor);
+
   return (
     <footer className="statusbar" role="status">
       <div className={`status-item${snapEnabled ? ' active' : ''}`} title="Snap-Modus (F3)" aria-pressed={snapEnabled} onClick={onToggleSnap}>
@@ -25,10 +30,10 @@ const StatusBar: React.FC<StatusBarProps> = ({
         <span>GRID</span>
       </div>
       <div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
-        <span>X: {cursorX.toFixed(3)} m</span>
+        <span>X: {xDisplay} {unit}</span>
       </div>
       <div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
-        <span>Y: {cursorY.toFixed(3)} m</span>
+        <span>Y: {yDisplay} {unit}</span>
       </div>
       <div className="status-item hide-mobile" title="Layer">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/></svg>
@@ -44,6 +49,28 @@ const StatusBar: React.FC<StatusBarProps> = ({
           <span>{seatCount} Stühle</span>
         </div>
       )}
+      {onUnitChange && (
+        <div className="status-item" title="Maßeinheit">
+          <select
+            value={unit}
+            onChange={(e) => onUnitChange(e.target.value as UnitType)}
+            style={{
+              background: 'transparent',
+              color: 'inherit',
+              border: '1px solid var(--color-border)',
+              borderRadius: '3px',
+              padding: '1px 4px',
+              fontSize: '11px',
+              cursor: 'pointer',
+            }}
+            aria-label="Maßeinheit auswählen"
+          >
+            <option value="mm">mm</option>
+            <option value="cm">cm</option>
+            <option value="m">m</option>
+          </select>
+        </div>
+      )}
       <div className="status-item" title={`${onlineCount} anderer Nutzer online`}>
         <span className="status-dot"></span>
         <span>Online · {onlineCount} weiterer</span>
diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
index 5b2355f..b74dd5d 100644
--- a/frontend/src/components/Topbar.tsx
+++ b/frontend/src/components/Topbar.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import type { TopbarProps } from '../types/ui.types';
+import type { UnitType } from '../utils/format';
 
-const Topbar: React.FC<TopbarProps> = ({ projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme, onOpenSettings, onOpenLeftDrawer, onOpenRightDrawer }) => {
+const Topbar: React.FC<TopbarProps> = ({
+  projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme,
+  onOpenSettings, onOpenLeftDrawer, onOpenRightDrawer,
+  unit = 'mm', onUnitChange,
+}) => {
   return (
     <header className="topbar" role="banner">
       <div className="topbar-left">
@@ -28,6 +33,29 @@ const Topbar: React.FC<TopbarProps> = ({ projectName, savedStatus, onUndo, onRed
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 15-6.7L21 13"/></svg>
         </button>
         <span style={{ width: '1px', height: '20px', background: 'var(--color-border)', margin: '0 4px' }}></span>
+        {onUnitChange && (
+          <select
+            className="unit-select"
+            aria-label="Maßeinheit"
+            title="Maßeinheit"
+            value={unit}
+            onChange={(e) => onUnitChange(e.target.value as UnitType)}
+            style={{
+              background: 'transparent',
+              color: 'inherit',
+              border: '1px solid var(--color-border)',
+              borderRadius: '4px',
+              padding: '2px 6px',
+              fontSize: '12px',
+              cursor: 'pointer',
+              marginRight: '4px',
+            }}
+          >
+            <option value="mm">mm</option>
+            <option value="cm">cm</option>
+            <option value="m">m</option>
+          </select>
+        )}
         <button className="icon-btn-top" aria-label="Versionen" title="Versionsverlauf">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </button>
@@ -47,7 +75,7 @@ const Topbar: React.FC<TopbarProps> = ({ projectName, savedStatus, onUndo, onRed
           <option value="en">EN</option>
         </select>
         <button className="icon-btn-top mobile-drawer-toggle" aria-label="Panel öffnen" title="Panel öffnen" onClick={onOpenRightDrawer}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
         </button>
         <button className="icon-btn-top" aria-label="Benachrichtigungen" title="Benachrichtigungen">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
diff --git a/frontend/src/interaction/index.ts b/frontend/src/interaction/index.ts
index fc1dc11..e24cc25 100644
--- a/frontend/src/interaction/index.ts
+++ b/frontend/src/interaction/index.ts
@@ -9,6 +9,7 @@ import { GroupManager } from '../tools/modification/GroupTool';
 import { moveElement, rotateElement, scaleElement, mirrorElement, offsetElement, trimElement, extendElement, filletElements, distance, angleBetween } from '../tools/modification/geometry';
 import { SeatingService, SEATING_TEMPLATES } from '../services/seatingService';
 import { DimensionService } from '../services/dimensionService';
+import { formatDistance, type UnitType } from '../utils/format';
 
 export type ToolPhase = 'idle' | 'drawing' | 'modifying' | 'panning' | 'selecting';
 
@@ -61,6 +62,8 @@ export class InteractionEngine {
   private boundMouseMove: EventListener;
   private boundMouseUp: EventListener;
   private boundPointerCancel: EventListener;
+  private unit: UnitType = 'mm';
+  private scaleFactor: number = 1;
 
   constructor(
     canvas: HTMLCanvasElement,
@@ -118,6 +121,15 @@ export class InteractionEngine {
     this.state.ortho = enabled;
   }
 
+  setUnits(unit: UnitType, scaleFactor: number): void {
+    this.unit = unit;
+    this.scaleFactor = scaleFactor;
+  }
+
+  setGridSize(gridSize: number): void {
+    this.snapEngine.setConfig({ gridSpacing: gridSize });
+  }
+
   setPolarEnabled(enabled: boolean): void {
     this.snapEngine.setConfig({ polarEnabled: enabled });
   }
@@ -684,9 +696,10 @@ export class InteractionEngine {
       this.onCommandTrigger?.('measure: click end point');
     } else {
       const first = this.state.points[0];
-      const dist = Math.sqrt((pt.x - first.x) ** 2 + (pt.y - first.y) ** 2);
+      const rawDist = Math.sqrt((pt.x - first.x) ** 2 + (pt.y - first.y) ** 2);
       const angle = (Math.atan2(pt.y - first.y, pt.x - first.x) * 180) / Math.PI;
-      this.onCommandTrigger?.(`distance: ${dist.toFixed(2)}  angle: ${angle.toFixed(1)}°`);
+      const distStr = formatDistance(rawDist, this.unit, this.scaleFactor);
+      this.onCommandTrigger?.(`distance: ${distStr}  angle: ${angle.toFixed(1)}°`);
       this.state.points = [];
       this.state.phase = 'idle';
       this.requestRender();
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index efd6444..e130e38 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -608,6 +608,33 @@ export async function deleteGlobalBlock(token: string, id: string): Promise<void
 
 export { API_BASE };
 
+// ─── Settings (Key/Value) ────────────────────────────────
+export interface Setting {
+  key: string;
+  value: string;
+  updated_at: string;
+}
+
+export async function getSetting(token: string, key: string): Promise<Setting | null> {
+  const res = await fetch(`${API_BASE}/api/settings/${encodeURIComponent(key)}`, {
+    method: 'GET',
+    headers: authHeaders(token),
+  });
+  if (res.status === 404) return null;
+  if (!res.ok) throw new Error(`Failed to fetch setting: ${key}`);
+  return res.json();
+}
+
+export async function setSetting(token: string, key: string, value: string): Promise<Setting> {
+  const res = await fetch(`${API_BASE}/api/settings/${encodeURIComponent(key)}`, {
+    method: 'PUT',
+    headers: authHeaders(token),
+    body: JSON.stringify({ value }),
+  });
+  if (!res.ok) throw new Error(`Failed to save setting: ${key}`);
+  return res.json();
+}
+
 // ─── AI Copilot ─────────────────────────────────────────
 export interface AIChatMessage {
   role: string;
diff --git a/frontend/src/types/ui.types.ts b/frontend/src/types/ui.types.ts
index 99f187b..cd850dd 100644
--- a/frontend/src/types/ui.types.ts
+++ b/frontend/src/types/ui.types.ts
@@ -6,6 +6,7 @@ import type { CADElement, CADLayer, BlockDefinition, ToolType } from './cad.type
 import type { ToolState } from '../interaction';
 import type { BackgroundConfig } from '../services/backgroundService';
 import type { UserCursor } from '../crdt';
+import type { UnitType } from '../utils/format';
 
 export type ViewMode = '2d' | 'iso' | 'front' | 'top';
 export type RibbonTab = 'start' | 'insert' | 'format' | 'view' | 'tools' | 'ki';
@@ -67,11 +68,19 @@ export interface TopbarProps {
   onOpenSettings?: () => void;
   onOpenLeftDrawer?: () => void;
   onOpenRightDrawer?: () => void;
+  unit?: UnitType;
+  onUnitChange?: (unit: UnitType) => void;
 }
 
 export interface SettingsModalProps {
   open: boolean;
   onClose: () => void;
+  unit?: UnitType;
+  gridSize?: number;
+  scaleFactor?: number;
+  onUnitChange?: (unit: UnitType) => void;
+  onGridSizeChange?: (size: number) => void;
+  onScaleFactorChange?: (factor: number) => void;
 }
 
 export interface RibbonBarProps {
@@ -137,6 +146,9 @@ export interface CanvasAreaProps {
   bgConfig?: BackgroundConfig | null;
   remoteCursors?: UserCursor[];
   groups?: Array<{ id: string; name: string; elementIds: string[]; parentGroupId: string | null }>;
+  unit?: UnitType;
+  gridSize?: number;
+  scaleFactor?: number;
 }
 
 export interface RightSidebarProps {
@@ -183,6 +195,8 @@ export interface RightSidebarProps {
   onCollapse?: () => void;
   collapsed?: boolean;
   onToggleCollapse?: () => void;
+  unit?: UnitType;
+  scaleFactor?: number;
 }
 
 export interface PropertiesPanelProps {
@@ -190,6 +204,8 @@ export interface PropertiesPanelProps {
   layers: CADLayer[];
   onUpdateProperty: (key: string, value: unknown) => void;
   onDelete?: () => void;
+  unit?: UnitType;
+  scaleFactor?: number;
 }
 
 export interface LayerPanelProps {
@@ -255,6 +271,9 @@ export interface StatusBarProps {
   onTogglePolar: () => void;
   onToggleGrid: () => void;
   seatCount?: number;
+  unit?: UnitType;
+  scaleFactor?: number;
+  onUnitChange?: (unit: UnitType) => void;
 }
 
 export interface TreeViewProps {
diff --git a/frontend/src/utils/__tests__/format.test.ts b/frontend/src/utils/__tests__/format.test.ts
new file mode 100644
index 0000000..ea6b7b5
--- /dev/null
+++ b/frontend/src/utils/__tests__/format.test.ts
@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest';
+import { formatDistance, parseDistance, formatCoordinate, formatInputValue } from '../format';
+
+describe('formatDistance', () => {
+  it('formats mm correctly with default scaleFactor', () => {
+    expect(formatDistance(100, 'mm')).toBe('100 mm');
+    expect(formatDistance(0, 'mm')).toBe('0 mm');
+    expect(formatDistance(1234.5, 'mm')).toBe('1235 mm');
+  });
+
+  it('formats cm correctly with default scaleFactor', () => {
+    expect(formatDistance(100, 'cm')).toBe('10.0 cm');
+    expect(formatDistance(0, 'cm')).toBe('0.0 cm');
+    expect(formatDistance(55, 'cm')).toBe('5.5 cm');
+  });
+
+  it('formats m correctly with default scaleFactor', () => {
+    expect(formatDistance(1000, 'm')).toBe('1.00 m');
+    expect(formatDistance(0, 'm')).toBe('0.00 m');
+    expect(formatDistance(1500, 'm')).toBe('1.50 m');
+  });
+
+  it('applies scaleFactor correctly', () => {
+    expect(formatDistance(100, 'mm', 10)).toBe('1000 mm');
+    expect(formatDistance(100, 'cm', 10)).toBe('100.0 cm');
+    expect(formatDistance(100, 'm', 10)).toBe('1.00 m');
+  });
+});
+
+describe('parseDistance', () => {
+  it('parses mm input correctly', () => {
+    expect(parseDistance('500', 'mm')).toBe(500);
+    expect(parseDistance('0', 'mm')).toBe(0);
+  });
+
+  it('parses cm input correctly', () => {
+    expect(parseDistance('10', 'cm')).toBe(100);
+    expect(parseDistance('5.5', 'cm')).toBe(55);
+  });
+
+  it('parses m input correctly', () => {
+    expect(parseDistance('1', 'm')).toBe(1000);
+    expect(parseDistance('0.5', 'm')).toBe(500);
+  });
+
+  it('applies scaleFactor correctly', () => {
+    expect(parseDistance('500', 'mm', 10)).toBe(50);
+    expect(parseDistance('10', 'cm', 10)).toBe(10);
+    expect(parseDistance('1', 'm', 10)).toBe(100);
+  });
+
+  it('returns 0 for invalid input', () => {
+    expect(parseDistance('abc', 'mm')).toBe(0);
+    expect(parseDistance('', 'cm')).toBe(0);
+    expect(parseDistance('NaN', 'm')).toBe(0);
+  });
+});
+
+describe('formatCoordinate', () => {
+  it('formats mm coordinate', () => {
+    expect(formatCoordinate(123.7, 'mm')).toBe('124');
+  });
+
+  it('formats cm coordinate', () => {
+    expect(formatCoordinate(123.7, 'cm')).toBe('12.4');
+  });
+
+  it('formats m coordinate with 3 decimal places', () => {
+    expect(formatCoordinate(1234.5, 'm')).toBe('1.235');
+  });
+});
+
+describe('formatInputValue', () => {
+  it('formats mm input value without unit suffix', () => {
+    expect(formatInputValue(100, 'mm')).toBe('100');
+  });
+
+  it('formats cm input value', () => {
+    expect(formatInputValue(100, 'cm')).toBe('10.0');
+  });
+
+  it('formats m input value', () => {
+    expect(formatInputValue(1500, 'm')).toBe('1.500');
+  });
+});
+
+describe('round-trip: parseDistance to formatDistance', () => {
+  it('round-trips mm values correctly', () => {
+    const input = '500';
+    const world = parseDistance(input, 'mm');
+    const formatted = formatDistance(world, 'mm');
+    expect(formatted).toBe('500 mm');
+  });
+
+  it('round-trips cm values correctly', () => {
+    const input = '10.5';
+    const world = parseDistance(input, 'cm');
+    const formatted = formatDistance(world, 'cm');
+    expect(formatted).toBe('10.5 cm');
+  });
+
+  it('round-trips m values correctly', () => {
+    const input = '2.50';
+    const world = parseDistance(input, 'm');
+    const formatted = formatDistance(world, 'm');
+    expect(formatted).toBe('2.50 m');
+  });
+
+  it('round-trips with scaleFactor', () => {
+    const input = '500';
+    const world = parseDistance(input, 'mm', 10);
+    const formatted = formatDistance(world, 'mm', 10);
+    expect(formatted).toBe('500 mm');
+  });
+});
diff --git a/frontend/src/utils/format.ts b/frontend/src/utils/format.ts
new file mode 100644
index 0000000..c9d460a
--- /dev/null
+++ b/frontend/src/utils/format.ts
@@ -0,0 +1,94 @@
+/**
+ * Unit formatting and parsing utilities for CAD distance values.
+ * All internal CAD coordinates are stored in world units.
+ * scaleFactor converts world units to millimeters (1 world unit = scaleFactor mm).
+ */
+
+export type UnitType = 'mm' | 'cm' | 'm';
+
+/**
+ * Format a raw world-unit distance into a human-readable string with the given unit.
+ * @param raw - distance in world units
+ * @param unit - target display unit ('mm' | 'cm' | 'm')
+ * @param scaleFactor - millimeters per world unit (default 1)
+ * @returns formatted string like "500 mm", "5.0 cm", "0.05 m"
+ */
+export function formatDistance(
+  raw: number,
+  unit: UnitType,
+  scaleFactor: number = 1,
+): string {
+  const mm = raw * scaleFactor;
+  switch (unit) {
+    case 'mm':
+      return `${mm.toFixed(0)} mm`;
+    case 'cm':
+      return `${(mm / 10).toFixed(1)} cm`;
+    case 'm':
+      return `${(mm / 1000).toFixed(2)} m`;
+  }
+}
+
+/**
+ * Parse a user-entered distance string back into world units.
+ * @param input - numeric string (e.g. "500", "5.5", "0.05")
+ * @param unit - the unit the user is entering values in
+ * @param scaleFactor - millimeters per world unit (default 1)
+ * @returns world-unit distance, or 0 if input is invalid
+ */
+export function parseDistance(
+  input: string,
+  unit: UnitType,
+  scaleFactor: number = 1,
+): number {
+  const value = parseFloat(input);
+  if (isNaN(value)) return 0;
+  switch (unit) {
+    case 'mm':
+      return value / scaleFactor;
+    case 'cm':
+      return (value * 10) / scaleFactor;
+    case 'm':
+      return (value * 1000) / scaleFactor;
+  }
+}
+
+/**
+ * Format a raw world-unit coordinate value for compact display (e.g. status bar).
+ * Uses fewer decimal places than formatDistance.
+ */
+export function formatCoordinate(
+  raw: number,
+  unit: UnitType,
+  scaleFactor: number = 1,
+): string {
+  const mm = raw * scaleFactor;
+  switch (unit) {
+    case 'mm':
+      return `${mm.toFixed(0)}`;
+    case 'cm':
+      return `${(mm / 10).toFixed(1)}`;
+    case 'm':
+      return `${(mm / 1000).toFixed(3)}`;
+  }
+}
+
+/**
+ * Format a raw world-unit value for an input field (without unit suffix).
+ * This is what the user sees in text inputs so they can edit the numeric value.
+ */
+export function formatInputValue(
+  raw: number,
+  unit: UnitType,
+  scaleFactor: number = 1,
+): string {
+  const mm = raw * scaleFactor;
+  switch (unit) {
+    case 'mm':
+      return `${mm.toFixed(0)}`;
+    case 'cm':
+      return `${(mm / 10).toFixed(1)}`;
+    case 'm':
+      return `${(mm / 1000).toFixed(3)}`;
+  }
+}
diff --git a/frontend/tests/Components.test.tsx b/frontend/tests/Components.test.tsx
index aeeaab5..a9e906c 100644
--- a/frontend/tests/Components.test.tsx
+++ b/frontend/tests/Components.test.tsx
@@ -136,8 +136,9 @@ describe('StatusBar', () => {
 
   it('should render cursor coordinates', () => {
     render(<StatusBar {...defaultProps} />);
+    // Default unit is mm, scaleFactor=1: 123.456 → '123', 78.9 → '79'
     expect(screen.getByText(/123/)).toBeInTheDocument();
-    expect(screen.getByText(/78/)).toBeInTheDocument();
+    expect(screen.getByText(/79/)).toBeInTheDocument();
   });
 
   it('should render active layer and tool', () => {
@@ -352,29 +353,31 @@ describe('PropertiesPanel', () => {
   const layers = [makeLayer({ id: 'layer-1', name: 'Layer 1' })];
   const element = makeElement({ id: 'elem-1', type: 'rect', x: 10, y: 20, width: 100, height: 50 });
 
-  it('should show default values when no element selected', () => {
+  it('should show empty inputs when no element selected', () => {
     render(<PropertiesPanel selectedElement={null} layers={layers} onUpdateProperty={() => {}} />);
-    // Default values are in inputs with aria-labels
-    expect(screen.getByLabelText('Position X')).toHaveDisplayValue('0.000 m');
-    expect(screen.getByLabelText('Position Y')).toHaveDisplayValue('0.000 m');
+    // When no element is selected, input fields are empty
+    expect(screen.getByLabelText('Position X')).toHaveDisplayValue('');
+    expect(screen.getByLabelText('Position Y')).toHaveDisplayValue('');
   });
 
-  it('should display element coordinates when element is selected', () => {
+  it('should display element coordinates in mm by default', () => {
     render(<PropertiesPanel selectedElement={element} layers={layers} onUpdateProperty={() => {}} />);
-    expect(screen.getByLabelText('Position X')).toHaveDisplayValue('10.000 m');
-    expect(screen.getByLabelText('Position Y')).toHaveDisplayValue('20.000 m');
+    // Default unit is mm with scaleFactor=1, so world units are displayed as mm
+    expect(screen.getByLabelText('Position X')).toHaveDisplayValue('10');
+    expect(screen.getByLabelText('Position Y')).toHaveDisplayValue('20');
   });
 
-  it('should display element dimensions', () => {
+  it('should display element dimensions in mm by default', () => {
     render(<PropertiesPanel selectedElement={element} layers={layers} onUpdateProperty={() => {}} />);
-    expect(screen.getByLabelText('Breite')).toHaveDisplayValue('100.00 m');
-    expect(screen.getByLabelText('Tiefe')).toHaveDisplayValue('50.00 m');
+    expect(screen.getByLabelText('Breite')).toHaveDisplayValue('100');
+    expect(screen.getByLabelText('Tiefe')).toHaveDisplayValue('50');
   });
 
-  it('should call onUpdateProperty when changing a property input', () => {
+  it('should call onUpdateProperty with world-unit number when changing a property input', () => {
     const onUpdateProperty = vi.fn();
     render(<PropertiesPanel selectedElement={element} layers={layers} onUpdateProperty={onUpdateProperty} />);
     fireEvent.change(screen.getByLabelText('Position X'), { target: { value: '999' } });
-    expect(onUpdateProperty).toHaveBeenCalledWith('x', '999');
+    // In mm mode with scaleFactor=1, input '999' → 999 world units
+    expect(onUpdateProperty).toHaveBeenCalledWith('x', 999);
   });
 });