diff --git a/src/components/AlteriEditForm.vue b/src/components/AlteriEditForm.vue
index 65f37e2..a9bbd70 100644
--- a/src/components/AlteriEditForm.vue
+++ b/src/components/AlteriEditForm.vue
@@ -167,6 +167,49 @@
       </div>
     </div>
 
+    <div v-if="showQuality && alterEdgeType >= 1" class="field is-horizontal">
+      <div class="field-label">
+        <label class="label" for="chk-new-checkbox">{{
+          t("conflictual")
+        }}</label>
+      </div>
+      <div class="field-body">
+        <label>
+          <input
+            id="chk-new-checkbox"
+            type="checkbox"
+            v-model="alterConflict"
+          />
+        </label>
+      </div>
+    </div>
+
+    <div v-if="showQuality && alterEdgeType >= 1" style="margin-bottom: 1.5em">
+      <div
+        class="field is-horizontal"
+        v-for="(label, key) in supportOptions"
+        :key="key"
+      >
+        <div class="field-label is-normal">
+          <label class="label" style="width: 100px">{{ t(label) }}</label>
+        </div>
+        <div class="field-body">
+          <div class="control">
+            <div class="select is-fullwidth">
+              <select v-model="supportValues[key]">
+                <option value="0">{{ t("nosupport") }}</option>
+                <option value="1">{{ t("isupport") }} {{ alter.name }}</option>
+                <option value="2">
+                  {{ alter.name }} {{ t("supportsme") }}
+                </option>
+                <option value="3">{{ t("supporteachother") }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="field">
       <div class="control">
         <textarea
@@ -265,6 +308,24 @@ export default defineComponent({
 
     const selectedRoleLabel = ref(props.alter?.role);
 
+    const newCheckboxModel = ref(false);
+
+    const supportOptions = ref({
+      emotional: "emotional",
+      instrumental: "instrumental",
+      informational: "informational",
+      social: "social",
+      linking: "linking",
+    });
+
+    const supportValues = ref({
+      emotional: accessor<number>("supportEmotional"),
+      instrumental: accessor<number>("supportMaterial"),
+      informational: accessor<number>("supportCognitive"),
+      social: accessor<number>("supportSocial"),
+      linking: accessor<number>("supportPractical"),
+    });
+
     // name field is special because it must not be empty
     // the data item is only used for validity check & never stored
     const alterNameInUI = ref(props.alter?.name);
@@ -429,14 +490,17 @@ export default defineComponent({
       addingNewAlter,
       alterNameInUI,
       alterRole,
+      newCheckboxModel,
       localizedRole,
       invalidName,
       invalidPosition,
       alterHuman: accessor<boolean>("human"),
       alterGender: accessor<string>("currentGender"),
       alterDeceased: accessor<boolean>("deceased"),
+      alterConflict: accessor<boolean>("conflict"),
       alterEdgeType: accessor<number>("edgeType"),
       isConnectable: computed(() => isConnectable(props.alter as Alter)),
+      showQuality: computed(() => store.state.session.qualityRelationship),
       commitEdit,
       focusRole,
       blurRole,
@@ -448,6 +512,8 @@ export default defineComponent({
       altername,
       domButton,
       SYMBOL_DECEASED,
+      supportOptions,
+      supportValues,
     };
   },
 });
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index ec09688..a3a08b7 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -76,7 +76,10 @@
 
       <g v-if="connections">
         <line
-          v-for="(mark, index) in connectionMarks"
+          v-for="(mark, index) in connectionMarks.filter(
+            (mark) =>
+              !emotional && !cognitive && !social && !material && !practical
+          )"
           :key="'conn' + index"
           :x1="mark.x1"
           :y1="mark.y1"
@@ -86,7 +89,18 @@
         />
       </g>
 
-      <g v-for="mark in alteriMarks" :key="mark.d.id">
+      <g
+        v-for="mark in alteriMarks.filter(
+          (mark) =>
+            (emotional && mark.d.supportEmotional >= 1) ||
+            (cognitive && mark.d.supportCognitive >= 1) ||
+            (social && mark.d.supportSocial >= 1) ||
+            (material && mark.d.supportMaterial >= 1) ||
+            (practical && mark.d.supportPractical >= 1) ||
+            (!emotional && !cognitive && !social && !material && !practical)
+        )"
+        :key="mark.d.id"
+      >
         <line
           v-if="connections && mark.d.edgeType >= 1"
           :class="{ select: mark.selected }"
@@ -95,6 +109,81 @@
           :x2="mark.x"
           :y2="mark.y"
           :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
+          :style="
+            mark.d.conflict && showQuality ? 'stroke: red' : 'stroke: #afafaf'
+          "
+        />
+        <marker
+          id="arrowheadMe"
+          v-if="showQuality"
+          markerWidth="10"
+          markerHeight="7"
+          refX="12"
+          refY="3.5"
+          orient="auto"
+        >
+          <polygon points="0 0, 10 3.5, 0 7" stroke="#afafaf" fill="none" />
+        </marker>
+        <marker
+          id="arrowheadAlter"
+          v-if="showQuality"
+          markerWidth="10"
+          markerHeight="7"
+          refX="25"
+          refY="3.5"
+          orient="auto"
+        >
+          <polygon points="10 0, 0 3.5, 10 7" stroke="#afafaf" fill="none" />
+        </marker>
+        <line
+          v-if="
+            connections &&
+            mark.d.edgeType >= 1 &&
+            (mark.d.supportPractical == 2 ||
+              mark.d.supportPractical == 3 ||
+              mark.d.supportSocial == 2 ||
+              mark.d.supportSocial == 3 ||
+              mark.d.supportMaterial == 2 ||
+              mark.d.supportMaterial == 3 ||
+              mark.d.supportEmotional == 2 ||
+              mark.d.supportEmotional == 3 ||
+              mark.d.supportCognitive == 2 ||
+              mark.d.supportCognitive == 3)
+          "
+          :class="{ select: mark.selected }"
+          :x1="egoCoords[0]"
+          :y1="egoCoords[1]"
+          :x2="mark.x"
+          :y2="mark.y"
+          :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
+          :style="
+            mark.d.conflict && showQuality ? 'stroke: red' : 'stroke: #afafaf'
+          "
+          marker-end="url(#arrowheadAlter)"
+        />
+        <line
+          v-if="
+            connections &&
+            mark.d.edgeType >= 1 &&
+            (mark.d.supportPractical == 1 ||
+              mark.d.supportPractical == 3 ||
+              mark.d.supportSocial == 1 ||
+              mark.d.supportSocial == 3 ||
+              mark.d.supportMaterial == 1 ||
+              mark.d.supportMaterial == 3 ||
+              mark.d.supportEmotional == 1 ||
+              mark.d.supportEmotional == 3 ||
+              mark.d.supportCognitive == 1 ||
+              mark.d.supportCognitive == 3)
+          "
+          :class="{ select: mark.selected }"
+          :x1="egoCoords[0]"
+          :y1="egoCoords[1]"
+          :x2="mark.x"
+          :y2="mark.y"
+          :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
+          :style="mark.d.conflict ? 'stroke: red' : 'stroke: #afafaf'"
+          marker-end="url(#arrowheadMe)"
         />
         <text
           v-if="alteriNames && useTextBG"
@@ -125,6 +214,75 @@
           {{ showRole ? " / " + getRoleShort(mark.d.role) : "" }}
         </text>
       </g>
+      <g
+        v-for="mark in alteriMarks.filter(
+          (mark) =>
+            (emotional && mark.d.supportEmotional >= 1) ||
+            (cognitive && mark.d.supportCognitive >= 1) ||
+            (social && mark.d.supportSocial >= 1) ||
+            (material && mark.d.supportMaterial >= 1) ||
+            (practical && mark.d.supportPractical >= 1) ||
+            (!emotional && !cognitive && !social && !material && !practical)
+        )"
+        :key="mark.d.id"
+      >
+        <!-- Hier werden die Icons für jedes Alter platziert -->
+        <template
+          v-if="
+            mark.d.supportEmotional >= 1 && showQuality && mark.d.edgeType >= 1
+          "
+        >
+          <font-awesome-icon
+            icon="heart"
+            height="3"
+            width="3"
+            style="color: #afafaf"
+            :x="mark.x < 0 ? mark.x - 20 : mark.x + 2"
+            :y="mark.y < 0 ? mark.y : mark.y + 5"
+          />
+        </template>
+        <template v-if="mark.d.supportMaterial >= 1 && showQuality">
+          <font-awesome-icon
+            icon="toolbox"
+            height="3"
+            width="3"
+            style="color: #afafaf"
+            :x="mark.x < 0 ? mark.x - 16 : mark.x + 6"
+            :y="mark.y < 0 ? mark.y : mark.y + 5"
+          />
+        </template>
+        <template v-if="mark.d.supportCognitive >= 1 && showQuality">
+          <font-awesome-icon
+            icon="lightbulb"
+            height="3"
+            width="3"
+            style="color: #afafaf"
+            :x="mark.x < 0 ? mark.x - 12 : mark.x + 10"
+            :y="mark.y < 0 ? mark.y : mark.y + 5"
+          />
+        </template>
+        <template v-if="mark.d.supportSocial >= 1 && showQuality">
+          <font-awesome-icon
+            icon="users"
+            height="3"
+            width="3"
+            style="color: #afafaf"
+            :x="mark.x < 0 ? mark.x - 8 : mark.x + 14"
+            :y="mark.y < 0 ? mark.y : mark.y + 5"
+          />
+        </template>
+        <template v-if="mark.d.supportPractical >= 1 && showQuality">
+          <font-awesome-icon
+            icon="link"
+            height="3"
+            width="3"
+            style="color: #afafaf"
+            :x="mark.x < 0 ? mark.x - 4 : mark.x + 18"
+            :y="mark.y < 0 ? mark.y : mark.y + 5"
+          />
+        </template>
+      </g>
+
       <use
         id="ego"
         :href="'#' + egoShape"
