diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..c0b19d3
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [3000]
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}
diff --git a/Dockerfile b/Dockerfile
index 972d624..f257c40 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,6 @@
 # https://nextjs.org/docs/deployment
 # Install dependencies only when needed
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
diff --git a/src/components/FirecallItems/FirecallItemDialog.tsx b/src/components/FirecallItems/FirecallItemDialog.tsx
index 0eb0eaa..304e9b6 100644
--- a/src/components/FirecallItems/FirecallItemDialog.tsx
+++ b/src/components/FirecallItems/FirecallItemDialog.tsx
@@ -12,10 +12,14 @@ import TextField from '@mui/material/TextField';
 import moment from 'moment';
 import React, { useState } from 'react';
 import ConfirmDialog from '../dialogs/ConfirmDialog';
-import MyDateTimePicker from '../inputs/DateTimePicker';
 import { FirecallItem } from '../firebase/firestore';
-import { firecallItemInfo, firecallItems } from './infos/firecallitems';
-import { FirecallItemInfo } from './infos/types';
+import MyDateTimePicker from '../inputs/DateTimePicker';
+import { fcItemClasses, fcItemNames, getItemClass } from './elements';
+import { FirecallItemBase } from './elements/FirecallItemBase';
+import { CheckBox } from '@mui/icons-material';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
 
 export interface FirecallItemDialogOptions {
   onClose: (item?: FirecallItem) => void;
@@ -31,18 +35,13 @@ export default function FirecallItemDialog({
   type: itemType,
 }: FirecallItemDialogOptions) {
   const [open, setOpen] = useState(true);
-  const [item, setFirecallItem] = useState<FirecallItem>(
-    itemDefault || firecallItemInfo(itemType).factory()
+  const [item, setFirecallItem] = useState<FirecallItemBase>(
+    getItemClass(itemDefault || ({ type: itemType } as FirecallItem))
   );
   const [confirmDelete, setConfirmDelete] = useState(false);
 
-  const itemInfo: FirecallItemInfo = firecallItemInfo(item.type);
-
   const setItemField = (field: string, value: any) => {
-    setFirecallItem((prev) => ({
-      ...prev,
-      [field]: value,
-    }));
+    setFirecallItem((prev) => getItemClass({ ...prev.data(), [field]: value }));
   };
 
   const onChange =
@@ -52,10 +51,10 @@ export default function FirecallItemDialog({
 
   const handleChange = (event: SelectChangeEvent) => {
     setItemField('type', event.target.value);
-    setFirecallItem((prev) => ({
-      ...firecallItemInfo(event.target.value).factory(),
-      ...prev,
-    }));
+    // setFirecallItem((prev) => ({
+    //   ...firecallItemInfo(event.target.value).factory(),
+    //   ...prev,
+    // }));
   };
 
   return (
@@ -63,13 +62,13 @@ export default function FirecallItemDialog({
       <Dialog open={open} onClose={() => onClose()}>
         <DialogTitle>
           {item.id ? (
-            <>{itemInfo.name} bearbeiten</>
+            <>{item.markerName()} bearbeiten</>
           ) : (
-            <>Neu: {itemInfo.name} hinzufügen</>
+            <>Neu: {item.markerName()} hinzufügen</>
           )}
         </DialogTitle>
         <DialogContent>
-          <DialogContentText>{itemInfo.dialogText(item)}</DialogContentText>
+          <DialogContentText>{item.dialogText()}</DialogContentText>
           {allowTypeChange && (
             <FormControl fullWidth variant="standard">
               <InputLabel id="firecall-item-type-label">Element Typ</InputLabel>
@@ -80,19 +79,19 @@ export default function FirecallItemDialog({
                 label="Art"
                 onChange={handleChange}
               >
-                {Object.entries(firecallItems)
-                  .filter(([key, fcItem]) => key !== 'fallback')
-                  .map(([key, fcItem]) => (
+                {Object.entries(fcItemNames)
+                  .filter(([key, name]) => key !== 'fallback')
+                  .map(([key, name]) => (
                     <MenuItem key={key} value={key}>
-                      {fcItem.name}
+                      {name}
                     </MenuItem>
                   ))}
               </Select>
             </FormControl>
           )}
-          {Object.entries(itemInfo.fields).map(([key, label]) => (
+          {Object.entries(item.fields()).map(([key, label]) => (
             <React.Fragment key={key}>
-              {itemInfo.dateFields.includes(key) && (
+              {item.dateFields().includes(key) && (
                 <MyDateTimePicker
                   label={label}
                   value={
@@ -105,21 +104,38 @@ export default function FirecallItemDialog({
                   }}
                 />
               )}
-              {!itemInfo.dateFields.includes(key) && (
-                <TextField
-                  margin="dense"
-                  id={key}
-                  key={key}
-                  label={label}
-                  type={
-                    (itemInfo.fieldTypes && itemInfo.fieldTypes[key]) || 'text'
-                  }
-                  fullWidth
-                  variant="standard"
-                  onChange={onChange(key)}
-                  value={((item as any)[key] as string) || ''}
-                />
+              {item.fieldTypes()[key] === 'boolean' && (
+                <FormGroup>
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={
+                          (item as any)[key] === 'true' ||
+                          (item as any)[key] === true
+                        }
+                        onChange={(event, checked) => {
+                          setItemField(key, checked ? 'true' : 'false');
+                        }}
+                      />
+                    }
+                    label={label}
+                  />
+                </FormGroup>
               )}
+              {!item.dateFields().includes(key) &&
+                item.fieldTypes()[key] !== 'boolean' && (
+                  <TextField
+                    margin="dense"
+                    id={key}
+                    key={key}
+                    label={label}
+                    type={item.fieldTypes()[key] || 'text'}
+                    fullWidth
+                    variant="standard"
+                    onChange={onChange(key)}
+                    value={((item as any)[key] as string) || ''}
+                  />
+                )}
             </React.Fragment>
           ))}
         </DialogContent>
@@ -146,7 +162,7 @@ export default function FirecallItemDialog({
             color="primary"
             onClick={() => {
               setOpen(false);
-              onClose(item);
+              onClose(item.filteredData());
             }}
           >
             {item.id ? 'Aktualisieren' : 'Hinzufügen'}
@@ -155,10 +171,8 @@ export default function FirecallItemDialog({
       </Dialog>
       {confirmDelete && (
         <ConfirmDialog
-          title={`${itemInfo.name} ${itemInfo.title(item)} löschen`}
-          text={`Element ${itemInfo.name} ${itemInfo.title(
-            item
-          )} wirklich löschen?`}
+          title={`${item.title()} löschen`}
+          text={`${item.title()} wirklich löschen?`}
           onConfirm={(result) => {
             setConfirmDelete(false);
             if (result) {
diff --git a/src/components/FirecallItems/elements/CircleMarker.tsx b/src/components/FirecallItems/elements/CircleMarker.tsx
new file mode 100644
index 0000000..c9f2bf9
--- /dev/null
+++ b/src/components/FirecallItems/elements/CircleMarker.tsx
@@ -0,0 +1,112 @@
+import L, { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { Circle as LeafletCircle } from 'react-leaflet';
+import { Circle, FirecallItem } from '../../firebase/firestore';
+import { circleIcon } from '../icons';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class CircleMarker extends FirecallItemBase {
+  color: string;
+  radius: number;
+  opacity: number;
+  fill: string;
+
+  public constructor(firecallItem?: Circle) {
+    super(firecallItem);
+    this.color = firecallItem?.color || 'green';
+    this.radius = firecallItem?.radius || 50;
+    this.opacity = firecallItem?.opacity || 100;
+    this.fill = firecallItem?.fill === undefined ? 'true' : firecallItem.fill;
+  }
+
+  public data(): FirecallItem {
+    return {
+      ...super.data(),
+      color: this.color,
+      radius: this.radius,
+      opacity: this.opacity,
+      fill: this.fill,
+    } as Circle;
+  }
+
+  public markerName(): string {
+    return `Kreis`;
+  }
+
+  public title(): string {
+    return `${this.markerName()} ${this.name}`;
+  }
+  public info(): string {
+    return `Radius: ${this.radius || 0}m`;
+  }
+
+  public body(): string {
+    return `${this.lat},${this.lng}\nUmkreis:  ${this.radius || 0}m`;
+  }
+
+  public dialogText(): ReactNode {
+    return (
+      <>
+        Um die Kreis zu zeichnen, auf die gewünschten Positionen klicken. <br />
+        {this.name || ''}
+      </>
+    );
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      radius: 'Radius (m)',
+      color: 'Farbe (HTML bzw. Englisch)',
+      fill: 'Kreis ausfüllen',
+      opacity: 'Deckkraft (in Prozent)',
+    };
+  }
+
+  public dateFields(): string[] {
+    return [];
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {
+      fill: 'boolean',
+    };
+  }
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>Kreis {this.name}</b>
+        <br />
+        {this.radius || 0}m
+      </>
+    );
+  }
+  public titleFn(): string {
+    return `Kreis ${this.name}: Radius ${this.radius || 0}m`;
+  }
+  public icon(): Icon<IconOptions> {
+    return circleIcon;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new CircleMarker();
+  }
+
+  public renderMarker(selectItem: (item: FirecallItem) => void) {
+    return (
+      <>
+        {super.renderMarker(selectItem)}
+        <LeafletCircle
+          key={'circle' + this.id}
+          color={this.color}
+          radius={this.radius}
+          center={L.latLng(this.lat, this.lng)}
+          opacity={this.opacity / 100}
+          fill={this.fill === 'true'}
+        >
+          {this.renderPopup(selectItem)}
+        </LeafletCircle>
+      </>
+    );
+  }
+}
diff --git a/src/components/FirecallItems/elements/FirecallArea.tsx b/src/components/FirecallItems/elements/FirecallArea.tsx
new file mode 100644
index 0000000..f97aac5
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallArea.tsx
@@ -0,0 +1,101 @@
+import { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { defaultPosition } from '../../../hooks/constants';
+import { Area, FirecallItem } from '../../firebase/firestore';
+import { circleIcon } from '../icons';
+import { FirecallItemBase } from './FirecallItemBase';
+import AreaMarker from './area/AreaComponent';
+
+export class FirecallArea extends FirecallItemBase {
+  distance: number = 0;
+  destLat: number = defaultPosition.lat;
+  destLng: number = defaultPosition.lng;
+  /** stringified LatLngPosition[] */
+  positions?: string;
+  color?: string;
+  opacity?: number;
+
+  public constructor(firecallItem?: Area) {
+    super(firecallItem);
+    this.distance = firecallItem?.distance || 0;
+    this.destLat = firecallItem?.destLat || defaultPosition.lat;
+    this.destLng = firecallItem?.destLng || defaultPosition.lng + 0.0001;
+    this.positions = firecallItem?.positions || JSON.stringify([]);
+    this.color = firecallItem?.color || 'blue';
+    this.opacity = firecallItem?.opacity || 50;
+  }
+
+  public data(): Area {
+    return {
+      ...super.data(),
+    } as Area;
+  }
+
+  public markerName() {
+    return 'Fläche';
+  }
+
+  // public title(): string {
+  //   return `Marker ${this.name}`;
+  // }
+  // public info(): string {
+  //   return `Länge ${this.distance}m`;
+  // }
+
+  public body(): string {
+    return `${this.lat},${this.lng} => ${this.destLat},${this.destLng}`;
+  }
+
+  public dialogText(): ReactNode {
+    return (
+      <>
+        Um die Fläche zu zeichnen, auf die gewünschten Positionen klicken. Zum
+        Abschluss auf einen belibigen Punkt klicken. <br />
+        {this.name || ''}
+      </>
+    );
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      color: 'Farbe (HTML bzw. Englisch)',
+      opacity: 'Deckkraft (in Prozent)',
+    };
+  }
+
+  // public dateFields(): string[] {
+  //   return [];
+  // }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {
+      opacity: 'number',
+    };
+  }
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>Fläche {this.name}</b>
+      </>
+    );
+  }
+  public titleFn(): string {
+    return `${this.markerName()} ${this.name}\n${this.beschreibung || ''}`;
+  }
+  public icon(): Icon<IconOptions> {
+    return circleIcon;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallArea();
+  }
+
+  public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+    return <AreaMarker record={this} selectItem={selectItem} key={this.id} />;
+  }
+
+  public static isPolyline(): boolean {
+    return true;
+  }
+}
diff --git a/src/components/FirecallItems/elements/FirecallAssp.tsx b/src/components/FirecallItems/elements/FirecallAssp.tsx
new file mode 100644
index 0000000..3cb708d
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallAssp.tsx
@@ -0,0 +1,79 @@
+import { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { FirecallItem } from '../../firebase/firestore';
+import { asspIcon } from '../icons';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallAssp extends FirecallItemBase {
+  public constructor(firecallItem?: FirecallItem) {
+    super(firecallItem);
+    this.type = 'assp';
+  }
+
+  public data(): FirecallItem {
+    return {
+      ...super.data(),
+    } as FirecallItem;
+  }
+
+  public markerName() {
+    return 'Atemschutzsammelplatz';
+  }
+
+  // public title(): string {
+  //   return `Marker ${this.name}`;
+  // }
+
+  // public info(): string {
+  //   return `${this.beschreibung || ''}`;
+  // }
+
+  // public body(): string {
+  //   return `${this.markerName()} ${this.name}
+  //       ${this.beschreibung}
+  //       position: ${this.lat},${this.lng}`;
+  // }
+
+  public dialogText(): ReactNode {
+    return <>ASSP {this.name}</>;
+  }
+
+  // public fields(): { [fieldName: string]: string } {
+  //   return {
+  //     ...super.fields(),
+  //   };
+  // }
+
+  // public dateFields(): string[] {
+  //   return [];
+  // }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {};
+  }
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>{this.name}</b>
+        <br />
+        {this.beschreibung || ''}
+      </>
+    );
+  }
+  public titleFn(): string {
+    return `ASSP ${this.name}\n${this.beschreibung || ''}`;
+  }
+  public icon(): Icon<IconOptions> {
+    return asspIcon;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallAssp();
+  }
+
+  // public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+  //   return (
+
+  //   );
+  // }
+}
diff --git a/src/components/FirecallItems/elements/FirecallConnection.tsx b/src/components/FirecallItems/elements/FirecallConnection.tsx
new file mode 100644
index 0000000..fdcd252
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallConnection.tsx
@@ -0,0 +1,116 @@
+import { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { defaultPosition } from '../../../hooks/constants';
+import { Connection, FirecallItem } from '../../firebase/firestore';
+import { circleIcon } from '../icons';
+import { FirecallItemBase } from './FirecallItemBase';
+import ConnectionMarker from './connection/ConnectionComponent';
+
+export class FirecallConnection extends FirecallItemBase {
+  destLat: number = defaultPosition.lat;
+  destLng: number = defaultPosition.lng;
+  /** stringified LatLngPosition[] */
+  positions?: string;
+  distance?: number;
+  color?: string;
+
+  public constructor(firecallItem?: Connection) {
+    super(firecallItem);
+    this.type = 'connection';
+    if (firecallItem) {
+      ({
+        destLat: this.destLat,
+        destLng: this.destLng,
+        positions: this.positions,
+        distance: this.distance,
+        color: this.color,
+      } = firecallItem);
+    }
+  }
+
+  public markerName() {
+    return 'Leitung';
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      color: 'Farbe (HTML bzw. Englisch)',
+    };
+  }
+
+  // public fieldTypes(): { [fieldName: string]: string } {
+  //   return {
+  //   };
+  // }
+
+  public data(): Connection {
+    return {
+      ...super.data(),
+      destLat: this.destLat,
+      destLng: this.destLng,
+      positions: this.positions,
+      distance: this.distance,
+      color: this.color,
+    } as Connection;
+  }
+
+  // public title(): string {
+  //   return `${this.name}`;
+  // }
+
+  public info(): string {
+    return `Länge: ${this.distance || 0}m`;
+  }
+
+  public body(): string {
+    return `${this.lat},${this.lng} => ${this.destLat},${this.destLng}`;
+  }
+
+  public dialogText(): ReactNode {
+    return (
+      <>
+        Um die Leitung zu zeichnen, auf die gewünschten Positionen klicken. Zum
+        Abschluss auf einen belibigen Punkt klicken. <br />
+        {this.name || ''}
+      </>
+    );
+  }
+
+  // public dateFields(): string[] {
+  //   return [...super.dateFields()];
+  // }
+
+  public titleFn(): string {
+    return `${this.markerName()} ${this.name}: ${this.distance || 0}m`;
+  }
+  public icon(): Icon<IconOptions> {
+    return circleIcon;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallConnection();
+  }
+
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>
+          {this.markerName()} {this.name}
+        </b>
+        <br />
+        {this.distance || 0}
+        m, {Math.ceil((this.distance || 0) / 20)} B Schläuche
+      </>
+    );
+  }
+  public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+    return (
+      <ConnectionMarker record={this} selectItem={selectItem} key={this.id} />
+    );
+  }
+
+  public static isPolyline(): boolean {
+    return true;
+  }
+}
diff --git a/src/components/FirecallItems/elements/FirecallDiary.tsx b/src/components/FirecallItems/elements/FirecallDiary.tsx
new file mode 100644
index 0000000..3e37b9e
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallDiary.tsx
@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { Diary, FirecallItem } from '../../firebase/firestore';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallDiary extends FirecallItemBase {
+  von: string;
+  an: string;
+  erledigt: string;
+
+  public constructor(firecallItem?: Diary) {
+    super(firecallItem);
+    this.type = 'diary';
+    this.von = firecallItem?.von ?? '';
+    this.an = firecallItem?.an ?? '';
+    this.erledigt = firecallItem?.erledigt ?? '';
+  }
+
+  public data(): Diary {
+    return {
+      ...super.data(),
+      von: this.von,
+      an: this.an,
+      erledigt: this.erledigt,
+    } as Diary;
+  }
+
+  public markerName() {
+    return 'Einsatztagebuch';
+  }
+
+  public dialogText(): ReactNode {
+    return <>Einsatztagebuch {this.name}</>;
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      von: 'Meldung von',
+      an: 'Meldung an',
+      erledigt: 'Erledigt',
+    };
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {};
+  }
+
+  public dateFields(): string[] {
+    return ['datum', 'erledigt'];
+  }
+
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>{this.name}</b>
+        <br />
+        {this.beschreibung || ''}
+      </>
+    );
+  }
+  public titleFn(): string {
+    return `${this.markerName()} ${this.name}\n${this.beschreibung || ''}`;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallDiary();
+  }
+
+  public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+    return <></>;
+  }
+}
diff --git a/src/components/FirecallItems/elements/FirecallEl.tsx b/src/components/FirecallItems/elements/FirecallEl.tsx
new file mode 100644
index 0000000..b04a71e
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallEl.tsx
@@ -0,0 +1,80 @@
+import { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { FirecallItem } from '../../firebase/firestore';
+import { asspIcon, elIcon } from '../icons';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallEinsatzleitung extends FirecallItemBase {
+  public constructor(firecallItem?: FirecallItem) {
+    super(firecallItem);
+    this.type = 'el';
+  }
+
+  public data(): FirecallItem {
+    return {
+      ...super.data(),
+    } as FirecallItem;
+  }
+
+  public markerName() {
+    return 'Einsatzleitung';
+  }
+
+  // public title(): string {
+  //   return `Marker ${this.name}`;
+  // }
+
+  // public info(): string {
+  //   return `${this.beschreibung || ''}`;
+  // }
+
+  // public body(): string {
+  //   return `${this.markerName()} ${this.name}
+  //       ${this.beschreibung}
+  //       position: ${this.lat},${this.lng}`;
+  // }
+
+  public dialogText(): ReactNode {
+    return <>Einsatzleitung {this.name}</>;
+  }
+
+  // public fields(): { [fieldName: string]: string } {
+  //   return {
+  //     ...super.fields(),
+  //   };
+  // }
+
+  // public dateFields(): string[] {
+  //   return [];
+  // }
+
+  public titleFn(): string {
+    return `ELung ${this.name}\n${this.beschreibung || ''}`;
+  }
+  public icon(): Icon<IconOptions> {
+    return elIcon;
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {};
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallEinsatzleitung();
+  }
+
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>Einsatzleitung {this.name}</b>
+        <br />
+        {this.beschreibung || ''}
+      </>
+    );
+  }
+  // public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+  //   return (
+
+  //   );
+  // }
+}
diff --git a/src/components/FirecallItems/elements/FirecallItemBase.tsx b/src/components/FirecallItems/elements/FirecallItemBase.tsx
new file mode 100644
index 0000000..c1a61d4
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallItemBase.tsx
@@ -0,0 +1,155 @@
+import EditIcon from '@mui/icons-material/Edit';
+import { IconButton } from '@mui/material';
+import { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { Popup } from 'react-leaflet';
+import { defaultPosition } from '../../../hooks/constants';
+import { FirecallItem } from '../../firebase/firestore';
+import { fallbackIcon } from '../icons';
+import { FirecallItemMarkerDefault } from './marker/FirecallItemDefault';
+
+export interface FirecallItemPopupProps {
+  children: ReactNode;
+  onClick: () => void;
+}
+
+export function FirecallItemPopup({
+  children,
+  onClick,
+}: FirecallItemPopupProps) {
+  return (
+    <Popup>
+      <IconButton sx={{ marginLeft: 'auto', float: 'right' }} onClick={onClick}>
+        <EditIcon />
+      </IconButton>
+      {children}
+    </Popup>
+  );
+}
+
+/**
+ * base class for all firecall items
+ */
+
+export class FirecallItemBase {
+  constructor(firecallItem?: FirecallItem) {
+    // empty initializer
+    this.name = firecallItem?.name || '';
+    this.beschreibung = firecallItem?.beschreibung || '';
+    this.lat = firecallItem?.lat || defaultPosition.lat;
+    this.lng = firecallItem?.lng || defaultPosition.lng;
+    this.type = firecallItem?.type || 'fallback';
+    this.id = firecallItem?.id;
+    this.original = firecallItem;
+    this.datum = firecallItem?.datum || new Date().toISOString();
+    this.rotation = firecallItem?.rotation || '0';
+  }
+
+  id?: string;
+  name: string;
+  beschreibung?: string;
+  lat: number;
+  lng: number;
+  type: string;
+
+  deleted?: boolean;
+  datum?: string;
+  editable?: boolean;
+  original?: FirecallItem;
+  rotation?: string;
+
+  /**
+   * prepare serialization
+   * @returns serializable data to save in firestore
+   */
+  public data(): FirecallItem {
+    return {
+      id: this.id,
+      lat: this.lat,
+      lng: this.lng,
+      name: this.name,
+      beschreibung: this.beschreibung,
+      type: this.type,
+      datum: this.datum,
+      rotation: this.rotation,
+    };
+  }
+
+  public filteredData(): FirecallItem {
+    return Object.fromEntries(
+      Object.entries(this.data()).filter(([key, value]) => value)
+    ) as FirecallItem;
+  }
+
+  public markerName() {
+    return 'Firecallitem';
+  }
+
+  public title(): string {
+    return `${this.markerName()} ${this.name}`;
+  }
+
+  public info(): string {
+    return `${this.beschreibung || ''}`;
+  }
+
+  public body(): string {
+    return `${this.markerName()} ${this.name}
+        ${this.beschreibung}
+        position: ${this.lat},${this.lng}`;
+  }
+
+  public dialogText(): ReactNode {
+    return this.name || '';
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      name: 'Bezeichnung',
+      beschreibung: 'Beschreibung',
+    };
+  }
+
+  public dateFields(): string[] {
+    return ['datum'];
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {};
+  }
+  public popupFn(): ReactNode {
+    return this.name;
+  }
+  public titleFn(): string {
+    return this.name;
+  }
+  public icon(): Icon<IconOptions> {
+    return fallbackIcon;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallItemBase();
+  }
+
+  public renderPopup(selectItem: (item: FirecallItem) => void): ReactNode {
+    return (
+      <FirecallItemPopup onClick={() => selectItem(this.data())}>
+        {this.popupFn()}
+      </FirecallItemPopup>
+    );
+  }
+
+  public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+    return (
+      <FirecallItemMarkerDefault
+        record={this}
+        selectItem={selectItem}
+        key={this.id}
+      />
+    );
+  }
+
+  public static isPolyline(): boolean {
+    return false;
+  }
+}
diff --git a/src/components/FirecallItems/elements/FirecallItemMarker.tsx b/src/components/FirecallItems/elements/FirecallItemMarker.tsx
new file mode 100644
index 0000000..d5fca77
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallItemMarker.tsx
@@ -0,0 +1,72 @@
+import L, { IconOptions, Icon as LeafletIcon } from 'leaflet';
+import { ReactNode } from 'react';
+import { FcMarker } from '../../firebase/firestore';
+import { markerIcon } from '../icons';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallItemMarker extends FirecallItemBase {
+  iconUrl: string;
+  public constructor(firecallItem?: FcMarker) {
+    super(firecallItem);
+    this.type = 'marker';
+    this.iconUrl = firecallItem?.iconUrl || '';
+  }
+
+  public data(): FcMarker {
+    return {
+      ...super.data(),
+      iconUrl: this.iconUrl,
+    } as FcMarker;
+  }
+
+  public markerName() {
+    return 'Marker';
+  }
+
+  public dialogText(): ReactNode {
+    return <>Markierung {this.name}</>;
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      iconUrl: 'Icon URL',
+    };
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {};
+  }
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>{this.name}</b>
+        <br />
+        {this.beschreibung || ''}
+      </>
+    );
+  }
+  public titleFn(): string {
+    return `${this.name}\n${this.beschreibung || ''}`;
+  }
+  public icon(): LeafletIcon<IconOptions> {
+    if (this.iconUrl) {
+      return L.icon({
+        iconUrl: this.iconUrl,
+        iconSize: [24, 24],
+      });
+    }
+
+    return markerIcon;
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallItemMarker();
+  }
+
+  // public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+  //   return (
+
+  //   );
+  // }
+}
diff --git a/src/components/FirecallItems/elements/FirecallLine.tsx b/src/components/FirecallItems/elements/FirecallLine.tsx
new file mode 100644
index 0000000..9e2daad
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallLine.tsx
@@ -0,0 +1,38 @@
+import { Line } from '../../firebase/firestore';
+import { FirecallConnection } from './FirecallConnection';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallLine extends FirecallConnection {
+  opacity?: number;
+
+  public constructor(firecallItem?: Line) {
+    super(firecallItem);
+    this.type = 'line';
+    if (firecallItem) {
+      ({ opacity: this.opacity } = firecallItem);
+    }
+    this.color = firecallItem?.color || 'green';
+  }
+
+  public markerName() {
+    return 'Linie';
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallLine();
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      opacity: 'Deckkraft (in Prozent)',
+    };
+  }
+
+  public data(): Line {
+    return {
+      ...super.data(),
+      opacity: this.opacity,
+    };
+  }
+}
diff --git a/src/components/FirecallItems/elements/FirecallRohr.tsx b/src/components/FirecallItems/elements/FirecallRohr.tsx
new file mode 100644
index 0000000..18b9f69
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallRohr.tsx
@@ -0,0 +1,109 @@
+import L, { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { FirecallItem, Rohr } from '../../firebase/firestore';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallRohr extends FirecallItemBase {
+  art: 'C' | 'B' | 'Wasserwerfer' | string = 'C';
+  durchfluss?: number;
+
+  public constructor(firecallItem?: Rohr) {
+    super(firecallItem);
+    this.type = 'rohr';
+    if (firecallItem) {
+      ({ durchfluss: this.durchfluss, art: this.art } = firecallItem);
+    }
+  }
+
+  public markerName() {
+    return 'Rohr';
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      durchfluss: 'Durchfluss (l/min)',
+      rotation: 'Drehung in Grad',
+    };
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {
+      rotation: 'number',
+      durchfluss: 'number',
+    };
+  }
+
+  public data(): FirecallItem {
+    return {
+      ...super.data(),
+      durchfluss: this.durchfluss,
+      art: this.art,
+    } as FirecallItem;
+  }
+
+  public title(): string {
+    return `${this.art} Rohr ${this.name}`;
+  }
+
+  public info(): string {
+    return `${this.durchfluss ? this.durchfluss + ' l/min' : ''}`;
+  }
+
+  // public body(): string {
+  //   return `${this.markerName()} ${this.name}
+  //       ${this.beschreibung}
+  //       position: ${this.lat},${this.lng}`;
+  // }
+
+  public dialogText(): ReactNode {
+    return <>C/B Rohr oder Wasserwerfer</>;
+  }
+
+  // public dateFields(): string[] {
+  //   return [];
+  // }
+
+  public titleFn(): string {
+    return `${this.name} ${this.art || ''}${
+      this.durchfluss ? ` ${this.durchfluss}l/min` : ''
+    }`;
+  }
+  public icon(): Icon<IconOptions> {
+    return L.icon({
+      iconUrl: `/icons/rohr${
+        ['b', 'c', 'ww', 'wasserwerfer'].indexOf(this.art.toLowerCase()) >= 0
+          ? '-' + this.art.toLowerCase()
+          : ''
+      }.svg`,
+      iconSize: [24, 24],
+      iconAnchor: [12, 12],
+      popupAnchor: [0, 0],
+    });
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallRohr();
+  }
+
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>
+          {this.name} {this.art} Rohr
+        </b>
+        {this.durchfluss && (
+          <>
+            <br />
+            Durchfluss: {this.durchfluss} l/min
+          </>
+        )}
+      </>
+    );
+  }
+  // public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+  //   return (
+
+  //   );
+  // }
+}
diff --git a/src/components/FirecallItems/elements/FirecallVehicle.tsx b/src/components/FirecallItems/elements/FirecallVehicle.tsx
new file mode 100644
index 0000000..e06d22d
--- /dev/null
+++ b/src/components/FirecallItems/elements/FirecallVehicle.tsx
@@ -0,0 +1,156 @@
+import L, { Icon, IconOptions } from 'leaflet';
+import { ReactNode } from 'react';
+import { formatTimestamp } from '../../../common/time-format';
+import { FirecallItem, Fzg } from '../../firebase/firestore';
+import { FirecallItemBase } from './FirecallItemBase';
+
+export class FirecallVehicle extends FirecallItemBase {
+  fw?: string;
+  besatzung?: string;
+  ats?: number;
+  alarmierung?: string;
+  eintreffen?: string;
+  abruecken?: string;
+
+  public constructor(firecallItem?: Fzg) {
+    super(firecallItem);
+    this.type = 'vehicle';
+    if (firecallItem) {
+      ({
+        fw: this.fw,
+        besatzung: this.besatzung,
+        ats: this.ats,
+        alarmierung: this.alarmierung,
+        eintreffen: this.eintreffen,
+        abruecken: this.abruecken,
+      } = firecallItem);
+    }
+  }
+
+  public markerName() {
+    return 'Fahrzeug';
+  }
+
+  public fields(): { [fieldName: string]: string } {
+    return {
+      ...super.fields(),
+      fw: 'Feuerwehr',
+      besatzung: 'Besatzung 1:?',
+      ats: 'ATS Träger',
+      beschreibung: 'Beschreibung',
+      alarmierung: 'Alarmierung',
+      eintreffen: 'Eintreffen',
+      abruecken: 'Abrücken',
+      rotation: 'Drehung in Grad',
+    };
+  }
+
+  public fieldTypes(): { [fieldName: string]: string } {
+    return {
+      rotation: 'number',
+      ats: 'number',
+    };
+  }
+
+  public data(): FirecallItem {
+    return {
+      ...super.data(),
+      fw: this.fw,
+      besatzung: this.besatzung,
+      ats: this.ats,
+      alarmierung: this.alarmierung,
+      eintreffen: this.eintreffen,
+      abruecken: this.abruecken,
+    } as FirecallItem;
+  }
+
+  public title(): string {
+    return `${this.name} ${this.fw}`;
+  }
+
+  public info(): string {
+    return `1:${this.besatzung || 0} ATS: ${this.ats || 0}`;
+  }
+
+  public body(): string {
+    return `${
+      this.alarmierung
+        ? 'Alarmierung: ' + formatTimestamp(this.alarmierung)
+        : ''
+    }
+    ${this.eintreffen ? ' Eintreffen: ' + formatTimestamp(this.eintreffen) : ''}
+    ${this.abruecken ? ' Abrücken: ' + formatTimestamp(this.abruecken) : ''}
+    Position ${this.lat} ${this.lng}`;
+  }
+
+  public dialogText(): ReactNode {
+    return <>Einsatzfahrzeug</>;
+  }
+
+  public dateFields(): string[] {
+    return [...super.dateFields(), 'alarmierung', 'eintreffen', 'abruecken'];
+  }
+
+  public titleFn(): string {
+    return `${this.name} ${this.fw || ''}`;
+  }
+  public icon(): Icon<IconOptions> {
+    return L.icon({
+      iconUrl: `/api/fzg?name=${encodeURIComponent(
+        this.name || ''
+      )}&fw=${encodeURIComponent(this.fw || '')}`,
+      iconSize: [45, 20],
+      iconAnchor: [20, 0],
+      popupAnchor: [0, 0],
+    });
+  }
+
+  public static factory(): FirecallItemBase {
+    return new FirecallVehicle();
+  }
+
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>
+          {this.name} {this.fw || ''}
+        </b>
+        {this.besatzung && Number.parseInt(this.besatzung) > 0 && (
+          <>
+            <br />
+            Besatzung: 1:{this.besatzung}
+          </>
+        )}
+        {this.ats !== undefined && this.ats > 0 && (
+          <>
+            {!(this.besatzung && Number.parseInt(this.besatzung) > 0) && <br />}{' '}
+            ({this.ats} ATS)
+          </>
+        )}
+        {this.alarmierung && (
+          <>
+            <br />
+            Alarmierung: {formatTimestamp(this.alarmierung)}
+          </>
+        )}
+        {this.eintreffen && (
+          <>
+            <br />
+            Eintreffen: {formatTimestamp(this.eintreffen)}
+          </>
+        )}
+        {this.abruecken && (
+          <>
+            <br />
+            Abrücken: {formatTimestamp(this.abruecken)}
+          </>
+        )}
+      </>
+    );
+  }
+  // public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
+  //   return (
+
+  //   );
+  // }
+}
diff --git a/src/components/FirecallItems/elements/area/AreaComponent.tsx b/src/components/FirecallItems/elements/area/AreaComponent.tsx
new file mode 100644
index 0000000..d66b5af
--- /dev/null
+++ b/src/components/FirecallItems/elements/area/AreaComponent.tsx
@@ -0,0 +1,106 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import { IconButton } from '@mui/material';
+import L from 'leaflet';
+import { useMemo } from 'react';
+import { Marker, Polygon, Popup } from 'react-leaflet';
+import { LatLngPosition, latLngPosition } from '../../../../common/geo';
+import { useFirecallId } from '../../../../hooks/useFirecall';
+import { FirecallItem } from '../../../firebase/firestore';
+import { FirecallArea } from '../FirecallArea';
+import {
+  deleteFirecallPosition,
+  updateFirecallPositions,
+} from '../connection/positions';
+
+export interface AreaMarkerProps {
+  record: FirecallArea;
+  selectItem: (item: FirecallItem) => void;
+}
+
+export default function AreaMarker({ record, selectItem }: AreaMarkerProps) {
+  const firecallId = useFirecallId();
+
+  const positions: LatLngPosition[] = useMemo(() => {
+    let p: LatLngPosition[] = [
+      latLngPosition(record.lat, record.lng),
+      [record.destLat, record.destLng],
+    ];
+
+    try {
+      if (record.positions) {
+        p = JSON.parse(record.positions);
+      }
+    } catch (err) {
+      console.warn(`unable to parse positions ${err} ${record.positions}`);
+    }
+    return p;
+  }, [
+    record.destLat,
+    record.destLng,
+    record.lat,
+    record.lng,
+    record.positions,
+  ]);
+
+  return (
+    <>
+      {positions.map((p, index) => (
+        <Marker
+          key={index}
+          position={p}
+          title={record.titleFn()}
+          icon={record.icon()}
+          draggable
+          autoPan={false}
+          eventHandlers={{
+            dragend: (event) => {
+              updateFirecallPositions(
+                firecallId,
+                (event.target as L.Marker)?.getLatLng(),
+                record.data(),
+                index
+              );
+            },
+          }}
+        >
+          <Popup>
+            <IconButton
+              sx={{ marginLeft: 'auto', float: 'right' }}
+              onClick={() => selectItem(record)}
+            >
+              <EditIcon />
+            </IconButton>
+            <IconButton
+              sx={{ marginLeft: 'auto', float: 'right' }}
+              onClick={() =>
+                deleteFirecallPosition(firecallId, record.data(), index)
+              }
+            >
+              <DeleteIcon />
+            </IconButton>
+            {record.popupFn()}
+          </Popup>
+        </Marker>
+      ))}
+      <Polygon
+        positions={positions}
+        pathOptions={{
+          color: record.color || '#0000ff',
+          opacity: ((record as any)?.opacity || 50.0) / 100,
+          fillOpacity: ((record as any)?.opacity || 50.0) / 100,
+        }}
+      >
+        <Popup>
+          <IconButton
+            sx={{ marginLeft: 'auto', float: 'right' }}
+            onClick={() => selectItem(record)}
+          >
+            <EditIcon />
+          </IconButton>
+          {record.popupFn()}
+        </Popup>
+      </Polygon>
+    </>
+  );
+}
diff --git a/src/components/FirecallItems/elements/area/areaFunctions.ts b/src/components/FirecallItems/elements/area/areaFunctions.ts
new file mode 100644
index 0000000..8be17be
--- /dev/null
+++ b/src/components/FirecallItems/elements/area/areaFunctions.ts
@@ -0,0 +1,54 @@
+import { doc, setDoc } from 'firebase/firestore';
+import L from 'leaflet';
+import { LatLngPosition } from '../../../../common/geo';
+import {
+  calculateDistance,
+  getConnectionPositions,
+} from '../../../FirecallItems/infos/connection';
+import { firestore } from '../../../firebase/firebase';
+import { Area } from '../../../firebase/firestore';
+
+export async function updateFirecallPositions(
+  firecallId: string,
+  newPos: L.LatLng,
+  fcItem: Area,
+  index: number
+) {
+  // console.info(`drag end on ${JSON.stringify(gisObject)}: ${newPos}`);
+  if (fcItem.id && newPos && fcItem.positions) {
+    const positions: LatLngPosition[] = getConnectionPositions(fcItem);
+    positions.splice(index, 1, [newPos.lat, newPos.lng]);
+    await updateConnectionInFirestore(firecallId, fcItem, positions);
+  }
+}
+
+export async function deleteFirecallPosition(
+  firecallId: string,
+  fcItem: Area,
+  index: number
+) {
+  // console.info(`drag end on ${JSON.stringify(gisObject)}: ${newPos}`);
+  if (fcItem.id && fcItem.positions) {
+    const positions: LatLngPosition[] = getConnectionPositions(fcItem);
+    positions.splice(index, 1);
+    await updateConnectionInFirestore(firecallId, fcItem, positions);
+  }
+}
+
+const updateConnectionInFirestore = async (
+  firecallId: string,
+  fcItem: Area,
+  positions: LatLngPosition[]
+) => {
+  if (fcItem.id)
+    return await setDoc(
+      doc(firestore, 'call', firecallId, 'item', fcItem.id),
+      {
+        positions: JSON.stringify(positions),
+        distance: Math.round(calculateDistance(positions)),
+      },
+      {
+        merge: true,
+      }
+    );
+};
diff --git a/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx b/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx
new file mode 100644
index 0000000..091ac14
--- /dev/null
+++ b/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx
@@ -0,0 +1,144 @@
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import { IconButton, Tooltip } from '@mui/material';
+import L from 'leaflet';
+import { useMemo, useState } from 'react';
+import { Marker, Polyline, Popup } from 'react-leaflet';
+import { LatLngPosition, latLngPosition } from '../../../../common/geo';
+import { defaultPosition } from '../../../../hooks/constants';
+import { useFirecallId } from '../../../../hooks/useFirecall';
+import { FirecallItem } from '../../../firebase/firestore';
+import { FirecallConnection } from '../FirecallConnection';
+import {
+  addFirecallPosition,
+  deleteFirecallPosition,
+  findSectionOnPolyline,
+  updateFirecallPositions,
+} from './positions';
+
+export interface ConnectionMarkerProps {
+  record: FirecallConnection;
+  selectItem: (item: FirecallItem) => void;
+}
+
+export default function ConnectionMarker({
+  record,
+  selectItem,
+}: ConnectionMarkerProps) {
+  const firecallId = useFirecallId();
+  const [point, setPoint] = useState(defaultPosition);
+  const [pointIndex, setPointIndex] = useState(-1);
+
+  const positions: LatLngPosition[] = useMemo(() => {
+    let p: LatLngPosition[] = [
+      latLngPosition(record.lat, record.lng),
+      [record.destLat, record.destLng],
+    ];
+
+    try {
+      if (record.positions) {
+        p = JSON.parse(record.positions);
+      }
+    } catch (err) {
+      console.warn(`unable to parse positions ${err} ${record.positions}`);
+    }
+    return p;
+  }, [
+    record.destLat,
+    record.destLng,
+    record.lat,
+    record.lng,
+    record.positions,
+  ]);
+
+  return (
+    <>
+      {positions.map((p, index) => (
+        <Marker
+          key={index}
+          position={p}
+          title={record.titleFn()}
+          icon={record.icon()}
+          draggable
+          autoPan={false}
+          eventHandlers={{
+            dragend: (event) => {
+              updateFirecallPositions(
+                firecallId,
+                (event.target as L.Marker)?.getLatLng(),
+                record.data(),
+                index
+              );
+            },
+          }}
+        >
+          <Popup>
+            <Tooltip title="Linie bearbeiten">
+              <IconButton
+                sx={{ marginLeft: 'auto', float: 'right' }}
+                onClick={() => selectItem(record)}
+              >
+                <EditIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Punkt entfernen">
+              <IconButton
+                sx={{ marginLeft: 'auto', float: 'right' }}
+                onClick={() =>
+                  deleteFirecallPosition(firecallId, record, index)
+                }
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+            {record.popupFn()}
+            <br />
+            Punkt {index} von {positions.length}
+          </Popup>
+        </Marker>
+      ))}
+      <Polyline
+        positions={positions}
+        pathOptions={{
+          color: record.color || '#0000ff',
+          opacity: ((record as any)?.opacity || 100.0) / 100,
+        }}
+        eventHandlers={{
+          click: (event) => {
+            const index = findSectionOnPolyline(positions, event.latlng);
+            // console.info(
+            //   `clicked on polyline ${event.latlng} index in points: ${index}`
+            // );
+            setPoint(event.latlng);
+            setPointIndex(index);
+          },
+        }}
+      >
+        <Popup>
+          {pointIndex >= 0 && (
+            <Tooltip title="Einen Punkt hinzufügen">
+              <IconButton
+                color="primary"
+                aria-label="add a point on the line"
+                onClick={() =>
+                  addFirecallPosition(firecallId, point, record, pointIndex)
+                }
+              >
+                <AddIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+          <IconButton
+            sx={{ marginLeft: 'auto', float: 'right' }}
+            onClick={() => selectItem(record)}
+          >
+            <EditIcon />
+          </IconButton>
+
+          {record.popupFn()}
+        </Popup>
+      </Polyline>
+    </>
+  );
+}
diff --git a/src/components/FirecallItems/elements/connection/distance.ts b/src/components/FirecallItems/elements/connection/distance.ts
new file mode 100644
index 0000000..5e1c5a0
--- /dev/null
+++ b/src/components/FirecallItems/elements/connection/distance.ts
@@ -0,0 +1,36 @@
+import { latLngPosition, LatLngPosition } from '../../../../common/geo';
+import { toLatLng } from '../../../../hooks/constants';
+import { Connection } from '../../../firebase/firestore';
+
+export const getConnectionPositions = (
+  record: Connection
+): LatLngPosition[] => {
+  let p: LatLngPosition[] = [
+    latLngPosition(record.lat, record.lng),
+    [record.destLat, record.destLng],
+  ];
+
+  try {
+    if (record.positions) {
+      p = JSON.parse(record.positions);
+    }
+  } catch (err) {
+    console.warn(`unable to parse positions ${err} ${record.positions}`);
+  }
+  return p;
+};
+
+export const calculateDistance = (positions: LatLngPosition[]): number => {
+  let distance = 0;
+  positions.forEach((p, index) => {
+    if (index > 0) {
+      distance += toLatLng(p[0], p[1]).distanceTo(
+        toLatLng(positions[index - 1][0], positions[index - 1][1])
+      );
+    }
+  });
+  return distance;
+};
+
+export const calculateDistanceForConnection = (record: Connection) =>
+  Math.round(calculateDistance(getConnectionPositions(record)));
diff --git a/src/components/FirecallItems/elements/connection/positions.ts b/src/components/FirecallItems/elements/connection/positions.ts
new file mode 100644
index 0000000..a089954
--- /dev/null
+++ b/src/components/FirecallItems/elements/connection/positions.ts
@@ -0,0 +1,88 @@
+import { doc, setDoc } from 'firebase/firestore';
+import L from 'leaflet';
+import GeometryUtil from 'leaflet-geometryutil';
+import { LatLngPosition } from '../../../../common/geo';
+import { firestore } from '../../../firebase/firebase';
+import { Connection } from '../../../firebase/firestore';
+import { calculateDistance, getConnectionPositions } from './distance';
+
+export async function updateFirecallPositions(
+  firecallId: string,
+  newPos: L.LatLng,
+  fcItem: Connection,
+  index: number
+) {
+  // console.info(`drag end on ${JSON.stringify(gisObject)}: ${newPos}`);
+  if (fcItem.id && newPos && fcItem.positions) {
+    const positions: LatLngPosition[] = getConnectionPositions(fcItem);
+    positions.splice(index, 1, [newPos.lat, newPos.lng]);
+    await updateConnectionInFirestore(firecallId, fcItem, positions);
+  }
+}
+export async function addFirecallPosition(
+  firecallId: string,
+  newPos: L.LatLng,
+  fcItem: Connection,
+  index: number
+) {
+  // console.info(`drag end on ${JSON.stringify(gisObject)}: ${newPos}`);
+  if (fcItem.id && newPos && fcItem.positions) {
+    const positions: LatLngPosition[] = getConnectionPositions(fcItem);
+    positions.splice(index, 0, [newPos.lat, newPos.lng]);
+    await updateConnectionInFirestore(firecallId, fcItem, positions);
+  }
+}
+
+export async function deleteFirecallPosition(
+  firecallId: string,
+  fcItem: Connection,
+  index: number
+) {
+  // console.info(`drag end on ${JSON.stringify(gisObject)}: ${newPos}`);
+  if (fcItem.id && fcItem.positions) {
+    const positions: LatLngPosition[] = getConnectionPositions(fcItem);
+    positions.splice(index, 1);
+    await updateConnectionInFirestore(firecallId, fcItem, positions);
+  }
+}
+
+export function findSectionOnPolyline(
+  positions: LatLngPosition[],
+  point: L.LatLng
+) {
+  for (let i = 1; i < positions.length; i++) {
+    const belongsToSection = GeometryUtil.belongsSegment(
+      point,
+      new L.LatLng(positions[i - 1][0], positions[i - 1][1]),
+      new L.LatLng(positions[i][0], positions[i][1])
+    );
+    if (belongsToSection) {
+      console.info(
+        `click point ${point} belongs to section ${positions[i - 1]}-${
+          positions[i]
+        } ${i - 1}-${i}`
+      );
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+const updateConnectionInFirestore = async (
+  firecallId: string,
+  fcItem: Connection,
+  positions: LatLngPosition[]
+) => {
+  if (fcItem.id)
+    return await setDoc(
+      doc(firestore, 'call', firecallId, 'item', fcItem.id),
+      {
+        positions: JSON.stringify(positions),
+        distance: Math.round(calculateDistance(positions)),
+      },
+      {
+        merge: true,
+      }
+    );
+};
diff --git a/src/components/FirecallItems/elements/index.tsx b/src/components/FirecallItems/elements/index.tsx
new file mode 100644
index 0000000..5f1486b
--- /dev/null
+++ b/src/components/FirecallItems/elements/index.tsx
@@ -0,0 +1,69 @@
+import {
+  Area,
+  Circle,
+  Connection,
+  Diary,
+  FirecallItem,
+  Fzg,
+  Line,
+  Rohr,
+  FcMarker,
+} from '../../firebase/firestore';
+import { CircleMarker } from './CircleMarker';
+import { FirecallArea } from './FirecallArea';
+import { FirecallAssp } from './FirecallAssp';
+import { FirecallConnection } from './FirecallConnection';
+import { FirecallDiary } from './FirecallDiary';
+import { FirecallEinsatzleitung } from './FirecallEl';
+import { FirecallItemBase } from './FirecallItemBase';
+import { FirecallItemMarker } from './FirecallItemMarker';
+import { FirecallLine } from './FirecallLine';
+import { FirecallRohr } from './FirecallRohr';
+import { FirecallVehicle } from './FirecallVehicle';
+
+export const fcItemClasses: { [key: string]: typeof FirecallItemBase } = {
+  fallback: FirecallItemBase,
+  marker: FirecallItemMarker,
+  rohr: FirecallRohr,
+  connection: FirecallConnection,
+  diary: FirecallDiary,
+  line: FirecallLine,
+  circle: CircleMarker,
+  area: FirecallArea,
+  assp: FirecallAssp,
+  el: FirecallEinsatzleitung,
+  vehicle: FirecallVehicle,
+};
+
+export const fcItemNames: { [key: string]: string } = {};
+
+Object.entries(fcItemClasses).forEach(([k, FcClass]) => {
+  fcItemNames[k] = new FcClass().markerName();
+});
+
+export function getItemClass(record?: FirecallItem) {
+  switch (record?.type) {
+    case 'marker':
+      return new FirecallItemMarker(record as FcMarker);
+    case 'rohr':
+      return new FirecallRohr(record as Rohr);
+    case 'connection':
+      return new FirecallConnection(record as Connection);
+    case 'diary':
+      return new FirecallDiary(record as Diary);
+    case 'line':
+      return new FirecallLine(record as Line);
+    case 'circle':
+      return new CircleMarker(record as Circle);
+    case 'area':
+      return new FirecallArea(record as Area);
+    case 'vehicle':
+      return new FirecallVehicle(record as Fzg);
+    case 'assp':
+      return new FirecallAssp(record);
+    case 'el':
+      return new FirecallEinsatzleitung(record);
+    default:
+      return new FirecallItemBase(record);
+  }
+}
diff --git a/src/components/FirecallItems/elements/marker/FirecallItemDefault.tsx b/src/components/FirecallItems/elements/marker/FirecallItemDefault.tsx
new file mode 100644
index 0000000..3997b18
--- /dev/null
+++ b/src/components/FirecallItems/elements/marker/FirecallItemDefault.tsx
@@ -0,0 +1,84 @@
+import { doc, setDoc } from 'firebase/firestore';
+import L from 'leaflet';
+import { useEffect, useState } from 'react';
+import { defaultPosition } from '../../../../hooks/constants';
+import { useFirecallId } from '../../../../hooks/useFirecall';
+import { RotatedMarker } from '../../../Map/markers/RotatedMarker';
+import { firestore } from '../../../firebase/firebase';
+import { FirecallItem } from '../../../firebase/firestore';
+import { FirecallItemBase } from '../FirecallItemBase';
+
+export interface FirecallItemMarkerProps {
+  record: FirecallItemBase;
+  selectItem: (item: FirecallItem) => void;
+}
+
+async function updateFircallItemPos(
+  firecallId: string,
+  event: L.DragEndEvent,
+  fcItem: FirecallItem
+) {
+  const newPos = (event.target as L.Marker)?.getLatLng();
+  // console.info(`drag end on ${JSON.stringify(fcItem)}: ${newPos}`);
+  if (fcItem.id && newPos) {
+    const updatePos = {
+      lat: newPos.lat,
+      lng: newPos.lng,
+    };
+
+    await setDoc(
+      doc(firestore, 'call', firecallId, 'item', fcItem.id),
+      updatePos,
+      {
+        merge: true,
+      }
+    );
+  }
+}
+
+export function FirecallItemMarkerDefault({
+  record,
+  selectItem,
+}: FirecallItemMarkerProps) {
+  const icon = record.icon();
+  const firecallId = useFirecallId();
+  const [startPos, setStartPos] = useState<L.LatLng>(
+    L.latLng(
+      record.lat || defaultPosition.lat,
+      record.lng || defaultPosition.lng
+    )
+  );
+
+  useEffect(() => {
+    if (record.lat && record.lng) {
+      setStartPos(L.latLng(record.lat, record.lng));
+    }
+  }, [record.lat, record.lng]);
+
+  return (
+    <>
+      <RotatedMarker
+        position={startPos}
+        title={record.titleFn()}
+        icon={icon}
+        draggable
+        autoPan={false}
+        eventHandlers={{
+          dragend: (event) => {
+            setStartPos((event.target as L.Marker)?.getLatLng());
+            updateFircallItemPos(firecallId, event, record);
+          },
+        }}
+        rotationAngle={
+          record?.rotation &&
+          !Number.isNaN(Number.parseInt(record?.rotation, 10))
+            ? Number.parseInt(record?.rotation, 10) % 360
+            : 0
+        }
+        rotationOrigin="center"
+      >
+        {record.renderPopup(selectItem)}
+      </RotatedMarker>
+    </>
+  );
+}
diff --git a/src/components/FirecallItems/icons.tsx b/src/components/FirecallItems/icons.tsx
index 1e3c94d..acd636a 100644
--- a/src/components/FirecallItems/icons.tsx
+++ b/src/components/FirecallItems/icons.tsx
@@ -28,7 +28,7 @@ export const markerIcon = L.icon({
   popupAnchor: [0, -25],
 });
 
-export const connectionIcon = L.icon({
+export const circleIcon = L.icon({
   iconUrl: `/icons/circle.svg`,
   iconSize: [11, 11],
   iconAnchor: [6, 6],
diff --git a/src/components/FirecallItems/infos/area.tsx b/src/components/FirecallItems/infos/area.tsx
index eedfce3..3f8c8fe 100644
--- a/src/components/FirecallItems/infos/area.tsx
+++ b/src/components/FirecallItems/infos/area.tsx
@@ -1,9 +1,9 @@
 import { mapPosition } from '../../../hooks/useMapPosition';
-import { Connection } from '../../firebase/firestore';
-import { connectionIcon } from '../icons';
+import { Area } from '../../firebase/firestore';
+import { circleIcon } from '../icons';
 import { FirecallItemInfo } from './types';
 
-export const areaInfo: FirecallItemInfo<Connection> = {
+export const areaInfo: FirecallItemInfo<Area> = {
   name: 'Fläche',
   title: (item) => `Fläche ${item.name}`,
   info: (item) => `Länge: ${item.distance || 0}m`,
@@ -23,7 +23,7 @@ export const areaInfo: FirecallItemInfo<Connection> = {
   },
   dateFields: [],
   factory: () => ({
-    type: 'connection',
+    type: 'area',
     name: '',
     beschreibung: '',
     destLat: mapPosition.lat,
@@ -33,13 +33,13 @@ export const areaInfo: FirecallItemInfo<Connection> = {
     opacity: 50,
     datum: new Date().toISOString(),
   }),
-  popupFn: (item: Connection) => (
+  popupFn: (item: Area) => (
     <>
       <b>Fläche {item.name}</b>
     </>
   ),
-  titleFn: (item: Connection) => `Fläche ${item.name}`,
-  icon: (item: Connection) => {
-    return connectionIcon;
+  titleFn: (item: Area) => `Fläche ${item.name}`,
+  icon: (item: Area) => {
+    return circleIcon;
   },
 };
diff --git a/src/components/FirecallItems/infos/circle.tsx b/src/components/FirecallItems/infos/circle.tsx
index 5329f05..f840b59 100644
--- a/src/components/FirecallItems/infos/circle.tsx
+++ b/src/components/FirecallItems/infos/circle.tsx
@@ -1,5 +1,5 @@
 import { Circle } from '../../firebase/firestore';
-import { connectionIcon } from '../icons';
+import { circleIcon } from '../icons';
 import { FirecallItemInfo } from './types';
 
 export const circleInfo: FirecallItemInfo<Circle> = {
@@ -39,6 +39,6 @@ export const circleInfo: FirecallItemInfo<Circle> = {
   ),
   titleFn: (item: Circle) => `Kreis ${item.name}: Radius ${item.radius || 0}m`,
   icon: (item: Circle) => {
-    return connectionIcon;
+    return circleIcon;
   },
 };
diff --git a/src/components/FirecallItems/infos/connection.tsx b/src/components/FirecallItems/infos/connection.tsx
index cb6c94a..db4f8dc 100644
--- a/src/components/FirecallItems/infos/connection.tsx
+++ b/src/components/FirecallItems/infos/connection.tsx
@@ -2,7 +2,7 @@ import { latLngPosition, LatLngPosition } from '../../../common/geo';
 import { toLatLng } from '../../../hooks/constants';
 import { mapPosition } from '../../../hooks/useMapPosition';
 import { Connection } from '../../firebase/firestore';
-import { connectionIcon } from '../icons';
+import { circleIcon } from '../icons';
 import { FirecallItemInfo } from './types';
 
 export const getConnectionPositions = (
@@ -76,6 +76,6 @@ export const connectionInfo: FirecallItemInfo<Connection> = {
   ),
   titleFn: (item: Connection) => `Leitung ${item.name}: ${item.distance || 0}m`,
   icon: (item: Connection) => {
-    return connectionIcon;
+    return circleIcon;
   },
 };
diff --git a/src/components/FirecallItems/infos/line.tsx b/src/components/FirecallItems/infos/line.tsx
index 5f3a071..0838289 100644
--- a/src/components/FirecallItems/infos/line.tsx
+++ b/src/components/FirecallItems/infos/line.tsx
@@ -1,6 +1,6 @@
 import { mapPosition } from '../../../hooks/useMapPosition';
 import { Line } from '../../firebase/firestore';
-import { connectionIcon } from '../icons';
+import { circleIcon } from '../icons';
 import { FirecallItemInfo } from './types';
 
 export const lineInfo: FirecallItemInfo<Line> = {
@@ -42,6 +42,6 @@ export const lineInfo: FirecallItemInfo<Line> = {
   ),
   titleFn: (item: Line) => `Linie ${item.name}: ${item.distance || 0}m`,
   icon: (item: Line) => {
-    return connectionIcon;
+    return circleIcon;
   },
 };
diff --git a/src/components/FirecallItems/infos/marker.tsx b/src/components/FirecallItems/infos/marker.tsx
index fe535e6..7e8b4b4 100644
--- a/src/components/FirecallItems/infos/marker.tsx
+++ b/src/components/FirecallItems/infos/marker.tsx
@@ -1,9 +1,9 @@
-import { FirecallItem, FirecallItemMarker } from '../../firebase/firestore';
+import { FirecallItem, FcMarker } from '../../firebase/firestore';
 import { markerIcon } from '../icons';
 import { FirecallItemInfo } from './types';
 import L from 'leaflet';
 
-export const markerInfo: FirecallItemInfo<FirecallItemMarker> = {
+export const markerInfo: FirecallItemInfo<FcMarker> = {
   name: 'Marker',
   title: (item) => `${item.name || ''}`,
   info: (item) => ``,
diff --git a/src/components/Map/Leitungen/Draw.tsx b/src/components/Map/Leitungen/Draw.tsx
index 54c8af2..d73d4d7 100644
--- a/src/components/Map/Leitungen/Draw.tsx
+++ b/src/components/Map/Leitungen/Draw.tsx
@@ -1,7 +1,7 @@
 import { LatLng, LeafletMouseEvent, LeafletMouseEventHandlerFn } from 'leaflet';
 import { useCallback, useState } from 'react';
 import { Marker, Polyline, useMap, useMapEvent } from 'react-leaflet';
-import { connectionIcon } from '../../FirecallItems/icons';
+import { circleIcon } from '../../FirecallItems/icons';
 import { useLeitungen } from './context';
 
 // const itemInfo = firecallItemInfo('marker');
@@ -34,7 +34,7 @@ const LeitungenDraw = () => {
           key={p.toString()}
           position={p}
           title={`p ${p}`}
-          icon={connectionIcon}
+          icon={circleIcon}
           draggable
           autoPan={false}
           eventHandlers={{
diff --git a/src/components/Map/MapActionButtons.tsx b/src/components/Map/MapActionButtons.tsx
index 809a76b..83c7997 100644
--- a/src/components/Map/MapActionButtons.tsx
+++ b/src/components/Map/MapActionButtons.tsx
@@ -11,6 +11,7 @@ import { Connection, FirecallItem } from '../firebase/firestore';
 import FirecallItemDialog from '../FirecallItems/FirecallItemDialog';
 import { firecallItemInfo } from '../FirecallItems/infos/firecallitems';
 import { useLeitungen } from './Leitungen/context';
+import { fcItemClasses } from '../FirecallItems/elements';
 
 export interface MapActionButtonsOptions {
   map: L.Map;
@@ -42,7 +43,7 @@ export default function MapActionButtons({ map }: MapActionButtonsOptions) {
   const fzgDialogClose = useCallback(
     (fzg?: FirecallItem) => {
       setFzgDialogIsOpen(false);
-      if (['connection', 'line', 'area'].includes(fzg?.type || '')) {
+      if (fcItemClasses[fzg?.type || ''].isPolyline()) {
         leitungen.setIsDrawing(true);
         leitungen.setFirecallItem(fzg as Connection);
       } else {
diff --git a/src/components/Map/markers/FirecallItems.tsx b/src/components/Map/markers/FirecallItems.tsx
index 19e4979..bbef231 100644
--- a/src/components/Map/markers/FirecallItems.tsx
+++ b/src/components/Map/markers/FirecallItems.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import useFirebaseCollection from '../../../hooks/useFirebaseCollection';
 import useFirecall from '../../../hooks/useFirecall';
 import { filterDisplayableItems, FirecallItem } from '../../firebase/firestore';
+import { getItemClass } from '../../FirecallItems/elements';
 import ItemOverlay from './ItemOverlay';
-import FirecallItemMarker from './FirecallItemMarker';
-import { useEffect, useState } from 'react';
+import React from 'react';
 
 export default function FirecallItems() {
   const firecall = useFirecall();
@@ -17,13 +18,18 @@ export default function FirecallItems() {
 
   return (
     <>
-      {records.map((record) => (
-        <FirecallItemMarker
-          record={record}
-          key={record.id}
-          selectItem={setFirecallItem}
-        />
-      ))}
+      {records.map(
+        (record) => (
+          <React.Fragment key={record.id}>
+            {getItemClass(record).renderMarker(setFirecallItem)}
+          </React.Fragment>
+        )
+        // <FirecallItemMarker
+        //   record={record}
+        //   key={record.id}
+        //   selectItem={setFirecallItem}
+        // />
+      )}
       {firecallItem && (
         <ItemOverlay
           item={firecallItem}
diff --git a/src/components/firebase/firestore.ts b/src/components/firebase/firestore.ts
index a08a885..3b4be5a 100644
--- a/src/components/firebase/firestore.ts
+++ b/src/components/firebase/firestore.ts
@@ -12,8 +12,9 @@ export interface FirecallItem {
   rotation?: string;
 }
 
-export interface FirecallItemMarker extends FirecallItem {
+export interface FcMarker extends FirecallItem {
   type: 'marker';
+  iconUrl?: string;
 }
 
 export interface Fzg extends FirecallItem {
@@ -48,13 +49,8 @@ export interface Connection extends FirecallItem {
   color?: string;
 }
 
-export interface Area extends FirecallItem {
-  destLat: number;
-  destLng: number;
-  /** stringified LatLngPosition[] */
-  positions?: string;
-  distance?: number;
-  color?: string;
+export interface Area extends Connection {
+  opacity?: number;
 }
 
 export interface Line extends Connection {
@@ -65,6 +61,7 @@ export interface Circle extends FirecallItem {
   radius: number;
   color?: string;
   opacity?: number;
+  fill?: string;
 }
 
 export const filterActiveItems = (g: FirecallItem | Firecall) =>
diff --git a/src/components/pages/Einsaetze.tsx b/src/components/pages/Einsaetze.tsx
index ab1a8eb..a0ec339 100644
--- a/src/components/pages/Einsaetze.tsx
+++ b/src/components/pages/Einsaetze.tsx
@@ -18,6 +18,7 @@ import { useFirecallId, useFirecallSelect } from '../../hooks/useFirecall';
 import ConfirmDialog from '../dialogs/ConfirmDialog';
 import { firestore } from '../firebase/firebase';
 import EinsatzDialog from '../FirecallItems/EinsatzDialog';
+import { useRouter } from 'next/router';
 
 function useFirecallUpdate() {
   const { email } = useFirebaseLogin();
@@ -48,6 +49,7 @@ function EinsatzCard({
   const updateFirecall = useFirecallUpdate();
   const { isAdmin } = useFirebaseLogin();
   const setFirecallId = useFirecallSelect();
+  const router = useRouter();
 
   const updateFn = useCallback(
     (fzg?: Firecall) => {
@@ -89,6 +91,7 @@ function EinsatzCard({
                 if (setFirecallId) {
                   setFirecallId(einsatz.id);
                 }
+                router.push(`/einsatz/${einsatz.id}`);
               }}
             >
               Aktivieren
diff --git a/src/components/pages/EinsatzTagebuch.tsx b/src/components/pages/EinsatzTagebuch.tsx
index e9044ef..53439db 100644
--- a/src/components/pages/EinsatzTagebuch.tsx
+++ b/src/components/pages/EinsatzTagebuch.tsx
@@ -93,20 +93,20 @@ export function useDiaries() {
               original: item,
             } as Diary)
         ),
-      firecallItems
-        .filter(
-          (item: FirecallItem) =>
-            ['vehicle', 'diary'].indexOf(item.type) < 0 && item.datum
-        )
-        .map(
-          (item: FirecallItem) =>
-            ({
-              ...item,
-              type: 'diary',
-              editable: true,
-              original: item,
-            } as Diary)
-        ),
+      // firecallItems
+      //   .filter(
+      //     (item: FirecallItem) =>
+      //       ['vehicle', 'diary'].indexOf(item.type) < 0 && item.datum
+      //   )
+      //   .map(
+      //     (item: FirecallItem) =>
+      //       ({
+      //         ...item,
+      //         type: 'diary',
+      //         editable: true,
+      //         original: item,
+      //       } as Diary)
+      //   ),
       firecallItems
         .filter((item: FirecallItem) => item.type === 'diary')
         .map(
diff --git a/src/components/pages/LoginUi.tsx b/src/components/pages/LoginUi.tsx
index ea426f8..6a598b4 100644
--- a/src/components/pages/LoginUi.tsx
+++ b/src/components/pages/LoginUi.tsx
@@ -1,23 +1,25 @@
-import { Button, Typography } from '@mui/material';
+import { Button, Paper, Typography } from '@mui/material';
 import Link from 'next/link';
 import useFirebaseLogin from '../../hooks/useFirebaseLogin';
 import OneTapLogin from '../auth/OneTapLogin';
 import StyledLoginButton from '../firebase/StyledLogin';
 import { auth } from '../firebase/firebase';
 
-export default function Login() {
+export default function LoginUi() {
   const { isSignedIn, isAuthorized, displayName, email } = useFirebaseLogin();
 
   return (
     <>
       {!isSignedIn && (
         <>
-          <Typography>
-            Für die Nutzung der Hydrantenkarte ist eine Anmeldung und manuelle
-            Freischaltung erforderlich. Bitte registriere dich hier.
-          </Typography>
-          <StyledLoginButton firebaseAuth={auth} />
-          <OneTapLogin />
+          <Paper sx={{ p: 2, m: 2 }}>
+            <Typography>
+              Für die Nutzung der Hydrantenkarte ist eine Anmeldung und manuelle
+              Freischaltung erforderlich. Bitte registriere dich hier.
+            </Typography>
+            <StyledLoginButton firebaseAuth={auth} />
+            <OneTapLogin />
+          </Paper>
         </>
       )}
 
diff --git a/src/components/pages/Schadstoff.tsx b/src/components/pages/Schadstoff.tsx
index 4ad44f8..ea46421 100644
--- a/src/components/pages/Schadstoff.tsx
+++ b/src/components/pages/Schadstoff.tsx
@@ -7,11 +7,12 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useCallback, useState } from 'react';
 import useHazmatDb from '../../hooks/useHazmatDb';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export default function SchadstoffPage() {
   const [unNumber, setUnNumber] = useState('');
   const [materialName, setMaterialName] = useState('');
-  const hazmatRecords = useHazmatDb(unNumber, materialName);
+  const [hazmatRecords, isInProgress] = useHazmatDb(unNumber, materialName);
 
   const openEricards = useCallback((num: string, nam: string) => {
     let form = document.createElement('form');
@@ -71,6 +72,7 @@ export default function SchadstoffPage() {
           }}
           value={materialName}
         />
+        {isInProgress && <CircularProgress />}
         <Button
           variant="contained"
           color="primary"
diff --git a/src/hooks/useFirecallItemUpdate.ts b/src/hooks/useFirecallItemUpdate.ts
index cac9642..570273a 100644
--- a/src/hooks/useFirecallItemUpdate.ts
+++ b/src/hooks/useFirecallItemUpdate.ts
@@ -8,18 +8,25 @@ export default function useFirecallItemUpdate(firecallId: string = 'unknown') {
   const { email } = useFirebaseLogin();
   return useCallback(
     async (item: FirecallItem) => {
+      const newData: any = {
+        datum: new Date().toISOString(),
+        ...Object.entries(item)
+          .filter(([k, v]) => v)
+          .reduce((p, [k, v]) => {
+            p[k] = v;
+            return p;
+          }, {} as any),
+        updatedAt: new Date(),
+        updatedBy: email,
+      };
       console.info(
         `update of firecall item ${item.id}: ${JSON.stringify(item)}`
       );
+
       await setDoc(
         doc(firestore, 'call', firecallId, 'item', '' + item.id),
-        {
-          datum: new Date().toISOString(),
-          ...item,
-          updatedAt: new Date(),
-          updatedBy: email,
-        },
-        { merge: true }
+        newData,
+        { merge: false }
       );
     },
     [email, firecallId]
diff --git a/src/hooks/useHazmatDb.ts b/src/hooks/useHazmatDb.ts
index f5306bf..915a8ba 100644
--- a/src/hooks/useHazmatDb.ts
+++ b/src/hooks/useHazmatDb.ts
@@ -3,12 +3,17 @@ import { HazmatMaterial } from '../common/hazmat';
 import useFirebaseLogin from './useFirebaseLogin';
 import useDebounce from './useDebounce';
 
-export default function useHazmatDb(unNumber?: string, name?: string) {
+export default function useHazmatDb(
+  unNumber?: string,
+  name?: string
+): [HazmatMaterial[], boolean] {
   const [hazmatRecords, setHazmatRecords] = useState<HazmatMaterial[]>([]);
   const { user, isSignedIn } = useFirebaseLogin();
+  const [isInProgress, setIsInProgress] = useState(false);
 
   const fetchHazmat = useCallback(
     async (unNumberArg?: string, unName?: string) => {
+      setIsInProgress(true);
       console.info(`searching for hazmat ${unNumberArg} ${unName}`);
       if (!(isSignedIn && user && (unNumberArg || unName))) return;
       const token = await user?.getIdToken();
@@ -28,6 +33,7 @@ export default function useHazmatDb(unNumber?: string, name?: string) {
         )
       ).json();
       setHazmatRecords(response);
+      setIsInProgress(false);
     },
     [isSignedIn, user]
   );
@@ -42,5 +48,5 @@ export default function useHazmatDb(unNumber?: string, name?: string) {
     debouncedFetch();
   }, [debouncedFetch, unNumber, name]);
 
-  return hazmatRecords;
+  return [hazmatRecords, isInProgress];
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3394970..445009f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -9,40 +9,76 @@ import HeaderBar from '../components/site/HeaderBar';
 import SingedOutOneTapLogin from '../components/auth/SingedOutOneTapLogin';
 import '../styles/globals.css';
 import styles from '../styles/Home.module.css';
+import useFirebaseLogin from '../hooks/useFirebaseLogin';
 
-function MyApp({ Component, pageProps }: AppProps) {
+import dynamic from 'next/dynamic';
+import About from './about';
+
+const DynamicLogin = dynamic(
+  () => {
+    return import('../components/pages/LoginUi');
+  },
+  { ssr: false }
+);
+
+function LogedinApp({ Component, pageProps }: AppProps) {
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  return (
+    <FirecallProvider>
+      <AppDrawer isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} />
+
+      <HeaderBar
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+      />
+
+      <Component {...pageProps} />
+    </FirecallProvider>
+  );
+}
 
+function AuthorizationApp({ Component, pageProps, router }: AppProps) {
+  const { isSignedIn, isAuthorized, displayName, email } = useFirebaseLogin();
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  if (isAuthorized) {
+    return (
+      <LogedinApp Component={Component} pageProps={pageProps} router={router} />
+    );
+  }
+  return (
+    <>
+      <HeaderBar
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+      />
+      <DynamicLogin />;
+      <About />
+    </>
+  );
+}
+
+function MyApp({ Component, pageProps, router }: AppProps) {
   return (
     <FirebaseUserProvider>
-      <FirecallProvider>
-        <div className={styles.container}>
-          <Head>
-            <title>Hydrantenkarte</title>
-            <meta
-              name="description"
-              content="Hydrantenkarte der Freiwilligen Feuerwehr Neusiedl am See"
-            />
-            <link rel="icon" href="/favicon.ico" />
-            <meta
-              name="viewport"
-              content="width=device-width, initial-scale=1"
-            />
-          </Head>
-          <CssBaseline enableColorScheme />
-
-          <AppDrawer isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} />
-
-          <HeaderBar
-            isDrawerOpen={isDrawerOpen}
-            setIsDrawerOpen={setIsDrawerOpen}
-          />
-
-          <SingedOutOneTapLogin />
-
-          <Component {...pageProps} />
-        </div>
-      </FirecallProvider>
+      <Head>
+        <title>Hydrantenkarte</title>
+        <meta
+          name="description"
+          content="Hydrantenkarte der Freiwilligen Feuerwehr Neusiedl am See"
+        />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <div className={styles.container}>
+        <CssBaseline enableColorScheme />
+        <SingedOutOneTapLogin />
+
+        <AuthorizationApp
+          Component={Component}
+          pageProps={pageProps}
+          router={router}
+        />
+      </div>
     </FirebaseUserProvider>
   );
 }
diff --git a/src/pages/einsaetze.tsx b/src/pages/einsaetze.tsx
index 4ce934f..a6fe48b 100644
--- a/src/pages/einsaetze.tsx
+++ b/src/pages/einsaetze.tsx
@@ -1,7 +1,7 @@
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 
-const DynamicFahrzeuge = dynamic(
+const DynamicEinsatz = dynamic(
   () => {
     return import('../components/pages/Einsaetze');
   },
@@ -9,7 +9,7 @@ const DynamicFahrzeuge = dynamic(
 );
 
 const Home: NextPage = () => {
-  return <DynamicFahrzeuge />;
+  return <DynamicEinsatz />;
 };
 
 export default Home;
diff --git a/src/pages/einsatz/[firecallId].tsx b/src/pages/einsatz/[firecallId].tsx
new file mode 100644
index 0000000..d89649f
--- /dev/null
+++ b/src/pages/einsatz/[firecallId].tsx
@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router';
+
+import { useEffect } from 'react';
+import { useFirecallSelect } from '../../hooks/useFirecall';
+
+import dynamic from 'next/dynamic';
+
+const DynamicMap = dynamic(
+  () => {
+    return import('../../components/Map/PositionedMap');
+  },
+  { ssr: false }
+);
+
+export default function EinsatzPage() {
+  const router = useRouter();
+  const setFirecallId = useFirecallSelect();
+
+  useEffect(() => {
+    if (router.query.firecallId && setFirecallId) {
+      setFirecallId('' + router.query.firecallId);
+    }
+  }, [router.query.firecallId, setFirecallId]);
+
+  return <DynamicMap />;
+}