diff --git a/src/App.tsx b/src/App.tsx
index 4538fbb..2dfc562 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,11 @@
-import rawData from './data.json';
 import Table from './Table';
-import usePersistence, { PersistenceContext } from './usePersistence';
-
-const data = rawData as unknown as {
-  [theme: string]: {
-    color: string;
-    items: string[];
-  };
-};
-
-const levels = [
-  'nog geen ervaring',
-  'meegekeken',
-  'een beetje ervaring',
-  'zelfstandig uitgevoerd',
-  'meermaals zelfstandig uitgevoerd',
-];
+import usePersistence from './usePersistence';
 
 export default  function App(): JSX.Element {
-  const persistence = usePersistence();
+  const { state, select } = usePersistence();
 
   return (
-    <PersistenceContext.Provider value={persistence}>
+    <div>
       <h1>Ervaringskompas</h1>
       <p>
         Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk
@@ -30,12 +14,12 @@ export default  function App(): JSX.Element {
       <div className="legenda">
         <h2>Legenda</h2>
         <ol>
-          {levels.map((level) => (
+          {state.levels.map((level) => (
             <li key={level}>{level}</li>
           ))}
         </ol>
       </div>
-      <Table levels={levels} themes={Object.entries(data)} />
-    </PersistenceContext.Provider>
+      <Table state={state} select={select} />
+    </div>
   );
 }
diff --git a/src/Item.tsx b/src/ExperienceRow.tsx
similarity index 60%
rename from src/Item.tsx
rename to src/ExperienceRow.tsx
index 4c20c86..975320f 100644
--- a/src/Item.tsx
+++ b/src/ExperienceRow.tsx
@@ -1,5 +1,6 @@
-interface ItemProps {
+interface ExperienceRowProps {
   name: string;
+  themeIndex: number,
   index: number;
   color: string;
   levels: string[];
@@ -7,15 +8,15 @@ interface ItemProps {
   onSelect: (level: number) => void;
 }
 
-export default function Item({ name, index, color, levels, selected, onSelect }: ItemProps): JSX.Element {
+export default function ExperienceRow({ name, themeIndex, index, color, levels, selected, onSelect }: ExperienceRowProps): JSX.Element {
   return (
     <tr className="selectable">
       <td style={{ borderBottomColor: color, borderLeftColor: color }}>
-        <label htmlFor={`check-${index}`} title="markeren">
+        <label htmlFor={`check-${themeIndex}-${index}`} title="markeren">
           <input
             type="checkbox"
-            id={`check-${index}`}
-            name={`check-${index}`}
+            id={`check-${themeIndex}-${index}`}
+            name={`check-${themeIndex}-${index}`}
           />
         </label>
       </td>
@@ -25,7 +26,7 @@ export default function Item({ name, index, color, levels, selected, onSelect }:
       {levels
         .map((level, levelIndex) => ({
           level,
-          key: `option-${index}-${levelIndex}`,
+          key: `option-${themeIndex}-${index}-${levelIndex}`,
         }))
         .map(({ level, key }, levelIndex) => (
           <td
@@ -37,11 +38,11 @@ export default function Item({ name, index, color, levels, selected, onSelect }:
             <label htmlFor={key} title={level}>
               <input
                 type="radio"
-                name={`option-${index}`}
+                name={`option-${themeIndex}-${index}`}
                 id={key}
-                value={levelIndex}
-                onChange={() => onSelect(levelIndex)}
-                checked={levelIndex === selected}
+                value={levelIndex + 1}
+                onChange={() => onSelect(levelIndex + 1)}
+                checked={levelIndex + 1 === selected}
               />
             </label>
           </td>
diff --git a/src/Table.tsx b/src/Table.tsx
index 088c738..6b27216 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -1,27 +1,27 @@
-import Theme from './Theme';
+import ThemeSection from './ThemeSection';
+import { PersistenceState } from './usePersistence';
 
-interface TableProps {
-  themes: [string, { color: string; items: string[] }][];
-  levels: string[];
-}
-
-export default function Table({ levels, themes }: TableProps): JSX.Element {
+export default function Table({ state, select }: PersistenceState): JSX.Element {
   return (
       <table>
         <thead>
           <tr>
             <th colSpan={2} style={{ border: 'none' }}></th>
-            {levels.map((level, levelIndex) => (
+            {state.levels.map((level, levelIndex) => (
               <th key={level}>{levelIndex + 1}</th>
             ))}
           </tr>
         </thead>
         <tbody>
-          {themes
-            .map(([name, { color, items }], index) => ({ name, color, items, index }))
-            .map((theme) => (
-              <Theme key={theme.name} theme={theme} levels={levels} />
-            ))}
+          {state.themes.map((theme, index) => (
+            <ThemeSection
+              key={theme.name}
+              theme={theme}
+              index={index}
+              levels={state.levels}
+              select={select}
+            />
+          ))}
         </tbody>
       </table>
   );
diff --git a/src/Theme.tsx b/src/ThemeSection.tsx
similarity index 51%
rename from src/Theme.tsx
rename to src/ThemeSection.tsx
index f05e714..9cb4de3 100644
--- a/src/Theme.tsx
+++ b/src/ThemeSection.tsx
@@ -1,23 +1,20 @@
-import { Fragment, useContext } from 'react';
-import Item from './Item';
-import { PersistenceContext } from './usePersistence';
+import { Fragment } from 'react';
+import { Theme } from './usePersistence';
+import ExperienceRow from './ExperienceRow';
 
 interface ThemeProps {
-  theme: {
-    name: string;
-    color: string;
-    items: string[];
-    index: number;
-  };
-  levels: string[];
+  theme: Theme;
+  index: number,
+  levels: string[],
+  select: (theme: number, item: number, level: number) => void;
 }
 
-export default function Theme({
-  theme: { name, color, items, index: themeIndex },
+export default function ThemeSection({
+  theme: { name, color, experiences },
+  index: themeIndex,
   levels,
+  select,
 }: ThemeProps): JSX.Element {
-  const { getLevel, select } = useContext(PersistenceContext);
-
   return (
     <Fragment>
       <tr>
@@ -34,14 +31,15 @@ export default function Theme({
           </h3>
         </th>
       </tr>
-      {items.map((item, index) => (
-        <Item
-          key={item}
-          name={item}
+      {experiences.map((experience, index) => (
+        <ExperienceRow
+          key={experience.name}
+          name={experience.name}
+          themeIndex={themeIndex}
           index={index}
           levels={levels}
           color={color}
-          selected={getLevel(themeIndex, index)}
+          selected={experience.level}
           onSelect={(level: number) => select(themeIndex, index, level)}
         />
       ))}
diff --git a/src/data.json b/src/data.json
index e1ad886..001a38b 100644
--- a/src/data.json
+++ b/src/data.json
@@ -1,133 +1,404 @@
 {
-    "Korte episode zorg": {
-        "color": "#a6ce39",
-        "items": [
-            "Schat de urgentie van de hulpvraag in en bepaalt de soort verrichting die noodzakelijk is (telefonisch consult, consult of visite).",
-            "Verheldert de hulpvraag, neemt de anamnese af en voert onderzoek uit.",
-            "Voert aanvullende diagnostiek uit.",
-            "Stelt de behandeling en het beleid in, informeert en adviseert.",
-            "Registreert en codeert.",
-            "Sluit de episode af door de behandeling en het beleid te evalueren.",
-            "Neemt de anamnese af aan de telefoon bij een telefonisch consult. ",
-            "Geeft telefonisch voorlichting en advies.",
-            "Superviseert (telefonische) consulten van de assistente en geeft feedback."
-        ]
+  "competences": [
+    "Medisch handelen",
+    "Communicatie",
+    "Samenwerken",
+    "Organiseren",
+    "Maatschappelijk handelen",
+    "Kennis en wetenschap",
+    "Professionaliteit"
+  ],
+  "levels": [
+    "nog geen ervaring",
+    "meegekeken",
+    "een beetje ervaring",
+    "zelfstandig uitgevoerd",
+    "meermaals zelfstandig uitgevoerd"
+  ],
+  "themes": [
+    {
+      "name": "Korte episode zorg",
+      "color": "#a6ce39",
+      "experiences": [
+        {
+          "name": "Schat de urgentie van de hulpvraag in en bepaalt de soort verrichting die noodzakelijk is (telefonisch consult, consult of visite).",
+          "competences": [1, 1, 0, 1, 0, 1, 0]
+        },
+        {
+          "name": "Verheldert de hulpvraag, neemt de anamnese af en voert onderzoek uit.",
+          "competences": [1, 1, 0, 0, 0, 0, 1]
+        },
+        {
+          "name": "Voert aanvullende diagnostiek uit.",
+          "competences": [1, 0, 0, 0, 1, 1, 0]
+        },
+        {
+          "name": "Stelt de behandeling en het beleid in, informeert en adviseert.",
+          "competences": [1, 1, 0, 0, 1, 0, 0]
+        },
+        {
+          "name": "Registreert en codeert.",
+          "competences": [0, 0, 0, 1, 0, 1, 0]
+        },
+        {
+          "name": "Sluit de episode af door de behandeling en het beleid te evalueren.",
+          "competences": [1, 1, 0, 0, 0, 0, 1]
+        },
+        {
+          "name": "Neemt de anamnese af aan de telefoon bij een telefonisch consult. ",
+          "competences": [1, 1, 0, 0, 0, 0, 0]
+        },
+        {
+          "name": "Geeft telefonisch voorlichting en advies.",
+          "competences": [1, 1, 0, 1, 0, 0, 0]
+        },
+        {
+          "name": "Superviseert (telefonische) consulten van de assistente en geeft feedback.",
+          "competences": [0, 1, 1, 1, 0, 1, 0]
+        }
+      ]
     },
-    "Spoedeisende zorg": {
-        "color": "#60bb46",
-        "items": [
-            "Stelt het toestandsbeeld vast van een patiënt met acute ziektebeelden met behulp van de ABCDE methode en voert daarbij de noodzakelijke handelingen uit.",
-            "Handelt getrieerde consulten en visites naar urgentie af.",
-            "Legt bevindingen, diagnose en beleid vast en draagt deze helder over.",
-            "Superviseert gedelegeerde taken.",
-            "Rapporteert voorkomende incidenten en analyseert deze op verbeterpunten in de acute zorgverlening.",
-            "Bewaakt de vlotte afhandeling van de patiëntenstroom met als doel veilige, doelmatige en overbruggende zorg.",
-            "Organiseert het medisch beleid in samenwerking met andere (para) medische hulpverleners en mantelzorgers.",
-            "Handelt visites af conform de regelgeving ten aanzien van spoedritten.",
-            "Trieert telefonisch, stelt de urgentie vast, bepaalt het medisch beleid en geeft instructies in begrijpelijke taal.",
-            "Autoriseert binnen de tijdsnorm het handelen van de triage assistent.",
-            "Fungeert als eerste aanspreekpunt voor SEH, ambulance, apotheek, GGZ, thuiszorg en politie."
-        ]
+    {
+      "name": "Spoedeisende zorg",
+      "color": "#60bb46",
+      "experiences": [
+        {
+          "name": "Stelt het toestandsbeeld vast van een patiënt met acute ziektebeelden met behulp van de ABCDE methode en voert daarbij de noodzakelijke handelingen uit.",
+          "competences": [1, 1, 1, 1, 0, 1, 0]
+        },
+        {
+          "name": "Handelt getrieerde consulten en visites naar urgentie af.",
+          "competences": [1, 1, 0, 1, 1, 1, 0]
+        },
+        {
+          "name": "Legt bevindingen, diagnose en beleid vast en draagt deze helder over.",
+          "competences": [1, 1, 0, 1, 0, 0, 1]
+        },
+        {
+          "name": "Superviseert gedelegeerde taken.",
+          "competences": [1, 1, 1, 0, 0, 0, 1]
+        },
+        {
+          "name": "Rapporteert voorkomende incidenten en analyseert deze op verbeterpunten in de acute zorgverlening.",
+          "competences": [1, 1, 1, 0, 0, 0, 1]
+        },
+        {
+          "name": "Bewaakt de vlotte afhandeling van de patiëntenstroom met als doel veilige, doelmatige en overbruggende zorg.",
+          "competences": [1, 1, 1, 0, 1, 0, 0]
+        },
+        {
+          "name": "Organiseert het medisch beleid in samenwerking met andere (para) medische hulpverleners en mantelzorgers.",
+          "competences": [1, 1, 1, 1, 0, 0, 0]
+        },
+        {
+          "name": "Handelt visites af conform de regelgeving ten aanzien van spoedritten.",
+          "competences": [1, 1, 0, 1, 1, 0, 0]
+        },
+        {
+          "name": "Trieert telefonisch, stelt de urgentie vast, bepaalt het medisch beleid en geeft instructies in begrijpelijke taal.",
+          "competences": [1, 1, 1, 1, 0, 0, 0]
+        },
+        {
+          "name": "Autoriseert binnen de tijdsnorm het handelen van de triage assistent.",
+          "competences": [1, 1, 1, 1, 0, 0, 1]
+        },
+        {
+          "name": "Fungeert als eerste aanspreekpunt voor SEH, ambulance, apotheek, GGZ, thuiszorg en politie.",
+          "competences": [1, 1, 0, 1, 0, 0, 1]
+        }
+      ]
     },
-    "Chronische zorg": {
-        "color": "#00ae9d",
-        "items": [
-            "Behandelt, controleert en organiseert de zorg voor patiënten met diabetes, HVZ en astma/COPD.",
-            "Registreert, deelt data met medebehandelaars en stelt beleid bij.",
-            "Begeleidt en evalueert de zorg verleend door assistente en Praktijkondersteuner Huisarts.",
-            "Markeert het moment dat er sprake is van een chronische ziekte, die behandeling en controle behoeft.",
-            "Verleent en organiseert zorg na ontslag uit het ziekenhuis.",
-            "Behandelt en begeleidt patiënten met zeldzame ziekten.",
-            "Kiest - bij conflicterende richtlijnen - samen met de patiënt de meest passende behandeling.",
-            "Maakt gebruik van moderne communicatietechnieken (ICT)."
-        ]
+    {
+      "name": "Chronische zorg",
+      "color": "#00ae9d",
+      "experiences": [
+        {
+          "name": "Behandelt, controleert en organiseert de zorg voor patiënten met diabetes, HVZ en astma/COPD.",
+          "competences": [1, 0, 1, 1, 0, 1, 0]
+        },
+        {
+          "name": "Registreert, deelt data met medebehandelaars en stelt beleid bij.",
+          "competences": [1, 0, 0, 1, 0, 1, 0]
+        },
+        {
+          "name": "Begeleidt en evalueert de zorg verleend door assistente en Praktijkondersteuner Huisarts.",
+          "competences": [0, 0, 1, 1, 0, 1, 0]
+        },
+        {
+          "name": "Markeert het moment dat er sprake is van een chronische ziekte, die behandeling en controle behoeft.",
+          "competences": [1, 0, 1, 1, 0, 0, 0]
+        },
+        {
+          "name": "Verleent en organiseert zorg na ontslag uit het ziekenhuis.",
+          "competences": [1, 0, 0, 1, 0, 0, 0]
+        },
+        {
+          "name": "Behandelt en begeleidt patiënten met zeldzame ziekten.",
+          "competences": [1, 1, 0, 0, 0, 0, 1]
+        },
+        {
+          "name": "Kiest - bij conflicterende richtlijnen - samen met de patiënt de meest passende behandeling.",
+          "competences": [1, 1, 0, 0, 1, 0, 1]
+        },
+        {
+          "name": "Maakt gebruik van moderne communicatietechnieken (ICT).",
+          "competences": [0, 1, 0, 1, 1, 0, 0]
+        }
+      ]
     },
-    "Zorg voor ouderen met complexe problematiek": {
-        "color": "#00a6e4",
-        "items": [
-            "Stelt vast of er sprake is van complexe problematiek.",
-            "Stelt in samenspraak met de patiënt een behandelplan vast.",
-            "Behandelt intercurrente ziekten in samenhang met bestaande (complexe) problematiek.",
-            "Bespreekt vroegtijdig de keuzes in aanvullende diagnostiek en/of behandeling rekening houdend met persoonlijke wensen en levensverwachting.",
-            "Stemt taken bij de zorg voor ouderen af met andere bij de patiënt betrokken hulpverleners.",
-            "Bepaalt periodiek de zorgbehoefte van de ouderen in de praktijk (door screening en/of casefinding) en past het zorgaanbod daar waar mogelijk op aan.",
-            "Verbetert en bewaakt de veiligheid van de ouderenzorg in de praktijk, door onder meer periodieke medicatiereviews en valpreventieprogramma’s.",
-            "Bepaalt welk aandeel de huisartsvoorziening heeft in de zorg voor ouderen en stemt dit af met andere verantwoordelijken in deze zorg zoals de Gemeente (WMO)."
-        ]
+    {
+      "name": "Zorg voor ouderen met complexe problematiek",
+      "color": "#00a6e4",
+      "experiences": [
+        {
+          "name": "Stelt vast of er sprake is van complexe problematiek.",
+          "competences": [1, 1, 0, 0, 0, 1, 0]
+        },
+        {
+          "name": "Stelt in samenspraak met de patiënt een behandelplan vast.",
+          "competences": [1, 1, 0, 0, 0, 0, 1]
+        },
+        {
+          "name": "Behandelt intercurrente ziekten in samenhang met bestaande (complexe) problematiek.",
+          "competences": [1, 0, 0, 1, 0, 1, 0]
+        },
+        {
+          "name": "Bespreekt vroegtijdig de keuzes in aanvullende diagnostiek en/of behandeling rekening houdend met persoonlijke wensen en levensverwachting.",
+          "competences": [1, 1, 0, 0, 1, 1, 0]
+        },
+        {
+          "name": "Stemt taken bij de zorg voor ouderen af met andere bij de patiënt betrokken hulpverleners.",
+          "competences": [0, 0, 1, 1, 1, 0, 0]
+        },
+        {
+          "name": "Bepaalt periodiek de zorgbehoefte van de ouderen in de praktijk (door screening en/of casefinding) en past het zorgaanbod daar waar mogelijk op aan.",
+          "competences": [0, 0, 0, 1, 1, 1, 1]
+        },
+        {
+          "name": "Verbetert en bewaakt de veiligheid van de ouderenzorg in de praktijk, door onder meer periodieke medicatiereviews en valpreventieprogramma’s.",
+          "competences": [0, 0, 1, 0, 1, 1, 1]
+        },
+        {
+          "name": "Bepaalt welk aandeel de huisartsvoorziening heeft in de zorg voor ouderen en stemt dit af met andere verantwoordelijken in deze zorg zoals de Gemeente (WMO).",
+          "competences": [0, 0, 1, 1, 1, 0, 0]
+        }
+      ]
     },
-    "Zorg voor het kind": {
-        "color": "#b41e8d",
-        "items": [
-            "Voert een consult met een acuut ziek kind (leeftijd: 0-2 jaar).",
-            "Voert een consult met een kind met lichamelijke klachten (leeftijd: 3-10 jaar).",
-            "Voert een consult met een puber/adolescent (leeftijd: 11-23 jaar).",
-            "Maakt overgewicht bespreekbaar en begeleidt hierbij.",
-            "Signaleert problematische thuissituaties en begeleidt het gezin.",
-            "Schrijft medicatie voor aan kinderen."
-        ]
+    {
+      "name": "Zorg voor het kind",
+      "color": "#b41e8d",
+      "experiences": [
+        {
+          "name": "Voert een consult met een acuut ziek kind (leeftijd: 0-2 jaar).",
+          "competences": [1, 1, 0, 0, 1, 0, 1]
+        },
+        {
+          "name": "Voert een consult met een kind met lichamelijke klachten (leeftijd: 3-10 jaar).",
+          "competences": [1, 1, 0, 0, 0, 0, 1]
+        },
+        {
+          "name": "Voert een consult met een puber/adolescent (leeftijd: 11-23 jaar).",
+          "competences": [1, 1, 1, 0, 1, 0, 1]
+        },
+        {
+          "name": "Maakt overgewicht bespreekbaar en begeleidt hierbij.",
+          "competences": [1, 1, 1, 0, 0, 0, 1]
+        },
+        {
+          "name": "Signaleert problematische thuissituaties en begeleidt het gezin.",
+          "competences": [1, 1, 1, 0, 1, 0, 1]
+        },
+        {
+          "name": "Schrijft medicatie voor aan kinderen.",
+          "competences": [1, 1, 0, 0, 0, 0, 0]
+        }
+      ]
     },
-    "Zorg voor patiënten met psychische klachten en aandoeningen": {
-        "color": "#ed1a3a",
-        "items": [
-            "Begeleidt een patiënt met spanningsklachten, overspanning of burn-out.",
-            "Zet bij een patiënt met angst- en stemmingsklachten /stoornissen de benodigde behandeling in.",
-            "Diagnosticeert acute psychiatrische stoornissen en zet de benodigde behandeling in.",
-            "Schat bij suïcidaliteit het gevaar in voor de patiënt en diens omgeving en zet de benodigde hulp in.",
-            "Motiveert een patiënt met (een verhoogd risico voor) verslavingsgedrag voor passende zorg.",
-            "Zet bij een patiënt met gevolgen van traumatische gebeurtenissen de benodigde zorg in.",
-            "Signaleert persoonlijkheidstrekken en -stoornissen, definieert de gevolgen hiervan voor de zorgverlening en adviseert de patiënt om indien nodig passende begeleiding te vinden.",
-            "Zet bij kinderen met afwijkend gedrag passende diagnostiek en behandeling in."
-        ]
+    {
+      "name": "Zorg voor patiënten met psychische klachten en aandoeningen",
+      "color": "#ed1a3a",
+      "experiences": [
+        {
+          "name": "Begeleidt een patiënt met spanningsklachten, overspanning of burn-out.",
+          "competences": [1, 1, 1, 1, 0, 0, 0]
+        },
+        {
+          "name": "Zet bij een patiënt met angst- en stemmingsklachten /stoornissen de benodigde behandeling in.",
+          "competences": [1, 1, 1, 0, 0, 1, 0]
+        },
+        {
+          "name": "Diagnosticeert acute psychiatrische stoornissen en zet de benodigde behandeling in.",
+          "competences": [1, 1, 1, 0, 0, 0, 1]
+        },
+        {
+          "name": "Schat bij suïcidaliteit het gevaar in voor de patiënt en diens omgeving en zet de benodigde hulp in.",
+          "competences": [1, 1, 0, 1, 1, 0, 0]
+        },
+        {
+          "name": "Motiveert een patiënt met (een verhoogd risico voor) verslavingsgedrag voor passende zorg.",
+          "competences": [1, 1, 0, 0, 1, 0, 1]
+        },
+        {
+          "name": "Zet bij een patiënt met gevolgen van traumatische gebeurtenissen de benodigde zorg in.",
+          "competences": [1, 1, 1, 0, 0, 0, 1]
+        },
+        {
+          "name": "Signaleert persoonlijkheidstrekken en -stoornissen, definieert de gevolgen hiervan voor de zorgverlening en adviseert de patiënt om indien nodig passende begeleiding te vinden.",
+          "competences": [1, 1, 0, 0, 0, 0, 0]
+        },
+        {
+          "name": "Zet bij kinderen met afwijkend gedrag passende diagnostiek en behandeling in.",
+          "competences": [1, 0, 1, 0, 1, 0, 0]
+        }
+      ]
     },
-    "Zorg voor patienten met SOLK": {
-        "color": "#f36421",
-        "items": [
-            "Stelt de werkhypothese SOLK, geeft uitleg en behandelt stapsgewijs.",
-            "Maakt gebruik van klachtenregistratie om patronen in klachten en beïnvloedende factoren te ontdekken.",
-            "Voert een verwijsgesprek met een patiënt met SOLK.",
-            "Bespreekt de gevolgen van de klachten voor de arbeidsparticipatie bij (dreigende) langdurige arbeidsongeschiktheid.",
-            "Biedt langdurige begeleiding en houdt de regie bij een patiënt met ernstige SOLK."
-        ]
+    {
+      "name": "Zorg voor patienten met SOLK",
+      "color": "#f36421",
+      "experiences": [
+        {
+          "name": "Stelt de werkhypothese SOLK, geeft uitleg en behandelt stapsgewijs.",
+          "competences": [1, 1, 0, 0, 0, 0, 1]
+        },
+        {
+          "name": "Maakt gebruik van klachtenregistratie om patronen in klachten en beïnvloedende factoren te ontdekken.",
+          "competences": [1, 1, 0, 0, 0, 0, 0]
+        },
+        {
+          "name": "Voert een verwijsgesprek met een patiënt met SOLK.",
+          "competences": [1, 1, 1, 0, 1, 0, 0]
+        },
+        {
+          "name": "Bespreekt de gevolgen van de klachten voor de arbeidsparticipatie bij (dreigende) langdurige arbeidsongeschiktheid.",
+          "competences": [0, 0, 1, 0, 1, 0, 0]
+        },
+        {
+          "name": "Biedt langdurige begeleiding en houdt de regie bij een patiënt met ernstige SOLK.",
+          "competences": [1, 1, 0, 1, 0, 0, 0]
+        }
+      ]
     },
-    "Palliatieve en terminale zorg": {
-        "color": "#f36421",
-        "items": [
-            "Voert een gesprek over het naderend levenseinde.",
-            "Past beleid aan op basis van de fase waarin de patiënt in de palliatieve fase verkeert: in het bijzonder de overgang van curatieve fase naar de palliatieve fase en de stervensfase.",
-            "Behandelt de specifieke problemen in de palliatieve / terminale fase.",
-            "Anticipeert op de vaak complexe problemen en klachten tijdens de palliatieve fase / terminale zorg.",
-            "Organiseert de palliatieve en terminale zorg, stuurt andere zorgverleners aan en is aanspreekpunt voor de patiënt en zijn omgeving.",
-            "Verleent zorg aan naasten.",
-            "Begeleidt een patiënt en diens naasten bij het verlies (rouwverwerking).",
-            "Voert palliatieve sedatie uit.",
-            "Voert de wens tot euthanasie uit of draagt deze over in geval van persoonlijke gewetensbezwaren.",
-            "Levert persoonlijke continuïteit van zorgverlening."
-        ]
+    {
+      "name": "Palliatieve en terminale zorg",
+      "color": "#f36421",
+      "experiences": [
+        {
+          "name": "Voert een gesprek over het naderend levenseinde.",
+          "competences": [1, 1, 0, 0, 1, 0, 1]
+        },
+        {
+          "name": "Past beleid aan op basis van de fase waarin de patiënt in de palliatieve fase verkeert: in het bijzonder de overgang van curatieve fase naar de palliatieve fase en de stervensfase.",
+          "competences": [1, 1, 1, 1, 1, 0, 0]
+        },
+        {
+          "name": "Behandelt de specifieke problemen in de palliatieve / terminale fase.",
+          "competences": [1, 1, 1, 0, 1, 1, 0]
+        },
+        {
+          "name": "Anticipeert op de vaak complexe problemen en klachten tijdens de palliatieve fase / terminale zorg.",
+          "competences": [1, 1, 1, 1, 1, 0, 1]
+        },
+        {
+          "name": "Organiseert de palliatieve en terminale zorg, stuurt andere zorgverleners aan en is aanspreekpunt voor de patiënt en zijn omgeving.",
+          "competences": [1, 1, 1, 1, 1, 0, 1]
+        },
+        {
+          "name": "Verleent zorg aan naasten.",
+          "competences": [1, 1, 1, 1, 0, 0, 1]
+        },
+        {
+          "name": "Begeleidt een patiënt en diens naasten bij het verlies (rouwverwerking).",
+          "competences": [1, 1, 0, 1, 0, 0, 1]
+        },
+        {
+          "name": "Voert palliatieve sedatie uit.",
+          "competences": [1, 1, 1, 1, 0, 0, 1]
+        },
+        {
+          "name": "Voert de wens tot euthanasie uit of draagt deze over in geval van persoonlijke gewetensbezwaren.",
+          "competences": [1, 1, 1, 1, 1, 0, 1]
+        },
+        {
+          "name": "Levert persoonlijke continuïteit van zorgverlening.",
+          "competences": [1, 1, 0, 1, 0, 0, 1]
+        }
+      ]
     },
-    "Preventie": {
-        "color": "#fed702",
-        "items": [
-            "Stelt, samen met een patiënt, een individueel zorgplan op ter preventie van een chronische ziekte.",
-            "Verkent op indicatie de leefstijl van een patiënt en bespreekt mogelijkheden tot verandering.",
-            "Adviseert over verschillende preventieve activiteiten.",
-            "Selecteert personen en patiënten met een verhoogd gezondheidsrisico.",
-            "Voert programmatische preventie uit.",
-            "Bepaalt welke rol de huisarts heeft in een nieuw of bestaand preventieproject en voert deze uit.",
-            "Is betrokken bij de uitvoering van bevolkingsonderzoek zoals door de beroepsgroep met de overheid is overeengekomen en voert zijn aandeel hierin uit.",
-            "Brengt een erfelijke ziekte in de familie van een patiënt in kaart en bespreekt of screening of diagnostiek aan de orde is.",
-            "Bespreekt bij een bestaande kinderwens preventieve mogelijkheden voorafgaand aan een toekomstige zwangerschap."
-        ]
+    {
+      "name": "Preventie",
+      "color": "#fed702",
+      "experiences": [
+        {
+          "name": "Stelt, samen met een patiënt, een individueel zorgplan op ter preventie van een chronische ziekte.",
+          "competences": [1, 1, 0, 0, 1, 1, 0]
+        },
+        {
+          "name": "Verkent op indicatie de leefstijl van een patiënt en bespreekt mogelijkheden tot verandering.",
+          "competences": [1, 1, 0, 0, 1, 0, 1]
+        },
+        {
+          "name": "Adviseert over verschillende preventieve activiteiten.",
+          "competences": [1, 1, 0, 0, 1, 1, 0]
+        },
+        {
+          "name": "Selecteert personen en patiënten met een verhoogd gezondheidsrisico.",
+          "competences": [1, 0, 1, 1, 0, 1, 0]
+        },
+        {
+          "name": "Voert programmatische preventie uit.",
+          "competences": [0, 0, 1, 1, 1, 0, 0]
+        },
+        {
+          "name": "Bepaalt welke rol de huisarts heeft in een nieuw of bestaand preventieproject en voert deze uit.",
+          "competences": [0, 0, 0, 1, 1, 1, 0]
+        },
+        {
+          "name": "Is betrokken bij de uitvoering van bevolkingsonderzoek zoals door de beroepsgroep met de overheid is overeengekomen en voert zijn aandeel hierin uit.",
+          "competences": [1, 1, 1, 0, 0, 1, 1]
+        },
+        {
+          "name": "Brengt een erfelijke ziekte in de familie van een patiënt in kaart en bespreekt of screening of diagnostiek aan de orde is.",
+          "competences": [1, 1, 0, 0, 0, 0, 0]
+        },
+        {
+          "name": "Bespreekt bij een bestaande kinderwens preventieve mogelijkheden voorafgaand aan een toekomstige zwangerschap.",
+          "competences": [1, 1, 0, 0, 1, 0, 1]
+        }
+      ]
     },
-    "Praktijkmanagement": {
-        "color": "#a5c3cb",
-        "items": [
-            "Formuleert een persoonlijke en een praktijkvisie op de huisartsenzorg.",
-            "Stelt een verbeterplan op en voert dit uit.",
-            "Superviseert individuele praktijkmedewerkers bij het uitvoeren van voorbehouden handelingen.",
-            "Levert een bijdrage aan de patiëntveiligheid door het melden, analyseren en afhandelen van patiëntveiligheidsproblemen.",
-            "Heeft inzicht in de financiering en bedrijfsvoering van de huisartsenpraktijk, declareert eigen verrichtingen en adviseert patiënten over de financiële consequenties van een medische behandeling/diagnostiek.",
-            "Vertegenwoordigt de opleidingspraktijk voor een specifiek thema in een multidisciplinair overleg.",
-            "Stemt de praktijkvoering en informatievoorziening af op de behoeften van de patiëntenpopulatie."
-        ]
+    {
+      "name": "Praktijkmanagement",
+      "color": "#a5c3cb",
+      "experiences": [
+        {
+          "name": "Formuleert een persoonlijke en een praktijkvisie op de huisartsenzorg.",
+          "competences": [0, 0, 0, 1, 1, 0, 1]
+        },
+        {
+          "name": "Stelt een verbeterplan op en voert dit uit.",
+          "competences": [1, 0, 1, 1, 0, 0, 0]
+        },
+        {
+          "name": "Superviseert individuele praktijkmedewerkers bij het uitvoeren van voorbehouden handelingen.",
+          "competences": [1, 0, 1, 1, 0, 1, 0]
+        },
+        {
+          "name": "Levert een bijdrage aan de patiëntveiligheid door het melden, analyseren en afhandelen van patiëntveiligheidsproblemen.",
+          "competences": [1, 0, 1, 0, 0, 0, 0]
+        },
+        {
+          "name": "Heeft inzicht in de financiering en bedrijfsvoering van de huisartsenpraktijk, declareert eigen verrichtingen en adviseert patiënten over de financiële consequenties van een medische behandeling/diagnostiek.",
+          "competences": [0, 1, 1, 1, 0, 0, 0]
+        },
+        {
+          "name": "Vertegenwoordigt de opleidingspraktijk voor een specifiek thema in een multidisciplinair overleg.",
+          "competences": [0, 0, 0, 1, 1, 1, 0]
+        },
+        {
+          "name": "Stemt de praktijkvoering en informatievoorziening af op de behoeften van de patiëntenpopulatie.",
+          "competences": [0, 0, 1, 1, 0, 0, 1]
+        }
+      ]
     }
+  ]
 }
diff --git a/src/usePersistence.ts b/src/usePersistence.ts
index d66144c..2b324f5 100644
--- a/src/usePersistence.ts
+++ b/src/usePersistence.ts
@@ -1,44 +1,97 @@
-import { createContext, useEffect, useReducer } from 'react';
+import { Reducer, useEffect, useReducer } from 'react';
+import rawData from './data.json';
 
-type Action = { type: 'select'; theme: number; item: number; level: number };
+export interface State {
+  levels: string[];
+  competences: string[];
+  themes: Theme[];
+}
+
+export interface Theme {
+  name: string;
+  color: string;
+  experiences: Experience[];
+}
+
+export interface Experience {
+  name: string;
+  competences: number[];
+  level: number;
+}
+
+export interface PersistenceState {
+  state: State;
+  select: (theme: number, item: number, level: number) => void;
+}
 
-type State = { [key: string]: number };
+export interface Action {
+  type: 'select';
+  theme: number;
+  experience: number;
+  level: number;
+}
+
+const data = rawData as State;
 
-function reducer(state: State, action: Action) {
+function reducer(state: State, action: Action): State {
   switch (action.type) {
     case 'select':
-      return { ...state, [`${action.theme}-${action.item}`]: action.level };
+      return {
+        ...state,
+        themes: state.themes.map(
+          (theme, themeIndex): Theme => ({
+            ...theme,
+            experiences: theme.experiences.map(
+              (experience, experienceIndex): Experience => ({
+                ...experience,
+                level:
+                  themeIndex === action.theme &&
+                  experienceIndex === action.experience
+                    ? action.level
+                    : experience.level,
+              })
+            ),
+          })
+        ),
+      };
     default:
       throw new Error();
   }
 }
 
-interface PersistenceState {
-  getLevel: (theme: number, item: number) => number;
-  select: (theme: number, item: number, level: number) => void;
-}
-
 function initialState(): State {
   const localState = window.localStorage.getItem('persistence');
+  const levels = localState ? JSON.parse(localState) : [];
 
-  return localState ? JSON.parse(localState) : {};
+  return {
+    ...data,
+    themes: data.themes.map((theme, themeIndex) => ({
+      ...theme,
+      experiences: theme.experiences.map((experience, experienceIndex) => ({
+        ...experience,
+        level: levels[themeIndex]
+          ? levels[themeIndex][experienceIndex] || 0
+          : 0,
+      })),
+    })),
+  };
 }
 
-export const PersistenceContext = createContext<PersistenceState>({
-  getLevel: () => 0,
-  select: () => {},
-});
-
 export default function usePersistence(): PersistenceState {
-  const [state, dispatch] = useReducer(reducer, [], initialState);
+  const [state, dispatch] = useReducer<Reducer<State, Action>>(
+    reducer,
+    initialState()
+  );
 
   useEffect(() => {
-    window.localStorage.setItem('persistence', JSON.stringify(state));
+    window.localStorage.setItem('persistence', JSON.stringify(
+      state.themes.map((theme) => theme.experiences.map((experience) => experience.level))
+    ));
   }, [state]);
 
   return {
-    getLevel: (theme: number, item: number) => state[`${theme}-${item}`],
-    select: (theme: number, item: number, level: number) =>
-      dispatch({ type: 'select', theme, item, level }),
+    state,
+    select: (theme: number, experience: number, level: number) =>
+      dispatch({ type: 'select', theme, experience, level }),
   };
 }