@@ -139,7 +297,15 @@
     <g class="brushParent"></g>
     <g class="marksForegroundLayer">
       <use
-        v-for="mark in alteriMarks"
+        v-for="mark in alteriMarks.filter(
+          (mark) =>
+            (emotional && mark.d.supportEmotional >= 1) ||
+            (cognitive && mark.d.supportCognitive >= 1) ||
+            (social && mark.d.supportSocial >= 1) ||
+            (material && mark.d.supportMaterial >= 1) ||
+            (practical && mark.d.supportPractical >= 1) ||
+            (!emotional && !cognitive && !social && !material && !practical)
+        )"
         :key="mark.d.id"
         :href="'#' + mark.shape"
         :x="mark.x"
@@ -742,6 +908,11 @@ export default defineComponent({
       egoShape: computed(() =>
         shapeByGender(true, store.state.nwk.ego.currentGender)
       ),
+      emotional: computed(() => store.state.session.emotional),
+      cognitive: computed(() => store.state.session.cognitive),
+      social: computed(() => store.state.session.social),
+      material: computed(() => store.state.session.material),
+      practical: computed(() => store.state.session.practical),
       isEditMode,
       isConnectMode,
       clickAlter,
@@ -777,6 +948,7 @@ export default defineComponent({
       showComparisonSlider: computed(
         () => store.state.session.nwkchange || store.state.session.nwkcomparison
       ),
+      showQuality: computed(() => store.state.session.qualityRelationship),
     };
   },
 });
