diff --git a/CHANGELOG.md b/CHANGELOG.md
index a62c239..7973427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # easyNWK Version History
 
+## version 2.1.0, released 26 Feb 2024
+
+* (feature) create or duplicate network maps to document change over time [#118](https://github.com/fhstp/easynwk-web/issues/118)
+  * warning: new JSON file format (network maps saved in previous versions can be opened in 2.1.0)
+
 ## version 2.0.6, released 25 Aug 2023
 
 * (feature) zoom with brushbox, mouse wheel, and sector labels [#103](https://github.com/fhstp/easynwk-web/issues/103)
diff --git a/package-lock.json b/package-lock.json
index fc7651e..1fa3a22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easynwk",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "easynwk",
-      "version": "2.0.4",
+      "version": "2.0.6",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
diff --git a/package.json b/package.json
index 977a91a..e221968 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easynwk",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easynwk-web/",
diff --git a/public/Rosa_Braunsteigl-Mueller.json b/public/Rosa_Braunsteigl-Mueller.json
index 960a4b3..45d005c 100644
--- a/public/Rosa_Braunsteigl-Mueller.json
+++ b/public/Rosa_Braunsteigl-Mueller.json
@@ -1,157 +1,167 @@
-{
-  "ego": {
-    "name": "Rosa Braunsteigl-Müller",
-    "currentGender": "weiblich",
-    "age": "45",
-    "note": "lorem ipsum"
-  },
-  "alteri": [
-    {
-      "id": 11,
-      "name": "Ewald",
-      "role": "Familienangehörige*r",
-      "roleDefault": true,
-      "human": true,
-      "currentGender": "nicht festgelegt",
-      "genderDefault": true,
-      "age": "",
-      "note": "",
-      "deceased": false,
-      "edgeType": 1,
-      "edgeTypeByUser": -1,
-      "angle": 82.59647651462154,
-      "distance": 61.56025977017402
-    },
-    {
-      "id": 10,
-      "name": "Josefine",
-      "role": "Großtante",
-      "roleDefault": false,
-      "human": true,
-      "currentGender": "weiblich",
-      "genderDefault": false,
-      "age": "86",
-      "note": "",
-      "deceased": false,
-      "edgeType": "0",
-      "edgeTypeByUser": "0",
-      "angle": 63.66630822906832,
-      "distance": 78.41498418743308
-    },
-    {
-      "id": 9,
-      "name": "Strolchi",
-      "role": "Hund",
-      "roleDefault": false,
-      "human": false,
-      "currentGender": "nicht festgelegt",
-      "genderDefault": true,
-      "age": "",
-      "note": "",
-      "deceased": false,
-      "edgeType": 0,
-      "edgeTypeByUser": -1,
-      "angle": 32.91800440620509,
-      "distance": 49.93474976494444
-    },
-    {
-      "id": 8,
-      "name": "Susi",
-      "role": "Studienkolleg*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "weiblich",
-      "age": "27",
-      "note": "",
-      "edgeType": 1,
-      "angle": -131.1060924804431,
-      "distance": 42.31366368839073
-    },
-    {
-      "id": 7,
-      "name": "Dr. Maier",
-      "role": "Ärzt*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "nicht festgelegt",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": -50.92234207573893,
-      "distance": 93.73453583270009
-    },
-    {
-      "id": 5,
-      "name": "Hubert",
-      "role": "Vater",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "männlich",
-      "age": "",
-      "note": "",
-      "deceased": true,
-      "edgeType": 0,
-      "angle": 70,
-      "distance": 103
-    },
-    {
-      "id": 4,
-      "name": "Lara",
-      "role": "Freund*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "divers",
-      "age": "34",
-      "note": "",
-      "edgeType": 2,
-      "angle": 137.52753497925326,
-      "distance": 75.01518991342189
-    },
-    {
-      "id": 3,
-      "name": "Max",
-      "role": "Studienkolleg*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "nicht festgelegt",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": -114.86833156298106,
-      "distance": 71.90407620902847
-    },
-    {
-      "id": 2,
-      "name": "Richard",
-      "role": "Lebensgefährt*in",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "männlich",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": 15.195768445698295,
-      "distance": 19.709025754817713
-    },
+{
+  "versions": [
     {
       "id": 1,
-      "name": "Maria",
-      "role": "Mutter",
-      "contactOfPartner": false,
-      "human": true,
-      "currentGender": "weiblich",
-      "age": "",
-      "note": "",
-      "edgeType": 1,
-      "angle": 30.051411748698495,
-      "distance": 27.853551485665644
+      "title": "Erstgespräch",
+      "date": "2024-02-26",
+      "nwk": {
+        "ego": {
+          "name": "Rosa Braunsteigl-Müller",
+          "currentGender": "weiblich",
+          "age": "45",
+          "note": "lorem ipsum"
+        },
+        "alteri": [
+          {
+            "id": 11,
+            "name": "Ewald",
+            "role": "Familienangehörige*r",
+            "roleDefault": true,
+            "human": true,
+            "currentGender": "nicht festgelegt",
+            "genderDefault": true,
+            "age": "",
+            "note": "",
+            "deceased": false,
+            "edgeType": 1,
+            "edgeTypeByUser": -1,
+            "angle": 82.59647651462154,
+            "distance": 61.56025977017402
+          },
+          {
+            "id": 10,
+            "name": "Josefine",
+            "role": "Großtante",
+            "roleDefault": false,
+            "human": true,
+            "currentGender": "weiblich",
+            "genderDefault": false,
+            "age": "86",
+            "note": "",
+            "deceased": false,
+            "edgeType": "0",
+            "edgeTypeByUser": "0",
+            "angle": 63.66630822906832,
+            "distance": 78.41498418743308
+          },
+          {
+            "id": 9,
+            "name": "Strolchi",
+            "role": "Hund",
+            "roleDefault": false,
+            "human": false,
+            "currentGender": "nicht festgelegt",
+            "genderDefault": true,
+            "age": "",
+            "note": "",
+            "deceased": false,
+            "edgeType": 0,
+            "edgeTypeByUser": -1,
+            "angle": 32.91800440620509,
+            "distance": 49.93474976494444
+          },
+          {
+            "id": 8,
+            "name": "Susi",
+            "role": "Studienkolleg*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "weiblich",
+            "age": "27",
+            "note": "",
+            "edgeType": 1,
+            "angle": -131.1060924804431,
+            "distance": 42.31366368839073
+          },
+          {
+            "id": 7,
+            "name": "Dr. Maier",
+            "role": "Ärzt*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "nicht festgelegt",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": -50.92234207573893,
+            "distance": 93.73453583270009
+          },
+          {
+            "id": 5,
+            "name": "Hubert",
+            "role": "Vater",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "männlich",
+            "age": "",
+            "note": "",
+            "deceased": true,
+            "edgeType": 0,
+            "angle": 70,
+            "distance": 103
+          },
+          {
+            "id": 4,
+            "name": "Lara",
+            "role": "Freund*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "divers",
+            "age": "34",
+            "note": "",
+            "edgeType": 2,
+            "angle": 137.52753497925326,
+            "distance": 75.01518991342189
+          },
+          {
+            "id": 3,
+            "name": "Max",
+            "role": "Studienkolleg*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "nicht festgelegt",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": -114.86833156298106,
+            "distance": 71.90407620902847
+          },
+          {
+            "id": 2,
+            "name": "Richard",
+            "role": "Lebensgefährt*in",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "männlich",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": 15.195768445698295,
+            "distance": 19.709025754817713
+          },
+          {
+            "id": 1,
+            "name": "Maria",
+            "role": "Mutter",
+            "contactOfPartner": false,
+            "human": true,
+            "currentGender": "weiblich",
+            "age": "",
+            "note": "",
+            "edgeType": 1,
+            "angle": 30.051411748698495,
+            "distance": 27.853551485665644
+          }
+        ],
+        "connections": [
+          { "id1": 1, "id2": 4 },
+          { "id1": 1, "id2": 2 },
+          { "id1": 1, "id2": 10 },
+          { "id1": 11, "id2": 10 },
+          { "id1": 11, "id2": 1 }
+        ]
+      }
     }
   ],
-  "connections": [
-    { "id1": 1, "id2": 4 },
-    { "id1": 1, "id2": 2 },
-    { "id1": 1, "id2": 10 },
-    { "id1": 11, "id2": 10 },
-    { "id1": 11, "id2": 1 }
-  ]
+  "currentVersion": 1
 }
diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
new file mode 100644
index 0000000..e11ac57
--- /dev/null
+++ b/src/components/ComparisonOptionsPanel.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="panel">
+    <p
+      class="panel-heading"
+      @click.stop="isOpen = !isOpen"
+      @click="newVersion = false"
+    >
+      <span>Karten und Verlauf</span>
+      <span class="icon is-medium clickAble right">
+        <font-awesome-icon v-if="isOpen" icon="chevron-up" />
+        <font-awesome-icon v-else icon="chevron-down" size="1x" />
+      </span>
+    </p>
+    <div class="panel-block form">
+      <div class="field is-horizontal">
+        <div class="field-body">
+          <div id="record-settings" class="field" v-if="isOpen">
+            <div class="control">
+              <div class="field is-horizontal">
+                Aktuelle Karte:&nbsp;
+                <span v-if="versions.length && currentVersion >= 0">
+                  {{ visibleNWKVersion?.title || "" }}
+                  vom
+                  <!-- TODO use internationalizable date formater -->
+                  {{
+                    visibleNWKVersion?.date?.substring(8, 10) +
+                    "." +
+                    visibleNWKVersion?.date?.substring(5, 7) +
+                    "." +
+                    visibleNWKVersion?.date?.substring(0, 4)
+                  }}&nbsp;
+                </span>
+                <button
+                  class="button is-small"
+                  title="Metadaten der Karte bearbeiten"
+                  v-if="isOpen"
+                  @click="
+                    newVersion = true;
+                    editText = true;
+                  "
+                >
+                  <span class="icon">
+                    <font-awesome-icon icon="pencil-alt" />
+                  </span>
+                </button>
+              </div>
+              <br />
+              <div class="buttons" v-if="!newVersion">
+                <button
+                  class="button"
+                  @click="addBlankNWK"
+                  @click.stop="(newVersion = true), (firstCreation = true)"
+                >
+                  <span class="icon">
+                    <font-awesome-icon icon="plus-circle" />
+                  </span>
+                  <span>Neue leere Karte</span>
+                  <span></span>
+                </button>
+
+                <!-- @click="newVersion = !newVersion" -->
+                <button
+                  class="button"
+                  @click="duplicateNWK"
+                  @click.stop="(newVersion = true), (firstCreation = true)"
+                >
+                  <span class="icon">
+                    <font-awesome-icon icon="copy" />
+                  </span>
+                  <span>Karte duplizieren</span>
+                </button>
+
+                <button class="button" @click.stop="toggleChange">
+                  <span class="icon">
+                    <font-awesome-icon icon="exchange-alt" />
+                  </span>
+                  <span>Karte wechseln</span>
+                </button>
+
+                <!-- TODO hide comparison button in the production code in main branch
+                <button class="button" @click.stop="toggleComparison" disabled>
+                  <span class="icon">
+                    <font-awesome-icon icon="compress-arrows-alt" />
+                  </span>
+                  <span v-if="!nwkcomparison">Vergleich ein</span>
+                  <span v-else>Vergleich aus</span>
+                </button> -->
+              </div>
+
+              <div v-if="newVersion">
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Titel</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input
+                          class="input"
+                          type="text"
+                          placeholder="Titel der aktuellen Version"
+                          v-model="newVersionTitle"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <br />
+
+                <div class="field is-horizontal">
+                  <div class="field-label is-normal">
+                    <label class="label">Datum</label>
+                  </div>
+                  <div class="field-body">
+                    <div class="field">
+                      <div class="control">
+                        <input
+                          class="input"
+                          type="date"
+                          v-model="newVersionDate"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <br />
+
+                <div class="buttons">
+                  <button
+                    class="button is-primary"
+                    @click="addNewVersion()"
+                    @click.stop="(newVersion = false), (firstCreation = false)"
+                  >
+                    <span>Speichern</span>
+                  </button>
+
+                  <button
+                    v-if="firstCreation"
+                    class="button is-light"
+                    @click="deleteVersion"
+                    @click.stop="(newVersion = false), (firstCreation = false)"
+                  >
+                    <!-- TODO Abbrechen does not clear the refs used in the text fields -->
+                    <span>Abbrechen</span>
+                  </button>
+
+                  <!-- TODO move state updates into handler functions? -->
+                  <button
+                    v-if="!firstCreation"
+                    class="button is-danger"
+                    @click="deleteVersion"
+                    @click.stop="newVersion = false"
+                    :disabled="versions.length <= 1"
+                  >
+                    <span>Karte Löschen</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch } from "vue";
+import { useStore } from "@/store";
+import { NWKVersion } from "@/data/NWKVersion";
+
+//type InputType = HTMLInputElement | HTMLTextAreaElement;
+
+export default defineComponent({
+  // AR, 14 Aug 2023: prop version not needed? current version is in state.record
+  /*props: {
+    version: {
+      type: Object,
+      required: true,
+    },
+  },
+   */
+  setup() {
+    const store = useStore();
+
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
+    /** the NWKVersion object of the currently visible version */
+    const visibleNWKVersion = computed(() =>
+      store.state.record.versions.find(
+        (version) => version.id === currentVersion.value
+      )
+    );
+
+    const isOpen = ref(false);
+
+    const newVersion = ref(false);
+
+    const firstCreation = ref(false);
+
+    const editText = ref(false);
+
+    const isDisabled = ref(true);
+
+    const newNWK = ref(false); // TODO needed?
+
+    const versions = computed(() => store.state.record.versions);
+
+    const newVersionTitle = ref(visibleNWKVersion.value?.title);
+    const newVersionDate = ref(visibleNWKVersion.value?.date);
+
+    // local copy of NWKVersion metadata needs to be updated
+    watch(visibleNWKVersion, () => {
+      newVersionTitle.value = visibleNWKVersion.value?.title;
+      newVersionDate.value = visibleNWKVersion.value?.date;
+    });
+
+    const editVersion = () => {
+      const index: number = versions.value.findIndex(
+        (version) => version.id === currentVersion.value
+      );
+      const changes: Partial<NWKVersion> = {
+        title: newVersionTitle.value,
+        date: newVersionDate.value,
+      };
+      store.commit("record/editVersion", {
+        index,
+        changes,
+      });
+      // newVersionDate.value = ""; // TODO AR 29 Aug 2023 why???
+    };
+
+    const deleteVersion = () => {
+      store.commit("removeCurrentVersion");
+    };
+
+    return {
+      nwkcomparison: computed(() => store.state.view.nwkcomparison),
+      nwkchange: computed(() => store.state.view.nwkchange),
+      toggleComparison: () => store.commit("view/toggle", "nwkcomparison"),
+      toggleChange: () => store.commit("view/toggle", "nwkchange"),
+      editText: editText,
+      isOpen: isOpen,
+      newVersion: newVersion,
+      newNWK: newNWK,
+      firstCreation: firstCreation,
+      //commitEdit,
+      deleteVersion,
+      addNewVersion: editVersion,
+      addBlankNWK: () => store.commit("addNWKVersion"),
+      duplicateNWK: () => store.commit("addNWKVersion", true),
+      newVersionTitle,
+      newVersionDate,
+      isDisabled: isDisabled,
+      currentVersion: currentVersion,
+      visibleNWKVersion,
+      versions: computed(() => store.state.record.versions),
+      //commitEdit,
+      //cancelAddVersion,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.right {
+  float: right;
+}
+</style>
diff --git a/src/components/ComparisonSlider.vue b/src/components/ComparisonSlider.vue
new file mode 100644
index 0000000..d2f8c38
--- /dev/null
+++ b/src/components/ComparisonSlider.vue
@@ -0,0 +1,150 @@
+<template>
+  <g id="comparisonSlider">
+    <line
+      :x1="versionMarks[0].x"
+      y1="-113"
+      :x2="versionMarks[0].x * -1"
+      y2="-113"
+    />
+    <a
+      v-for="(mark, index) in versionMarks"
+      :key="index"
+      @click="() => handleCircleClick(mark.d.id)"
+    >
+      <circle
+        v-if="changeNWK"
+        :cx="mark.x"
+        cy="-113"
+        r="2"
+        :class="{
+          comparisonCircle: !mark.selected,
+          'comparisonCircle-selected': mark.selected,
+        }"
+      />
+      <!-- TODO check if different template elements necessary-->
+      <circle
+        v-if="showComparison"
+        :cx="mark.x"
+        cy="-113"
+        r="2"
+        :class="{
+          comparisonCircle: !mark.selected,
+          'comparisonCircle-selected': mark.selected,
+        }"
+        @click="() => handleComparisonClick(mark.d.id)"
+      />
+      <text :x="mark.x" y="-108" text-anchor="middle" class="versionText">
+        {{ mark.label }}
+      </text>
+    </a>
+  </g>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { useStore } from "@/store";
+import { NWKVersion } from "@/data/NWKVersion";
+
+interface VersionMark {
+  d: NWKVersion;
+  label: string;
+  x: number;
+  selected: boolean;
+}
+
+// get Zoom Behavior transform as property
+// emit 'zoom-sector' with index of sector
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+
+    const versions = computed(() => store.state.record.versions);
+
+    const versionMarks = computed((): Array<VersionMark> => {
+      const currentVersion = store.state.record.currentVersion;
+      const buffer: Array<VersionMark> = [];
+      store.state.record.versions.forEach((version, index, array) => {
+        // Julia's formula, scaled between 0 and 1
+        // 2 version --> 1/3 and 2/3
+        // 3 version --> 1/4 and 2/4 and 3/4
+        const xrel = (index + 1) / (array.length + 1);
+        const x = (xrel - 0.5) * 200;
+
+        // TODO locale specific date format
+        const label = version.title
+          ? version.title
+          : version.date.substring(8, 10) +
+            "." +
+            version.date.substring(5, 7) +
+            "." +
+            version.date.substring(0, 4);
+
+        buffer.push({
+          d: version,
+          label,
+          x,
+          selected: version.id === currentVersion,
+        });
+      });
+      // first draw marks further away from center to avoid overplotting
+      // return buffer.sort((a, b) => b.d.distance - a.d.distance);
+      return buffer;
+    });
+
+    function handleCircleClick(versionId: number) {
+      const clickedVersion = versions.value.find(
+        (version) =>
+          version.id === versionId &&
+          versionId !== store.state.record.currentVersion
+      );
+      if (clickedVersion) {
+        console.log(`Clicked version: ${clickedVersion.title}`);
+        store.commit("switchNWK", versionId);
+        console.log("Changed Version");
+      }
+    }
+
+    function handleComparisonClick(versionId: number) {
+      const clickedVersion = versions.value.find(
+        (version) =>
+          version.id === versionId &&
+          versionId !== store.state.record.currentVersion
+      );
+      console.log(
+        "Click for Comparison - not yet implemented! Clicked Version: " +
+          clickedVersion
+      );
+    }
+
+    return {
+      versionMarks,
+      handleCircleClick,
+      handleComparisonClick,
+      showComparison: computed(() => store.state.view.nwkcomparison),
+      changeNWK: computed(() => store.state.view.nwkchange),
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "~bulma/sass/base/_all.sass";
+
+.versionText {
+  font-size: 4px;
+}
+
+line {
+  stroke: #afafaf;
+  stroke-width: 0.5;
+}
+
+.comparisonCircle {
+  fill: #d6dae9;
+}
+
+.comparisonCircle-selected {
+  fill: $color-primary-1;
+}
+</style>
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 42dce6e..10d1a8a 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -1,10 +1,11 @@
 <template>
   <svg
     id="nwkmap"
-    ref="svgElement"
-    width="100%"
-    height="100%"
-    viewBox="-106 -106 212 212"
+    :viewBox="
+      showComparisonSlider && !isEditMode
+        ? '-110 -117 220 220'
+        : '-106 -106 212 212'
+    "
   >
     <defs>
       <symbol id="square" viewBox="-1.5 -1.5 3 3">
@@ -164,6 +165,7 @@
     <text :x="0" y="-102" text-anchor="middle" class="ego">
       {{ egoLabel }}
     </text>
+    <ComparisonSlider v-if="showComparisonSlider && !isEditMode" />
   </svg>
   <div id="zoomBtns">
     <button
@@ -246,6 +248,7 @@ import { useStore } from "@/store";
 
 import NetworkMapCoordinates from "@/components/NetworkMapCoordinates.vue";
 import NetworkMapSectors from "@/components/NetworkMapSectors.vue";
+import ComparisonSlider from "@/components/ComparisonSlider.vue";
 
 import * as d3 from "d3";
 import { Alter, isConnectable } from "@/data/Alter";
@@ -278,7 +281,7 @@ interface ConnectionMark {
 // emit "map-click" (which is not currently used)
 
 export default defineComponent({
-  components: { NetworkMapCoordinates, NetworkMapSectors },
+  components: { NetworkMapCoordinates, NetworkMapSectors, ComparisonSlider },
   emits: ["map-click"],
 
   setup: function (props, { emit }) {
@@ -350,7 +353,7 @@ export default defineComponent({
 
         // re-scale brush selection
         const brushElement = d3.select("#nwkmap g#brush").node() as SVGGElement;
-        if (brush && brushElement && brushSelection(brushElement)) {
+        if (brushElement && brushSelection(brushElement)) {
           const myExtent = [
             transform.value.apply(brushAbsoluteCoords[0]),
             transform.value.apply(brushAbsoluteCoords[1]),
@@ -759,6 +762,9 @@ export default defineComponent({
             /Apple Computer/.test(navigator.vendor)
           )
       ),
+      showComparisonSlider: computed(
+        () => store.state.view.nwkchange || store.state.view.nwkcomparison
+      ),
     };
   },
 });
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 4b34f58..ca0eb73 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -156,14 +156,24 @@ export default defineComponent({
         // TODO format checks & error messages
         // if (savedNWK.alteri && savedNWK.alteri instanceof Array) {
         // if (savedNWK.ego && isEgo(savedNWK.ego)) {
-        store.commit("loadNWK", nwkText);
+        store.commit("loadJSON", nwkText);
         emit("open-nwk");
       };
       fr.readAsText(files.item(0));
     };
 
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
+    const visibleNWKVersion = computed(() =>
+      store.state.record.versions.find(
+        (version) => version.id === currentVersion.value
+      )
+    );
+
     const save = () => {
-      let nwkJSON = JSON.stringify(store.state.nwk);
+      store.commit("prepareToSaveJSON");
+
+      let nwkJSON = JSON.stringify(store.state.record);
       let filename = store.state.nwk.ego.name;
 
       if (store.state.pseudonym.active) {
@@ -183,7 +193,7 @@ export default defineComponent({
       fetch(DEMO_URL)
         .then((res) => res.text())
         .then((nwkText) => {
-          store.commit("loadNWK", nwkText);
+          store.commit("loadJSON", nwkText);
           emit("open-nwk");
         })
         .catch((err) => {
@@ -199,11 +209,32 @@ export default defineComponent({
       openDemoData,
       appVersion: computed(() => process.env.VUE_APP_VERSION),
       exportPNG: () => {
-        downloadSVGasPNG(store.state.nwk.ego.name + ".png", "svg#nwkmap");
+        downloadSVGasPNG(
+          store.state.nwk.ego.name +
+            " " +
+            visibleNWKVersion.value?.title +
+            " " +
+            visibleNWKVersion.value?.date?.substring(8, 10) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(5, 7) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(0, 4) +
+            ".png",
+          "svg#nwkmap"
+        );
       },
       exportCSV: () => {
         downloadText(
-          store.state.nwk.ego.name + ".csv",
+          store.state.nwk.ego.name +
+            " " +
+            visibleNWKVersion.value?.title +
+            " " +
+            visibleNWKVersion.value?.date?.substring(8, 10) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(5, 7) +
+            "." +
+            visibleNWKVersion.value?.date?.substring(0, 4) +
+            ".csv",
           statisticsCSV(store.state.nwk, store.getters["displayName"])
         );
       },
diff --git a/src/data/NWK.ts b/src/data/NWK.ts
index 042407e..ec2a9e9 100644
--- a/src/data/NWK.ts
+++ b/src/data/NWK.ts
@@ -9,15 +9,16 @@ export interface NWK {
   connections: Array<Connection>;
 }
 
-export function initNWKasJSON(): string {
-  return JSON.stringify({
+export function initNWK(): NWK {
+  return {
     ego: initEgo(),
     alteri: [],
     connections: [],
-  });
+  };
 }
 
-export function loadNWK(state: NWK, loadedText: string): void {
+/** load NWK independently from NWKRecord. Only to restore from localstorage */
+export function restoreNWK(state: NWK, loadedText: string): void {
   const loaded = JSON.parse(loadedText);
   state.ego = loaded.ego;
   state.alteri = loaded.alteri;
diff --git a/src/data/NWKRecord.ts b/src/data/NWKRecord.ts
new file mode 100644
index 0000000..749d533
--- /dev/null
+++ b/src/data/NWKRecord.ts
@@ -0,0 +1,46 @@
+import { NWKVersion, initNWKVersion } from "@/data/NWKVersion";
+
+export interface NWKRecord {
+  versions: Array<NWKVersion>;
+  currentVersion: number;
+}
+
+export function initNWKRecordAsJSON(): string {
+  return JSON.stringify(initNWKRecord());
+}
+
+export function initNWKRecord(): NWKRecord {
+  const version = initNWKVersion();
+  return {
+    versions: [version],
+    currentVersion: version.id,
+  };
+}
+
+/**
+ * fills a NWKRecord object from a JSON string.
+ * Supports a single NWK object for backwards compatibility.
+ *
+ * @param state
+ * @param loadedText
+ */
+export function loadNWKRecord(state: NWKRecord, loadedText: string): void {
+  const loaded = JSON.parse(loadedText);
+
+  if (loaded.currentVersion && loaded.versions) {
+    // looks like a NWKRecord object
+    state.versions = loaded.versions;
+    state.currentVersion = loaded.currentVersion;
+  } else if (loaded.ego && loaded.alteri && loaded.connections) {
+    // looks like a NWK object
+    const version = initNWKVersion();
+    version.nwk = loaded;
+    state.versions = [version];
+    state.currentVersion = version.id;
+  } else {
+    // looks unexpectedly
+    throw new TypeError(
+      "The loaded data is neither a NWKRecord nor a single NWK."
+    );
+  }
+}
diff --git a/src/data/NWKVersion.ts b/src/data/NWKVersion.ts
new file mode 100644
index 0000000..0332c0b
--- /dev/null
+++ b/src/data/NWKVersion.ts
@@ -0,0 +1,19 @@
+import { initNWK, NWK } from "@/data/NWK";
+
+const DEFAULT_NWK_VERSION = 1;
+
+export interface NWKVersion {
+  id: number;
+  title: string;
+  date: string;
+  nwk: NWK;
+}
+
+export function initNWKVersion(): NWKVersion {
+  return {
+    id: DEFAULT_NWK_VERSION,
+    title: "",
+    date: new Date().toISOString().substring(0, 10),
+    nwk: initNWK(),
+  };
+}
diff --git a/src/main.ts b/src/main.ts
index f901cd1..db2e1cb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 // NB: import & add each used icon here
 import {
   faBars,
+  faFileAlt,
+  faPlusCircle,
   faSearchPlus,
   // faBan,
   faSearchMinus,
@@ -50,14 +52,17 @@ import {
   faLink,
   faUnlink,
   faArrowsAlt,
-  faPlusCircle,
+  faCopy,
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faBars,
+  faFileAlt,
   faSearchPlus,
   // faBan,
   faSearchMinus,
   faPencilAlt,
+  faPlusCircle,
+  faCopy,
   faUserPlus,
   faMapPin,
   faUserMinus,
@@ -91,8 +96,7 @@ library.add(
   faInfo,
   faLink,
   faUnlink,
-  faArrowsAlt,
-  faPlusCircle
+  faArrowsAlt
 );
 
 // Vue.component("font-awesome-icon", FontAwesomeIcon);
diff --git a/src/store/index.ts b/src/store/index.ts
index 3e6e8a7..081bc5f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,3 @@
-import { SYMBOL_DECEASED } from "@/assets/utils";
-import { Alter, initAlter } from "@/data/Alter";
-import { NWK } from "@/data/NWK";
 import { InjectionKey } from "vue";
 import {
   createLogger,
@@ -8,6 +5,12 @@ import {
   useStore as baseUseStore,
   Store,
 } from "vuex";
+
+import { SYMBOL_DECEASED } from "@/assets/utils";
+import { Alter, initAlter } from "@/data/Alter";
+import { NWK } from "@/data/NWK";
+import { NWKRecord } from "@/data/NWKRecord";
+
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
 
 import { IUnReDoState, localStoragePlugin } from "./localStoragePlugin";
@@ -18,9 +21,14 @@ import {
   viewOptionsModule,
   ViewOptionsState,
 } from "./viewOptionsModule";
+import {
+  nwkRecordModule,
+  nwkRecordMutationsAtRoot,
+} from "@/store/nwkRecordModule";
 
 export interface IStoreState {
   nwk: NWK;
+  record: NWKRecord;
   view: ViewOptionsState;
   unredo: IUnReDoState;
   pseudonym: PseudonymState;
@@ -51,6 +59,8 @@ const getters = {
 };
 
 const mutations = {
+  ...nwkRecordMutationsAtRoot, // import mutations related to NWKRecord
+
   addAlter(state: IStoreState, initialValues: Partial<Alter> = {}): void {
     // initialize alter with default values and optionally with the passed values
     const newAlter = {
@@ -61,16 +71,31 @@ const mutations = {
 
     // set id depending on alteri in list
     // bugfix: if any id is undefined, NaN, or null --> default to 1
-    newAlter.id =
+    const maxIdNWK =
       state.nwk.alteri.length > 0
-        ? Math.max(...state.nwk.alteri.map((v) => (v.id ? v.id : 1))) + 1
-        : 1;
+        ? Math.max(...state.nwk.alteri.map((v) => (v.id ? v.id : 1)))
+        : 0;
+
+    const maxIdRecord =
+      state.record.versions.length > 0
+        ? Math.max(
+            ...state.record.versions.map((v) =>
+              v.nwk.alteri.length > 0
+                ? Math.max(...v.nwk.alteri.map((v) => (v.id ? v.id : 1)))
+                : 0
+            )
+          )
+        : 0;
+
+    // console.log(`max id nwk:  ${maxIdNWK}  -- max id record:  ${maxIdRecord} `);
+    newAlter.id = Math.max(maxIdNWK, maxIdRecord) + 1;
 
     // new alter is always added on top of list
     state.nwk.alteri.unshift(newAlter);
     state.view.editIndex = 0;
     state.view.editTab = TAB_BASE;
   },
+
   // removes a newly added alter from the list
   cancelAddAlter(state: IStoreState, alterIndex: number): void {
     // console.log("cancel " + alterIndex);
@@ -84,6 +109,18 @@ const mutations = {
     state.view.editIndex = null;
     state.view.editTab = "";
   },
+  /*cancelAddVersion(state: IStoreState, versionIndex: number): void {
+    // canceled alter is new and therefore cannot have connections
+    // don't delete with index null value (see #97)
+    if (versionIndex !== null) {
+      state.nwk.versions.splice(versionIndex, 1);
+    }
+
+    state.view.editIndex = null;
+    state.view.editTab = "";
+  },
+
+   */
   openAlterFormById(
     state: IStoreState,
     payload: { alterId: number; tab?: string }
@@ -121,6 +158,7 @@ export const store = createStore<IStoreState>({
   strict: process.env.NODE_ENV !== "production",
   modules: {
     nwk: nwkModule,
+    record: nwkRecordModule,
     view: viewOptionsModule,
   },
   getters,
diff --git a/src/store/localStoragePlugin.ts b/src/store/localStoragePlugin.ts
index 292cb75..b17e35e 100644
--- a/src/store/localStoragePlugin.ts
+++ b/src/store/localStoragePlugin.ts
@@ -3,13 +3,16 @@
 undo/redo inspired by <https://github.com/factorial-io/undo-redo-vuex>
 and <https://github.com/anthonygore/vuex-undo-redo> */
 
-import { initNWKasJSON } from "@/data/NWK";
+import { initNWKRecordAsJSON } from "@/data/NWKRecord";
+import { initNWK } from "@/data/NWK";
 import { MutationPayload, Store } from "vuex";
 import { IStoreState } from ".";
 import { initPseudonymState } from "./pseudonymPlugin";
 import { initViewOptionsState } from "./viewOptionsModule";
 
 const STORAGE_KEY = "easynwk";
+const STORAGE_KEY_NWK = STORAGE_KEY + "_nwk";
+const STORAGE_KEY_RECORD = STORAGE_KEY + "_record";
 const UNREDO_MODULE = "unredo";
 
 export interface IUnReDoState {
@@ -17,19 +20,29 @@ export interface IUnReDoState {
   redoCount: number;
 }
 
-export function loadStateFromStore(): string {
-  const storedNWK = localStorage.getItem(STORAGE_KEY);
-  if (storedNWK != null && storedNWK != "undefined") {
+export function loadNWKStateFromStore(): string {
+  const storedNWK = localStorage.getItem(STORAGE_KEY_NWK);
+  if (storedNWK && storedNWK != "undefined") {
     return storedNWK;
   } else {
-    return initNWKasJSON();
+    return JSON.stringify(initNWK());
+  }
+}
+
+export function loadNWKRecordStateFromStore(): string {
+  const storedNWKRecord = localStorage.getItem(STORAGE_KEY_RECORD);
+  if (storedNWKRecord && storedNWKRecord != "undefined") {
+    return storedNWKRecord;
+  } else {
+    return initNWKRecordAsJSON();
   }
 }
 
 export const localStoragePlugin = (store: Store<IStoreState>): void => {
   // keep track of undo history as local (non-reactive) vars
   const history = {
-    initialState: loadStateFromStore(),
+    initialNWKState: loadNWKStateFromStore(),
+    initialNWKRecordState: loadNWKRecordStateFromStore(),
     done: [] as Array<MutationPayload>,
     undone: [] as Array<MutationPayload>,
     replaying: false,
@@ -57,7 +70,9 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
         history.replaying = true;
         // reset to initial state
         store.state.pseudonym = initPseudonymState();
-        store.commit("loadNWK", history.initialState);
+        store.commit("loadJSON", history.initialNWKRecordState);
+        // the cached NWK could be more up to date than the record
+        store.commit("restoreNWKFromJSON", history.initialNWKState);
         store.state.view = initViewOptionsState();
         // replay all mutations (but last)
         for (const c of history.done) {
@@ -114,7 +129,13 @@ export const localStoragePlugin = (store: Store<IStoreState>): void => {
         mutation.type.startsWith("view/")
       )
     ) {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateAfter.nwk));
+      localStorage.setItem(STORAGE_KEY_NWK, JSON.stringify(stateAfter.nwk));
+
+      // TODO persist NWKRecord only for some mutations
+      localStorage.setItem(
+        STORAGE_KEY_RECORD,
+        JSON.stringify(stateAfter.record)
+      );
     }
   });
 };
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index 99f87fc..c3dfc31 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -1,13 +1,14 @@
 import { Alter, isConnectable } from "@/data/Alter";
 import { Ego } from "@/data/Ego";
-import { NWK, initNWKasJSON, loadNWK } from "@/data/NWK";
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
+import { NWK, restoreNWK } from "@/data/NWK";
 
-import { loadStateFromStore } from "./localStoragePlugin";
+import { loadNWKStateFromStore } from "./localStoragePlugin";
 
 // root state object.
 // each Vuex instance is just a single state tree.
-const state = JSON.parse(loadStateFromStore());
+const state = JSON.parse(loadNWKStateFromStore());
+// TODO this creates a different object from the NWK in the nwkRecords module!
 
 // mutations are operations that actually mutate the state.
 // each mutation handler gets the entire state tree as the
@@ -20,12 +21,9 @@ const mutations = {
     state.ego = { ...state.ego, ...payload };
   },
 
-  newNWK(state: NWK): void {
-    loadNWK(state, initNWKasJSON());
-  },
-
-  loadNWK(state: NWK, payload: string): void {
-    loadNWK(state, payload);
+  /** load NWK independently from NWKRecord. Only to restore from localstorage */
+  restoreNWKFromJSON(state: NWK, payload: string): void {
+    restoreNWK(state, payload);
   },
 
   editAlter(
@@ -52,7 +50,10 @@ const mutations = {
     state.alteri.splice(alterIndex, 1);
   },
 
-  addConnection(state: NWK, payload: { id1: number; id2: number }): void {
+  addConnection(
+    state: NWK,
+    payload: { id1: number; id2: number; version: number }
+  ): void {
     state.connections.push(payload);
   },
 
@@ -82,7 +83,10 @@ const mutations = {
     );
   },
 
-  toggleConnection(state: NWK, payload: { id1: number; id2: number }): void {
+  toggleConnection(
+    state: NWK,
+    payload: { id1: number; id2: number; version: number }
+  ): void {
     const index = state.connections.findIndex(
       (c) => c.id1 === payload.id1 && c.id2 === payload.id2
     );
diff --git a/src/store/nwkRecordModule.ts b/src/store/nwkRecordModule.ts
new file mode 100644
index 0000000..2eb71a7
--- /dev/null
+++ b/src/store/nwkRecordModule.ts
@@ -0,0 +1,148 @@
+import { loadNWKRecordStateFromStore } from "@/store/localStoragePlugin";
+import { IStoreState } from ".";
+import { NWKRecord, initNWKRecord, loadNWKRecord } from "@/data/NWKRecord";
+import { initNWK } from "@/data/NWK";
+import { NWKVersion, initNWKVersion } from "@/data/NWKVersion";
+
+const state = JSON.parse(loadNWKRecordStateFromStore());
+
+const mutations = {
+  // n.b. new and load are at root level b/c side-effects on nwkModule (see below)
+  editVersion(
+    state: NWKRecord,
+    payload: { index: number; changes: Partial<NWKVersion> }
+  ): void {
+    editVersion(state, payload.index, payload.changes);
+  },
+};
+
+export const nwkRecordMutationsAtRoot = {
+  newNWK(state: IStoreState): void {
+    // loadNWKRecord(state.record, initNWKRecordAsJSON());
+    state.record = initNWKRecord();
+    // set nwk as side-effects
+    // assume new history has exactly 1 empty nwk
+    state.nwk = state.record.versions[0].nwk;
+  },
+
+  removeCurrentVersion(state: IStoreState): void {
+    const versionsLength = state.record.versions.length;
+
+    if (versionsLength > 1) {
+      const currentVersionIndex = state.record.versions.findIndex(
+        (d) => d.id === state.record.currentVersion
+      );
+
+      if (currentVersionIndex >= 0) {
+        state.record.versions.splice(currentVersionIndex, 1);
+
+        // Update currentVersion to the last available version
+        state.record.currentVersion =
+          state.record.versions[versionsLength - 2].id;
+
+        // Update nwk with the new current version's data
+        const newVersion = state.record.versions.find(
+          (d) => d.id === state.record.currentVersion
+        );
+
+        if (newVersion) {
+          state.nwk = newVersion.nwk;
+          console.log("new version id: " + newVersion.id);
+          console.log("current version id: " + state.record.currentVersion);
+        }
+      }
+    } else {
+      console.log("No version to delete");
+    }
+  },
+
+  loadJSON(state: IStoreState, payload: string): void {
+    // data type needs to handle a JSON with just nwk
+    loadNWKRecord(state.record, payload);
+
+    // set nwk as side-effects
+    // n.b. we try out if a shared reference to the same nwk object works (otherwise use structuredClone)
+    const version = state.record.versions.find(
+      (d) => d.id === state.record.currentVersion
+    );
+    state.nwk = version ? version.nwk : initNWK();
+  },
+
+  prepareToSaveJSON(state: IStoreState): void {
+    ensureNWKisLinkedInRecord(state);
+  },
+
+  switchNWK(state: IStoreState, versionId: number) {
+    ensureNWKisLinkedInRecord(state);
+
+    const newVersion = state.record.versions.find((d) => d.id === versionId);
+    if (newVersion) {
+      state.nwk = newVersion.nwk;
+      state.record.currentVersion = versionId;
+    }
+  },
+
+  addNWKVersion(state: IStoreState, duplicateAll = false) {
+    ensureNWKisLinkedInRecord(state);
+
+    const newVersion = initNWKVersion();
+    // set id depending on versions in list
+    newVersion.id =
+      state.record.versions.length > 0
+        ? Math.max(...state.record.versions.map((v) => (v.id ? v.id : 1))) + 1
+        : 1;
+    if (duplicateAll) {
+      newVersion.nwk = structuredClone(state.nwk);
+    } else {
+      // even a blank NWK, clones the Ego
+      newVersion.nwk.ego = structuredClone(state.nwk.ego);
+    }
+
+    state.nwk = newVersion.nwk;
+    state.record.versions.push(newVersion);
+    state.record.currentVersion = newVersion.id;
+  },
+
+  // TODO delete version
+  // TODO import version
+};
+
+/** make the NWK object in the current version of the NWKRecord point to the same reference as the NWK object in  */
+function ensureNWKisLinkedInRecord(state: IStoreState) {
+  const curVersion = state.record.versions.find(
+    (d) => d.id === state.record.currentVersion
+  );
+  if (curVersion) {
+    curVersion.nwk = state.nwk;
+  } else {
+    throw "The current NWK version id was not found in the record.";
+  }
+}
+
+function editVersion(
+  state: NWKRecord,
+  versionIndex: number | null,
+  changes: Partial<NWKVersion>
+): void {
+  if (
+    versionIndex != null &&
+    versionIndex >= 0
+    //&& versionIndex < state.versions.length
+  ) {
+    // based on vuex\examples\composition\todomvc\store\mutations.js
+    // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>
+    const changedVersion = {
+      ...state.versions[versionIndex],
+      ...changes,
+    };
+    state.versions.splice(versionIndex, 1, changedVersion);
+  } else {
+    console.warn("version index invalid or out of bounds: " + versionIndex);
+  }
+}
+
+export const nwkRecordModule = {
+  namespaced: true,
+  state,
+  mutations,
+};
diff --git a/src/store/viewOptionsModule.ts b/src/store/viewOptionsModule.ts
index 4324670..ff2d37d 100644
--- a/src/store/viewOptionsModule.ts
+++ b/src/store/viewOptionsModule.ts
@@ -8,6 +8,8 @@ export interface ViewOptionsFlags {
   statistics: boolean;
   ageInNwk: boolean;
   roleInNwk: boolean;
+  nwkcomparison: boolean;
+  nwkchange: boolean;
 }
 
 export interface ViewOptionsState extends ViewOptionsFlags {
@@ -25,6 +27,8 @@ export function initViewOptionsState(): ViewOptionsState {
     statistics: false,
     ageInNwk: false,
     roleInNwk: false,
+    nwkcomparison: false,
+    nwkchange: false,
 
     selected: new Set<number>(),
     editIndex: null,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 22357e5..f1c81ee 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -21,6 +21,7 @@
 
             <AlteriPanel v-if="!egoEditMode" :mapclicked="mapclicked" />
             <ViewOptionsPanel />
+            <ComparisonOptionsPanel />
             <StatisticsPanel v-if="showStatistics" />
           </div>
         </div>
@@ -46,9 +47,11 @@ import NetworkMap from "@/components/NetworkMap.vue";
 import UndoRedo from "@/components/UndoRedo.vue";
 import StatisticsPanel from "@/components/StatisticsPanel.vue";
 import ViewOptionsPanel from "@/components/ViewOptionsPanel.vue";
+import ComparisonOptionsPanel from "@/components/ComparisonOptionsPanel.vue";
 
 export default defineComponent({
   components: {
+    ComparisonOptionsPanel,
     ErrorBoundary,
     EgoHeader,
     EgoEditForm,
diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
index f803899..42bbcbc 100644
--- a/src/views/PdfView.vue
+++ b/src/views/PdfView.vue
@@ -32,6 +32,18 @@
       </div>
       <div id="egobar">
         <p class="name">{{ "Ankerperson: " + ego.name }}</p>
+        <span v-if="versions.length && currentVersion >= 0">
+          Gedruckte Karte: {{ visibleNWKVersion?.title || "" }}
+          vom
+          <!-- TODO use internationalizable date formater -->
+          {{
+            visibleNWKVersion?.date?.substring(8, 10) +
+            "." +
+            visibleNWKVersion?.date?.substring(5, 7) +
+            "." +
+            visibleNWKVersion?.date?.substring(0, 4)
+          }}&nbsp;
+        </span>
         <p>{{ ego.currentGender ? "Geschlecht: " + ego.currentGender : "" }}</p>
         <p>{{ ego.age.length >= 1 ? "Alter: " + ego.age : "" }}</p>
         <p>{{ ego.note.length >= 1 ? "Notiz: " + ego.note : "" }}</p>
@@ -90,9 +102,28 @@ export default defineComponent({
     const ego = computed(() => store.state.nwk.ego);
 
     const createPdf = () => {
-      window.print();
+      (document.title =
+        store.state.nwk.ego.name +
+        " " +
+        visibleNWKVersion.value?.title +
+        " " +
+        visibleNWKVersion.value?.date?.substring(8, 10) +
+        "." +
+        visibleNWKVersion.value?.date?.substring(5, 7) +
+        "." +
+        visibleNWKVersion.value?.date?.substring(0, 4) +
+        ".pdf"),
+        window.print();
     };
 
+    const currentVersion = computed(() => store.state.record.currentVersion);
+
+    const visibleNWKVersion = computed(() =>
+      store.state.record.versions.find(
+        (version) => version.id === currentVersion.value
+      )
+    );
+
     // TODO currently: workaround -> schönere Lösung
     const readHttpGet = () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -137,6 +168,9 @@ export default defineComponent({
       alteri,
       ego,
       createPdf,
+      visibleNWKVersion,
+      currentVersion: currentVersion,
+      versions: computed(() => store.state.record.versions),
     };
   },
 });