diff --git a/src/App.tsx b/src/App.tsx
index 2dfc562..1229ac2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,12 @@
+import Results from './Results';
 import Table from './Table';
 import usePersistence from './usePersistence';
 
-export default  function App(): JSX.Element {
-  const { state, select } = usePersistence();
+export default function App(): JSX.Element {
+  const { state, select, mark, note } = usePersistence();
 
   return (
-    <div>
+    <>
       <h1>Ervaringskompas</h1>
       <p>
         Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk
@@ -19,7 +20,10 @@ export default  function App(): JSX.Element {
           ))}
         </ol>
       </div>
-      <Table state={state} select={select} />
-    </div>
+      <hr />
+      <Table state={state} select={select} mark={mark} />
+      <hr />
+      <Results state={state} mark={mark} note={note} />
+    </>
   );
 }
diff --git a/src/CompetenceResult.tsx b/src/CompetenceResult.tsx
new file mode 100644
index 0000000..77c23bb
--- /dev/null
+++ b/src/CompetenceResult.tsx
@@ -0,0 +1,51 @@
+import { MAX_LEVEL, State } from './usePersistence';
+
+export default function CompetenceResult({
+  state,
+}: {
+  state: State;
+}): JSX.Element {
+  const results = state.competences.map((competence, index) => {
+    const [score, max] = state.themes.reduce(
+      (acc, theme) => {
+        const [score, max] = theme.experiences.reduce(
+          (acc, exp) => {
+            return [
+              acc[0] + exp.competences[index] * exp.level,
+              acc[1] + exp.competences[index] * MAX_LEVEL,
+            ];
+          },
+          [0, 0]
+        );
+        return [acc[0] + score, acc[1] + max];
+      },
+      [0, 0]
+    );
+
+    return {
+      competence,
+      percentage: Math.round((score / max) * 100),
+    };
+  });
+
+  return (
+    <table className="result">
+      <tbody>
+        {results.map(({ competence, percentage }) => (
+          <tr key={competence}>
+            <th>{competence}</th>
+            <td>{percentage}%</td>
+            <td className="progress">
+              <div
+                className="bar"
+                style={{
+                  width: `${percentage}%`,
+                }}
+              ></div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/src/ExperienceRow.tsx b/src/ExperienceRow.tsx
index 975320f..70e0297 100644
--- a/src/ExperienceRow.tsx
+++ b/src/ExperienceRow.tsx
@@ -1,14 +1,26 @@
 interface ExperienceRowProps {
   name: string;
-  themeIndex: number,
+  themeIndex: number;
   index: number;
   color: string;
   levels: string[];
   selected: number;
+  marked: boolean;
+  onMark: (marked: boolean) => void;
   onSelect: (level: number) => void;
 }
 
-export default function ExperienceRow({ name, themeIndex, index, color, levels, selected, onSelect }: ExperienceRowProps): JSX.Element {
+export default function ExperienceRow({
+  name,
+  themeIndex,
+  index,
+  color,
+  levels,
+  marked,
+  selected,
+  onMark,
+  onSelect,
+}: ExperienceRowProps): JSX.Element {
   return (
     <tr className="selectable">
       <td style={{ borderBottomColor: color, borderLeftColor: color }}>
@@ -17,6 +29,8 @@ export default function ExperienceRow({ name, themeIndex, index, color, levels,
             type="checkbox"
             id={`check-${themeIndex}-${index}`}
             name={`check-${themeIndex}-${index}`}
+            checked={marked}
+            onChange={(e) => onMark(e.target.checked)}
           />
         </label>
       </td>
@@ -33,8 +47,10 @@ export default function ExperienceRow({ name, themeIndex, index, color, levels,
             key={level}
             style={{
               borderBottomColor: color,
-              borderRightColor: levelIndex === levels.length - 1 ? color : undefined
-            }}>
+              borderRightColor:
+                levelIndex === levels.length - 1 ? color : undefined,
+            }}
+          >
             <label htmlFor={key} title={level}>
               <input
                 type="radio"
diff --git a/src/Marked.tsx b/src/Marked.tsx
new file mode 100644
index 0000000..0f68f94
--- /dev/null
+++ b/src/Marked.tsx
@@ -0,0 +1,37 @@
+import { Mark, State } from './usePersistence';
+
+interface MarkedProps {
+  state: State;
+  mark: Mark;
+}
+
+export default function Marked({ state, mark }: MarkedProps): JSX.Element {
+  const items = state.themes
+    .map((theme, themeIndex) =>
+      theme.experiences.map((experience, index) => {
+        if (!experience.marked) {
+          return null;
+        }
+
+        return (
+          <li key={experience.name}>
+            <input
+              type="checkbox"
+              name={`check-${index}`}
+              checked={true}
+              onChange={() => mark(themeIndex, index, false)}
+            />
+            {experience.name}
+          </li>
+        );
+      })
+    )
+    .flat()
+    .filter((item) => item !== null);
+
+  if (items.length === 0) {
+    return <p>Nog geen gemarkeerde ervaringen</p>;
+  }
+
+  return <ul>{items}</ul>;
+}
diff --git a/src/Results.tsx b/src/Results.tsx
new file mode 100644
index 0000000..35d2153
--- /dev/null
+++ b/src/Results.tsx
@@ -0,0 +1,44 @@
+import CompetenceResult from './CompetenceResult';
+import Marked from './Marked';
+import ThemeResult from './ThemeResult';
+import { Mark, State } from './usePersistence';
+
+interface ResultProps {
+  state: State;
+  mark: Mark;
+  note: (content: string) => void;
+}
+
+export default function Results({
+  state,
+  mark,
+  note,
+}: ResultProps): JSX.Element {
+  return (
+    <>
+      <h2>Ervaring</h2>
+      <h3>Per thema/lijn</h3>
+      <div className="result">
+        <ThemeResult state={state} />
+      </div>
+      <h3>Per competentiegebied</h3>
+      <div className="result">
+        <CompetenceResult state={state} />
+      </div>
+      <p>
+        De score zegt iets over hoe vaak je praktijkervaring hebt opgedaan in
+        betreffende thema/lijn en competentiegebied, niet over je niveau van
+        competentie.
+      </p>
+      <hr />
+      <h2>Remarkeerde ervaringen</h2>
+      <Marked state={state} mark={mark} />
+      <hr />
+      <h2>Notities</h2>
+      <textarea
+        value={state.notes}
+        onChange={(event) => note(event.target.value)}
+      />
+    </>
+  );
+}
diff --git a/src/Table.tsx b/src/Table.tsx
index 6b27216..5f927ae 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -1,28 +1,39 @@
 import ThemeSection from './ThemeSection';
-import { PersistenceState } from './usePersistence';
+import { Mark, Select, State } from './usePersistence';
 
-export default function Table({ state, select }: PersistenceState): JSX.Element {
+interface TableProps {
+  state: State;
+  mark: Mark;
+  select: Select;
+}
+
+export default function Table({
+  state,
+  select,
+  mark,
+}: TableProps): JSX.Element {
   return (
-      <table>
-        <thead>
-          <tr>
-            <th colSpan={2} style={{ border: 'none' }}></th>
-            {state.levels.map((level, levelIndex) => (
-              <th key={level}>{levelIndex + 1}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {state.themes.map((theme, index) => (
-            <ThemeSection
-              key={theme.name}
-              theme={theme}
-              index={index}
-              levels={state.levels}
-              select={select}
-            />
+    <table className="form">
+      <thead>
+        <tr>
+          <th colSpan={2} style={{ border: 'none' }}></th>
+          {state.levels.map((level, levelIndex) => (
+            <th key={level}>{levelIndex + 1}</th>
           ))}
-        </tbody>
-      </table>
+        </tr>
+      </thead>
+      <tbody>
+        {state.themes.map((theme, index) => (
+          <ThemeSection
+            key={theme.name}
+            theme={theme}
+            index={index}
+            levels={state.levels}
+            select={select}
+            mark={mark}
+          />
+        ))}
+      </tbody>
+    </table>
   );
 }
diff --git a/src/ThemeResult.tsx b/src/ThemeResult.tsx
new file mode 100644
index 0000000..fcc4410
--- /dev/null
+++ b/src/ThemeResult.tsx
@@ -0,0 +1,56 @@
+import { MAX_LEVEL, State } from './usePersistence';
+
+export default function ThemeResult({ state }: { state: State }): JSX.Element {
+  let totalScore = 0;
+  let totalMax = 0;
+
+  const results = state.themes.map((theme) => {
+    const max = theme.experiences.length * MAX_LEVEL;
+    const score = theme.experiences.reduce((acc, exp) => acc + exp.level, 0);
+
+    totalScore += score;
+    totalMax += max;
+
+    return {
+      theme: theme.name,
+      color: theme.color,
+      percentage: Math.round((score / max) * 100),
+    };
+  });
+
+  const totalPercentage = Math.round((totalScore / totalMax) * 100);
+
+  return (
+    <table className="result">
+      <tbody>
+        {results.map(({ theme, color, percentage }) => (
+          <tr key={theme}>
+            <th>{theme}</th>
+            <td>{percentage}%</td>
+            <td className="progress">
+              <div
+                className="bar"
+                style={{
+                  backgroundColor: color,
+                  width: `${percentage}%`,
+                }}
+              ></div>
+            </td>
+          </tr>
+        ))}
+        <tr>
+          <th>Totaal</th>
+          <td>{totalPercentage}%</td>
+          <td className="progress">
+            <div
+              className="bar"
+              style={{
+                width: `${totalPercentage}%`,
+              }}
+            ></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
diff --git a/src/ThemeSection.tsx b/src/ThemeSection.tsx
index 9cb4de3..db35f24 100644
--- a/src/ThemeSection.tsx
+++ b/src/ThemeSection.tsx
@@ -1,12 +1,13 @@
 import { Fragment } from 'react';
-import { Theme } from './usePersistence';
+import { Mark, Select, Theme } from './usePersistence';
 import ExperienceRow from './ExperienceRow';
 
 interface ThemeProps {
   theme: Theme;
-  index: number,
-  levels: string[],
-  select: (theme: number, item: number, level: number) => void;
+  index: number;
+  levels: string[];
+  select: Select;
+  mark: Mark;
 }
 
 export default function ThemeSection({
@@ -14,6 +15,7 @@ export default function ThemeSection({
   index: themeIndex,
   levels,
   select,
+  mark,
 }: ThemeProps): JSX.Element {
   return (
     <Fragment>
@@ -40,6 +42,8 @@ export default function ThemeSection({
           levels={levels}
           color={color}
           selected={experience.level}
+          marked={experience.marked}
+          onMark={(marked: boolean) => mark(themeIndex, index, marked)}
           onSelect={(level: number) => select(themeIndex, index, level)}
         />
       ))}
diff --git a/src/index.css b/src/index.css
index b5b01a1..8fc19a3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,20 +3,32 @@
 html {
   box-sizing: border-box;
   font-size: 16px;
-  min-width: 470px;
+  min-width: 454px;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
   margin: 0;
   padding: 0;
   font-weight: normal;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
 
@@ -43,6 +55,19 @@ body {
 h1 {
   font-size: 2rem;
   margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  font-weight: 700;
 }
 
 p {
@@ -54,12 +79,40 @@ ol {
   list-style: decimal;
 }
 
+ul li {
+  line-height: 1.5;
+}
+
+ul li input {
+  margin-right: 0.5rem;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid #eaeaea;
+  margin: 1rem 0;
+}
+
+textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #eaeaea;
+  min-height: 8rem;
+}
+
+@media screen and (min-width: 1400px) {
+  #root {
+    max-width: 1262px;
+    margin: 0 auto;
+  }
+}
+
 /* legenda styling */
 
 .legenda {
   display: inline-block;
   padding: 1rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
   border: 1px solid #eaeaea;
   background-color: #fafafa;
 }
@@ -73,6 +126,7 @@ ol {
 table {
   border-collapse: collapse;
   height: 1px;
+  margin-bottom: 1rem;
 }
 
 tbody th {
@@ -82,22 +136,25 @@ tbody th {
   padding: 0.5rem;
 }
 
-th.theme {
+td,
+th {
+  border: 1px solid #f0f0f0;
+  vertical-align: middle;
+  min-width: 2rem;
+}
+
+/* table form styling */
+
+table.form th.theme {
   border: none;
   border-bottom: 1px solid #000;
 }
 
-tbody td {
+table.form tbody td {
   width: 50px;
 }
 
-td, th {
-  border: 1px solid #f0f0f0;
-  vertical-align: middle;
-  min-width: 2rem;
-}
-
-tbody td label {
+table.form tbody td label {
   position: relative;
   display: block;
   width: 100%;
@@ -105,11 +162,11 @@ tbody td label {
   cursor: pointer;
 }
 
-table h3 {
+table.form h3 {
   margin-top: 1rem;
 }
 
-table h3 span {
+table.form h3 span {
   display: inline-block;
   width: 2rem;
   height: 2rem;
@@ -120,7 +177,7 @@ table h3 span {
   color: #fff;
 }
 
-tbody input {
+table.form tbody input {
   cursor: pointer;
   padding: 0;
   margin: 0;
@@ -130,10 +187,55 @@ tbody input {
   transform: translate(-50%, -50%);
 }
 
-table tr.selectable:hover {
+table.form tr.selectable:hover {
   background: #fafafa;
 }
 
-h1 {
-  font-weight: 700;
+/* result table styling */
+
+.result table {
+  max-width: 100%;
+}
+
+.result .progress {
+  position: relative;
+  width: 30rem;
+  padding: 0.25rem;
+}
+
+.result .progress::before {
+  position: absolute;
+  top: 0.5rem;
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1rem;
+  background-color: #fafafa;
+}
+
+.result .bar {
+  position: absolute;
+  top: 0.5rem;
+  height: 1rem;
+  min-width: 2px;
+  background-color: #4472c4;
+}
+
+.result th {
+  padding: 0.25rem
+}
+
+.result td:nth-child(2) {
+  text-align: right;
+  padding: 0.25rem 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .result .progress {
+    max-width: 40vw;
+  }
+
+  .result td:nth-child(2) {
+    padding: 0.25rem 0.5rem;
+  }
 }
diff --git a/src/main.tsx b/src/main.tsx
index bdfbb54..44a5816 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
 
 const element = document.getElementById('root')!;
 
 ReactDOM.createRoot(element).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/src/usePersistence.ts b/src/usePersistence.ts
index 2b324f5..40a97fd 100644
--- a/src/usePersistence.ts
+++ b/src/usePersistence.ts
@@ -5,6 +5,7 @@ export interface State {
   levels: string[];
   competences: string[];
   themes: Theme[];
+  notes: string;
 }
 
 export interface Theme {
@@ -17,43 +18,79 @@ export interface Experience {
   name: string;
   competences: number[];
   level: number;
+  marked: boolean;
 }
 
+export type Select = (theme: number, experience: number, level: number) => void;
+export type Mark = (theme: number, experience: number, marked: boolean) => void;
+
 export interface PersistenceState {
   state: State;
-  select: (theme: number, item: number, level: number) => void;
+  select: Select;
+  mark: Mark;
+  note: (content: string) => void;
 }
 
-export interface Action {
-  type: 'select';
-  theme: number;
-  experience: number;
-  level: number;
-}
+export type ExperienceAction =
+  | {
+      type: 'select';
+      theme: number;
+      experience: number;
+      level: number;
+    }
+  | {
+      type: 'mark';
+      theme: number;
+      experience: number;
+      marked: boolean;
+    };
+
+export type Action =
+  | ExperienceAction
+  | {
+      type: 'note';
+      content: string;
+    };
 
 const data = rawData as State;
 
+export const MAX_LEVEL = data.levels.length;
+
+function updateState(
+  state: State,
+  action: ExperienceAction,
+  object: Record<string, number | boolean>
+): State {
+  return {
+    ...state,
+    themes: state.themes.map(
+      (theme, themeIndex): Theme => ({
+        ...theme,
+        experiences: theme.experiences.map(
+          (experience, experienceIndex): Experience => {
+            if (
+              themeIndex === action.theme &&
+              experienceIndex === action.experience
+            ) {
+              return { ...experience, ...object };
+            }
+
+            return experience;
+          }
+        ),
+      })
+    ),
+  };
+}
+
 function reducer(state: State, action: Action): State {
   switch (action.type) {
     case 'select':
-      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,
-              })
-            ),
-          })
-        ),
-      };
+      return updateState(state, action, { level: action.level });
+    case 'mark':
+      return updateState(state, action, { marked: action.marked });
+    case 'note':
+      return { ...state, notes: action.content };
     default:
       throw new Error();
   }
@@ -61,10 +98,20 @@ function reducer(state: State, action: Action): State {
 
 function initialState(): State {
   const localState = window.localStorage.getItem('persistence');
-  const levels = localState ? JSON.parse(localState) : [];
+  const defaultState = { levels: [], marked: [], notes: '' };
+  let { levels, marked, notes } = localState
+    ? JSON.parse(localState)
+    : defaultState;
+
+  if (!levels || !marked) {
+    levels = [];
+    marked = [];
+    notes = '';
+  }
 
   return {
     ...data,
+    notes,
     themes: data.themes.map((theme, themeIndex) => ({
       ...theme,
       experiences: theme.experiences.map((experience, experienceIndex) => ({
@@ -72,6 +119,9 @@ function initialState(): State {
         level: levels[themeIndex]
           ? levels[themeIndex][experienceIndex] || 0
           : 0,
+        marked: marked[themeIndex]
+          ? marked[themeIndex][experienceIndex] || false
+          : false,
       })),
     })),
   };
@@ -84,14 +134,26 @@ export default function usePersistence(): PersistenceState {
   );
 
   useEffect(() => {
-    window.localStorage.setItem('persistence', JSON.stringify(
-      state.themes.map((theme) => theme.experiences.map((experience) => experience.level))
-    ));
+    window.localStorage.setItem(
+      'persistence',
+      JSON.stringify({
+        levels: state.themes.map((theme) =>
+          theme.experiences.map((experience) => experience.level)
+        ),
+        marked: state.themes.map((theme) =>
+          theme.experiences.map((experience) => experience.marked)
+        ),
+        notes: state.notes,
+      })
+    );
   }, [state]);
 
   return {
     state,
     select: (theme: number, experience: number, level: number) =>
       dispatch({ type: 'select', theme, experience, level }),
+    mark: (theme: number, experience: number, marked: boolean) =>
+      dispatch({ type: 'mark', theme, experience, marked }),
+    note: (content: string) => dispatch({ type: 'note', content }),
   };
 }