@@ -860,4 +1032,7 @@ line.select {
   right: 2px;
   bottom: 1.5rem;
 }
+.fa {
+  display: flex;
+}
 </style>
diff --git a/src/components/SupportPanel.vue b/src/components/SupportPanel.vue
new file mode 100644
index 0000000..e7c3831
--- /dev/null
+++ b/src/components/SupportPanel.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="panel">
+    <p class="panel-heading" @click.stop="isOpen = !isOpen">
+      <span>{{ t("socialsupport") }}</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="view-settings" class="field" v-if="isOpen">
+            <div class="control">
+              <div style="margin: 1.5em">
+                <p>{{ t("introductionsentence") }}</p>
+              </div>
+
+              <div>
+                <div
+                  class="clickAble"
+                  :style="{
+                    margin: '1em',
+                    fontWeight: heartClicked ? 'bold' : 'unset',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }"
+                  @click="toggleHeartIcon"
+                  @click.stop="toggleEmotional"
+                >
+                  <font-awesome-icon
+                    icon="heart"
+                    :style="{
+                      color: heartClicked ? 'orange' : '#afafaf',
+                      marginRight: '0.5em',
+                    }"
+                  />
+                  {{ t("emotional") }}: {{ alteriEmotional }}
+                </div>
+              </div>
+
+              <div>
+                <div
+                  class="clickAble"
+                  :style="{
+                    margin: '1em',
+                    fontWeight: moneyClicked ? 'bold' : 'unset',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }"
+                  @click="toggleMoneyIcon"
+                  @click.stop="toggleMaterial"
+                >
+                  <font-awesome-icon
+                    icon="toolbox"
+                    :style="{
+                      color: moneyClicked ? 'orange' : '#afafaf',
+                      marginRight: '0.5em',
+                    }"
+                    class="clickAble"
+                  />
+                  {{ t("instrumental") }}: {{ alteriMaterial }}
+                </div>
+              </div>
+
+              <div>
+                <div
+                  class="clickAble"
+                  :style="{
+                    margin: '1em',
+                    fontWeight: brainClicked ? 'bold' : 'unset',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }"
+                  @click="toggleBrainIcon"
+                  @click.stop="toggleCognitive"
+                >
+                  <font-awesome-icon
+                    icon="lightbulb"
+                    :style="{
+                      color: brainClicked ? 'orange' : '#afafaf',
+                      marginRight: '0.5em',
+                    }"
+                    class="clickAble"
+                  />
+                  {{ t("informational") }}: {{ alteriCognitive }}
+                </div>
+              </div>
+
+              <div>
+                <div
+                  class="clickAble"
+                  :style="{
+                    margin: '1em',
+                    fontWeight: speakClicked ? 'bold' : 'unset',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }"
+                  @click="toggleSpeakIcon"
+                  @click.stop="toggleSocial"
+                >
+                  <font-awesome-icon
+                    icon="users"
+                    :style="{
+                      color: speakClicked ? 'orange' : '#afafaf',
+                      marginRight: '0.5em',
+                    }"
+                    class="clickAble"
+                  />
+                  {{ t("social") }}: {{ alteriSocial }}
+                </div>
+              </div>
+
+              <div>
+                <div
+                  class="clickAble"
+                  :style="{
+                    margin: '1em',
+                    fontWeight: helmetClicked ? 'bold' : 'unset',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                  }"
+                  @click="toggleHelmetIcon"
+                  @click.stop="togglePractical"
+                >
+                  <font-awesome-icon
+                    icon="link"
+                    :style="{
+                      color: helmetClicked ? 'orange' : '#afafaf',
+                      marginRight: '0.5em',
+                    }"
+                    class="clickAble"
+                  />
+                  {{ t("linking") }}: {{ alteriPractical }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from "vue";
+import { useStore } from "@/store";
+import de from "@/de";
+import en from "@/en";
+
+type TranslationKeys = keyof typeof de;
+
+const translations = {
+  de,
+  en,
+};
+
+export default defineComponent({
+  mixins: [de, en],
+  methods: {
+    t(prop: string) {
+      return this[document.documentElement.lang][prop];
+    },
+  },
+  setup() {
+    const store = useStore();
+
+    const isOpen = ref(false);
+    const heartClicked = ref(false);
+    const speakClicked = ref(false);
+    const moneyClicked = ref(false);
+    const helmetClicked = ref(false);
+    const brainClicked = ref(false);
+
+    const toggleHeartIcon = () => {
+      heartClicked.value = !heartClicked.value;
+    };
+    const toggleBrainIcon = () => {
+      brainClicked.value = !brainClicked.value;
+    };
+    const toggleSpeakIcon = () => {
+      speakClicked.value = !speakClicked.value;
+    };
+    const toggleMoneyIcon = () => {
+      moneyClicked.value = !moneyClicked.value;
+    };
+    const toggleHelmetIcon = () => {
+      helmetClicked.value = !helmetClicked.value;
+    };
+
+    const alteri = computed(() => store.state.nwk.alteri);
+
+    const alteriEmotional = computed(() => {
+      const emotionalAlteri = store.state.nwk.alteri.filter(
+        (alter) => alter.supportEmotional >= 1 && alter.supportEmotional <= 3
+      );
+      return emotionalAlteri.map((alter) => alter.name).join(", ");
+    });
+
+    const alteriMaterial = computed(() => {
+      const emotionalAlteri = store.state.nwk.alteri.filter(
+        (alter) => alter.supportMaterial >= 1 && alter.supportMaterial <= 3
+      );
+      return emotionalAlteri.map((alter) => alter.name).join(", ");
+    });
+
+    const alteriCognitive = computed(() => {
+      const emotionalAlteri = store.state.nwk.alteri.filter(
+        (alter) => alter.supportCognitive >= 1 && alter.supportCognitive <= 3
+      );
+      return emotionalAlteri.map((alter) => alter.name).join(", ");
+    });
+
+    const alteriPractical = computed(() => {
+      const emotionalAlteri = store.state.nwk.alteri.filter(
+        (alter) => alter.supportPractical >= 1 && alter.supportPractical <= 3
+      );
+      return emotionalAlteri.map((alter) => alter.name).join(", ");
+    });
+
+    const alteriSocial = computed(() => {
+      const emotionalAlteri = store.state.nwk.alteri.filter(
+        (alter) => alter.supportSocial >= 1 && alter.supportSocial <= 3
+      );
+      return emotionalAlteri.map((alter) => alter.name).join(", ");
+    });
+
+    return {
+      isOpen: isOpen,
+      heartClicked: heartClicked,
+      brainClicked: brainClicked,
+      moneyClicked: moneyClicked,
+      speakClicked: speakClicked,
+      helmetClicked: helmetClicked,
+      toggleHeartIcon,
+      toggleBrainIcon,
+      toggleSpeakIcon,
+      toggleMoneyIcon,
+      toggleHelmetIcon,
+      alteri: alteri,
+      alteriEmotional: alteriEmotional,
+      alteriCognitive: alteriCognitive,
+      alteriSocial: alteriSocial,
+      alteriMaterial: alteriMaterial,
+      alteriPractical: alteriPractical,
+      toggleEmotional: () => store.commit("session/toggle", "emotional"),
+      toggleCognitive: () => store.commit("session/toggle", "cognitive"),
+      toggleSocial: () => store.commit("session/toggle", "social"),
+      toggleMaterial: () => store.commit("session/toggle", "material"),
+      togglePractical: () => store.commit("session/toggle", "practical"),
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.right {
+  float: right;
+}
+
+.clicked {
+  color: lightsalmon; // Change to your desired color
+}
+</style>
diff --git a/src/components/ViewOptionsPanel.vue b/src/components/ViewOptionsPanel.vue
index abe9e9f..526c8ba 100644
--- a/src/components/ViewOptionsPanel.vue
+++ b/src/components/ViewOptionsPanel.vue
@@ -72,6 +72,17 @@
               <span v-if="pseudonyms">{{ t("anonymiseoff") }}</span>
               <span v-else>{{ t("anonymiseon") }}</span>
             </button>
+            <button
+              class="button"
+              @click.stop="toggleQuality"
+              style="margin-left: 0.5em"
+            >
+              <span class="icon">
+                <font-awesome-icon icon="hand-holding-heart" />
+              </span>
+              <span v-if="showQuality">{{ t("qualitiesoff") }}</span>
+              <span v-else>{{ t("qualitieson") }}</span>
+            </button>
           </div>
         </div>
       </div>
@@ -136,6 +147,9 @@ export default defineComponent({
     return {
       pseudonyms: computed(() => store.state.pseudonym.active),
       togglePseudonyms: () => store.commit("pseudonym/toggle"),
+      showQuality: computed(() => store.state.session.qualityRelationship),
+      toggleQuality: () =>
+        store.commit("session/toggle", "qualityRelationship"),
       horizons: accessFlag("horizons"),
       connections: accessFlag("connections"),
       alteriNames: accessFlag("alteriNames"),
diff --git a/src/data/Alter.ts b/src/data/Alter.ts
index a3c7b91..f686716 100644
--- a/src/data/Alter.ts
+++ b/src/data/Alter.ts
@@ -23,6 +23,12 @@ export interface Alter {
 
   /** distance from center normalized to 100 for the outer horizont.  */
   distance: number;
+  conflict: boolean;
+  supportEmotional: number;
+  supportCognitive: number;
+  supportSocial: number;
+  supportMaterial: number;
+  supportPractical: number;
 }
 
 export function initAlter(): Alter {
@@ -41,6 +47,12 @@ export function initAlter(): Alter {
     edgeTypeByUser: -1,
     angle: 0,
     distance: 0,
+    conflict: false,
+    supportEmotional: 0,
+    supportCognitive: 0,
+    supportSocial: 0,
+    supportMaterial: 0,
+    supportPractical: 0,
   };
 }
 
diff --git a/src/de.ts b/src/de.ts
index 8c2d8f0..be105a1 100644
--- a/src/de.ts
+++ b/src/de.ts
@@ -76,6 +76,8 @@ export default {
         namesofcontactsoff: "Kontaktnamen aus",
         ageofcontactsoff: "Alter der Kontakte aus",
         roleofcontactsoff: "Rolle der Kontakte aus",
+        qualitieson: "Qualitäten ein",
+        qualitiesoff: "Qualitäten aus",
         //},
         //pdfView: {
         printorpdf: "Drucken bzw. als PDF drucken",
@@ -141,6 +143,21 @@ export default {
         nextcontact: "Nächster Kontakt",
         close: "Schließen",
         cancel: "Abbrechen",
+        conflictual: "Konflikthaft",
+        emotional: "Emotional",
+        informational: "Informationell",
+        social: "Sozial",
+        instrumental: "Instrumentell",
+        linking: "Linking",
+        nosupport: "Keine Unterstützung",
+        isupport: "Ich unterstütze",
+        supportsme: "unterstützt mich",
+        supporteachother: "Wir unterstützen uns",
+        introductionsentence:
+          "Durch Klick auf das Symbol (oder Text) wird das Unterstützungsnetzwerk einer der fünf Qualitäten angezeigt. (Mehrfachauswahl möglich)",
+        socialsupport: "Soziale Unterstützung",
+        toggleon: "Alle einschalten",
+        toggleoff: "Alle ausschalten",
         //},
         //alterConnections: {
         relationshipsof: "Beziehungen von",
diff --git a/src/en.ts b/src/en.ts
index 393c88d..234ebcf 100644
--- a/src/en.ts
+++ b/src/en.ts
@@ -75,6 +75,8 @@ export default {
         namesofcontactsoff: "Name of contacts off",
         ageofcontactsoff: "Age of contacts off",
         roleofcontactsoff: "Role of contacts off",
+        qualitieson: "Qualities on",
+        qualitiesoff: "Qualities off",
         //},
         //pdfView: {
         printorpdf: "Print or print as PDF",
@@ -140,6 +142,21 @@ export default {
         nextcontact: "Next contact",
         close: "Close",
         cancel: "Cancel",
+        conflictual: "Conflictual",
+        emotional: "Emotional",
+        informational: "Informational",
+        social: "Social",
+        instrumental: "Instrumental",
+        linking: "Linking",
+        nosupport: "No support",
+        isupport: "I support",
+        supportsme: "supports me",
+        supporteachother: "We support each other",
+        introductionsentence:
+          "Click on the symbol (or text) to display the support network of one of the five qualities. (multiple selection possible)",
+        socialsupport: "Social support",
+        toggleon: "Toggle all on",
+        toggleoff: "Toggle all off",
         //},
         //alterConnections: {
         relationshipsof: "Relationships of",
diff --git a/src/main.ts b/src/main.ts
index db2e1cb..d618405 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -53,6 +53,15 @@ import {
   faUnlink,
   faArrowsAlt,
   faCopy,
+  faHeart,
+  faBrain,
+  faComments,
+  faMoneyBillWave,
+  faHardHat,
+  faHandHoldingHeart,
+  faToolbox,
+  faLightbulb,
+  faUsers,
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faBars,
@@ -96,7 +105,16 @@ library.add(
   faInfo,
   faLink,
   faUnlink,
-  faArrowsAlt
+  faArrowsAlt,
+  faHeart,
+  faBrain,
+  faComments,
+  faMoneyBillWave,
+  faHardHat,
+  faHandHoldingHeart,
+  faToolbox,
+  faLightbulb,
+  faUsers
 );
 
 // Vue.component("font-awesome-icon", FontAwesomeIcon);
diff --git a/src/store/sessionModule.ts b/src/store/sessionModule.ts
index 475e614..a1b0f03 100644
--- a/src/store/sessionModule.ts
+++ b/src/store/sessionModule.ts
@@ -3,8 +3,14 @@ export const TAB_CONNECTIONS = "connections";
 
 export interface SessionFlags {
   statistics: boolean;
-  nwkchange: boolean;
+  qualityRelationship: boolean;
   nwkcomparison: boolean;
+  nwkchange: boolean;
+  emotional: boolean;
+  cognitive: boolean;
+  social: boolean;
+  material: boolean;
+  practical: boolean;
 }
 
 export interface SessionState extends SessionFlags {
@@ -16,8 +22,14 @@ export interface SessionState extends SessionFlags {
 export function initSessionState(): SessionState {
   return {
     statistics: false,
+    qualityRelationship: false,
     nwkcomparison: false,
     nwkchange: false,
+    emotional: false,
+    cognitive: false,
+    social: false,
+    material: false,
+    practical: false,
 
     selected: new Set<number>(),
     editIndex: null,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 01cc853..8c6cb25 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -44,6 +44,8 @@
             <ViewOptionsPanel :key="langKey" />
             <ComparisonOptionsPanel :key="langKey" />
             <StatisticsPanel v-if="showStatistics" :key="langKey" />
+            <support-panel v-if="showQuality" :key="langKey" />
+            <!-- v-if="showQuality" -->
           </div>
         </div>
       </div>
@@ -69,9 +71,11 @@ import UndoRedo from "@/components/UndoRedo.vue";
 import StatisticsPanel from "@/components/StatisticsPanel.vue";
 import ViewOptionsPanel from "@/components/ViewOptionsPanel.vue";
 import ComparisonOptionsPanel from "@/components/ComparisonOptionsPanel.vue";
+import SupportPanel from "@/components/SupportPanel.vue";
 
 export default defineComponent({
   components: {
+    SupportPanel,
     ComparisonOptionsPanel,
     ErrorBoundary,
     EgoHeader,
@@ -128,6 +132,7 @@ export default defineComponent({
       egoEditMode,
       editEgoFinished,
       mapclick,
+      showQuality: computed(() => store.state.session.qualityRelationship),
       showStatistics: computed(() => store.state.session.statistics),
     };
   },