diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 77a28861..6fcdfc96 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -7,7 +7,7 @@ on:
   push:
     branches: [ "main" ]
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "beta" ]
   release:
     type: [published]
   workflow_dispatch:
diff --git a/README.md b/README.md
index 93434249..47f42528 100644
--- a/README.md
+++ b/README.md
@@ -20,36 +20,24 @@ Upload a valid gedcomx-file on the home page. On submit, the family view should
 
 ![grafik](https://user-images.githubusercontent.com/46622675/177526424-7507cbc5-e640-4657-bf1c-2a2d2a459685.png)
 
----
-For developers:
 
-# Getting Started with Create React App
+# 🚧 GedcomX Support
+The following features of GedcomX are not supported:
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+### Source Description
+Due to `gedcomx-js`, the following data can not be stored and therefore not displayed:
+- publisher
+- author
+- created
+- modified
+- published
 
-## Available Scripts
+### Group
+Not supported at all by `gedcomx-js`
 
-In the project directory, you can run:
+### Event
+Will come in a future release
 
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### Relationship
+Will come in a future release
+- facts
diff --git a/package.json b/package.json
index 57c80409..9592e0a4 100644
--- a/package.json
+++ b/package.json
@@ -26,29 +26,33 @@
     "@babel/plugin-transform-react-jsx": "^7.22.5",
     "@react-spring/web": "^9.7.2",
     "@testing-library/dom": "^9.3.1",
-    "@visx/axis": "^3.1.0",
+    "@visx/axis": "^3.2.0",
     "@visx/geo": "^3.0.0",
     "@visx/react-spring": "^3.1.0",
     "@visx/shape": "^3.0.0",
-    "@visx/stats": "^3.0.0",
+    "@visx/stats": "^3.2.0",
     "@visx/visx": "^3.1.2",
     "d3": "7.6.1",
     "dexie": "^3.2.3",
     "dexie-react-hooks": "^1.1.6",
     "gedcomx-js": "^2.8.0",
+    "leaflet": "^1.9.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-leaflet": "^4.2.1",
     "react-localization": "^1.0.19",
-    "react-router-dom": "^6.11.2",
+    "react-router-dom": "^6.14.1",
     "react-scripts": "5.0.1",
-    "typescript": "^4",
+    "sanitize-html": "^2.11.0",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5",
     "web-vitals": "^3.3.2",
     "webcola": "^3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "TZ=UTC react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -71,14 +75,17 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@faker-js/faker": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/d3": "^7.4.0",
     "@types/jest": "^29.5.1",
-    "@types/node": "^20.2.5",
+    "@types/leaflet": "^1.9.3",
+    "@types/node": "^20.3.3",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
+    "@types/sanitize-html": "^2.9.0",
     "fake-indexeddb": "^4.0.1"
   }
 }
diff --git a/public/index.html b/public/index.html
index a72e0324..839c62df 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,8 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#366120" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#D2E8D2" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#182118" />
     <meta name="description"
       content="A simple family tree visualizer that runs locally in your browser."
     />
@@ -16,6 +17,13 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link type="text/plain" rel="author" href="%PUBLIC_URL%/humans.txt" />
     <link rel="stylesheet" href="%PUBLIC_URL%/normalize.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin=""/>
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+            crossorigin=""></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/output.css b/public/output.css
new file mode 100644
index 00000000..dacaf01f
--- /dev/null
+++ b/public/output.css
@@ -0,0 +1,1201 @@
+/*
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  /* 3 */
+  tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  -webkit-font-feature-settings: normal;
+          font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::-webkit-backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.relative {
+  position: relative;
+}
+
+.bottom-8 {
+  bottom: 2rem;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.top-14 {
+  top: 3.5rem;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.col-start-3 {
+  grid-column-start: 3;
+}
+
+.row-start-1 {
+  grid-row-start: 1;
+}
+
+.row-start-2 {
+  grid-row-start: 2;
+}
+
+.row-start-3 {
+  grid-row-start: 3;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.box-border {
+  box-sizing: border-box;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.max-h-fit {
+  max-height: -webkit-fit-content;
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-fit {
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.transform {
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+          user-select: none;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-b-2xl {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-none {
+  border-style: none;
+}
+
+.border-green-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(21 128 61 / var(--tw-border-opacity));
+}
+
+.border-b-gray-400 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.bg-green-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-inherit {
+  background-color: inherit;
+}
+
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
+.fill-black {
+  fill: #000;
+}
+
+.fill-gray-200 {
+  fill: #e5e7eb;
+}
+
+.fill-none {
+  fill: none;
+}
+
+.fill-white {
+  fill: #fff;
+}
+
+.stroke-black {
+  stroke: #000;
+}
+
+.stroke-2 {
+  stroke-width: 2;
+}
+
+.p-0 {
+  padding: 0px;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pl-0 {
+  padding-left: 0px;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgb(64 64 64 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.placeholder-neutral-600::-webkit-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(82 82 82 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-neutral-600::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(82 82 82 / var(--tw-placeholder-opacity));
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+:root {
+  background: #D2E8D2;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  gap: 1rem;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  padding: .5rem 0;
+  font-family: sans-serif;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background: #D2E8D2;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    background: #182118;
+  }
+}
+
+.partnerNode text, .etc text {
+  text-anchor: middle;
+}
+
+text.marriageDate {
+  text-anchor: end;
+}
+
+.first\:mt-0:first-child {
+  margin-top: 0px;
+}
+
+.last\:mb-0:last-child {
+  margin-bottom: 0px;
+}
+
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:border-gray-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  }
+
+  .dark\:bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-neutral-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(82 82 82 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-neutral-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-neutral-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-opacity-10 {
+    --tw-bg-opacity: 0.1;
+  }
+
+  .dark\:bg-opacity-50 {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:fill-black {
+    fill: #000;
+  }
+
+  .dark\:fill-neutral-800 {
+    fill: #262626;
+  }
+
+  .dark\:fill-white {
+    fill: #fff;
+  }
+
+  .dark\:stroke-white {
+    stroke: #fff;
+  }
+
+  .dark\:text-neutral-400 {
+    --tw-text-opacity: 1;
+    color: rgb(163 163 163 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .dark\:placeholder-neutral-400::-webkit-input-placeholder {
+    --tw-placeholder-opacity: 1;
+    color: rgb(163 163 163 / var(--tw-placeholder-opacity));
+  }
+
+  .dark\:placeholder-neutral-400::placeholder {
+    --tw-placeholder-opacity: 1;
+    color: rgb(163 163 163 / var(--tw-placeholder-opacity));
+  }
+
+  .dark\:caret-white {
+    caret-color: #fff;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:inline {
+    display: inline;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .lg\:mr-0 {
+    margin-right: 0px;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+}
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b00a1ae9..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,193 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
-
-:root {
-  background: var(--background-lower);
-  color: var(--foreground);
-  font-family: "Nunito", sans-serif;
-}
-
-#root {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  display: grid;
-  gap: 1rem;
-  justify-content: space-between;
-  grid-template-columns: 1fr;
-  overflow: auto;
-
-  grid-template-areas:
-    "header"
-    "main"
-    "footer";
-  grid-template-rows: auto 2fr auto;
-}
-
-#root > * {
-  box-sizing: border-box;
-}
-
-main {
-  grid-area: main;
-}
-
-main > * {
-  margin: 1rem auto 0;
-  box-sizing: border-box;
-}
-
-main > :first-child {
-  margin-top: 0;
-}
-
-article {
-  border-radius: 1rem;
-  background: var(--background);
-}
-
-aside {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  display: flex;
-  gap: 1rem;
-  flex-flow: row;
-  max-width: 100vw;
-  flex-wrap: wrap;
-  grid-area: sidebar;
-  max-height: 30vh;
-  padding: 0 1rem;
-}
-
-aside > * {
-  flex: 1 1 0;
-}
-
-aside .title {
-  flex-basis: 100%;
-}
-
-aside .title :first-child {
-  margin-top: 0;
-}
-
-aside .title :last-child {
-  margin-bottom: 0;
-}
-
-aside h1, aside article h1 {
-  font-size: 1.5rem;
-}
-
-aside .title > h1, aside .title > h2 {
-  text-align: center;
-}
-
-aside .title h2 {
-  font-weight: normal;
-}
-
-@media (orientation: landscape) {
-  aside {
-    flex-flow: column;
-    padding-right: 0;
-    max-height: unset;
-  }
-
-  aside > * {
-    flex-grow: 0;
-  }
-
-  aside .title {
-    flex-basis: 0;
-  }
-}
-
-aside > article {
-  padding: 1rem;
-  box-sizing: border-box;
-  box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .33);
-  flex-basis: 200px;
-}
-
-footer {
-  color: var(--foreground-secondary);
-  text-align: left;
-  grid-area: footer;
-  padding: .5rem 1rem;
-  padding-top: 0;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-footer a {
-  color: var(--foreground-secondary);
-}
-
-footer * {
-  margin: 0 auto;
-}
-
-li:not(:last-child) {
-  margin-bottom: .5rem;
-}
-
-@media (orientation: portrait) {
-  @media (max-width: 749px) {
-    #title {
-      display: none;
-    }
-
-    footer :not(.important) {
-      display: none;
-    }
-  }
-
-  #root.sidebar-visible {
-    grid-template-areas:
-    "header"
-    "sidebar"
-    "main"
-    "footer";
-    grid-template-rows: auto auto 2fr auto;
-  }
-}
-
-@media (orientation: landscape) {
-  #root {
-    grid-template-rows: auto 1fr auto;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-    "header"
-    "main"
-    "footer";
-  }
-
-  #root.sidebar-visible {
-    grid-template-columns: 1fr 3fr;
-    grid-template-areas:
-      "header header"
-      "sidebar main"
-      "footer footer";
-  }
-
-  main {
-    margin-right: 1rem;
-  }
-}
-
-@media print {
-  #root.sidebar-visible {
-    gap: 0;
-  }
-
-  aside {
-    border: solid 1pt;
-  }
-
-  header, footer, #view-all {
-    height: 0;
-    width: 0;
-    visibility: hidden;
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index a417adac..0eb37e89 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,32 +1,236 @@
 import * as React from "react";
-import './App.css';
+import {createBrowserRouter, Outlet, RouterProvider, useLocation} from "react-router-dom";
 import {strings} from "./main";
-import View from "./components/View";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
-import {Home, Imprint} from "./components/Home";
+import {useContext, useEffect, useMemo, useRef, useState} from "react";
+import {db} from "./backend/db";
+import {SourceDescription, Document, Agent, Person} from "./backend/gedcomx-extensions";
+import {Home} from "./components/Home";
+import Persons from "./components/Persons";
 import Statistics from "./components/Statistics";
+import {SourceDescriptionOverview, SourceDescriptionView} from "./components/SourceDescriptions";
+import {DocumentOverview, DocumentView} from "./components/Documents";
+import {AgentOverview, AgentView} from "./components/Agents";
+import {PlaceDescription} from "gedcomx-js";
+import {PlaceOverview, PlaceView} from "./components/Places";
+import ErrorBoundary from "./components/ErrorBoundary";
+import {ReactLink, ReactNavLink, VanillaLink} from "./components/GeneralComponents";
+import {Imprint} from "./components/Imprint";
 
-function App() {
-  return <BrowserRouter basename={"family-tree"}>
-    <Routes>
-      <Route path="/" element={<Home/>}/>
-      <Route path="/view" element={<View/>}/>
-      <Route path="/imprint" element={<Imprint/>}/>
-      <Route path="/stats" element={<Statistics/>}/>
-    </Routes>
-    <footer>
-        <span>
-          {strings.formatString(strings.footer.sourceCode, <a
-            href={"https://github.com/l0drex/family-tree"}>Github</a>)}
+const router = createBrowserRouter([
+  {
+    path: "*", Component: Layout, children: [
+      {
+        path: "*", errorElement: <ErrorBoundary/>, children: [
+          {index: true, Component: Home},
+          {
+            path: "persons/:id?", Component: Persons, loader: ({params}) => {
+              if (!params.id) {
+                // find a person whose id does not start with "missing-id-" if possible
+                // persons with missing ids are not connected to any other persons, as they cannot be referenced in relationships
+                return db.persons.toArray().then(ps => ps.sort((a, b) => {
+                  // Check if either string starts with "missing-id-"
+                  const aStartsWithMissingId = a.id.startsWith("missing-id-");
+                  const bStartsWithMissingId = b.id.startsWith("missing-id-");
+
+                  // Sort the strings accordingly
+                  if (aStartsWithMissingId && !bStartsWithMissingId) {
+                    return 1; // a should come after b
+                  } else if (!aStartsWithMissingId && bStartsWithMissingId) {
+                    return -1; // a should come before b
+                  } else {
+                    // If both strings start with "missing-id-" or neither does, perform a regular string comparison
+                    return a.id.localeCompare(b.id);
+                  }
+                })[0]).then(p => p ? new Person(p) : Promise.reject(new Error(strings.errors.noData)));
+              }
+              return db.personWithId(params.id);
+            }
+          },
+          {path: "stats", Component: Statistics},
+          {
+            path: "sources", children: [
+              {
+                index: true,
+                Component: SourceDescriptionOverview,
+                loader: () => db.sourceDescriptions.toArray().then(s => s.length ? s.map(d => new SourceDescription(d)) : Promise.reject(new Error(strings.errors.noData)))
+              },
+              {
+                path: ":id",
+                Component: SourceDescriptionView,
+                loader: ({params}) => db.sourceDescriptionWithId(params.id)
+              }
+            ]
+          },
+          {
+            path: "documents", children: [
+              {
+                index: true,
+                Component: DocumentOverview,
+                loader: () => db.documents.toArray().then(ds => ds.length ? ds.map(d => new Document(d)) : Promise.reject(new Error(strings.errors.noData)))
+              },
+              {path: ":id", Component: DocumentView, loader: ({params}) => db.elementWithId(params.id, "document")}
+            ]
+          },
+          {
+            path: "agents", children: [
+              {
+                index: true,
+                Component: AgentOverview,
+                loader: () => db.agents.toArray().then(a => a.length ? a.map(d => new Agent(d)) : Promise.reject(new Error(strings.errors.noData)))
+              },
+              {path: ":id", Component: AgentView, loader: ({params}) => db.elementWithId(params.id, "agent")}
+            ]
+          },
+          {path: "imprint", Component: Imprint},
+          {
+            path: "places", children: [
+              {
+                index: true,
+                Component: PlaceOverview,
+                loader: () => db.places.toArray().then(p => p.length ? p.map(d => new PlaceDescription(d)) : Promise.reject(new Error(strings.errors.noData)))
+              },
+              {path: ":id", Component: PlaceView, loader: ({params}) => db.elementWithId(params.id, "place")}
+            ]
+          }
+        ]
+      }]
+  }], {basename: "/family-tree"});
+
+export default function App() {
+  return <RouterProvider router={router}/>;
+}
+
+interface ILayoutContext {
+  setRightTitle: (string) => void,
+  setHeaderChildren: (ReactNode) => void,
+  sidebarVisible: boolean,
+  isDark: boolean,
+  allowExternalContent: boolean,
+  toggleExternalContent: (boolean) => void,
+}
+
+export const LayoutContext = React.createContext<ILayoutContext>(undefined);
+
+function Layout() {
+  const [titleRight, setTitleRight] = useState<React.ReactNode>(undefined);
+  const [headerChildren, setChildren] = useState([]);
+  const [navBarExtended, toggleNavBar] = useState(false);
+  const [sidebarExtended, toggleSidebar] = useState(matchMedia("(min-width: 768px)").matches);
+  const [allowExternalContent, toggleExternalContent] = useState(false);
+  const dialog = useRef<HTMLDialogElement>();
+  const location = useLocation();
+  const darkQuery = matchMedia("(prefers-color-scheme: dark)");
+  const [isDark, toggleDark] = useState(darkQuery.matches);
+  darkQuery.addEventListener("change", e => toggleDark(e.matches));
+  const query = matchMedia("(max-width: 639px)");
+  const [isSmallScreen, setSmallScreen] = useState(query.matches);
+  query.addEventListener("change", e => setSmallScreen(e.matches));
+
+  const nav = <nav className="row-start-2 row-span-2 dark:text-white">
+    <ul className={`flex flex-col gap-2 ${isSmallScreen ? "" : "ml-2"} text-lg`}>
+      <li><ReactNavLink to="">{"🏠" + (navBarExtended ? ` ${strings.home.title}` : "")}</ReactNavLink></li>
+      <li><ReactNavLink to="persons">{"🌳" + (navBarExtended ? ` ${strings.gedcomX.person.persons}` : "")}</ReactNavLink>
+      </li>
+      <li><ReactNavLink to="stats">{"📊" + (navBarExtended ? ` ${strings.statistics.title}` : "")}</ReactNavLink></li>
+      <li><ReactNavLink
+        to="sources">{"📚" + (navBarExtended ? ` ${strings.gedcomX.sourceDescription.sourceDescriptions}` : "")}</ReactNavLink>
+      </li>
+      <li><ReactNavLink
+        to="documents">{"📄" + (navBarExtended ? ` ${strings.gedcomX.document.documents}` : "")}</ReactNavLink></li>
+      <li><ReactNavLink to="agents">{"👤" + (navBarExtended ? ` ${strings.gedcomX.agent.agents}` : "")}</ReactNavLink>
+      </li>
+      <li><ReactNavLink
+        to="places">{"🌎" + (navBarExtended ? ` ${strings.gedcomX.placeDescription.places}` : "")}</ReactNavLink></li>
+    </ul>
+  </nav>
+
+  const layoutContext = useMemo(() => {
+    return {
+      setRightTitle: setTitleRight,
+      setHeaderChildren: setChildren,
+      sidebarVisible: sidebarExtended,
+      isDark: isDark,
+      allowExternalContent: allowExternalContent,
+      toggleExternalContent: toggleExternalContent
+    }
+  }, [allowExternalContent, isDark, sidebarExtended])
+
+  useEffect(() => {
+    if (navBarExtended && !dialog.current?.open) dialog.current?.showModal();
+    else dialog.current?.close();
+  }, [navBarExtended, isSmallScreen]);
+
+  useEffect(() => toggleNavBar(false), [location]);
+
+  return <>
+    <div className="row-start-1 ml-4 font-bold text-xl h-full my-1 dark:text-white">
+      <button onClick={() => toggleNavBar(!navBarExtended)}>{navBarExtended ? "⬅️" : "➡️"}</button>
+    </div>
+    {isSmallScreen ? <dialog ref={dialog} className="rounded-2xl">{nav}</dialog> : nav}
+
+    <header className="row-start-1 text-xl flex flex-row items-center justify-center gap-4 dark:text-white w-full">
+      {headerChildren}
+    </header>
+
+    {titleRight && <div className="row-start-1 text-right lg:text-center font-bold text-xl my-1 mr-4 dark:text-white">
+      {sidebarExtended && <span className={`mr-4 hidden md:inline`}>{titleRight}</span>}
+      <span className={`lg:hidden`}>
+        <button onClick={() => toggleSidebar(!sidebarExtended)}>{sidebarExtended ? "➡️" : "⬅️"}</button>
+      </span>
+    </div>}
+
+    <LayoutContext.Provider value={layoutContext}>
+      <Outlet/>
+    </LayoutContext.Provider>
+
+    <footer className="row-start-4 col-span-3 flex justify-around text-neutral-700 dark:text-neutral-400">
+        <span className="hidden md:inline">
+          {strings.formatString(strings.footer.sourceCode, <VanillaLink
+            href="https://github.com/l0drex/family-tree">Github</VanillaLink>)}
         </span>
-      <a href="/family-tree/imprint" className="important">
+      <ReactLink to="imprint">
         {strings.footer.imprint}
-      </a>
-      <a href="https://github.com/l0drex/family-tree/issues/new">
-        {strings.footer.bugReport}
-      </a>
+      </ReactLink>
+      <span className="hidden md:inline">
+        <VanillaLink href="https://github.com/l0drex/family-tree/issues/new">
+          {strings.footer.bugReport}
+        </VanillaLink>
+      </span>
     </footer>
-  </BrowserRouter>
+  </>
 }
 
-export default App;
+export function Main(props) {
+  const layoutContext = React.useContext(LayoutContext);
+  const titleRight = props.titleRight ?? "";
+
+  useEffect(() => {
+    if (!props.skipCleanup) {
+      layoutContext.setRightTitle(titleRight);
+      layoutContext.setHeaderChildren(<></>);
+    }
+  }, [layoutContext, props.skipCleanup, titleRight]);
+
+  let className = `row-start-2 mx-4 ${layoutContext.sidebarVisible ? "sm:ml-0 md:mr-0" : "sm:ml-0 lg:mr-0"} dark:text-white overflow-y-auto`;
+  if (layoutContext.sidebarVisible)
+    className += " row-start-3 md:row-start-2 row-span-1 md:row-span-2 sm:col-start-2 col-span-3 sm:col-span-2 md:col-span-1";
+  else
+    className += " row-span-2 col-span-3 md:col-span-2 lg:col-span-1";
+
+  return <main
+    className={className}>
+    {props.children}
+  </main>
+}
+
+export function Sidebar(props) {
+  const layoutContext = useContext(LayoutContext);
+
+  if (layoutContext.sidebarVisible) {
+    return <aside
+      className={`row-start-2 md:row-span-2 mx-4 sm:ml-0 col-start-1 sm:col-start-2 md:col-start-3 col-span-3 sm:col-span-2 md:col-span-1 max-h-64 md:max-h-full md:max-w-xs overflow-y-auto overflow-x-scroll flex gap-4 flex-col dark:text-white`}>
+      {props.children}
+    </aside>
+  }
+  return <></>;
+}
diff --git a/src/backend/Date.test.ts b/src/backend/Date.test.ts
deleted file mode 100644
index b8ca6a8d..00000000
--- a/src/backend/Date.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import config from "../config";
-import {GDate} from "./gedcomx-extensions";
-
-test("toDateObject works", () => {
-  let gDate = new GDate();
-  let date = gDate.toDateObject();
-  expect(date).toBeUndefined();
-
-  gDate.setFormal("");
-  date = gDate.toDateObject();
-  expect(date).toBeUndefined();
-
-  gDate.setFormal("2000");
-  date = gDate.toDateObject();
-  expect(date).toBeUndefined();
-
-  gDate.setFormal("+2000");
-  date = gDate.toDateObject();
-  expect(date.getTime()).toBe(Date.UTC(2000, 0));
-
-  gDate.setFormal("+2022-01-05T22:05:31");
-  date = gDate.toDateObject();
-  expect(date.getTime())
-    .toBe(Date.UTC(2022, 0, 5, 22, 5, 31));
-
-  gDate.setFormal("+1970-01-01")
-  date = gDate.toDateObject();
-  expect(date.getTime())
-    .toBe(Date.UTC(1970,0,1))
-
-  gDate.setFormal("+1600-12-31T23:59:59");
-  date = gDate.toDateObject();
-  expect(date.getTime())
-    .toBe(Date.UTC(1600, 11, 31, 23, 59, 59));
-
-  gDate.setFormal("+0000");
-  date = gDate.toDateObject();
-  let dateExpected = new Date("0000");
-  expect(date.getTime())
-    .toBe(dateExpected.getTime());
-
-  gDate.setFormal("-0006");
-  date = gDate.toDateObject();
-  dateExpected = new Date("-6");
-  expect(date.getTime())
-    .toBe(dateExpected.getTime());
-})
-
-test("toString works", () => {
-  config.browserLang = "en";
-
-  let date = new GDate();
-  expect(date.toString()).toBe("")
-
-  date.setFormal("+2022")
-  expect(date.toString()).toBe("in 2022")
-
-  date.setFormal("+2022-01")
-  expect(date.toString()).toBe("in January 2022")
-
-  date.setFormal("+2022-01-25")
-  expect(date.toString()).toBe("on 01/25/2022")
-
-  date.setFormal("+2022-01-25T05")
-  expect(date.toString()).toBe("on 01/25/2022 at 05 AM")
-
-  date.setFormal("+2022-01-25T05:05")
-  expect(date.toString()).toBe("on 01/25/2022 at 05:05 AM")
-
-  date.setFormal("+2022-01-25T05:06:06")
-  expect(date.toString()).toBe("on 01/25/2022 at 05:06:06 AM")
-})
diff --git a/src/backend/Fact.test.ts b/src/backend/Fact.test.ts
deleted file mode 100644
index 56afe65b..00000000
--- a/src/backend/Fact.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import config from "../config";
-import {PersonFactTypes} from "./gedcomx-enums";
-import {Fact, GDate} from "./gedcomx-extensions";
-
-test("toString works", () => {
-  config.browserLang = "en";
-  let fact = new Fact().setType(PersonFactTypes.Birth);
-  expect(fact.toString()).toBe("Birth")
-
-  fact.setDate(new GDate().setFormal("+2022-01-25T06:55"))
-  expect(fact.toString()).toBe("Birth on 01/25/2022 at 06:55 AM")
-})
diff --git a/src/backend/Person.test.ts b/src/backend/Person.test.ts
deleted file mode 100644
index b37f8cca..00000000
--- a/src/backend/Person.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as GedcomX from "gedcomx-js";
-import {Fact, GDate, Person, setReferenceAge} from "./gedcomx-extensions";
-import {PersonFactTypes} from "./gedcomx-enums";
-import {strings} from "../main";
-
-test("Age calculated correct", () => {
-  setReferenceAge(0, 0);
-  let person = new Person();
-  person.addFact(new Fact()
-    .setType(PersonFactTypes.GenerationNumber)
-    .setValue(0));
-  expect(person.getAgeAt(new Date())).toBe(0);
-
-  setReferenceAge(20, 0, true);
-  expect(person.getAgeAt(new Date())).toBe(20);
-
-  setReferenceAge(0, 10, true);
-  expect(person.getAgeAt(new Date())).toBe(250);
-
-  setReferenceAge(20, 10, true);
-  expect(person.getAgeAt(new Date())).toBe(270);
-})
-
-test("living calculated correctly", () => {
-  setReferenceAge(20, 10);
-  let person = new Person();
-  expect(person.isLiving).toBeTruthy();
-
-  person
-    .addFact(new Fact()
-      .setType(PersonFactTypes.Death)
-      .setDate(new GDate()
-        .setFormal("+2000")));
-  expect(person.getLiving()).toBeFalsy();
-})
-
-test("get full name returns the correct name", () => {
-  let person = new Person();
-  expect(person.fullName).toBe("?");
-
-  person = new Person();
-  person.addName(new GedcomX.Name()
-    .addNameForm(new GedcomX.NameForm().setFullText("Maximilian Mustermann")))
-  expect(person.fullName).toBe("Maximilian Mustermann");
-
-
-  strings.setLanguage("en");
-
-  person.addName(new GedcomX.Name()
-    .setLang(strings.getLanguage())
-    .addNameForm(new GedcomX.NameForm().setFullText("John Doe")));
-  expect(person.fullName).toBe("John Doe");
-
-  let preferredName = new GedcomX.Name()
-    .addNameForm(new GedcomX.NameForm().setFullText("Max Mustermann"))
-    .setPreferred(true);
-  person.addName(preferredName);
-  expect(person.fullName).toBe("Max Mustermann");
-
-  preferredName.addNameForm(new GedcomX.NameForm()
-    .setLang("en")
-    .setFullText("John Smith"))
-  person.setNames([preferredName])
-  expect(person.fullName).toBe("John Smith");
-})
diff --git a/src/backend/StatisticsProvider.ts b/src/backend/StatisticsProvider.ts
index 9db732fe..2557d883 100644
--- a/src/backend/StatisticsProvider.ts
+++ b/src/backend/StatisticsProvider.ts
@@ -49,7 +49,7 @@ export async function getGenderPerGeneration() {
         data[generation] = {};
       }
 
-      let gender = p.getGender().getType() ?? GenderTypes.Unknown;
+      let gender = p.getGender() ? p.getGender().getType() : GenderTypes.Unknown;
       if (gender in data[generation]) {
         data[generation][gender]++;
       } else {
@@ -106,7 +106,7 @@ export async function getReligionPerYear() {
           religion = p.getFactsByType(PersonFactTypes.Religion)[0].getValue();
         } catch (e) {
           if (e instanceof TypeError) {
-            religion = "";
+            return;
           } else {
             throw e;
           }
@@ -195,7 +195,7 @@ export async function getNames(type: "First" | "Last") {
 }
 
 export async function getBirthDeathMonthOverYears(type: "Birth" | "Death") {
-  let data: number[] = [];
+  let data: number[] = Array.from({length: 12}, () => 0);
 
   await db.persons.toArray().then(persons => persons
     .map(p => new Person(p))
@@ -211,8 +211,7 @@ export async function getBirthDeathMonthOverYears(type: "Birth" | "Death") {
         else throw e;
       }
       let month = birth.getMonth();
-      if (month in data) data[month]++;
-      else data[month] = 1;
+      data[month]++;
     }));
 
   return data;
diff --git a/src/backend/TestData.ts b/src/backend/TestData.ts
new file mode 100644
index 00000000..fda3cc26
--- /dev/null
+++ b/src/backend/TestData.ts
@@ -0,0 +1,220 @@
+import * as GedcomX from "gedcomx-js";
+import {
+  Address,
+  Agent,
+  Attribution, Coverage,
+  Fact,
+  Gender,
+  Name,
+  NameForm,
+  Note, OnlineAccount,
+  Person,
+  PlaceReference,
+  Relationship,
+  ResourceReference,
+  Root, SourceCitation, SourceDescription, SourceReference, TextValue,
+  Document, Identifiers, PlaceDescription, Conclusion, Subject, EvidenceReference
+} from "gedcomx-js";
+import {faker} from "@faker-js/faker";
+import {
+  Confidence, DocumentTypes,
+  GenderTypes, IdentifierTypes, KnownResourceTypes,
+  NameTypes,
+  PersonFactTypes,
+  RelationshipFactTypes,
+  RelationshipTypes
+} from "./gedcomx-enums";
+
+let testData: Root;
+
+export default function getTestData(): object {
+  if (!testData) testData = extensiveData();
+
+  return testData.toJSON();
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function extensiveData() {
+  const lastName = faker.person.lastName();
+  const marriageDate = new GedcomX.Date().setFormal(faker.date.past({years: 10}).toISOString());
+  const womanFirstName = faker.person.firstName("female");
+
+  return new Root()
+    .addPerson(new Person(getSubject("p1"))
+      .setPrivate(true)
+      .addName(new Name().addNameForm(new NameForm().setFullText(faker.person.fullName({
+        lastName: lastName,
+        sex: "male"
+      }))))
+      .setGender(new Gender().setType(GenderTypes.Male))
+      .addFact(new Fact().setType(PersonFactTypes.Birth)
+        .setDate(new GedcomX.Date().setFormal(faker.date.birthdate({min: 30, max: 40, mode: "age"}).toISOString())))
+      .addFact(new Fact().setType(PersonFactTypes.MaritalStatus)
+        .setValue("Married")
+        .setPlace(new PlaceReference().setOriginal(faker.location.city()))
+        .setDate(marriageDate))
+      .addFact(new Fact().setType(PersonFactTypes.Occupation)
+        .setValue(faker.person.jobTitle()))
+      .addFact(new Fact()
+        .setType(PersonFactTypes.Death)
+        .setDate(new GedcomX.Date()
+          .setFormal(faker.date.birthdate({min: 3, max: 10, mode: "age"}).toISOString())))
+      .addFact(new Fact().setType(PersonFactTypes.GenerationNumber).setValue(2)))
+    .addPerson(new Person(getSubject("p2"))
+      .addName(new Name()
+        .addNameForm(new NameForm()
+          .setFullText(faker.person.fullName({firstName: womanFirstName, lastName: lastName, sex: "female"})))
+        .setType(NameTypes.MarriedName))
+      .addName(new Name()
+        .addNameForm(new NameForm()
+          .setFullText(faker.person.fullName({firstName: womanFirstName, sex: "female"})))
+        .setType(NameTypes.BirthName))
+      .setGender(new Gender().setType(GenderTypes.Female))
+      .addFact(new Fact().setType(PersonFactTypes.Birth)
+        .setDate(new GedcomX.Date().setFormal(faker.date.birthdate({min: 30, max: 40, mode: "age"}).toISOString())))
+      .addFact(new Fact().setType(PersonFactTypes.MaritalStatus)
+        .setValue("Married")
+        .setPlace(new PlaceReference().setOriginal(faker.location.city()))
+        .setDate(marriageDate))
+      .addFact(new Fact().setType(PersonFactTypes.Occupation)
+        .setValue(faker.person.jobTitle()))
+      .addFact(new Fact().setType(PersonFactTypes.GenerationNumber).setValue(2)))
+    .addRelationship(new Relationship()
+      .setType(RelationshipTypes.Couple)
+      .setPerson1(new ResourceReference().setResource("#p1"))
+      .setPerson2(new ResourceReference().setResource("#p2"))
+      .addFact(new Fact().setType(RelationshipFactTypes.Marriage).setDate(marriageDate)))
+    .addPerson(new Person()
+      .addFact(new Fact().setType(PersonFactTypes.GenerationNumber).setValue(1))
+      .setId("p3"))
+    .addRelationship(new Relationship()
+      .setType(RelationshipTypes.ParentChild)
+      .setPerson1(new ResourceReference().setResource("#p1"))
+      .setPerson2(new ResourceReference().setResource("#p3")))
+    .addRelationship(new Relationship()
+      .setType(RelationshipTypes.ParentChild)
+      .setPerson1(new ResourceReference().setResource("#p2"))
+      .setPerson2(new ResourceReference().setResource("#p3")))
+    .addPerson(new Person()
+      .addFact(new Fact().setType(PersonFactTypes.GenerationNumber).setValue(3))
+      .setId("p4"))
+    .addPerson(new Person()
+      .addFact(new Fact().setType(PersonFactTypes.GenerationNumber).setValue(3))
+      .setId("p5"))
+    .addRelationship(new Relationship()
+      .setType(RelationshipTypes.Couple)
+      .setPerson1(new ResourceReference().setResource("#p4"))
+      .setPerson2(new ResourceReference().setResource("#p5")))
+    .addRelationship(new Relationship()
+      .setType(RelationshipTypes.ParentChild)
+      .setPerson1(new ResourceReference().setResource("#p4"))
+      .setPerson2(new ResourceReference().setResource("#p1")))
+    .addRelationship(new Relationship()
+      .setType(RelationshipTypes.ParentChild)
+      .setPerson1(new ResourceReference().setResource("#p5"))
+      .setPerson2(new ResourceReference().setResource("#p1")))
+    .addPerson(new Person())
+    .addSourceDescription(new SourceDescription()
+      .setResourceType(KnownResourceTypes.DigitalArtifact)
+      .addCitation(new SourceCitation().setValue(faker.lorem.sentence()))
+      .setMediaType("image/jpeg")
+      .setAbout(faker.image.urlLoremFlickr())
+      .setMediator(new ResourceReference().setResource("#a1"))
+      // publisher, authors
+      .addSource(new SourceReference().setDescription("#s1"))
+      .setAnalysis(new ResourceReference().setResource("#d1"))
+      .setComponentOf(new SourceReference().setDescription("#s1"))
+      .addTitle(new TextValue().setValue(faker.lorem.words(3)))
+      .addNote(new Note().setText(faker.lorem.paragraphs(1)))
+      .setAttribution(getAttribution())
+      .addRight(new ResourceReference().setResource(faker.internet.url()))
+      .addCoverage(new Coverage().setSpatial(new PlaceReference().setOriginal(faker.location.city()).setDescription("#pd1")))
+      .addDescription(new TextValue().setValue(faker.lorem.text()))
+      .setIdentifiers(getIdentifiers("sd1"))
+      .setCreated(faker.date.recent().valueOf())
+      .setModified(faker.date.recent().valueOf())
+      // published
+      .setRepository(new ResourceReference().setResource(faker.internet.url()))
+      .setId("s1"))
+    .addSourceDescription(new SourceDescription()
+      .addCitation(new SourceCitation().setValue(faker.lorem.sentence()))
+      .setMediaType("image/jpeg")
+      .setAbout(faker.image.urlPicsumPhotos())
+      .setId("s2"))
+    .addSourceDescription(new SourceDescription()
+      .addCitation(new SourceCitation().setValue(faker.lorem.sentence())))
+    .addAgent(new Agent()
+      .addName(new TextValue().setValue(faker.person.fullName()))
+      .addName(new TextValue().setValue(faker.person.fullName()))
+      .addEmail(new ResourceReference().setResource(faker.internet.email()))
+      .setHomepage(new ResourceReference().setResource(faker.internet.url()))
+      .addAccount(new OnlineAccount()
+        .setServiceHomepage(new ResourceReference().setResource(faker.internet.url()))
+        .setAccountName(faker.internet.userName()))
+      .addPhone(new ResourceReference().setResource(faker.phone.number()))
+      .addAddress(new Address().setValue(faker.location.streetAddress(true)))
+      .setIdentifiers(getIdentifiers("a1"))
+      .setPerson(new ResourceReference().setResource("#p1"))
+      .setId("a1"))
+    .addAgent(new Agent())
+    .addDocument(new Document(getConclusion("d1"))
+      .setType(DocumentTypes.Analysis)
+      .setExtracted(faker.datatype.boolean())
+      .setText(faker.lorem.paragraphs(3)))
+    .addDocument(new Document()
+      .setText(faker.lorem.paragraphs(3)))
+    .addPlace(new PlaceDescription(getSubject("pd1"))
+      .setType("City")
+      .setPlace(new ResourceReference().setResource(faker.internet.url()))
+      .addName(new TextValue().setValue(faker.location.city()))
+      .addName(new TextValue().setValue(faker.location.city()))
+      .setLatitude(faker.location.latitude())
+      .setLongitude(faker.location.longitude())
+      .setJurisdiction(new ResourceReference().setResource("#pd2"))
+      .setTemporalDescription(new GedcomX.Date().setFormal(faker.date.past().toISOString()))
+      .setSpatialDescription(new ResourceReference().setResource(faker.internet.url())))
+    .addPlace(new PlaceDescription()
+      .addName(new TextValue().setValue(faker.location.city())))
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function minimalData() {
+  return new Root();
+}
+
+function getIdentifiers(id) {
+  return new Identifiers()
+    .addValue(`#${id}`, IdentifierTypes.Primary)
+    .addValue(faker.internet.url(), IdentifierTypes.Authority)
+    .addValue(faker.internet.url(), IdentifierTypes.Deprecated);
+}
+
+function getSubject(id: string) {
+  return new Subject(getConclusion(id))
+    .setExtracted(faker.datatype.boolean())
+    .addEvidence(new EvidenceReference().setResource("#s1"))
+    .addMedia(new SourceReference().setDescription("#s1"))
+    .addMedia(new SourceReference().setDescription("#s2"))
+    .setIdentifiers(getIdentifiers(id))
+}
+
+function getAttribution() {
+  return new Attribution()
+    .setCreator(new ResourceReference().setResource("#a1"))
+    .setCreated(faker.date.recent().valueOf())
+    .setContributor(new ResourceReference().setResource("#a1"))
+    .setModified(faker.date.recent().valueOf())
+    .setChangeMessage(faker.lorem.sentence())
+}
+
+function getConclusion(id: string) {
+  const confidence = faker.helpers.arrayElement([Confidence.Low, Confidence.Medium, Confidence.High]);
+
+  return new Conclusion()
+    .addSource(new SourceReference().setDescription("#s1"))
+    .setAnalysis(new ResourceReference().setResource("#d1"))
+    .addNote(new Note().setText(faker.lorem.paragraphs(1)))
+    .setConfidence(confidence)
+    .setAttribution(getAttribution())
+    .setId(id)
+}
diff --git a/src/backend/ViewGraph.ts b/src/backend/ViewGraph.ts
index 21f24d50..740bb11f 100644
--- a/src/backend/ViewGraph.ts
+++ b/src/backend/ViewGraph.ts
@@ -3,7 +3,7 @@ import {RelationshipFactTypes} from "./gedcomx-enums";
 import * as GedcomX from "gedcomx-js";
 import config from "../config";
 import {db} from "./db";
-import {FamilyView, Person} from "./gedcomx-extensions";
+import {FamilyView, GDate, Person} from "./gedcomx-extensions";
 import {unique} from "../main";
 
 export enum ViewMode {
@@ -17,7 +17,8 @@ export enum ViewMode {
 export enum ColorMode {
   GENDER = "gender",
   AGE = "age",
-  NAME = "name"
+  NAME = "name",
+  CONFIDENCE = "confidence"
 }
 
 type eventTypes = "remove" | "add" | "progress";
@@ -84,7 +85,7 @@ export class ViewGraph implements EventTarget {
     let families: FamilyView[] = await this.getFamilyViews(viewMode, startPerson);
 
     let hideAll = false;
-    if (families.length <= 0) {
+    if (families.length === 0) {
       console.error("No families found!");
       // adding at least the start person with etc-nodes
       families = await this.getFamilyViews(ViewMode.DEFAULT, startPerson);
@@ -97,13 +98,16 @@ export class ViewGraph implements EventTarget {
       families.splice(config.maxElements - 1, families.length - (config.maxElements - 1));
     }
 
-    //await Promise.all(families.map(f => this.showFamily(f)));
     for (const f of families) {
       if (f === undefined) throw new Error("family is undefined");
       await this.showFamily(f);
       if (hideAll) await this.hideFamily(f);
       this.progress += .5/families.length;
     }
+    if (this.nodes.length === 0) {
+      // adding at least the start person
+      await this.showNode(await this.getGraphPerson(startPerson));
+    }
     this.progress = 1;
 
     console.groupEnd();
@@ -350,13 +354,12 @@ export class ViewGraph implements EventTarget {
     await this.getMarriageDate(family)
       .then(date => {
         (graphFamily as GraphFamily).marriage = date;
-      }).catch(() => {
-      });
+      }).catch(() => {});
 
     return graphFamily as GraphFamily;
   }
 
-  private async getMarriageDate(family: GedcomX.FamilyView): Promise<GedcomX.Date> {
+  private async getMarriageDate(family: GedcomX.FamilyView): Promise<GDate> {
     // find the correct couple relationship
     let couples1 = await db.getCoupleRelationsOf(family.getParent1());
     let couples2 = await db.getCoupleRelationsOf(family.getParent2());
@@ -366,7 +369,7 @@ export class ViewGraph implements EventTarget {
         c.person2.resource === c2.person2.resource)
     );
 
-    let facts = couple.getFacts();
+    let facts = couple.facts;
     if (facts.length <= 0) {
       return Promise.reject("No facts found.");
     }
@@ -376,7 +379,10 @@ export class ViewGraph implements EventTarget {
       return Promise.reject("No marriage fact found.");
     }
 
-    let date = marriageFact.date;
+    // somehow constructor skips constructing if directly called with data
+    let date = new GDate();
+    date.setFormal(marriageFact.date.formal)
+      .setOriginal(marriageFact.date.original);
     if (!date) return Promise.reject("No marriage date defined.")
     return date;
   }
diff --git a/src/backend/db.test.ts b/src/backend/db.test.ts
index 51cd018a..ea3096e7 100644
--- a/src/backend/db.test.ts
+++ b/src/backend/db.test.ts
@@ -20,8 +20,8 @@ test("finds person", async () => {
   await expect(db.personWithId("1")).resolves.toBeInstanceOf(GedcomX.Person);
   await expect(db.personWithId("13")).resolves.toBeInstanceOf(GedcomX.Person);
 
-  await expect(db.personWithId(undefined)).rejects.toBe(undefined);
-  await expect(db.personWithId("")).rejects.toBe("");
+  await expect(db.personWithId(undefined)).rejects.toThrow("Could not parse resource!");
+  await expect(db.personWithId("")).rejects.toThrow("Could not parse resource!");
 })
 
 test("finds children", async () => {
@@ -135,3 +135,7 @@ test("finds descendants", async () => {
   descendants = await db.getDescendants("7");
   expect(descendants).toHaveLength(1);
 })
+
+it("finds person with name", async () => {
+  await expect(db.personWithName("Husband").then(p => p.getId())).resolves.toBe("1");
+})
diff --git a/src/backend/db.ts b/src/backend/db.ts
index 8896811f..77875a32 100644
--- a/src/backend/db.ts
+++ b/src/backend/db.ts
@@ -4,10 +4,21 @@ import {
   IGroup
 } from "./gedcomx-types";
 import * as GedcomX from "gedcomx-js";
-import {Person, Relationship, setReferenceAge} from "./gedcomx-extensions";
+import {
+  Agent,
+  Document,
+  Person,
+  PlaceDescription,
+  Relationship,
+  setReferenceAge,
+  SourceDescription
+} from "./gedcomx-extensions";
 import {PersonFactTypes, RelationshipTypes} from "./gedcomx-enums";
 import {ResourceReference} from "gedcomx-js";
 
+export type RootType = "person" | "relationship" | "sourceDescription" | "agent" | "event" | "document" | "place" | "group";
+type RootClass = GedcomX.Person | GedcomX.Relationship | GedcomX.SourceDescription | GedcomX.Agent | GedcomX.Event | GedcomX.Document | GedcomX.PlaceDescription | IGroup;
+
 export class FamilyDB extends Dexie {
   persons!: Table<GedcomX.Person>
   relationships!: Table<GedcomX.Relationship>
@@ -21,20 +32,22 @@ export class FamilyDB extends Dexie {
   constructor() {
     super('familyData');
     this.version(1).stores({
-      persons: '++, &id, lang',
-      relationships: '++, &id, lang, type, person1.resource, person2.resource, [type+person1.resource], [type+person2.resource]',
-      sourceDescriptions: '++, &id, mediaType',
-      agents: '++, &id',
-      events: '++, &id, lang, date',
-      documents: '++, &id, lang',
-      places: '++, &id, lang',
-      groups: '++, &id, lang'
+      persons: '&id, lang',
+      relationships: '&id, lang, type, person1.resource, person2.resource, [type+person1.resource], [type+person2.resource]',
+      sourceDescriptions: '&id, mediaType',
+      agents: '&id',
+      events: '&id, lang, date',
+      documents: '&id, lang',
+      places: '&id, lang',
+      groups: '&id, lang'
     });
   }
 
   async load(data: IGedcomX) {
-    let root = new GedcomX.Root(data);
-    await this.clear();
+    let clear = this.clear();
+    let root = this.sanitizeData(data);
+    await clear;
+
     let promises: PromiseExtended[] = [];
 
     if (data.persons) promises.push(this.persons.bulkAdd(root.persons));
@@ -46,27 +59,41 @@ export class FamilyDB extends Dexie {
     if (data.places) promises.push(this.places.bulkAdd(root.places));
     if (data.groups) promises.push(this.groups.bulkAdd(data.groups));
 
-    console.log(`Found ${data.persons.length} people`);
-    console.log(`Found ${data.relationships.length} relationships`);
+    console.log(`Found ${data.persons?.length ?? 0} people`);
+    console.log(`Found ${data.relationships?.length ?? 0} relationships`);
 
     return Promise.all(promises)
       // make sure database is clean
       .catch(e => this.clear().then(() => Promise.reject(e)));
   }
 
-  private async clear() {
-    let promises: PromiseExtended[] = [
-      this.persons.toCollection().delete(),
-      this.relationships.toCollection().delete(),
-      this.sourceDescriptions.toCollection().delete(),
-      this.agents.toCollection().delete(),
-      this.events.toCollection().delete(),
-      this.documents.toCollection().delete(),
-      this.places.toCollection().delete(),
-      this.groups.toCollection().delete()
-    ];
-
-    return Promise.all(promises);
+  private sanitizeData(data: IGedcomX) {
+    let root = new GedcomX.Root(data);
+
+    // generate missing ids
+    function generateIdIfMissing(data: RootClass[]) {
+      if (!data) return;
+
+      let addedIds = 0;
+      data.forEach(d => {
+        if (!d.id) d.id = "missing-id-" + addedIds++;
+      });
+      console.debug(`Added ${addedIds} missing ids.`);
+    }
+    generateIdIfMissing(root.persons);
+    generateIdIfMissing(root.relationships);
+    generateIdIfMissing(root.sourceDescriptions);
+    generateIdIfMissing(root.agents);
+    generateIdIfMissing(root.events);
+    generateIdIfMissing(root.documents);
+    generateIdIfMissing(root.places);
+    generateIdIfMissing(data.groups);
+
+    return root;
+  }
+
+  async clear() {
+    return Promise.all(this.tables.map(t => t.clear()));
   }
 
   get couples() {
@@ -77,37 +104,61 @@ export class FamilyDB extends Dexie {
     return this.relationships.where("type").equals(RelationshipTypes.ParentChild);
   }
 
-  async personWithId(id: string | ResourceReference) {
+  async elementWithId(id: string | ResourceReference, type: RootType) {
+    // todo find a way to use generics here
+
     try {
       id = toResource(id).resource.substring(1);
     } catch (e) {
-      return Promise.reject(id);
+      return Promise.reject(new Error("Could not parse resource!"));
     }
 
-    return this.persons.where("id").equals(id).first().then(p => new Person(p));
+    switch (type) {
+      case "person":
+        return this.persons.get(id)
+          .then(p => p ? new Person(p) : Promise.reject(new Error(`Person with id ${id} not found!`)));
+      case "relationship":
+        return this.relationships.get(id)
+          .then(r => r ? new Relationship(r) : Promise.reject(new Error(`Relationship with id ${id} not found!`)));
+      case "sourceDescription":
+        return this.sourceDescriptions.get(id)
+          .then(sd => sd ? new SourceDescription(sd) : Promise.reject(new Error(`SourceDescription with id ${id} not found!`)));
+      case "agent":
+        return this.agents.get(id)
+          .then(a => a ? new Agent(a) : Promise.reject(new Error(`Agent with id ${id} not found!`)));
+      case "event":
+        return this.events.get(id)
+          .then(e => e ? new GedcomX.Event(e) : Promise.reject(new Error(`Event with id ${id} not found!`)));
+      case "document":
+        return this.documents.get(id)
+          .then(d => d ? new Document(d) : Promise.reject(new Error(`Document with id ${id} not found!`)));
+      case "place":
+        return this.places.get(id)
+          .then(p => p ? new PlaceDescription(p) : Promise.reject(new Error(`Place with id ${id} not found!`)));
+      case "group":
+        return this.groups.get(id)
+          .then(g => g ? g : Promise.reject(new Error(`Group with id ${id} not found!`)));
+      default:
+        return Promise.reject(new Error(`Unknown type ${type}`));
+    }
+  }
+
+  async personWithId(id: string | ResourceReference): Promise<Person> {
+    return this.elementWithId(id, "person").then(p => p as Person);
   }
 
   async personWithName(name: string) {
     return this.persons.toArray()
       .then(persons =>
-        persons.map(p => new Person(p.toJSON())).find(p => p.fullName === name))
+        persons.map(p => new Person(p)).find(p => p.fullName === name))
   }
 
   async sourceDescriptionWithId(id: string | ResourceReference) {
-    try {
-      id = toResource(id).resource.substring(1);
-    } catch (e) {
-      return Promise.reject(id);
-    }
-
-    return this.sourceDescriptions.where("id").equals(id).first()
-      .then(sd => new GedcomX.SourceDescription(sd));
+    return this.elementWithId(id, "sourceDescription").then(sd => sd as SourceDescription);
   }
 
   async agentWithId(id: string | ResourceReference) {
-    id = toResource(id).resource.substring(1);
-
-    return this.agents.where({"id": id}).first();
+    return this.elementWithId(id, "agent").then(a => a as Agent);
   }
 
   async getCoupleRelationsOf(person: ResourceReference | string): Promise<GedcomX.Relationship[]> {
@@ -115,7 +166,7 @@ export class FamilyDB extends Dexie {
 
     return this.couples.toArray()
       .then(rs =>
-        rs.filter((r: Relationship) =>
+        rs.map(r => new Relationship(r)).filter(r =>
           r.members.map(m => m.resource.substring(1))
             .includes(id)));
   }
@@ -199,7 +250,7 @@ export class FamilyDB extends Dexie {
   }
 
   async getFamiliesAsParent(person: Person): Promise<GedcomX.FamilyView[]> {
-    if (person.display && person.display.familiesAsParent.length > 0) {
+    if (person.display && person.display.familiesAsParent && person.display.familiesAsParent.length > 0) {
       return person.display.familiesAsParent;
     }
 
@@ -226,7 +277,7 @@ export class FamilyDB extends Dexie {
   }
 
   async getFamiliesAsChild(person: GedcomX.Person): Promise<GedcomX.FamilyView[]> {
-    if (person.display && person.display.familiesAsChild.length > 0) {
+    if (person.display && person.display.familiesAsChild && person.display.familiesAsChild.length > 0) {
       return person.display.familiesAsChild;
     }
 
diff --git a/src/backend/extensions.test.ts b/src/backend/extensions.test.ts
index d163b6fb..c3090fa4 100644
--- a/src/backend/extensions.test.ts
+++ b/src/backend/extensions.test.ts
@@ -1,7 +1,9 @@
 import {GraphFamily} from "./graph";
 import * as GedcomX from "gedcomx-js";
-import {FamilyView} from "./gedcomx-extensions";
+import {Fact, FamilyView, GDate, Person, setReferenceAge} from "./gedcomx-extensions";
 import {ResourceReference} from "gedcomx-js";
+import {PersonFactTypes} from "./gedcomx-enums";
+import {strings} from "../main";
 
 test("Graph Family", () => {
   let graphFamily = new GraphFamily();
@@ -47,3 +49,152 @@ test("Family View", () => {
 
   expect(fv1.equals(fv2)).toBeTruthy();
 })
+
+test("Age calculated correct", () => {
+  setReferenceAge(0, 0);
+  let person = new Person();
+  person.addFact(new Fact()
+    .setType(PersonFactTypes.GenerationNumber)
+    .setValue(0));
+  expect(person.getAgeAt(new Date())).toBe(0);
+
+  setReferenceAge(20, 0, true);
+  expect(person.getAgeAt(new Date())).toBe(20);
+
+  setReferenceAge(0, 10, true);
+  expect(person.getAgeAt(new Date())).toBe(250);
+
+  setReferenceAge(20, 10, true);
+  expect(person.getAgeAt(new Date())).toBe(270);
+})
+
+test("living calculated correctly", () => {
+  setReferenceAge(20, 10);
+  let person = new Person();
+  expect(person.isLiving).toBeTruthy();
+
+  person
+    .addFact(new Fact()
+      .setType(PersonFactTypes.Death)
+      .setDate(new GDate()
+        .setFormal("+2000")));
+  expect(person.getLiving()).toBeFalsy();
+})
+
+test("get full name returns the correct name", () => {
+  let person = new Person();
+  expect(person.fullName).toBe("?");
+
+  person = new Person();
+  person.addName(new GedcomX.Name()
+    .addNameForm(new GedcomX.NameForm().setFullText("Maximilian Mustermann")))
+  expect(person.fullName).toBe("Maximilian Mustermann");
+
+  strings.setLanguage("en");
+
+  person.addName(new GedcomX.Name()
+    .addNameForm(new GedcomX.NameForm().setFullText("John Doe"))
+    .setLang(strings.getLanguage()));
+  expect(person.fullName).toBe("John Doe");
+
+  let preferredName = new GedcomX.Name()
+    .addNameForm(new GedcomX.NameForm().setFullText("Max Mustermann"))
+    .setPreferred(true);
+  person.addName(preferredName);
+  expect(person.fullName).toBe("Max Mustermann");
+
+  preferredName.addNameForm(new GedcomX.NameForm()
+    .setLang("en")
+    .setFullText("John Smith"))
+  person.setNames([preferredName])
+  expect(person.fullName).toBe("John Smith");
+})
+
+test("toString works", () => {
+  strings.setLanguage("en");
+  let fact = new Fact().setType(PersonFactTypes.Birth);
+  expect(fact.toString()).toBe("Birth")
+
+  fact.setDate(new GDate().setFormal("+2022-01-25T06:55"))
+  expect(fact.toString()).toBe("Birth on 01/25/2022 at 06:55 AM")
+})
+
+test("toDateObject works", () => {
+  let gDate = new GDate();
+  let date = gDate.toDateObject();
+  expect(date).toBeUndefined();
+
+  gDate.setFormal("");
+  date = gDate.toDateObject();
+  expect(date).toBeUndefined();
+
+  gDate.setFormal("2000");
+  date = gDate.toDateObject();
+  expect(date.getTime()).toBe(Date.UTC(2000, 0));
+
+  gDate.setFormal("+2000");
+  date = gDate.toDateObject();
+  expect(date.getTime()).toBe(Date.UTC(2000, 0));
+
+  gDate.setFormal("+2022-01-05T22:05:31");
+  date = gDate.toDateObject();
+  expect(date.getTime())
+    .toBe(Date.UTC(2022, 0, 5, 22, 5, 31));
+
+  gDate.setFormal("+1970-01-01")
+  date = gDate.toDateObject();
+  expect(date.getTime())
+    .toBe(Date.UTC(1970,0,1))
+
+  gDate.setFormal("+1600-12-31T23:59:59");
+  date = gDate.toDateObject();
+  expect(date.getTime())
+    .toBe(Date.UTC(1600, 11, 31, 23, 59, 59));
+
+  gDate.setFormal("+0000");
+  date = gDate.toDateObject();
+  let dateExpected = new Date("0000");
+  expect(date.getTime())
+    .toBe(dateExpected.getTime());
+
+  gDate.setFormal("-0006");
+  date = gDate.toDateObject();
+  dateExpected = new Date("-6");
+  expect(date.getTime())
+    .toBe(dateExpected.getTime());
+})
+
+test("toString works", () => {
+  strings.setLanguage("en");
+
+  let date = new GDate();
+  expect(date.toString()).toBe("")
+
+  date.setFormal("+2022")
+  expect(date.toString()).toBe("in 2022")
+
+  date.setFormal("+2022-01")
+  expect(date.toString()).toBe("in January 2022")
+
+  date.setFormal("+2022-01-25")
+  expect(date.toString()).toBe("on 01/25/2022")
+
+  date.setFormal("+2022-01-25T05")
+  expect(date.toString()).toBe("on 01/25/2022 at 05 AM")
+
+  date.setFormal("+2022-01-25T05:05")
+  expect(date.toString()).toBe("on 01/25/2022 at 05:05 AM")
+
+  date.setFormal("+2022-01-25T05:06:06")
+  expect(date.toString()).toBe("on 01/25/2022 at 05:06:06 AM")
+})
+
+it("is not extracted", () => {
+  let person = new Person();
+  expect(person.extracted).toBeFalsy();
+  expect(person.isExtracted()).toBeFalsy();
+
+  person.setExtracted(false);
+  expect(person.extracted).toBeFalsy();
+  expect(person.isExtracted()).toBeFalsy();
+})
diff --git a/src/backend/gedcomx-enums.ts b/src/backend/gedcomx-enums.ts
index 07c4f685..3a9f6fbe 100644
--- a/src/backend/gedcomx-enums.ts
+++ b/src/backend/gedcomx-enums.ts
@@ -165,6 +165,11 @@ export enum DocumentTypes {
   Analysis = "http://gedcomx.org/Analysis"
 }
 
+export enum TextTypes {
+  Plain = "plain",
+  XHtml = "xhtml"
+}
+
 export enum EventTypes {
   Adoption = "http://gedcomx.org/Adoption",
   Birth = "http://gedcomx.org/Birth",
diff --git a/src/backend/gedcomx-extensions.ts b/src/backend/gedcomx-extensions.ts
index a4f6a4a8..6869549c 100644
--- a/src/backend/gedcomx-extensions.ts
+++ b/src/backend/gedcomx-extensions.ts
@@ -1,12 +1,11 @@
 import * as GedcomX from "gedcomx-js";
 import "./gedcomx-js-rs";
 import {Equals, filterLang, strings} from "../main";
-import config from "../config";
 import {
-  baseUri,
+  baseUri, DocumentTypes, KnownResourceTypes,
   NameTypes,
   PersonFactQualifiers,
-  PersonFactTypes
+  PersonFactTypes, TextTypes
 } from "./gedcomx-enums";
 import * as factEmojis from './factEmojies.json';
 import {
@@ -14,6 +13,10 @@ import {
 } from "./gedcomx-types";
 
 export class Person extends GedcomX.Person {
+  get isPrivate(): boolean {
+    return Boolean(this.getPrivate());
+  }
+
   get generation(): undefined | number {
     if (!this.facts) return undefined;
     let generationFacts = this.facts.filter(f => f.type === PersonFactTypes.GenerationNumber);
@@ -54,7 +57,7 @@ export class Person extends GedcomX.Person {
       return "?";
     }
     // name form that matches language, or if none matches return the first without lang
-    let nameForm = new GedcomX.NameForm(name.nameForms.find(filterPureLang) ?? name.nameForms[0]);
+    let nameForm = name.nameForms.find(filterPureLang) ?? name.nameForms[0];
     return nameForm.getFullText(true);
   }
 
@@ -112,7 +115,13 @@ export class Person extends GedcomX.Person {
     return Math.floor((date.getTime() - birthDate.getTime()) / 31536000000);
   }
 
+  isExtracted(): boolean {
+    return Boolean(this.extracted);
+  }
+
   setFacts(facts: Fact[] | object[]): Person {
+    if (!facts) return this;
+
     facts = facts.map(f => f instanceof Fact ? f : new Fact(f));
     super.setFacts(facts);
     return this;
@@ -148,7 +157,7 @@ export class Relationship extends GedcomX.Relationship {
 export class GDate extends GedcomX.Date {
   toDateObject() {
     let dateString = this.formal;
-    if (!dateString || !isNaN(Number(dateString.substring(0, 1)))) {
+    if (!dateString) {
       return undefined;
     }
 
@@ -158,7 +167,7 @@ export class GDate extends GedcomX.Date {
         // add minutes if only hour is given to prevent undefined return
         dateString += ":00"
       }
-      dateString += "Z";
+      if (!dateString.endsWith("Z")) dateString += "Z";
     }
     if (dateString[0] === "+") {
       // should be ok, but isn't
@@ -174,55 +183,58 @@ export class GDate extends GedcomX.Date {
   }
 
   toString() {
-    if (!this.formal && this.original) {
-      return this.original;
+    if (!this.formal) {
+      if (this.original) return this.original;
+      else return "";
     }
 
     let dateObject = this.toDateObject();
     if (!dateObject) {
-      return "";
+      return this.formal;
     }
+    else return formatJDate(dateObject, this.formal.length);
+  }
+}
 
-    let options = {};
-    options["year"] = "numeric";
-    switch (this.formal.length) {
-      case 5:
-        break;
-      case 8:
-        // year and month are known
-        options["month"] = "long";
-        break;
-      default:
-        // full date is known
-        options["month"] = "2-digit";
-        options["day"] = "2-digit";
-        break;
+export function formatJDate(dateObject: Date, length: number) {
+  let options = {};
+  options["year"] = "numeric";
+  switch (length) {
+    case 5:
+      break;
+    case 8:
+      // year and month are known
+      options["month"] = "long";
+      break;
+    default:
+      // full date is known
+      options["month"] = "2-digit";
+      options["day"] = "2-digit";
+      break;
+  }
+  let date = dateObject.toLocaleDateString(strings.getLanguage(), options);
+
+  let time = "";
+  if (length >= 14) {
+    options = {};
+    options["hour"] = "2-digit";
+
+    if (length >= 17) {
+      options["minute"] = "2-digit";
     }
-    let date = dateObject.toLocaleDateString(config.browserLang, options);
-
-    let time = "";
-    if (this.formal.length >= 14) {
-      options = {};
-      options["hour"] = "2-digit";
-
-      if (this.formal.length >= 17) {
-        options["minute"] = "2-digit";
-      }
-      if (this.formal.length >= 20) {
-        options["second"] = "2-digit";
-      }
-      time = dateObject.toLocaleTimeString(config.browserLang, options);
+    if (length >= 20) {
+      options["second"] = "2-digit";
     }
-
-    const length = this.formal.length;
-
-    return `${strings.formatString(length >= 10 ? strings.gedcomX.day : (length >= 7 ? strings.gedcomX.month : strings.gedcomX.year), date)}${time ? " " + strings.formatString(strings.gedcomX.time, time) : ""}`;
+    time = dateObject.toLocaleTimeString(strings.getLanguage(), options);
   }
+
+  return `${strings.formatString(length >= 10 ? strings.gedcomX.time.day : (length >= 7 ? strings.gedcomX.time.month : strings.gedcomX.time.year), date)}${time ? " " + strings.formatString(strings.gedcomX.time.time, time) : ""}`;
 }
 
 export class Fact extends GedcomX.Fact {
-  setDate(date: Date | object): Fact {
-    super.setDate(new GDate(date));
+  setDate(date: GedcomX.Date | object): Fact {
+    if (date && !(date instanceof GDate)) date = new GDate(date);
+    super.setDate(date);
     return this;
   }
 
@@ -230,8 +242,9 @@ export class Fact extends GedcomX.Fact {
     return super.getDate() as GDate;
   }
 
-  setPlace(place: PlaceReference | object): Fact {
-    super.setPlace(new PlaceReference(place));
+  setPlace(place: GedcomX.PlaceReference | object): Fact {
+    if (place && !(place instanceof PlaceReference)) place = new PlaceReference(place);
+    super.setPlace(place);
     return this;
   }
 
@@ -244,15 +257,15 @@ export class Fact extends GedcomX.Fact {
   toString(): string {
     let value = this.value;
     const type = this.type;
-    let string = strings.gedcomX.types.fact.person[type.substring(baseUri.length)] ?? type;
+    let string = strings.gedcomX.person.factTypes[type.substring(baseUri.length)] ?? type;
 
-    if (type === PersonFactTypes.MaritalStatus && value in strings.gedcomX.maritalStatus) {
-      value = strings.gedcomX.maritalStatus[value];
+    if (type === PersonFactTypes.MaritalStatus && value in strings.gedcomX.person.maritalStatus) {
+      value = strings.gedcomX.person.maritalStatus[value];
     }
 
     string += ((value || value === "0") ? `: ${value}` : "");
-    string += (this.date !== undefined ? ` ${this.date.toString()}` : "") +
-      (this.place && this.place.toString() ? " " + strings.formatString(strings.gedcomX.place, this.place.toString()) : "");
+    string += (this.date ? ` ${this.date}` : "") +
+      (this.place ? " " + strings.formatString(strings.gedcomX.place, this.place.toString()) : "");
 
     if (this.qualifiers && this.qualifiers.length > 0) {
       string += " " + this.qualifiers.map(q => q.toString()).join(" ");
@@ -275,7 +288,7 @@ class Qualifier extends GedcomX.Qualifier {
     let string;
     switch (this.name) {
       case PersonFactQualifiers.Age:
-        string = strings.formatString(strings.gedcomX.ageQualifier, this.value);
+        string = strings.formatString(strings.gedcomX.factQualifier.ageFormatter, this.value);
         break;
       case PersonFactQualifiers.Cause:
         string = `(${this.value})`;
@@ -322,6 +335,73 @@ export class FamilyView extends GedcomX.FamilyView implements Equals {
   }
 }
 
+export class SourceDescription extends GedcomX.SourceDescription {
+  get title() {
+    if (this.getTitles().length > 0) return this.getTitles()[0].value;
+    return this.getCitations()[0].getValue();
+  }
+
+  get emoji() {
+    switch (this.getResourceType()) {
+      case KnownResourceTypes.Collection:
+        return "📚";
+      case KnownResourceTypes.PhysicalArtifact:
+        return "📖";
+      case KnownResourceTypes.DigitalArtifact:
+        return "💿";
+      case KnownResourceTypes.Record:
+        return "📜";
+    }
+
+    return "📖";
+  }
+}
+
+export class Document extends GedcomX.Document {
+  get isPlainText() {
+    // return true if text type is plain or undefined
+    return !this.getTextType() || this.getTextType() === TextTypes.Plain;
+  }
+
+  get isXHTML() {
+    return this.getTextType() === TextTypes.XHtml;
+  }
+
+  get isExtracted(): boolean {
+    return Boolean(this.extracted);
+  }
+
+  // todo get attribution from containing data set
+
+  get emoji(): string {
+    switch (this.getType()) {
+      case DocumentTypes.Abstract:
+        return "📄";
+      case DocumentTypes.Transcription:
+        return "📝";
+      case DocumentTypes.Translation:
+        return "🌍";
+      case DocumentTypes.Analysis:
+        return "🔍";
+      default:
+        return "📄";
+    }
+  }
+}
+
+export class Agent extends GedcomX.Agent {
+  get name(): string {
+    if (!this.names || this.names.length === 0) return undefined;
+    return this.names[0].value;
+  }
+}
+
+export class PlaceDescription extends GedcomX.PlaceDescription {
+ isExtracted(): boolean {
+   return Boolean(this.extracted);
+ }
+}
+
 let referenceAge: { age: number, generation: number } = {
   age: undefined,
   generation: undefined
diff --git a/src/backend/graph.ts b/src/backend/graph.ts
index ba9a0a99..1a0f9e42 100644
--- a/src/backend/graph.ts
+++ b/src/backend/graph.ts
@@ -2,7 +2,7 @@ import * as GedcomX from "gedcomx-js";
 import config from "../config";
 import * as cola from "webcola";
 import {baseUri, GenderTypes} from "./gedcomx-enums";
-import {FamilyView, Person} from "./gedcomx-extensions";
+import {FamilyView, GDate, Person} from "./gedcomx-extensions";
 
 type PersonType = "person";
 type FamilyType = "family" | "etc";
@@ -57,7 +57,7 @@ export class GraphFamily extends FamilyView implements GraphObject {
   type: FamilyType = "family"
   width = config.margin * 2
   height = config.margin * 2
-  marriage
+  marriage: GDate
   x: number = 0;
   y: number = 0;
 
diff --git a/src/components/Agents.tsx b/src/components/Agents.tsx
new file mode 100644
index 00000000..a383778a
--- /dev/null
+++ b/src/components/Agents.tsx
@@ -0,0 +1,106 @@
+import {Agent} from "../backend/gedcomx-extensions";
+import {strings} from "../main";
+import {useLoaderData} from "react-router-dom";
+import {Article, Hr, P, ReactLink, ReactNavLink, Tag, Title, VanillaLink} from "./GeneralComponents";
+import {LayoutContext, Main, Sidebar} from "../App";
+import {useContext, useEffect, useState} from "react";
+import {db} from "../backend/db";
+import {Alias, Identifiers} from "./GedcomXComponents";
+
+export function AgentOverview() {
+  const agents = useLoaderData() as Agent[];
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="👤">{strings.gedcomX.agent.agents}</Title>);
+  }, [layoutContext])
+
+  return <Main>
+    <Article><AgentList agents={agents}/></Article>
+  </Main>
+}
+
+function AgentList(props) {
+  return <ul>
+    {props.agents?.map(agent =>
+      <li key={agent.id}><ReactNavLink
+        to={`/agents/${agent.id}`}>{`👤 ${agent.name ?? strings.gedcomX.agent.agent}`}</ReactNavLink></li>)}
+  </ul>;
+}
+
+export function AgentView() {
+  const agent = useLoaderData() as Agent;
+  const [others, setOthers] = useState([]);
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    db.agents.toArray().then(sds => sds.map(sd => new Agent(sd))).then(setOthers);
+    layoutContext.setHeaderChildren(<Title emoji="👤">{agent.name ?? strings.gedcomX.agent.agent}</Title>)
+    layoutContext.setRightTitle(strings.gedcomX.agent.agents);
+  }, [agent, layoutContext])
+
+  const hasData = agent.names?.length > 1 || agent.homepage || agent.openid || agent.accounts || agent.emails || agent.phones || agent.addresses;
+
+  return <>
+    <Main>
+      <section className="mx-auto w-fit flex flex-wrap flex-row gap-4">
+        {agent.person && <Tag>{strings.gedcomX.agent.person}: <ReactLink
+          to={`/persons/${agent.person.resource.substring(1)}`}>{agent.person.resource}</ReactLink></Tag>}</section>
+      <Article>
+        {!hasData && <p>{strings.errors.noData}</p>}
+        {agent.names && <Alias aliases={agent.names}/>}
+
+        {agent.homepage && <>
+          <Title emoji="🌐">{strings.gedcomX.agent.homepage}</Title>
+          <P><VanillaLink href={agent.homepage.resource}>{agent.homepage.resource}</VanillaLink></P>
+        </>}
+
+        {agent.openid && <>
+          <Title emoji="🔑">OpenID</Title>
+          <P><VanillaLink href={agent.openid.resource}>{agent.openid.resource}</VanillaLink></P>
+        </>}
+
+        {agent.accounts && <>
+          <Title emoji="👤">{strings.gedcomX.agent.accounts}</Title>
+          <ul>
+            {agent.accounts.map((a, i) =>
+              <li key={i}>{strings.formatString(strings.gedcomX.agent.onlineAccount,
+                <span className="italic">{a.accountName}</span>,
+                <VanillaLink href={a.serviceHomepage.resource}>{a.serviceHomepage.resource}</VanillaLink>)}
+              </li>)}
+          </ul>
+        </>}
+
+        {agent.emails && <>
+          <Title emoji="📧">{strings.gedcomX.agent.emails}</Title>
+          <ul>
+            {agent.emails.map(e => <li key={e.resource}><VanillaLink
+              href={`mailto:${e.resource}`}>{e.resource}</VanillaLink></li>)}
+          </ul>
+        </>}
+
+        {agent.phones && <>
+          <Title emoji="☎️">{strings.gedcomX.agent.phones}</Title>
+          <ul>
+            {agent.phones.map(p => <li key={p.resource}><VanillaLink
+              href={`tel:${p.resource}`}>{p.resource}</VanillaLink></li>)}
+          </ul>
+        </>}
+
+        {agent.addresses && <>
+          <Title emoji="📫">{strings.gedcomX.agent.addresses}</Title>
+          <ul>
+            {agent.addresses.map(a => <li key={a.value}>{a.value}</li>)}
+          </ul>
+        </>}
+      </Article>
+    </Main>
+    <Sidebar>
+      <AgentList agents={others}/>
+      {agent.identifiers && <>
+        <Hr/>
+        <Identifiers identifiers={agent.identifiers}/>
+      </>}
+    </Sidebar>
+  </>
+}
diff --git a/src/components/Article.css b/src/components/Article.css
deleted file mode 100644
index bb890703..00000000
--- a/src/components/Article.css
+++ /dev/null
@@ -1,60 +0,0 @@
-article, .notification {
-  padding: .75rem 1rem;
-  max-width: 50rem;
-  width: 100%;
-}
-
-article h1 {
-  font-size: 2em;
-  margin: 0;
-  border-bottom: solid 1px var(--lines);
-  padding-bottom: .75rem;
-}
-
-article > div {
-  padding: .5rem 0;
-}
-
-aside ul, aside ol {
-  padding-left: 1rem;
-}
-
-article :first-child {
-  margin-top: 0;
-}
-
-article :last-child {
-  margin-bottom: 0;
-}
-
-details {
-  background: var(--background-lower);
-  border-radius: .5rem;
-  padding: .5rem 1rem;
-}
-
-details:focus-visible {
-  border: none;
-  border-bottom: solid var(--primary);
-}
-
-/* src: https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal */
-details[open] summary ~ * {
-  animation: sweep .5s ease-in-out;
-}
-
-@keyframes sweep {
-  0%    {opacity: 0; transform: translateX(-10px)}
-  100%  {opacity: 1; transform: translateX(0)}
-}
-
-p {
-  line-height: 1.5em;
-}
-
-kbd {
-  border-bottom: solid var(--foreground-secondary) .15rem;
-  border-radius: .5rem;
-  padding: .1rem .3rem;
-  background: var(--background-higher);
-}
diff --git a/src/components/Documents.tsx b/src/components/Documents.tsx
new file mode 100644
index 00000000..37466e93
--- /dev/null
+++ b/src/components/Documents.tsx
@@ -0,0 +1,74 @@
+import {strings} from "../main";
+import {Document} from "../backend/gedcomx-extensions";
+import {useLoaderData} from "react-router-dom";
+import {
+  Attribution,
+  ConclusionArticles,
+  ConclusionMisc
+} from "./GedcomXComponents";
+import {Article, Hr, P, ReactNavLink, Tag, Title} from "./GeneralComponents";
+import {LayoutContext, Main, Sidebar} from "../App";
+import {useContext, useEffect, useState} from "react";
+import {db} from "../backend/db";
+import * as sanitize from "sanitize-html";
+
+export function DocumentOverview() {
+  const documents = useLoaderData() as Document[];
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="📄">{strings.gedcomX.document.documents}</Title>);
+  }, [layoutContext])
+
+  return <Main><Article>
+    <DocumentList documents={documents}/>
+  </Article></Main>
+}
+
+function DocumentList(props) {
+  return <ul>
+    {props.documents?.map(doc =>
+      <li key={doc.id}><ReactNavLink to={`/documents/${doc.getId()}`}>
+        {`${doc.emoji} ${strings.gedcomX.document.document}`}
+      </ReactNavLink></li>
+    )}
+  </ul>
+}
+
+export function DocumentView() {
+  const document = useLoaderData() as Document;
+  const [others, setOthers] = useState([]);
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    db.documents.toArray().then(sds => sds.map(sd => new Document(sd))).then(setOthers);
+    layoutContext.setHeaderChildren(<Title emoji={document?.emoji}>{strings.gedcomX.document.document}</Title>)
+    layoutContext.setRightTitle(strings.gedcomX.sourceDescription.sourceDescriptions);
+  }, [document, layoutContext])
+
+  let html;
+  if (document.isXHTML) {
+    html = sanitize(document.getText());
+  }
+
+  return <>
+    <Main>
+      <section className="mx-auto w-fit flex flex-row gap-4">
+        {document.isExtracted && <Tag>{strings.gedcomX.document.extracted}</Tag>}
+        <ConclusionMisc conclusion={document}/>
+      </section>
+      <Article>
+        {document.isPlainText && <P>{document.getText()}</P>}
+        {document.isXHTML && <div dangerouslySetInnerHTML={{__html: html}}/>}
+      </Article>
+      <ConclusionArticles conclusion={document}/>
+    </Main>
+    <Sidebar>
+      <DocumentList documents={others}/>
+      {document.getAttribution() && <>
+        <Hr/>
+        <Attribution attribution={document.getAttribution()}/>
+      </>}
+    </Sidebar>
+  </>
+}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..de764581
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,23 @@
+import {useRouteError} from "react-router-dom";
+import {Article, Details, Title} from "./GeneralComponents";
+import {LayoutContext, Main} from "../App";
+import {strings} from "../main";
+import {useContext, useEffect} from "react";
+
+export default function ErrorBoundary() {
+  const error = useRouteError() as Error;
+  const layoutContext = useContext(LayoutContext);
+  console.error(error);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="💥">{strings.errors.title}</Title>);
+  }, [error, layoutContext]);
+
+  return <Main>
+    <Article emoji="💥" title={error.message}>
+      <Details title={strings.errors.stack}>
+        <output className="font-mono text-neutral-700 dark:text-neutral-300">{error.stack}</output>
+      </Details>
+    </Article>
+  </Main>
+}
diff --git a/src/components/Form.css b/src/components/Form.css
deleted file mode 100644
index de0535ea..00000000
--- a/src/components/Form.css
+++ /dev/null
@@ -1,146 +0,0 @@
-form {
-  text-align: right;
-}
-
-form > * {
-  margin: .5rem 0;
-}
-
-label {
-  font-weight: bold;
-}
-
-input[type=file] {
-  color: var(--foreground-secondary);
-}
-
-.card-wrapper {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: .75rem;
-}
-
-input[type=submit], button, .button {
-  background: linear-gradient(45deg, var(--primary), #34cec0);
-  color: white;
-  font-weight: bold;
-  border-radius: 2.33rem;
-  padding: .66rem 1rem;
-  margin-left: 1rem;
-  border: none;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.button {
-  display: inline-block;
-}
-
-.button:visited {
-  color: inherit;
-}
-
-.button.inline, button.inline {
-  padding: .33em 1em;
-}
-
-.button.inactive, button.inactive, input[type=submit].inactive {
-  background: var(--background);
-  color: var(--primary);
-  font-weight: normal;
-  border: solid var(--primary) 2pt;
-  cursor: not-allowed;
-}
-
-@media (prefers-color-scheme: dark) {
-  .button.inactive {
-    color: var(--foreground);
-  }
-}
-
-.button.inactive:active, button.inactive:active {
-  color: white;
-}
-
-input[type=submit], .button, button, .card {
-  transition: box-shadow .5s, scale .2s;
-}
-
-input[type=submit]:hover, .button:not(select):hover, button:hover, .focused {
-  box-shadow: 0 0 1rem var(--primary);
-  scale: 1.06;
-}
-
-input[type=submit]:focus-visible, .button:focus-visible, button:focus-visible {
-  border: solid var(--secondary);
-}
-
-input[type=submit]:active, button:active, .button:not(select):active {
-  background: var(--primary);
-  scale: 1.04;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  max-width: 30rem;
-  margin: auto;
-}
-
-input[type=search] {
-  border-radius: 1.5em;
-  border: none;
-  background: rgba(255, 255, 255, 0.5);
-  color: black;
-  padding: 0 .75em;
-  min-width: 10rem;
-  width: 100%;
-  flex-shrink: 2;
-}
-
-input[type=search].error, input[type=search]:invalid {
-  border-bottom-color: var(--error-foreground);
-  background: var(--error-background);
-  color: var(--error-foreground);
-}
-
-input[type=search]:focus {
-  outline: none;
-  border-bottom-color: #55d64e;
-}
-
-.search input[type=submit] {
-  background: none;
-  padding: revert;
-  border-radius: 0;
-}
-
-.search input[type=submit]:hover {
-  box-shadow: none;
-  text-shadow: 0 0 1rem var(--primary);
-}
-
-.card {
-  text-align: center;
-  background: var(--background-higher);
-  border-radius: 1rem;
-  padding: .66rem 1rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.file-selected {
-  background: var(--positive-green);
-}
-
-.file-upload *:not(:last-child) {
-  margin-bottom: .5rem;
-}
-
-.icon-only {
-  background: none;
-  padding: 0;
-  border: none;
-  margin: 0;
-}
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
deleted file mode 100644
index a11c31ff..00000000
--- a/src/components/Form.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import './Form.css';
-import * as React from "react";
-import {hasData, strings} from "../main";
-import {useEffect, useState} from "react";
-import {db} from "../backend/db";
-
-function Form(props) {
-  const [focused, setFocused] = useState(false);
-  const [file, setFile] = useState("");
-  const [dataExists, setDataExists] = useState(false);
-
-  useEffect(() => {
-    let familyData = localStorage.getItem("familyData");
-    if (familyData) {
-      db.load(JSON.parse(familyData)).then(() => setDataExists(true));
-      localStorage.removeItem("familyData");
-    } else hasData().then(setDataExists);
-  }, [])
-
-  let input = React.createRef<HTMLInputElement>();
-
-  function checkDropAllowed(e) {
-    e.preventDefault();
-    if (e.dataTransfer.items[0] && e.dataTransfer.items[0].type === "application/json") {
-      e.dataTransfer.effectAllowed = "copy";
-      e.dataTransfer.dropEffect = "copy";
-      setFocused(true);
-      return;
-    }
-
-    // block any other drop
-    e.dataTransfer.effectAllowed = "none";
-    e.dataTransfer.dropEffect = "none";
-  }
-
-  function onDrop(e) {
-    e.preventDefault();
-    setFocused(false);
-    setFile(e.dataTransfer.files[0].name);
-    document.querySelector<HTMLInputElement>("#gedcom-file").files = e.dataTransfer.files;
-  }
-
-  function removeFocus() {
-    setFocused(false);
-  }
-
-  return (
-    <form id="upload-form" encType="multipart/form-data" onSubmit={event => {
-      event.preventDefault();
-      parseFile(input.current.files[0]).then(saveDataAndRedirect);
-    }}>
-      <div className="card-wrapper">
-        <div
-          className={"card"
-            + (focused ? " focused" : "")
-            + (file !== "" ? " file-selected" : "")}
-          onDragEnter={checkDropAllowed} onDragOver={checkDropAllowed}
-          onDrop={onDrop}
-          onDragLeave={removeFocus} onDragEnd={removeFocus}>
-          <label htmlFor="gedcom-file">
-            {strings.form.fileInputLabel}
-          </label>
-          <br/>
-          <input type="file" id="gedcom-file" accept="application/json" onChange={(e) =>
-            setFile(e.target.files[0].name)} ref={input}/>
-        </div>
-      </div>
-
-      {dataExists && <a className="button" href="/family-tree/view">
-        {strings.form.continueSession}
-      </a>}
-      <input className={file === "" ? "inactive" : ""} type="submit" value={props.submit}/>
-    </form>
-  );
-}
-
-export async function parseFile(gedcomFile) {
-  if (!gedcomFile) {
-    return Promise.reject(new Error(strings.form.noFileError));
-  }
-
-  return new Promise<string>((resolve, reject) => {
-    let readerGedcom = new FileReader();
-    readerGedcom.onload = (file) => {
-      if (typeof file.target.result === "string") {
-        resolve(file.target.result);
-      } else {
-        reject(new Error(strings.form.graphLoadingError))
-      }
-    }
-    readerGedcom.readAsText(gedcomFile);
-  });
-}
-
-export function saveDataAndRedirect(fileContent) {
-  let data = JSON.parse(fileContent);
-
-  if (typeof data !== "object") throw new Error("Data type is invalid!")
-
-  db.load(data)
-    .then(() => {
-      let url = new URL(window.location.href);
-      url.pathname = "/family-tree/view";
-      window.location.href = url.href;
-    });
-}
-
-export default Form;
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
deleted file mode 100644
index 334307bb..00000000
--- a/src/components/Gallery.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {useState} from "react";
-
-interface Props {
-  children
-}
-
-export function Gallery(props: Props) {
-  const [index, scroll] = useState(0);
-
-  return <article className="gallery">
-    {props.children[index]}
-    {props.children.length > 1 && <span className="buttons">
-      {<button className="inline prev" onClick={() =>
-        scroll(i => Math.max(0, i - 2 /* why 2?? */))}>⬅</button>}
-      {<button className="inline next" onClick={() =>
-        scroll(i => Math.min(props.children.length - 1, i + 2))}>➡</button>}
-    </span>}
-  </article>;
-}
diff --git a/src/components/GedcomXComponents.tsx b/src/components/GedcomXComponents.tsx
new file mode 100644
index 00000000..042e69ff
--- /dev/null
+++ b/src/components/GedcomXComponents.tsx
@@ -0,0 +1,214 @@
+import * as gedcomX from "gedcomx-js";
+import {filterLang, strings} from "../main";
+import {useLiveQuery} from "dexie-react-hooks";
+import {db} from "../backend/db";
+import {formatJDate, GDate} from "../backend/gedcomx-extensions";
+import {Confidence as ConfidenceEnum, IdentifierTypes} from "../backend/gedcomx-enums";
+import {Link} from "react-router-dom";
+import {Article, ExternalContent, Gallery, Hr, Media, P, ReactLink, Tag} from "./GeneralComponents";
+
+export function Note(props: { note: gedcomX.Note, noMargin?: boolean }) {
+  return <Article emoji={"📝"} title={props.note.getSubject() || strings.gedcomX.conclusion.note} noMargin={props.noMargin}>
+    <p>{props.note.getText()}</p>
+    {props.note.getAttribution() && <p><Attribution attribution={props.note.getAttribution()}/></p>}
+  </Article>
+}
+
+export function Attribution({attribution}: { attribution: gedcomX.Attribution }) {
+  const creator = useLiveQuery(async () => {
+    if (!attribution?.getCreator()) return undefined;
+    return db.agentWithId(attribution.getCreator());
+  }, [attribution]);
+
+  const contributor = useLiveQuery(async () => {
+    if (!attribution?.getContributor()) return undefined;
+    return db.agentWithId(attribution.getContributor());
+  }, [attribution]);
+
+  if (!attribution) return <></>
+
+  let created = attribution.getCreated();
+  let creatorRef = attribution.getCreator();
+  let creatorName = creator?.names?.filter(filterLang)[0].value ?? attribution.creator.resource;
+
+  let createdString = "";
+  if (created || creatorName) {
+    createdString += strings.gedcomX.conclusion.attribution.created + " ";
+    if (created) createdString += formatJDate(created, 18);
+    if (created && creatorName) createdString += " ";
+  }
+
+  let modified = attribution.getModified();
+  let contributorRef = attribution.getContributor();
+  let contributorName = contributor?.names?.filter(filterLang)[0].value ?? attribution.contributor.resource;
+  let message = attribution.getChangeMessage();
+
+  let modifiedString = "";
+  if (modified || contributorName || message) {
+    modifiedString += strings.gedcomX.conclusion.attribution.modified + " ";
+    if (modified) modifiedString += formatJDate(modified, 18);
+    if (modified && contributorName) modifiedString += " ";
+  }
+
+  return <>
+    <P noMargin>
+      {createdString} {creator && strings.formatString(strings.gedcomX.conclusion.attribution.byPerson,
+      <ReactLink to={`/agents/${creatorRef.resource.substring(1)}`}>
+        {creatorName}
+      </ReactLink>)}
+    </P>
+    <P noMargin>
+      {modifiedString} {contributor && strings.formatString(strings.gedcomX.conclusion.attribution.byPerson,
+      <ReactLink to={`/agents/${contributorRef.resource.substring(1)}`}>
+        {contributorName}
+      </ReactLink>)}
+      {message && <>: <cite> "{message}"</cite></>}
+    </P></>
+}
+
+export function SourceReference(props: { reference: gedcomX.SourceReference, noMargin?: boolean }) {
+  return <Article emoji="📖" title={strings.gedcomX.sourceDescription.sourceDescription} noMargin={props.noMargin}>
+    <p><ReactLink to={`/sources/${props.reference.description.substring(1)}`}>{props.reference.description}</ReactLink>
+    </p>
+    {props.reference.attribution && <p><Attribution attribution={props.reference.attribution}/></p>}
+  </Article>
+}
+
+export function Coverage(props: { coverage: gedcomX.Coverage }) {
+  let date;
+  if (props.coverage.temporal) date = new GDate(props.coverage.temporal.toJSON()).toString();
+
+  return <Article emoji="🗺️" title={strings.gedcomX.sourceDescription.coverageTitle}>
+    <p>
+      {props.coverage.temporal && <>{`${strings.gedcomX.sourceDescription.coverage.temporal}: ${date}`}</>}
+      {props.coverage.spatial && <>{strings.gedcomX.sourceDescription.coverage.spatial + ": "} <PlaceReference
+        reference={props.coverage.spatial}/></>}
+    </p>
+  </Article>
+}
+
+export function PlaceReference(props: { reference: gedcomX.PlaceReference }) {
+  let original = props.reference.original ?? props.reference.description ?? "?";
+  if (props.reference.description) {
+    return <Link to={"/places/" + props.reference.description.substring(1)}>{original}</Link>
+  }
+  return <span>{original}</span>
+}
+
+export function Confidence(props: { confidence: ConfidenceEnum | string }) {
+  let confidenceLevel;
+  switch (props.confidence) {
+    case ConfidenceEnum.Low:
+      confidenceLevel = 1;
+      break;
+    case ConfidenceEnum.Medium:
+      confidenceLevel = 2;
+      break;
+    case ConfidenceEnum.High:
+      confidenceLevel = 3;
+      break;
+    default:
+      confidenceLevel = undefined;
+      break;
+  }
+
+  return <div className={"text-center"}>
+    <span title={strings.gedcomX.conclusion.confidenceExplanation}>{strings.gedcomX.conclusion.confidence}: </span>
+    <meter value={confidenceLevel} max={3} low={2} high={2} optimum={3}
+           className="rounded-full bg-white dark:bg-opacity-30">{props.confidence}</meter>
+  </div>
+}
+
+export function Alias({aliases}: { aliases: gedcomX.TextValue[] }) {
+  if (aliases.length < 2) return <></>;
+
+  return <P>
+    {strings.formatString(strings.gedcomX.person.aka,
+      aliases.filter((_, i) => i > 0)
+        .map(n => n.getValue())
+        .join(', '))}
+  </P>
+}
+
+export function SubjectMisc({subject}: { subject: gedcomX.Subject }) {
+  return <>
+    {subject.isExtracted() && <Tag>{strings.gedcomX.document.extracted}</Tag>}
+    <ConclusionMisc conclusion={subject}/>
+  </>
+}
+
+export function SubjectSidebar({subject}: { subject: gedcomX.Subject }) {
+  return <>
+    {subject.getIdentifiers() && <Hr/>}
+    <Identifiers identifiers={subject.getIdentifiers()}/>
+    <ConclusionSidebar conclusion={subject}/>
+  </>
+}
+
+export function SubjectArticles({subject, noMargin}: { subject: gedcomX.Subject, noMargin?: boolean }) {
+  const media = useLiveQuery(async () => {
+    let mediaRefs = subject.getMedia().map(media => media.getDescription());
+    return await Promise.all(mediaRefs.map(id => db.sourceDescriptionWithId(id)))
+  }, [subject])
+
+  return <>
+    {media && media.length > 0 && <Gallery noMargin={noMargin}>
+      {media.map(m => {
+        let credit = m.getCitations()[0].getValue();
+        return <ExternalContent key={m.id}>
+          <div className="relative">
+            <Media mimeType={m.mediaType} url={m.getAbout()} alt={m.getDescriptions().filter(filterLang)[0]?.getValue()}/>
+            <div
+              className="absolute bottom-0 py-1 px-4 w-full text-center backdrop-blur rounded-b-2xl bg-gray-200 bg-opacity-50 dark:bg-neutral-700 dark:bg-opacity-50">
+              © <a href={m.getAbout()}>{credit}</a>
+            </div>
+          </div>
+        </ExternalContent>
+      })}
+    </Gallery>}
+    {subject.getEvidence().map((e, i) => <Article noMargin={noMargin} emoji="📎" title={strings.gedcomX.subject.evidence}
+                                                  key={i}>
+      <ReactLink to={"./" + e.resource.substring(1)}>{e.resource}</ReactLink>
+      <Attribution attribution={e.attribution}/>
+    </Article>)}
+    <ConclusionArticles conclusion={subject} noMargin={noMargin}/>
+  </>
+}
+
+export function ConclusionMisc({conclusion}: { conclusion: gedcomX.Conclusion }) {
+  return <>
+    {conclusion.analysis && <Tag>{strings.gedcomX.document.types.Analysis}: <ReactLink
+      to={`/documents/${conclusion.analysis.resource.substring(1)}`}>{conclusion.analysis.resource}</ReactLink></Tag>}
+    {conclusion.confidence && <Tag><Confidence confidence={conclusion.confidence}/></Tag>}
+  </>
+}
+
+export function ConclusionArticles({conclusion, noMargin}: { conclusion: gedcomX.Conclusion, noMargin?: boolean }) {
+  return <>
+    {conclusion.getSources().map((source, i) => <SourceReference key={i} reference={source} noMargin={noMargin}/>)}
+    {conclusion.getNotes().map((note, i) => <Note key={i} note={note} noMargin={noMargin}/>)}
+  </>
+}
+
+export function ConclusionSidebar({conclusion}: { conclusion: gedcomX.Conclusion }) {
+  return <>
+    {conclusion.getAttribution() && <Hr/>}
+    <Attribution attribution={conclusion.getAttribution()}/>
+  </>
+}
+
+export function Identifiers({identifiers}: { identifiers: gedcomX.Identifiers }) {
+  if (!identifiers) return <></>
+
+  // this is broken, lets fix it
+  let identifierMap = identifiers.identifiers["identifiers"][0];
+
+  return <>
+    <ul>
+      {identifierMap[IdentifierTypes.Primary]?.map((id, i) => <li key={i}>{id}</li>)}
+      {identifierMap[IdentifierTypes.Authority]?.map((id, i) => <li key={i} className="italic"><ReactLink
+        to={id}>{id}</ReactLink></li>)}
+      {identifierMap[IdentifierTypes.Deprecated]?.map((id, i) => <li key={i} className="line-through">{id}</li>)}
+    </ul>
+  </>
+}
diff --git a/src/components/GeneralComponents.tsx b/src/components/GeneralComponents.tsx
new file mode 100644
index 00000000..99bd7245
--- /dev/null
+++ b/src/components/GeneralComponents.tsx
@@ -0,0 +1,160 @@
+import {Link, NavLink} from "react-router-dom";
+import * as React from "react";
+import {ReactElement, useEffect, useState} from "react";
+import {strings} from "../main";
+import {LayoutContext} from "../App";
+
+export function Article(props) {
+  let other = {};
+  Object.assign(other, props);
+  delete other["noMargin"];
+
+  return (
+    <article
+      className={`bg-white bg-opacity-50 dark:bg-opacity-10 rounded-2xl ${props.noMargin ? "" : "mt-4 first:mt-0"} mx-auto p-4 w-full max-w-3xl`} {...other}>
+      {props.title && <Title emoji={props.emoji}>{props.title}</Title>}
+      {props.children}
+    </article>
+  );
+}
+
+export function Title(props: { emoji: string, children }) {
+  return <h1 className="font-bold text-xl dark:border-gray-400 mb-2 last:mb-0 mt-6 first:mt-0">
+    <span className="font-normal">{props.emoji}</span> {props.children}</h1>
+}
+
+export function Subtitle({children}) {
+  return <h2 className="font-bold text-lg mb-2 mt-6 first:mt-0">{children}</h2>
+}
+
+export function VanillaLink(props) {
+  return <a className="underline" {...props}>{props.children}</a>
+}
+
+export function ReactLink(props) {
+  return <Link className="underline" {...props}>{props.children}</Link>
+}
+
+export function ReactNavLink(props) {
+  return <NavLink to={props.to}
+                  className="block transition-colors hover:bg-white bg-opacity-100 dark:hover:bg-opacity-10 p-2 rounded-lg">{props.children}</NavLink>
+}
+
+export function Details(props) {
+  return <details className="rounded-2xl">
+    <summary className="font-bold">{props.title}</summary>
+    {props.children}
+  </details>
+}
+
+export function ButtonLike(props: {
+  enabled?: boolean,
+  primary?: boolean,
+  noHover?: boolean,
+  className?: string,
+  children?
+}) {
+  const enabled = props.enabled ?? true;
+  const primary = props.primary ?? false;
+  const noHover = props.noHover ?? false;
+
+  let style: string;
+  if (enabled) {
+    style = "cursor-pointer";
+    if (!noHover) style += "shadow-black hover:shadow-md hover:scale-110 active:scale-105 active:shadow-sm transition-all";
+    if (primary) style += " bg-green-700 text-white";
+    else style += " bg-white dark:bg-neutral-500";
+  } else {
+    style = "border-green-700 border-2 cursor-not-allowed";
+  }
+
+  return <div
+    className={`inline-block rounded-full max-w-fit max-h-fit mx-2 ${style} ` + props.className}>
+    {props.children}
+  </div>
+}
+
+export function Tag({children}) {
+  return <span
+    className="inline-block rounded-full bg-white bg-opacity-50 dark:bg-opacity-10 w-fit px-4 py-1 text-neutral-700 dark:text-neutral-300 text-sm">
+    {children}
+  </span>
+}
+
+export function P({noMargin, children}: { noMargin?: boolean, children }) {
+  return <p className={"text-block " + (noMargin ? "" : "mb-4 last:mb-0")}>{children}</p>
+}
+
+export function Hr() {
+  return <hr className="border-neutral-500 mx-8"/>
+}
+
+export function Loading(props: {text: string, value?: number, max?: number}) {
+  return <div className="text-center h-full py-4 px-4 flex flex-col justify-center items-center">
+    <label htmlFor="progress-bar">{props.text}</label>
+    <progress id="progress-bar" value={props.value} max={props.max} className="mt-2 rounded-full bg-white dark:bg-opacity-30"></progress>
+  </div>
+}
+
+export function Gallery(props: { children: any[], noMargin?: boolean }) {
+  const [index, scroll] = useState(0);
+
+  return <article className={`rounded-2xl ${props.noMargin ? "" : "mt-4 first:mt-0"} mx-auto w-fit max-w-3xl`}>
+    {props.children[index]}
+    {props.children.length > 1 && <span className="w-full flex justify-between items-center px-4 mt-2">
+      {<ButtonLike enabled={index > 0}>
+        <button className={`px-3 ${index > 0 ? "" : "hover:cursor-not-allowed"}`} onClick={() =>
+          scroll(i => Math.max(0, --i))}>⬅
+        </button>
+      </ButtonLike>}
+      <span>{index + 1} / {props.children.length}</span>
+      {<ButtonLike enabled={index < props.children.length - 1}>
+        <button className={`px-3 ${index < props.children.length - 1 ? "" : "hover:cursor-not-allowed"}`} onClick={() =>
+          scroll(i => Math.min(props.children.length - 1, ++i))}>➡
+        </button>
+      </ButtonLike>}
+    </span>}
+  </article>;
+}
+
+export function ExternalContent({children}: { children }) {
+  const layoutContext = React.useContext(LayoutContext);
+
+  if (layoutContext.allowExternalContent) return children;
+
+  return <div
+    className="w-full text-center bg-white bg-opacity-50 dark:bg-opacity-10 rounded-2xl px-4 py-12 my-4 first:mt-0 last:mb-0">
+    <ButtonLike primary>
+      <button onClick={() => layoutContext.toggleExternalContent(true)}
+              className="px-4 py-2">{strings.externalContentButton}</button>
+    </ButtonLike>
+  </div>
+}
+
+export function Media({mimeType, url, alt}: { mimeType: string, url: string, alt: string }) {
+  const [text, setText] = useState("");
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    let mediaType = mimeType.split('/');
+    if (mediaType[0] !== "text") return;
+
+    fetch(url)
+      .then(r => r.text())
+      .then(t => setText(t));
+  }, [mimeType, url])
+
+  let media: ReactElement;
+  if (mimeType.startsWith("text")) {
+    media = <p>{text}</p>
+  } else {
+    media = <object type={mimeType} data={url} className={`m-auto rounded-2xl my-2 max-w-full ${!loaded && "hidden"}`} onLoad={() => setLoaded(true)}>
+      {alt}
+    </object>;
+  }
+
+  return <ExternalContent>
+    {media}
+    {!loaded && <div className="w-full h-full pb-8 bg-white bg-opacity-50 dark:bg-opacity-10 rounded-2xl">{<Loading text={strings.gedcomX.subject.loadingMedia}/>}</div>}
+  </ExternalContent>
+}
diff --git a/src/components/Header.css b/src/components/Header.css
deleted file mode 100644
index 8d92ca1b..00000000
--- a/src/components/Header.css
+++ /dev/null
@@ -1,38 +0,0 @@
-header {
-  padding: .25rem 1rem;
-  z-index: 1;
-  box-shadow: 0 .25rem .25rem rgba(0, 0, 0, 0.33);
-  display: flex;
-  align-items: center;
-  background: var(--primary);
-  color: white;
-  grid-area: header;
-  gap: 1rem;
-}
-
-header ::selection {
-  background: #55d64e;
-}
-
-header * {
-  font-weight: bold;
-  font-size: 2rem;
-}
-
-header div {
-  flex-grow: 2;
-}
-
-header input {
-  margin: 0;
-  font-size: 1.5rem;
-}
-
-nav {
-  display: flex;
-  gap: 1rem;
-}
-
-nav a {
-  text-decoration: none;
-}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index ab006891..00000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react";
-import './Header.css';
-import {Link} from 'react-router-dom';
-import {strings} from "../main";
-
-function Header(props) {
-  return (
-    <header>
-      <Link to="/">
-        <img src={process.env.PUBLIC_URL + "/logo.svg"} width="40" height="100%" alt={strings.header.imageAlt + " 🌳"}/>
-      </Link>
-      <span id="title">{strings.header.title}</span>
-      <div>
-        {props.children}
-      </div>
-      <nav>
-        <a href="/family-tree/view">🌳</a>
-        <a href="/family-tree/stats">📊</a>
-      </nav>
-    </header>
-  );
-}
-
-export default Header;
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 10bb4640..3ff6f5f6 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,82 +1,101 @@
 import * as React from "react";
-import Header from "./Header";
-import {strings} from "../main";
-import Form from "./Form";
-import "./Article.css";
+import {useEffect, useState} from "react";
+import {hasData, strings} from "../main";
+import {ButtonLike} from "./GeneralComponents";
+import {Main} from "../App";
+import {Link, useNavigate} from "react-router-dom";
+import {db} from "../backend/db";
+import getTestData from "../backend/TestData";
 
 export function Home() {
-  return <>
-    <Header/>
-    <main>
-      <Uploader/>
-      <NavigationTutorial/>
-    </main>
-  </>;
+  return <Main>
+    <div className="flex flex-col h-full justify-center">
+      <h1
+        className="font-bold text-5xl sm:text-6xl text-center bg-gradient-to-r from-green-900 dark:from-green-600 to-green-600 dark:to-green-300 w-fit mx-auto bg-clip-text text-transparent">Stammbaum</h1>
+      <span className="text-xl sm:text-2xl text-center text-neutral-500 block mt-4">Free, Private, Open Source</span>
+
+      <Form submit={strings.home.openButton}/>
+      <div className="bg-transparent h-28"></div>
+    </div>
+  </Main>;
 }
 
-function Uploader() {
-  let root = document.getElementById("root");
-  root.classList.remove("sidebar-visible");
+function Form(props) {
+  const [dataExists, setDataExists] = useState(false);
+  const navigate = useNavigate();
 
-  return (
-    <Article title={strings.home.uploadArticle.title} emoji="📁">
-      <p>
-        {strings.home.uploadArticle.content}
-      </p>
-      <Form submit={strings.home.uploadArticle.openButton}/>
-      <details>
-        <summary><span className="emoji">🗒️</span> {strings.home.uploadArticle.detailSummary}</summary>
-        <p>
-          {strings.formatString(strings.home.uploadArticle.detail,
-            <a href="https://github.com/FamilySearch/gedcomx/blob/master/specifications/json-format-specification.md">
-              {strings.linkContent}</a>)}
-        </p>
-      </details>
-    </Article>
-  );
-}
+  useEffect(() => {
+    let familyData = localStorage.getItem("familyData");
+    if (familyData) {
+      db.load(JSON.parse(familyData)).then(() => setDataExists(true));
+      localStorage.removeItem("familyData");
+    } else hasData().then(setDataExists);
+  }, [])
+
+  let input = React.createRef<HTMLInputElement>();
+
+  function loadTestData(e) {
+    e.preventDefault();
+    saveDataAndRedirect(getTestData(), navigate);
+  }
 
-function Article(props) {
   return (
-    <article lang={props.lang}>
-      <h1><span className="emoji">{props.emoji}</span> {props.title}</h1>
-      {props.children}
-    </article>
+    <form id="upload-form" encType="multipart/form-data" onSubmit={event => {
+      event.preventDefault();
+      parseFile(input.current.files[0])
+        .then(t => JSON.parse(t))
+        .then(data => saveDataAndRedirect(data, navigate));
+    }} className="mt-20 flex flex-col gap-4 items-center">
+      <input type="file" id="gedcom-file" accept="application/json" hidden
+             onChange={() => parseFile(input.current.files[0])
+               .then(t => JSON.parse(t))
+               .then(d => saveDataAndRedirect(d, navigate))}
+             ref={input}/>
+
+      <ButtonLike primary className="mb-4">
+        <button onClick={loadTestData}
+                className="px-8 py-4 text-xl min-w-max w-64">{strings.home.tryItOut}</button>
+      </ButtonLike>
+      {dataExists && <>
+        <ButtonLike><Link to="/persons" className="block px-4 py-2 min-w-max w-48 text-center">
+          {strings.home.continueSession}
+        </Link></ButtonLike>
+        <ButtonLike><button onClick={e => {
+          e.preventDefault();
+          db.clear().then(() => setDataExists(false));
+        }} className="px-4 py-2 min-w-max w-48 text-center">{strings.home.deleteButton}</button></ButtonLike>
+      </>}
+      <ButtonLike>
+        <input type="submit" value={props.submit} className="px-4 py-2 min-w-max w-48 text-center hover:cursor-pointer" onClick={e => {
+          e.preventDefault();
+          input.current?.click();
+        }}/>
+      </ButtonLike>
+    </form>
   );
 }
 
+export async function parseFile(gedcomFile) {
+  if (!gedcomFile) {
+    return Promise.reject(new Error(strings.errors.noFileError));
+  }
 
-function NavigationTutorial() {
-  return <Article title={strings.home.navigationArticle.title} emoji="🖥">
-  <p>
-    {strings.formatString(strings.home.navigationArticle.content,
-      <kbd>{strings.ctrl}</kbd>)}
-  </p>
-  </Article>
+  return new Promise<string>((resolve, reject) => {
+    let readerGedcom = new FileReader();
+    readerGedcom.onload = (file) => {
+      if (typeof file.target.result === "string") {
+        resolve(file.target.result);
+      } else {
+        reject(new Error(strings.errors.graphLoadingError))
+      }
+    }
+    readerGedcom.readAsText(gedcomFile);
+  });
 }
 
-export function Imprint() {
-  return <>
-    <Header/>
-    <main>
-      <Article title={strings.imprint.privacyArticle.title} emoji="🔐">
-        <p>
-          {strings.formatString(strings.imprint.privacyArticle.content,
-            <a href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement">
-              {strings.linkContent}
-            </a>)}
-        </p>
-      </Article>
-      <Article title={strings.imprint.imprintArticle.title} emoji="📇">
-        <p>
-          <address>
-            Hoffmann, Lorenz <br/>
-            Robert-Sterl Str 5c <br/>
-            01219 Dresden <br/>
-            <a href="mailto:hoffmann_lorenz@protonmail.com">hoffmann_lorenz@protonmail.com</a>
-          </address>
-        </p>
-      </Article>
-    </main>
-  </>
+export function saveDataAndRedirect(data: object, navigate: (url: string) => void) {
+  if (typeof data !== "object") throw new Error("Data type is invalid!")
+
+  db.load(data).then(() => navigate("/persons"));
 }
+
diff --git a/src/components/Imprint.tsx b/src/components/Imprint.tsx
new file mode 100644
index 00000000..43c0a346
--- /dev/null
+++ b/src/components/Imprint.tsx
@@ -0,0 +1,58 @@
+import {LayoutContext, Main} from "../App";
+import {P, Subtitle, Title} from "./GeneralComponents";
+import {strings} from "../main";
+import * as React from "react";
+import {useEffect} from "react";
+
+function Li({children}) {
+  return <li className="mt-4">{children}</li>
+}
+
+export function Imprint() {
+  const layoutContext = React.useContext(LayoutContext);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="🔏">{strings.imprint.title}</Title>);
+  }, [layoutContext])
+
+  return <Main>
+    <article className="max-w-2xl mx-auto">
+      <P>{strings.imprint.introduction}</P>
+      <ol className="list-decimal">
+        <Li>
+          <Title emoji="📇">{strings.imprint["1"].title}</Title>
+          <P>{strings.imprint["1"].content}</P>
+        </Li>
+        <Li>
+          <Title emoji="📝">{strings.imprint["2"].title}</Title>
+          <ol className="list-decimal ml-8">
+            <Li>
+              <Subtitle>{strings.imprint["2"].content.a.title}</Subtitle>
+              <P>{strings.imprint["2"].content.a.content}</P>
+            </Li>
+            <Li>
+              <Subtitle>{strings.imprint["2"].content.b.title}</Subtitle>
+              <P>{strings.imprint["2"].content.b.content}</P>
+            </Li>
+            <Li>
+              <Subtitle>{strings.imprint["2"].content.c.title}</Subtitle>
+              <P>{strings.imprint["2"].content.c.content}</P>
+            </Li>
+          </ol>
+        </Li>
+        <Li>
+          <Title emoji="🔒">{strings.imprint["3"].title}</Title>
+          <P>{strings.imprint["3"].content}</P>
+        </Li>
+        <Li>
+          <Title emoji="📜">{strings.imprint["4"].title}</Title>
+          <P>{strings.imprint["4"].content}</P>
+        </Li>
+        <Li>
+          <Title emoji="🖊️">{strings.imprint["5"].title}</Title>
+          <P>{strings.imprint["5"].content}</P>
+        </Li>
+      </ol>
+    </article>
+  </Main>
+}
diff --git a/src/components/InfoPanel.css b/src/components/InfoPanel.css
deleted file mode 100644
index 37c9adee..00000000
--- a/src/components/InfoPanel.css
+++ /dev/null
@@ -1,53 +0,0 @@
-article.gallery {
-  padding: 0;
-  z-index: 0;
-  position: relative;
-  box-shadow: none;
-}
-
-article.gallery div {
-  box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .33);
-  border-radius: 1rem;
-  z-index: 0;
-}
-
-.gallery img {
-  width: 100%;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  position: relative;
-  /* z-index is needed for shadow  effect */
-  z-index: -1;
-}
-
-.credits {
-  padding-top: .25rem;
-  padding-bottom: .25rem;
-  text-align: center;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: .75rem;
-  z-index: 1;
-}
-
-.gallery .buttons {
-  position: absolute;
-  bottom: .5rem;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  justify-items: center;
-  padding: 0 1em;
-  box-sizing: border-box;
-}
-
-.gallery .buttons button {
-  margin: 0;
-  font-size: .75rem;
-}
-
-#confidence {
-  flex-grow: 2;
-  text-align: center;
-}
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index 7d4919e3..9ff15e7e 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -1,40 +1,21 @@
-import './InfoPanel.css';
-import {Confidence, PersonFactTypes} from "../backend/gedcomx-enums";
+import {PersonFactTypes} from "../backend/gedcomx-enums";
 import {filterLang, strings} from "../main";
-import {Gallery} from "./Gallery";
-import Sidebar from "./Sidebar";
-import * as gedcomX from "gedcomx-js";
 import {db} from "../backend/db";
 import {useLiveQuery} from "dexie-react-hooks";
-import {GDate, Person} from "../backend/gedcomx-extensions";
+import {GDate} from "../backend/gedcomx-extensions";
 import {useContext} from "react";
-import {FocusPersonContext} from "./View";
+import {FocusPersonContext} from "./Persons";
+import {
+  SubjectArticles,
+  SubjectMisc,
+  SubjectSidebar
+} from "./GedcomXComponents";
+import {Sidebar} from "../App";
+import {Article, Details, Tag} from "./GeneralComponents";
 
 function InfoPanel() {
   const person = useContext(FocusPersonContext);
 
-  const images = useLiveQuery(async () => {
-    if (person) return getImages(person);
-  }, [person])
-
-  let confidence;
-  if (person) {
-    switch (person.confidence) {
-      case Confidence.Low:
-        confidence = 1;
-        break;
-      case Confidence.Medium:
-        confidence = 2;
-        break;
-      case Confidence.High:
-        confidence = 3;
-        break;
-      default:
-        confidence = undefined;
-        break;
-    }
-  }
-
   const parents = useLiveQuery(async () => {
     if (!person) return;
 
@@ -84,13 +65,6 @@ function InfoPanel() {
       Promise.all(children.map(r => db.personWithId(r))));
   }, [person])
 
-  const sourceDescriptions = useLiveQuery(async () => {
-    if (!person) return;
-
-    return Promise.all(person.getSources()
-      .map(s => db.sourceDescriptionWithId(s.getDescription())))
-  }, [person])
-
   // todo:
   // person.getEvidence()
   // person.getIdentifiers()
@@ -101,37 +75,24 @@ function InfoPanel() {
     return <aside id={"info-panel"}></aside>
   }
 
+  const hasMultipleNames = person.names?.length > 1;
+
   return (
     <Sidebar id="info-panel">
-      <section className="title">
-        <h1 className="name">{person.fullName}</h1>
+      {hasMultipleNames && <Article className="text-lg text-center">
         {person.marriedName && <h2 className="birth-name">
-          {strings.formatString(strings.infoPanel.born, person.birthName)}
+          {strings.formatString(strings.gedcomX.person.born, person.birthName)}
         </h2>}
         {person.alsoKnownAs && <h2 className="alsoKnownAs">
-          {strings.formatString(strings.infoPanel.aka, person.alsoKnownAs)}
+          {strings.formatString(strings.gedcomX.person.aka, person.alsoKnownAs)}
         </h2>}
         {person.nickname && <h2 className="nickname">
-          {strings.formatString(strings.infoPanel.nickname, person.nickname)}
+          {strings.formatString(strings.gedcomX.person.nickname, person.nickname)}
         </h2>}
-      </section>
+      </Article>}
 
-      {images && images.length > 0 && <Gallery>
-        {images.map(image => {
-          let credit = image.getCitations()[0].getValue();
-          return <div key={image.id}>
-            <img src={image.getAbout()}
-                 alt={strings.formatString(strings.infoPanel.personImageAlt, person.fullName) as string
-                   /* quick hack, dont know why this does not just return string */}/>
-            <span className="credits">
-              © <a href={image.getAbout()}>{credit}</a>
-            </span>
-          </div>
-        })}
-      </Gallery>}
-
-      <article>
-        <ul id="factView">
+      {person.facts && <Article noMargin>
+        <ul id="factView" className="pl-4">
           {person.getFacts()
             .filter(filterLang)
             .sort((a, b) => {
@@ -165,111 +126,61 @@ function InfoPanel() {
               {f.toString()}
             </li>)}
         </ul>
-      </article>
-
-      {parents && parents.length > 0 && <article>
-        <h1>👪 {strings.infoPanel.parents}</h1>
-        <ul>
-          {parents?.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
-
-      {children && children.length > 0 && <article>
-        <h1>🍼 {strings.infoPanel.children}</h1>
-        <ul>
-          {children.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
-
-      {partner && partner.length > 0 && <article>
-        <h1>❤️ {strings.infoPanel.partner}</h1>
-        <ul>
-          {partner.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
-
-      {godparents && godparents.length > 0 && <article>
-        <h1>⛅ {strings.infoPanel.godparents}</h1>
-        <ul>
-          {godparents.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
-
-      {godchildren && godchildren.length > 0 && <article>
-        <h1>⛅ {strings.infoPanel.godchildren}</h1>
-        <ul>
-          {godchildren.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
-
-      {enslavedBy && enslavedBy.length > 0 && <article>
-        <h1>⛓️ {strings.infoPanel.enslavedBy}</h1>
-        <ul>
-          {enslavedBy.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
+      </Article>}
+
+      <Details title={strings.gedcomX.relationship.relationships}>
+        {parents && parents.length > 0 && <Article emoji="👪" title={strings.gedcomX.relationship.parents}>
+          <ul>
+            {parents?.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+
+        {children && children.length > 0 && <Article emoji="🍼" title={strings.gedcomX.relationship.children}>
+          <ul>
+            {children.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+
+        {partner && partner.length > 0 && <Article emoji="❤️️" title={strings.gedcomX.relationship.partner}>
+          <ul>
+            {partner.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+
+        {godparents && godparents.length > 0 && <Article emoji="⛅" title={strings.gedcomX.relationship.godparents}>
+          <ul>
+            {godparents.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+
+        {godchildren && godchildren.length > 0 && <Article emoji="⛅" title={strings.gedcomX.relationship.godchildren}>
+          <ul>
+            {godchildren.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+
+        {enslavedBy && enslavedBy.length > 0 && <Article emoji="⛓" title={strings.gedcomX.relationship.enslavedBy}>
+          <ul>
+            {enslavedBy.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+
+        {slaves && slaves.length > 0 && <Article emoji="⛓" title={strings.gedcomX.relationship.slaves}>
+          <ul>
+            {slaves.map(p => <li key={p.id}>{p.fullName}</li>)}
+          </ul>
+        </Article>}
+      </Details>
+
+      <SubjectArticles subject={person} noMargin/>
+      <section className="mx-auto w-fit flex flex-row flex-wrap gap-4">
+        {person.isPrivate && <Tag>{strings.gedcomX.person.private}</Tag>}
+        <SubjectMisc subject={person}/>
+      </section>
 
-      {slaves && slaves.length > 0 && <article>
-        <h1>⛓️ {strings.infoPanel.slaves}</h1>
-        <ul>
-          {slaves.map(p => <li key={p.id}>{p.fullName}</li>)}
-        </ul>
-      </article>}
-
-      {person.getNotes().filter(filterLang).map((note, i) => {
-        return <Note note={note} key={i}/>
-      })}
-
-      {sourceDescriptions && sourceDescriptions.map(description => {
-        return <article key={description.id}>
-          <h1><span className="emoji">📚</span> {strings.infoPanel.source}</h1>
-          <p>{description.getCitations()[0].getValue()}</p>
-        </article>
-      })}
-
-      {person.getConfidence() && <div id="confidence">
-        <span title={strings.infoPanel.confidenceExplanation}>{strings.infoPanel.confidenceLabel}</span>
-        <meter value={confidence} max={3} low={2} high={2} optimum={3}>{person.getConfidence()}</meter>
-      </div>}
+      <SubjectSidebar subject={person}/>
     </Sidebar>
   );
 }
 
-function Note(props: { note: gedcomX.Note }) {
-  return <article>
-    <h1><span className={"emoji"}>📝</span> {props.note.getSubject() || strings.infoPanel.note}</h1>
-    <p>{props.note.getText()}</p>
-    {props.note.getAttribution() && <Attribution attribution={props.note.getAttribution()}/>}
-  </article>
-}
-
-/**
- * @todo this is untested as I don't have data to do so. Please file a bug if you find something weird.
- */
-function Attribution(props: { attribution: gedcomX.Attribution }) {
-  let created = props.attribution.getCreated().toString();
-  let creatorRef = props.attribution.getCreator();
-  const creator = useLiveQuery(async () => db.agentWithId(creatorRef), [creatorRef]);
-  let creatorName = creator.getNames().filter(filterLang)[0].getValue();
-  let modified = props.attribution.getModified().toString();
-  let contributorRef = props.attribution.getContributor();
-  const contributor = useLiveQuery(async () => db.agentWithId(contributorRef), [contributorRef]);
-  let contributorName = contributor.getNames().filter(filterLang)[0].getValue();
-  let message = props.attribution.getChangeMessage();
-
-  return <cite>{strings.formatString(strings.infoPanel.attribution, created, creatorName, modified, contributorName)} {message}</cite>
-}
-
-async function getImages(person: Person) {
-  let mediaRefs = person.getMedia().map(media => media.getDescription());
-  const sourceDescriptions = await Promise.all(mediaRefs.map(id => db.sourceDescriptionWithId(id)));
-
-  return sourceDescriptions.filter(sourceDescription => {
-    let mediaType = sourceDescription.getMediaType();
-    if (!mediaType) return false;
-    return mediaType.split('/')[0] === 'image'
-  });
-}
-
-
 export default InfoPanel;
diff --git a/src/components/Loading.css b/src/components/Loading.css
deleted file mode 100644
index f50dff84..00000000
--- a/src/components/Loading.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.loading {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  justify-items: center;
-  gap: .25rem;
-  max-width: 20rem;
-  height: 100%;
-  margin: 0 auto;
-
-  accent-color: var(--primary);
-}
-
-.loading label {
-  text-align: center;
-}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
deleted file mode 100644
index c5657ae8..00000000
--- a/src/components/Loading.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import './Loading.css';
-
-export function Loading(props: {text: string, value?: number, max?: number}) {
-  return <div className="loading">
-    <label htmlFor="progress-bar">{props.text}</label>
-    <progress id="progress-bar" value={props.value} max={props.max}></progress>
-  </div>
-}
diff --git a/src/components/NoData.tsx b/src/components/NoData.tsx
index 2c156096..4c1765f8 100644
--- a/src/components/NoData.tsx
+++ b/src/components/NoData.tsx
@@ -1,10 +1,9 @@
 import {strings} from "../main";
+import {Article, P, Title} from "./GeneralComponents";
 
 export default function NoData() {
-  return <main>
-    <article>
-      <h1><span className="emoji">⚠️</span> {strings.errors.title}</h1>
-      <p>{strings.formatString(strings.errors.no_data, <a href="/family-tree">{strings.linkContent}</a>)}</p>
-    </article>
-  </main>
+  return <Article>
+      <Title emoji="⚠️">{strings.errors.title}</Title>
+      <P>{strings.errors.noData}</P>
+    </Article>
 }
diff --git a/src/components/Nodes.tsx b/src/components/Nodes.tsx
index b818c64b..25e271f1 100644
--- a/src/components/Nodes.tsx
+++ b/src/components/Nodes.tsx
@@ -5,7 +5,7 @@ import {Person as PersonClass} from "../backend/gedcomx-extensions";
 
 export function Family(props: {locked: boolean, data: GraphFamily, onClicked: (a: GraphFamily) => void}) {
   return (
-    <g className={"partnerNode" + (props.locked ? " locked" : "")} onClick={() => {
+    <g className={"partnerNode fill-gray-200 dark:fill-neutral-800" + (props.locked ? " locked" : "")} onClick={() => {
       if (props.locked) {
         return;
       }
@@ -13,11 +13,11 @@ export function Family(props: {locked: boolean, data: GraphFamily, onClicked: (a
     }}>
       <circle r={config.gridSize / 2}/>
       {props.data.marriage &&
-        <text x={-config.gridSize} y="4pt" className="marriageDate">
+        <text x={-config.gridSize} y="4pt" className="marriageDate fill-black dark:fill-white">
           {`💍 ${props.data.marriage}`}
         </text>}
       <text y="4pt">{props.locked ? "🔒" : "➖"}</text>
-      <title>{props.locked ? strings.nodes.lockedFamilyHint : strings.nodes.hideFamilyHint}</title>
+      <title>{props.locked ? strings.tree.lockedFamilyHint : strings.tree.hideFamilyHint}</title>
     </g>
   );
 }
@@ -25,7 +25,7 @@ export function Family(props: {locked: boolean, data: GraphFamily, onClicked: (a
 export function Etc(props: {onClick: Function, family: GraphFamily}) {
   return (
     <g className="etc" onClick={() => props.onClick(props.family)}>
-      <circle r={config.gridSize / 2}/>
+      <circle r={config.gridSize / 2} className="fill-gray-200 dark:fill-neutral-800"/>
       <text y="4pt">➕</text>
     </g>
   );
@@ -35,12 +35,12 @@ export function Person(props: {data: GraphPerson, onClick: (person: PersonClass)
   let graphPerson: GraphPerson = props.data;
   return (
     <foreignObject
-      className="person"
+      className="person overflow-visible cursor-pointer select-none"
       x={graphPerson.x - graphPerson.width / 2} y={graphPerson.y - graphPerson.height / 2}
       width={graphPerson.width} height={graphPerson.height}
       onClick={() => props.onClick(graphPerson.data)}>
-      <div className={"bg" + (props.focused ? " focused" : "")} title={strings.nodes.clickPersonHint}>
-        <p className="fullName">{graphPerson.getName()}</p>
+      <div className={"bg rounded-3xl px-4 py-2 bg-gray-200 dark:bg-neutral-800 border-4 dark:font-white" + (props.focused ? " focused" : "")} title={strings.tree.clickPersonHint}>
+        <p className="fullName text-center">{graphPerson.getName()}</p>
       </div>
     </foreignObject>
   );
diff --git a/src/components/Persons.tsx b/src/components/Persons.tsx
new file mode 100644
index 00000000..60a82a1f
--- /dev/null
+++ b/src/components/Persons.tsx
@@ -0,0 +1,128 @@
+import * as React from "react";
+import {createContext, useContext, useEffect, useMemo, useState} from "react";
+import {strings} from "../main";
+import {ColorMode, ViewMode} from "../backend/ViewGraph";
+import TreeView from "./TreeView";
+import InfoPanel from "./InfoPanel";
+import SearchField from "./SearchField";
+import {Person} from "../backend/gedcomx-extensions";
+import {parseFile, saveDataAndRedirect} from "./Home";
+import {useLoaderData, useNavigate, useSearchParams} from "react-router-dom";
+import {LayoutContext, Main} from "../App";
+import {Article, ButtonLike, Title} from "./GeneralComponents";
+
+export const FocusPersonContext = createContext<Person>(null);
+
+function ViewOptions(props) {
+  const navigate = useNavigate();
+  let fileInput = React.createRef<HTMLInputElement>();
+
+  return (
+    <form id="view-all" className="flex gap-4 overflow-x-auto whitespace-nowrap p-4">
+      <div>
+        <label htmlFor="view-selector">{strings.viewOptions.filter.label}</label>
+        <ButtonLike primary noHover><select id="view-selector" className="bg-transparent py-1 pl-4 pr-2 mr-4 cursor-pointer" defaultValue={props.view}
+                onChange={props.onViewChanged}>
+          <option value={ViewMode.DEFAULT}>{strings.viewOptions.filter.default}</option>
+          <option value={ViewMode.DESCENDANTS}>{strings.viewOptions.filter.descendants}</option>
+          <option value={ViewMode.ANCESTORS}>{strings.viewOptions.filter.ancestors}</option>
+          <option value={ViewMode.LIVING}>{strings.viewOptions.filter.living}</option>
+          <option value={ViewMode.ALL}>{strings.viewOptions.filter.all}</option>
+        </select></ButtonLike>
+      </div>
+
+      <div>
+        <label htmlFor="color-selector">{strings.viewOptions.color.label}</label>
+        <ButtonLike primary noHover><select id="color-selector" className="bg-transparent py-1 pl-4 pr-2 mr-4 cursor-pointer" defaultValue={props.colorMode}
+                onChange={props.onColorChanged}>
+          <option value={ColorMode.GENDER}>{strings.gedcomX.person.gender}</option>
+          <option value={ColorMode.NAME}>{strings.gedcomX.person.namePartTypes.Surname}</option>
+          <option value={ColorMode.AGE}>{strings.gedcomX.factQualifier.Age}</option>
+          <option value={ColorMode.CONFIDENCE}>{strings.gedcomX.conclusion.confidence}</option>
+        </select></ButtonLike>
+      </div>
+
+      <div id="file-buttons" className="ml-auto">
+        <input type="file" hidden ref={fileInput} accept="application/json"
+               onChange={() => parseFile(fileInput.current.files[0]).then(t => JSON.parse(t)).then(d => saveDataAndRedirect(d, navigate))}/>
+        <button className="icon-only" onClick={e => {
+          e.preventDefault();
+          fileInput.current.click();
+        }}>📁
+        </button>
+      </div>
+    </form>
+  );
+}
+
+const ViewModeParam = "viewMode";
+const ColorModeParam = "colorMode";
+
+function Persons() {
+  const layoutContext = useContext(LayoutContext);
+  const [searchParams, setSearchParams] = useSearchParams({viewMode: ViewMode.DEFAULT, colorMode: ColorMode.GENDER});
+  const focusPerson = useLoaderData() as Person | null;
+  const [focusHidden, hideFocus] = useState(false);
+  const navigate = useNavigate();
+
+  function onViewChanged(e) {
+    let view = (e.target as HTMLSelectElement).value;
+
+    searchParams.set(ViewModeParam, view);
+    setSearchParams(searchParams);
+  }
+
+  function onColorChanged(e) {
+    let colorMode = (e.target as HTMLSelectElement).value;
+
+    searchParams.set(ColorModeParam, colorMode);
+    setSearchParams(searchParams);
+  }
+
+  const onRefocus = useMemo(() => {
+    return function onRefocus(newFocus: Person) {
+      if (!focusPerson) return;
+
+      if (newFocus.getId() === focusPerson.id) {
+        hideFocus(!focusHidden)
+        return;
+      }
+
+      navigate(`/persons/${newFocus.getId()}`);
+    }
+  }, [focusPerson, focusHidden, navigate]);
+
+  useEffect(() => {
+    if (!focusPerson) {
+      layoutContext.setHeaderChildren([
+        <Title emoji="🌳">{strings.gedcomX.person.persons}</Title>
+      ]);
+      return;
+    }
+
+    layoutContext.setHeaderChildren([
+      <SearchField onRefocus={onRefocus}/>
+    ])
+    layoutContext.setRightTitle(focusHidden ? "" : focusPerson.fullName)
+  }, [onRefocus, focusPerson, focusHidden, layoutContext]);
+
+  return (
+    <>
+      <FocusPersonContext.Provider value={focusPerson}>
+        {!focusHidden && <InfoPanel/>}
+      </FocusPersonContext.Provider>
+      <Main titleRight={focusPerson.fullName}>
+        <Article id="family-tree-container" className="bg-white dark:bg-black rounded-2xl mx-auto mb-0 p-0 h-full box-border flex flex-col">
+          <ViewOptions view={searchParams.get(ViewModeParam)} colorMode={searchParams.get(ColorModeParam)} onViewChanged={onViewChanged}
+                       onColorChanged={onColorChanged}/>
+          <FocusPersonContext.Provider value={focusPerson}>
+            <TreeView colorMode={searchParams.get(ColorModeParam) as ColorMode} focusHidden={focusHidden}
+                      onRefocus={onRefocus} viewMode={searchParams.get(ViewModeParam) as ViewMode}/>
+          </FocusPersonContext.Provider>
+        </Article>
+      </Main>
+    </>
+  );
+}
+
+export default Persons;
diff --git a/src/components/Places.tsx b/src/components/Places.tsx
new file mode 100644
index 00000000..dda08fab
--- /dev/null
+++ b/src/components/Places.tsx
@@ -0,0 +1,93 @@
+import {LayoutContext, Main, Sidebar} from "../App";
+import {Article, ExternalContent, Hr, ReactLink, ReactNavLink, Tag, Title, VanillaLink} from "./GeneralComponents";
+import {useLoaderData} from "react-router-dom";
+import {PlaceDescription} from "gedcomx-js";
+import {useContext, useEffect, useState} from "react";
+import {strings} from "../main";
+import {db} from "../backend/db";
+import {MapContainer, Marker, TileLayer} from "react-leaflet";
+import {LatLngExpression} from "leaflet";
+import {
+  Alias,
+  SubjectArticles,
+  SubjectMisc, SubjectSidebar
+} from "./GedcomXComponents";
+import {GDate} from "../backend/gedcomx-extensions";
+
+export function PlaceOverview() {
+  const places = useLoaderData() as PlaceDescription[];
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="🌎">{strings.gedcomX.placeDescription.places}</Title>);
+  }, [layoutContext]);
+
+  return <Main><Article>
+    <PlaceList places={places}/>
+  </Article></Main>
+}
+
+function PlaceList(props: { places: PlaceDescription[] }) {
+  return <ul>
+    {props.places?.map(place =>
+      <li key={place.id}><ReactNavLink to={`/places/${place.id}`}>
+        {`🌎 ${place.names[0].getValue()}`}</ReactNavLink>
+      </li>)}
+  </ul>;
+}
+
+export function PlaceView() {
+  const place = useLoaderData() as PlaceDescription;
+  const [others, setOthers] = useState([]);
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="🌎">{place.names[0].getValue()}</Title>)
+    layoutContext.setRightTitle(strings.gedcomX.placeDescription.places);
+  }, [layoutContext, place])
+
+  useEffect(() => {
+    db.places.toArray().then(sds => sds.map(sd => new PlaceDescription(sd))).then(setOthers);
+  }, [])
+
+  const hasData = place.names?.length > 1 || place.jurisdiction || place.latitude || place.longitude || place.temporalDescription || place.spatialDescription;
+  const hasSidebarContent = place.place || place.spatialDescription;
+  const coordinates: LatLngExpression = [place.latitude, place.longitude];
+
+  // TODO type, place, spatial description
+
+  return <>
+    <Main>
+      <section className="mx-auto w-fit flex flex-row gap-4">
+        {place.type && <Tag>{place.type}</Tag>}
+        {place.jurisdiction && <Tag>{strings.gedcomX.placeDescription.jurisdiction}: <ReactLink to={`/places/${place.jurisdiction.resource.substring(1)}`}>{place.jurisdiction.resource}</ReactLink></Tag>}
+        {place.temporalDescription && <Tag>{new GDate(place.temporalDescription.toJSON()).toString()}</Tag>}
+        <SubjectMisc subject={place}/>
+      </section>
+      <Article>
+        {!hasData && <p>{strings.errors.noData}</p>}
+        {place.names && <Alias aliases={place.names}/>}
+        {place.latitude && place.longitude && <ExternalContent>
+          <MapContainer center={coordinates} zoom={13} scrollWheelZoom={false}>
+            <TileLayer
+              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+              url="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png"/>
+            <Marker position={coordinates}/>
+          </MapContainer>
+        </ExternalContent>}
+      </Article>
+      <SubjectArticles subject={place}/>
+    </Main>
+    <Sidebar>
+      <PlaceList places={others}/>
+      {hasSidebarContent && <Hr/>}
+      {place.place && <div>
+        {strings.gedcomX.placeDescription.place}: <VanillaLink to={place.place.resource}>{place.place.resource}</VanillaLink>
+      </div>}
+      {place.spatialDescription && <div>
+        {strings.gedcomX.placeDescription.spatialDescription}: <VanillaLink to={place.spatialDescription.resource}>{place.spatialDescription.resource}</VanillaLink>
+      </div>}
+      <SubjectSidebar subject={place}/>
+    </Sidebar>
+  </>
+}
diff --git a/src/components/SearchField.tsx b/src/components/SearchField.tsx
index 115b4df4..b6f616f3 100644
--- a/src/components/SearchField.tsx
+++ b/src/components/SearchField.tsx
@@ -1,17 +1,21 @@
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import {strings} from "../main";
 import {db} from "../backend/db";
 import {useLiveQuery} from "dexie-react-hooks";
 import * as GedcomX from "gedcomx-js";
 import {Person} from "../backend/gedcomx-extensions";
-import "./Form.css";
 
 interface Props {
   onRefocus: (newFocus: GedcomX.Person) => void
 }
 
-function SearchField(props: Props) {
+export default function SearchField(props: Props) {
   const [hasError, setHasError] = useState(false);
+  const input = useRef<HTMLInputElement>();
+
+  const query = window.matchMedia("(max-width: 639px)");
+  const [isSmall, setIsSmall] = useState(query.matches);
+  query.addEventListener("change", event => setIsSmall(event.matches));
 
   useEffect(() => {
     // add keyboard shortcuts
@@ -20,60 +24,55 @@ function SearchField(props: Props) {
         case "f":
           if (event.ctrlKey) {
             event.preventDefault();
-            document.getElementById("input-name").focus()
+            input.current.focus();
           }
           break;
         case "Escape":
-          document.querySelector<HTMLElement>(":focus").blur();
+          input.current.blur();
       }
     });
   }, []);
 
   async function refocus(event) {
     event.preventDefault();
-    let name = document.querySelector<HTMLInputElement>("#input-name").value;
-    if (name) {
-      // find a person that matches the given name
-      let person = await db.personWithName(name.toLowerCase());
+    let name = input.current.value;
+    if (!name) return;
 
-      // if no person was found, throw error
-      setHasError(!person);
-      if (!person) {
-        window.alert(strings.searchField.noPersonFound);
-        return;
-      }
+    // find a person that matches the given name
+    let person = await db.personWithName(name);
 
-      console.log(`Assuming the person is ${person.fullName} with id ${person.getId()}`);
-      props.onRefocus(person);
+    // if no person was found, throw error
+    setHasError(!person);
+    if (!person) {
+      window.alert(strings.errors.noPersonFound);
+      return;
     }
+
+    console.log(`Assuming the person is ${person.fullName} with id ${person.getId()}`);
+    props.onRefocus(person);
   }
 
   function resetError() {
-    let name = document.querySelector<HTMLInputElement>("#input-name").value;
+    let name = input.current.value;
     if (!name) {
       setHasError(false);
     }
   }
 
-  const persons = useLiveQuery(async () => {
-    return db.persons.toArray().then(persons => persons.map(p => new Person(p)))
-  })
+  const persons = useLiveQuery(async () => db.persons.toArray()
+    .then(persons => persons.map(p => new Person(p))))
 
   return (
-    <form id="name-form" className="name-form search"
+    <form id="name-form" className={`max-w-fit rounded-full px-4 py-1 bg-white bg-opacity-50 dark:bg-opacity-10 ${hasError ? "bg-red-300" : ""}`}
           onSubmit={refocus}>
       <label htmlFor="input-name" lang="en" className="sr-only">{strings.searchField.searchLabel}</label>
-      <input id="input-name" list="names" type="search" placeholder={strings.searchField.searchHint} spellCheck="false" className={hasError ? "error" : ""}/>
-      <input className="emoji icon-only" type="submit" value="🔍" onInput={resetError}/>
-      <datalist id="names">
-        {
-          persons?.map(p =>
-            <option value={p.fullName} key={p.getId()}>{p.fullName}</option>
-          )
-        }
-      </datalist>
+      <input id="input-name" ref={input} list="names" type="search" placeholder={strings.searchField.searchHint} spellCheck="false" size={isSmall ? 12 : 20}
+             className="placeholder-neutral-600 dark:placeholder-neutral-400 dark:caret-white dark:text-white bg-transparent focus:outline-none"/>
+      <input className="font-normal ml-4" type="submit" value="🔍" onInput={resetError}/>
+      {persons && <datalist id="names">
+        {persons.map((p, i) =>
+          <option value={p.fullName} key={i}>{p.fullName}</option>)}
+      </datalist>}
     </form>
   );
 }
-
-export default SearchField;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
deleted file mode 100644
index 64bc70e5..00000000
--- a/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import {useEffect} from "react";
-
-export default function Sidebar(props) {
-  useEffect(() => {
-    let root = document.querySelector<HTMLDivElement>("#root");
-    root.classList.add("sidebar-visible");
-  }, [])
-
-  return <aside>{props.children}</aside>
-}
diff --git a/src/components/SourceDescriptions.tsx b/src/components/SourceDescriptions.tsx
new file mode 100644
index 00000000..70d4fcb1
--- /dev/null
+++ b/src/components/SourceDescriptions.tsx
@@ -0,0 +1,114 @@
+import {SourceDescription} from "../backend/gedcomx-extensions";
+import {filterLang, strings} from "../main";
+import {useLoaderData} from "react-router-dom";
+import {useContext, useEffect, useState} from "react";
+import {Alias, Attribution, Coverage, Identifiers, Note, SourceReference} from "./GedcomXComponents";
+import {
+  Article,
+  ExternalContent,
+  Hr,
+  Media,
+  ReactLink,
+  ReactNavLink,
+  Tag,
+  Title,
+  VanillaLink
+} from "./GeneralComponents";
+import {LayoutContext, Main, Sidebar} from "../App";
+import {db} from "../backend/db";
+
+export function SourceDescriptionOverview() {
+  const descriptions = useLoaderData() as SourceDescription[];
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="📚">{strings.gedcomX.sourceDescription.sourceDescriptions}</Title>);
+  }, [layoutContext])
+
+  return <Main><Article>
+    <SourcesList descriptions={descriptions}/>
+  </Article></Main>;
+}
+
+function SourcesList(props) {
+  return <ul>
+    {props.descriptions?.map(sd =>
+      <li key={sd.id}>
+        <ReactNavLink to={`/sources/${sd.getId()}`}>{`${sd.emoji} ${sd.title}`}</ReactNavLink>
+      </li>
+    )}
+  </ul>
+}
+
+export function SourceDescriptionView() {
+  const sourceDescription = useLoaderData() as SourceDescription;
+  const hasMedia = sourceDescription.mediaType && sourceDescription.about;
+  const [others, setOthers] = useState([]);
+  const layoutContext = useContext(LayoutContext);
+
+  useEffect(() => {
+    db.sourceDescriptions.toArray().then(sds => sds.map(sd => new SourceDescription(sd))).then(setOthers);
+    layoutContext.setHeaderChildren(<Title emoji={sourceDescription?.emoji}>
+      {sourceDescription.title ?? strings.gedcomX.sourceDescription.sourceDescription}
+    </Title>)
+    layoutContext.setRightTitle(strings.gedcomX.sourceDescription.sourceDescriptions);
+  }, [layoutContext, sourceDescription])
+
+  const componentOf = sourceDescription.getComponentOf();
+  let media;
+  if (hasMedia)
+    media = <Media mimeType={sourceDescription.mediaType} url={sourceDescription.about}
+                   alt={sourceDescription.getDescriptions().filter(filterLang)[0]?.getValue()}/>
+  const hasMisc = componentOf || sourceDescription.rights || sourceDescription.repository || sourceDescription.analysis;
+
+  return <>
+    <Main>
+      {hasMisc && <section className="mx-auto w-fit flex flex-wrap flex-row gap-4">
+        {componentOf && <Tag>
+          component of: <ReactLink to={`/sources/${componentOf.getDescription().substring(1)}`}>
+          {componentOf.getDescriptionId() ?? componentOf.getDescription()}</ReactLink>
+        </Tag>}
+        {sourceDescription.rights && sourceDescription.getRights().map(r => <Tag key={r.getResource()}>
+          rights: <VanillaLink to={r.getResource()}>{r.getResource()}</VanillaLink>
+        </Tag>)}
+        {sourceDescription.repository && <Tag>
+          repository: <VanillaLink to={sourceDescription.getRepository().getResource()}>
+          {sourceDescription.getRepository().getResource()}</VanillaLink>
+        </Tag>}
+        {sourceDescription.getMediator() && <Tag>
+          mediator: <ReactLink to={`/${sourceDescription.getMediator().getResource()}`}>
+          {sourceDescription.getMediator().getResource()}</ReactLink>
+        </Tag>}
+        {sourceDescription.getAnalysis() && <Tag>
+          <ReactLink to={`/documents/${sourceDescription.getAnalysis().resource.substring(1)}`}>Analysis</ReactLink>
+        </Tag>}
+      </section>}
+      <Article>
+        <Alias aliases={sourceDescription.getTitles()}/>
+        {hasMedia && <ExternalContent><figure className="mb-4 last:mb-0">{media}</figure></ExternalContent>}
+        {sourceDescription.getDescriptions().filter(filterLang).map((d, i) =>
+          <p key={i} className="mb-4 last:mb-0">{d.getValue()}</p>
+        )}
+        {sourceDescription.citations && <section>
+          <h2 className="font-bold">Citations</h2>
+          <ul className="list-disc pl-4">
+            {sourceDescription.getCitations()
+              .filter(filterLang)
+              .map((c, i) => <li key={i}>{c.getValue()}</li>)}
+          </ul>
+        </section>}
+      </Article>
+      {sourceDescription.getCoverage().map((c, i) => <Coverage coverage={c} key={i}/>)}
+      {sourceDescription.getNotes().filter(filterLang).map((n, i) => <Note note={n} key={i}/>)}
+      {sourceDescription.getSources().map((s, i) => <SourceReference reference={s} key={i}/>)}
+    </Main>
+    <Sidebar>
+      <SourcesList descriptions={others}/>
+      {sourceDescription.getAttribution() && <Hr/>}
+      <Attribution attribution={sourceDescription.getAttribution()}/>
+      {sourceDescription.getIdentifiers() && <Hr/>}
+      <Identifiers identifiers={sourceDescription.getIdentifiers()}/>
+
+    </Sidebar>
+  </>
+}
diff --git a/src/components/Statistics.css b/src/components/Statistics.css
deleted file mode 100644
index b58f6c71..00000000
--- a/src/components/Statistics.css
+++ /dev/null
@@ -1,40 +0,0 @@
-main#stats {
-  padding: 0 1rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(calc(225px + 2rem), 1fr));
-  grid-auto-columns: minmax(1fr, 4fr);
-  grid-auto-flow: dense;
-  justify-items: stretch;
-  gap: 1rem;
-}
-
-#stats > * {
-  margin: 0;
-}
-
-.graph svg {
-  display: block;
-  margin: auto auto .5rem;
-}
-
-article .visx-legend {
-  flex-wrap: wrap;
-}
-
-@media (prefers-color-scheme: dark) {
-  .visx-axis tspan {
-    fill: white;
-  }
-
-  .visx-axis line {
-    stroke: white;
-  }
-
-  path.visx-arc, line.visx-line {
-    stroke: gray;
-  }
-}
-
-article.landscape {
-  grid-column-end: span 2;
-}
diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx
index fcbf366e..09828904 100644
--- a/src/components/Statistics.tsx
+++ b/src/components/Statistics.tsx
@@ -1,13 +1,12 @@
-import "./Statistics.css";
-
 import * as React from "react";
-import {ReactNode, useEffect, useState} from "react";
-import {baseUri, Confidence} from "../backend/gedcomx-enums";
+import {ReactNode, useContext, useEffect, useState} from "react";
+import {baseUri, Confidence, GenderTypes} from "../backend/gedcomx-enums";
 import {LineRadial, Pie} from "@visx/shape";
 import {scaleLinear, scaleLog, scaleOrdinal} from "@visx/scale";
 import {
   getBirthDeathMonthOverYears,
-  getBirthPlace, getConfidence,
+  getBirthPlace,
+  getConfidence,
   getGenderPerGeneration,
   getLifeExpectancyOverYears,
   getMarriageAge,
@@ -21,23 +20,36 @@ import {NaturalEarth} from "@visx/geo";
 import {GridPolar} from "@visx/grid";
 import {Group} from "@visx/group";
 import {Wordcloud} from "@visx/wordcloud";
-import {AreaSeries, AreaStack, Axis, BarSeries, BarStack, GlyphSeries, Grid, Tooltip, XYChart} from "@visx/xychart";
+import {
+  AreaSeries,
+  AreaStack,
+  Axis,
+  BarSeries,
+  BarStack,
+  GlyphSeries,
+  Grid,
+  Tooltip,
+  XYChart,
+  lightTheme,
+  darkTheme
+} from "@visx/xychart";
 import {ViolinPlot} from "@visx/stats";
 import {AxisLeft} from "@visx/axis";
 import {hasData, strings} from "../main";
 import {Legend} from "@visx/visx";
-import Header from "./Header";
 import {useLiveQuery} from "dexie-react-hooks";
 import NoData from "./NoData";
-import {Loading} from "./Loading";
+import {LayoutContext, Main} from "../App";
+import {Title, Loading} from "./GeneralComponents";
 
 const width = 200, height = 200;
 const radius = Math.min(width, height) / 2;
 
-function Stat(props: { title: string, legend?: ReactNode, className?: string, children }) {
-  return <article className={"graph " + props.className}>
-    <h1>{props.title}</h1>
-    <div>
+function Stat(props: { title: string, legend?: ReactNode, landscape?: boolean, children }) {
+  return <article
+    className={`bg-white bg-opacity-50 dark:bg-opacity-10 rounded-2xl p-4 ${props.landscape ? "col-span-2" : ""}`}>
+    <h1 className="font-bold text-lg text-center mb-4">{props.title}</h1>
+    <div className="mx-auto w-fit">
       {props.children}
     </div>
     {props.legend}
@@ -46,46 +58,59 @@ function Stat(props: { title: string, legend?: ReactNode, className?: string, ch
 
 function GenderStats() {
   const data = useLiveQuery(getGenderPerGeneration);
+  const layoutContext = useContext(LayoutContext);
+
+  if (!data) return <Stat title={strings.gedcomX.person.gender}>
+    <Loading text={strings.statistics.loading}/>
+  </Stat>
 
-  if (!data) return <Stat title={strings.gedcomX.gender}>
-    <Loading text={strings.loading.statistic}/>
+  if (data.length === 0) return <Stat title={strings.gedcomX.person.gender}>
+    {strings.errors.noData}
   </Stat>
 
-  let keys = Array.from(new Set(data.map(d => Object.keys(d.gender)).flat())).map(g => g.substring(baseUri.length));
+  let sorted = [GenderTypes.Female, GenderTypes.Male, GenderTypes.Intersex, GenderTypes.Unknown];
+  let keys = Array.from(new Set(data.map(d => Object.keys(d.gender)).flat()))
+    .sort((a, b) => sorted.indexOf(a as GenderTypes) - sorted.indexOf(b as GenderTypes));
+
   let legend = <Legend.LegendOrdinal scale={scaleOrdinal({
-    domain: keys.map(k => strings.gedcomX.types.gender[k]),
+    domain: keys.map(k => strings.gedcomX.person.genderTypes[k.substring(baseUri.length)]),
     range: d3.schemeSet1.map(c => c.toString())
-  })} direction={"row"}/>
+  })} direction={"row"} className={"flex-wrap"}/>
 
-  return <Stat title={strings.gedcomX.gender} legend={legend}>
+  return <Stat title={strings.gedcomX.person.gender} legend={legend}>
     <XYChart height={height} width={width}
              xScale={{type: "linear"}} yScale={{type: "band", padding: 0.2, reverse: true}}
-             margin={{top: 0, left: 45, bottom: 0, right: 0}}>
+             margin={{top: 0, left: 45, bottom: 0, right: 0}} theme={layoutContext.isDark ? darkTheme : lightTheme}>
       <BarStack offset="silhouette">
         {keys.map(key => <BarSeries
           data={data} dataKey={key} key={key}
-          xAccessor={d => d.gender[baseUri + key]} yAccessor={d => d.generation}
+          xAccessor={d => d.gender[key]} yAccessor={d => d.generation}
           colorAccessor={() => d3.schemeSet1[keys.indexOf(key)]}
         />)}
       </BarStack>
-      <Axis orientation="left" label={strings.gedcomX.types.fact.person.GenerationNumber} hideAxisLine={true} hideTicks={true}/>
+      <Axis orientation="left" label={strings.gedcomX.person.factTypes.GenerationNumber} hideAxisLine={true}
+            hideTicks={true}/>
     </XYChart>
   </Stat>
 }
 
 function ReligionStats() {
+  const layoutContext = useContext(LayoutContext);
   let data = useLiveQuery(getReligionPerYear);
-  if (!data) return <Stat title={strings.gedcomX.types.fact.person.Religion}>
-    <Loading text={strings.loading.statistic}/>
+  if (!data) return <Stat title={strings.gedcomX.person.factTypes.Religion} landscape>
+    <Loading text={strings.statistics.loading}/>
+  </Stat>
+  if (data.length === 0) return <Stat title={strings.gedcomX.person.factTypes.Religion} landscape>
+    {strings.errors.noData}
   </Stat>
 
   let keysUnfiltered = Array.from(new Set(data.map(d => Object.keys(d.religion)).flat()));
   let keys = keysUnfiltered.filter(r => r !== "");
 
-  return <Stat title={strings.gedcomX.types.fact.person.Religion} className="landscape">
+  return <Stat title={strings.gedcomX.person.factTypes.Religion} landscape>
     <XYChart height={height} width={width * 2}
              xScale={{type: "time"}} yScale={{type: "linear"}}
-             margin={{top: 1, left: 15, right: 0, bottom: 25}}>
+             margin={{top: 1, left: 15, right: 0, bottom: 25}} theme={layoutContext.isDark ? darkTheme : lightTheme}>
       <AreaStack order="ascending">
         {keys.map(key =>
           <AreaSeries
@@ -113,7 +138,7 @@ function OccupationStats() {
     range: d3.schemeSet3.map(c => c.toString())
   });
 
-  return <Stat title={strings.gedcomX.types.fact.person.Occupation}>
+  return <Stat title={strings.gedcomX.person.factTypes.Occupation}>
     <svg width={width} height={height}>
       <Pie
         data={data}
@@ -131,7 +156,7 @@ function OccupationStats() {
 function LocationStats() {
   let data = useLiveQuery(getBirthPlace);
 
-  return <Stat title={strings.gedcomX.types.fact.person.Heimat}>
+  return <Stat title={strings.gedcomX.person.factTypes.Heimat}>
     <NaturalEarth
       data={data}
       center={[530, -50]}
@@ -141,8 +166,13 @@ function LocationStats() {
 
 function NameStats(props: { nameType: "First" | "Last" }) {
   let data = useLiveQuery(async () => getNames(props.nameType), [props.nameType]);
-  if (!data) return <Stat title={strings.gedcomX.firstName}>
-    <Loading text={strings.loading.statistic}/>
+  const title = props.nameType === "First" ? strings.gedcomX.person.firstName : strings.gedcomX.person.namePartTypes.Surname;
+
+  if (!data) return <Stat title={title}>
+    <Loading text={strings.statistics.loading}/>
+  </Stat>
+  if (data.length === 0) return <Stat title={title}>
+    {strings.errors.noData}
   </Stat>
 
   const colors = scaleOrdinal({
@@ -150,7 +180,7 @@ function NameStats(props: { nameType: "First" | "Last" }) {
     range: d3.schemeSet2.map(c => c.toString())
   });
 
-  return <Stat title={props.nameType === "First" ? strings.gedcomX.firstName : strings.gedcomX.types.namePart.Surname}>
+  return <Stat title={title}>
     <Wordcloud
       height={height}
       width={width}
@@ -185,8 +215,14 @@ function NameStats(props: { nameType: "First" | "Last" }) {
 
 function BirthOverYearStats(props: { type: "Birth" | "Death" }) {
   let data = useLiveQuery(async () => getBirthDeathMonthOverYears(props.type), [props.type]);
-  if (!data) return <Stat title={strings.gedcomX.gender}>
-    <Loading text={strings.loading.statistic}/>
+  const layoutContext = useContext(LayoutContext);
+  const title = props.type === "Birth" ? strings.statistics.birth_month : strings.statistics.death_month;
+
+  if (!data) return <Stat title={title}>
+    <Loading text={strings.statistics.loading}/>
+  </Stat>
+  if (data.length === 0) return <Stat title={title}>
+    {strings.errors.noData}
   </Stat>
 
   let angleScale = scaleLinear({
@@ -198,15 +234,19 @@ function BirthOverYearStats(props: { type: "Birth" | "Death" }) {
     range: [0, radius]
   })
 
-  return <Stat title={props.type === "Birth" ? strings.statistics.birth_month : strings.statistics.death_month}>
+  const strokeColor = layoutContext.isDark ? "#868686" : "#afafaf";
+
+  return <Stat title={title}>
     <svg height={height} width={width}>
       <Group top={height / 2} left={width / 2}>
-        <GridPolar scaleAngle={angleScale} scaleRadial={radiusScale} outerRadius={radius}/>
+        <GridPolar scaleAngle={angleScale} scaleRadial={radiusScale} outerRadius={radius}
+                   lineStyleRadial={{stroke: strokeColor}} lineStyleAngle={{stroke: strokeColor}}/>
         <LineRadial
           data={data}
           angle={(_, i) => angleScale(i) ?? 0}
           radius={d => radiusScale(d) ?? 0}
           stroke={d3.schemeSet1[4]}
+          strokeWidth={2}
           curve={curveLinearClosed}
         />
       </Group>
@@ -215,15 +255,18 @@ function BirthOverYearStats(props: { type: "Birth" | "Death" }) {
 }
 
 function LifeExpectancy() {
+  const layoutContext = useContext(LayoutContext);
   let data = useLiveQuery(getLifeExpectancyOverYears);
-  if (!data) return <Stat title={strings.gedcomX.gender}>
-    <Loading text={strings.loading.statistic}/>
+  if (!data) return <Stat title={strings.statistics.lifeExpectancy} landscape>
+    <Loading text={strings.statistics.loading}/>
+  </Stat>
+  if (data.length === 0) return <Stat title={strings.statistics.lifeExpectancy} landscape>
+    {strings.errors.noData}
   </Stat>
-  //console.debug(data)
 
-  return <Stat title={strings.statistics.lifeExpectancy} className="landscape">
+  return <Stat title={strings.statistics.lifeExpectancy} landscape>
     <XYChart height={height} width={width * 2 + 60} xScale={{type: "time"}} yScale={{type: "linear"}}
-             margin={{top: 5, left: 30, bottom: 25, right: 5}}>
+             margin={{top: 5, left: 30, bottom: 25, right: 5}} theme={layoutContext.isDark ? darkTheme : lightTheme}>
       <Grid/>
       <GlyphSeries data={data} dataKey={"Line 1"} xAccessor={d => d.birth} yAccessor={d => d.age}/>
       <Tooltip renderTooltip={({tooltipData}) =>
@@ -235,9 +278,13 @@ function LifeExpectancy() {
 }
 
 function MarriageAge() {
+  const layoutContext = useContext(LayoutContext);
   let data = useLiveQuery(getMarriageAge);
-  if (!data) return <Stat title={strings.gedcomX.gender}>
-    <Loading text={strings.loading.statistic}/>
+  if (!data) return <Stat title={strings.statistics.marriageAge}>
+    <Loading text={strings.statistics.loading}/>
+  </Stat>
+  if (data.length === 0) return <Stat title={strings.statistics.marriageAge}>
+    {strings.errors.noData}
   </Stat>
 
   let yScale = scaleLinear({
@@ -245,36 +292,49 @@ function MarriageAge() {
     range: [height, 0]
   })
 
+  console.debug(lightTheme.axisStyles.y.left.tickLabel);
+
   return <Stat title={strings.statistics.marriageAge}>
     <svg height={height} width={width}>
       <ViolinPlot valueScale={yScale} data={data} fill={"#6ca5e5"} width={width}/>
-      <AxisLeft scale={yScale} left={25}/>
+      <AxisLeft
+        scale={yScale} left={25}
+        stroke={layoutContext.isDark ? darkTheme.axisStyles.y.left.axisLine.stroke : lightTheme.axisStyles.y.left.axisLine.stroke}
+        tickStroke={layoutContext.isDark ? darkTheme.axisStyles.y.left.tickLine.stroke : lightTheme.axisStyles.y.left.tickLine.stroke}
+        tickLabelProps={{
+          style: layoutContext.isDark ? darkTheme.axisStyles.y.left.tickLabel.style : lightTheme.axisStyles.y.left.tickLabel.style,
+          fill: layoutContext.isDark ? darkTheme.axisStyles.y.left.tickLabel.fill : lightTheme.axisStyles.y.left.tickLabel.fill,
+        }}
+      />
     </svg>
   </Stat>
 }
 
 function ConfidenceStats() {
   let data = useLiveQuery(getConfidence);
-  if (!data) return <Stat title={strings.gedcomX.gender}>
-    <Loading text={strings.loading.statistic}/>
+  if (!data) return <Stat title={strings.gedcomX.conclusion.confidence}>
+    <Loading text={strings.statistics.loading}/>
   </Stat>
+  if (data.length === 0) return <Stat title={strings.gedcomX.conclusion.confidence}>
+    {strings.errors.noData}
+  </Stat>
+
+  console.debug(data);
 
   let colorScale = scaleOrdinal({
     domain: [Confidence.Low, Confidence.Medium, Confidence.High],
     range: d3.schemeRdYlGn[3].map(c => c.toString())
   });
 
-  console.debug(data);
-
-  return <Stat title={strings.gedcomX.confidence}>
+  return <Stat title={strings.gedcomX.conclusion.confidence}>
     <svg width={width} height={height}>
       <Pie
         data={data}
         outerRadius={radius}
-        top={height/2}
-        left={width/2}
+        top={height / 2}
+        left={width / 2}
         pieValue={d => d.count}
-        fill={d => d.data.value === "null" ? "none" : colorScale(d.data.value as Confidence)}
+        fill={d => d.data.value === "null" || d.data.value === "undefined" ? "none" : colorScale(d.data.value as Confidence)}
         stroke={"var(--background)"}
         strokeWidth={".2rem"}
       />
@@ -284,24 +344,33 @@ function ConfidenceStats() {
 
 export default function Statistics() {
   const [dataExists, setDataExists] = useState(false);
+  const layoutContext = useContext(LayoutContext);
 
   useEffect(() => {
     hasData().then(value => setDataExists(value));
   });
 
+  useEffect(() => {
+    layoutContext.setHeaderChildren(<Title emoji="📊">
+      {strings.statistics.title}
+    </Title>);
+    layoutContext.setRightTitle("");
+  }, [layoutContext]);
+
   return <>
-    <Header/>
-    {dataExists ?
-    <main id="stats">
-      <ConfidenceStats/>
-      <GenderStats/>
-      <ReligionStats/>
-      <NameStats nameType={"First"}/>
-      <NameStats nameType={"Last"}/>
-      <BirthOverYearStats type={"Birth"}/>
-      <BirthOverYearStats type={"Death"}/>
-      <LifeExpectancy/>
-      <MarriageAge/>
-    </main> : <NoData/>}
+      <Main skipCleanup>
+        {dataExists ?
+        <div className="grid grid-flow-dense gap-4 justify-stretch sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <ConfidenceStats/>
+          <GenderStats/>
+          <ReligionStats/>
+          <NameStats nameType={"First"}/>
+          <NameStats nameType={"Last"}/>
+          <BirthOverYearStats type={"Birth"}/>
+          <BirthOverYearStats type={"Death"}/>
+          <LifeExpectancy/>
+          <MarriageAge/>
+        </div> : <NoData/>}
+      </Main>
   </>
 }
diff --git a/src/components/TreeView.tsx b/src/components/TreeView.tsx
index 336b95b0..d550aeee 100644
--- a/src/components/TreeView.tsx
+++ b/src/components/TreeView.tsx
@@ -7,9 +7,10 @@ import {EventType} from "webcola";
 import * as GedcomX from "gedcomx-js";
 import {ColorMode, ViewGraph, ViewMode} from "../backend/ViewGraph";
 import {GraphFamily, GraphPerson} from "../backend/graph";
-import {Loading} from "./Loading";
+import {Loading} from "./GeneralComponents";
 import {strings} from "../main";
-import {FocusPersonContext} from "./View";
+import {FocusPersonContext} from "./Persons";
+import {Confidence} from "../backend/gedcomx-enums";
 
 const d3cola = cola.d3adaptor(d3);
 
@@ -61,7 +62,7 @@ function TreeView(props: Props) {
     }
     setupCola()
       .then(() => animateTree(viewGraph, props.colorMode, isLandscape, isDarkColorscheme));
-  }, [viewGraph, viewGraphState, props.colorMode, isLandscape, isDarkColorscheme]);
+  }, [viewGraph, viewGraphState, props.colorMode, isLandscape, isDarkColorscheme, props.focusHidden]);
 
   function onEtcClicked(family: GraphFamily) {
     setViewGraphState(LoadingState.LOADING);
@@ -91,16 +92,16 @@ function TreeView(props: Props) {
   }
 
   if (viewGraphState !== LoadingState.FINISHED) {
-    return <Loading text={strings.loading.familyTree} value={viewGraphProgress}/>
+    return <Loading text={strings.tree.loading} value={viewGraphProgress}/>
   }
 
   return (
-    <svg id="family-tree" xmlns="http://www.w3.org/2000/svg">
-      <rect id='background' width='100%' height='100%'/>
+    <svg id="family-tree" xmlns="http://www.w3.org/2000/svg" className="flex-grow rounded-b-2xl">
+      <rect id='background' width='100%' height='100%' className="fill-white dark:fill-black"/>
       <g id="vis" transform={currentTransform}>
         <g id="links">
           {viewGraph.links.map((l, i) =>
-            <path className="link" key={i}/>)}
+            <path className="link stroke-2 stroke-black dark:stroke-white fill-none" key={i}/>)}
         </g>
         <g id="nodes">
           {viewGraph.nodes.filter(n => n.type === "family").map((r: GraphFamily, i) =>
@@ -160,7 +161,6 @@ async function animateTree(graph: ViewGraph, colorMode: ColorMode, isLandscape:
   } else {
     d3cola.flowLayout("y", config.gridSize * 3)
   }
-  // todo this is a problem
   d3cola.start(iterations, 0, iterations);
 
   let nodesLayer = d3.select("#nodes");
@@ -186,42 +186,63 @@ async function animateTree(graph: ViewGraph, colorMode: ColorMode, isLandscape:
       const nameColor = d3.scaleOrdinal(last_names, d3.schemeSet3)
       personNode
         .select(".bg")
+        .classed("border-none", true)
         .style("background-color", d => nameColor(d.getName().split(" ").reverse()[0]))
-        .style("color", "black")
+        .classed("text-black", true)
       personNode
         .select(".focused")
         .style("box-shadow", d => `0 0 1rem ${nameColor(d.getName().split(" ").reverse()[0])}`);
       break;
     }
     case ColorMode.AGE: {
-      const ageColor = d3.scaleSequential()
-        .domain([0, 120])
-        .interpolator((d) => darkMode ? d3.interpolateYlGn(d) : d3.interpolateYlGn(1 - d))
+      const ageColor = d => {
+        if (!d) return "";
+        return d3.scaleSequential()
+          .domain([0, 120])
+          .interpolator((d) => darkMode ? d3.interpolateYlGn(d) : d3.interpolateYlGn(1 - d))(d)
+      }
       personNode
         .select(".bg")
-        .style("background-color", (d: GraphPerson) => d.data.isLiving ? ageColor(d.data.getAgeAt(new Date())) : "var(background-higher)")
-        .style("color", (d: GraphPerson) =>
-          (d.data.getAgeAt(new Date()) < 70 && d.data.isLiving) ? "var(--background)" : "var(--foreground)")
-        .style("border-color", (d: GraphPerson) => d.data.isLiving ? "var(--background-higher)" : ageColor(d.data.getAgeAt(new Date())))
-        .style("border-style", (d: GraphPerson) => d.data.isLiving ? "" : "solid");
+        .style("background-color", (d: GraphPerson) => d.data.isLiving ? ageColor(d.data.getAgeAt(new Date())) : "")
+        .classed("text-black", (d: GraphPerson) => darkMode && d.data.isLiving)
+        .classed("text-white", (d: GraphPerson) => !darkMode && d.data.isLiving && d.data.getAgeAt(new Date()) < 70)
+        .style("border-color", (d: GraphPerson) => d.data.isLiving ? "" : ageColor(d.data.getAgeAt(new Date())))
+        .style("border-style", (d: GraphPerson) => d.data.isLiving ? "none" : "solid");
       personNode
         .select(".focused")
-        .style("box-shadow", d => `0 0 1rem ${ageColor(d.data.getAgeAt(new Date()))}`);
+        .style("box-shadow", d => `0 0 1rem ${d.data.isLiving ? ageColor(d.data.getAgeAt(new Date())) : ""}`);
       break;
     }
     case ColorMode.GENDER: {
-      const genderColor = d3.scaleOrdinal(["female", "male", "intersex", "unknown"], d3.schemeSet1);
+      const genderColor = d => {
+        if (d === "unknown") return "";
+        return d3.scaleOrdinal(["female", "male", "intersex"], d3.schemeSet1)(d)
+      };
       personNode
         .select(".bg")
-        .style("background-color", (d: GraphPerson) => d.data.isLiving ? genderColor(d.getGender()) : "var(--background-higher)")
-        .style("border-color", (d: GraphPerson) => d.data.isLiving ? "var(--background-higher)" : genderColor(d.getGender()))
-        .style("border-style", (d: GraphPerson) => d.data.isLiving ? "" : "solid")
-        .style("color", (d: GraphPerson) => d.data.isLiving && matchMedia("(prefers-color-scheme: light)").matches ? "var(--background)" : "var(--foreground)")
+        .style("background-color", (d: GraphPerson) => d.data.isLiving ? genderColor(d.getGender()) : "")
+        .style("border-color", (d: GraphPerson) => genderColor(d.getGender()))
+        .style("border-style", (d: GraphPerson) => d.data.isLiving ? "none" : "solid")
+        .classed("text-white", d => !darkMode && d.data.isLiving && d.getGender() !== "unknown")
       personNode
         .select(".focused")
         .style("box-shadow", d => `0 0 1rem ${genderColor(d.getGender())}`);
       break;
     }
+    case ColorMode.CONFIDENCE: {
+      const confidenceColor = d => {
+        if (!d) return "";
+        return d3.scaleOrdinal([Confidence.Low, Confidence.Medium, Confidence.High], d3.schemeRdYlGn[3])(d)
+      }
+      personNode
+        .select(".bg")
+        .classed("border-none", true)
+        .style("background-color", d => confidenceColor(d.data.getConfidence() as Confidence))
+        .classed("text-black", true);
+      personNode
+        .select(".focused")
+        .style("box-shadow", d => `0 0 1rem ${confidenceColor(d.data.getConfidence() as Confidence)}`);
+    }
   }
 
   personNode
diff --git a/src/components/View.css b/src/components/View.css
deleted file mode 100644
index fca07f2d..00000000
--- a/src/components/View.css
+++ /dev/null
@@ -1,155 +0,0 @@
-#family-tree-container {
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  margin: 0;
-  max-width: none;
-  padding: 0;
-}
-
-#family-tree {
-  --grid-size: 16px;
-  margin: 0;
-  grid-area: main;
-  width: 100%;
-  height: 100%;
-}
-
-#family-tree:hover {
-  cursor: grab;
-}
-
-#family-tree:active {
-  cursor: grabbing;
-}
-
-#family-tree text {
-  fill: var(--foreground);
-  font-size: var(--grid-size);
-  text-anchor: middle;
-  stroke: none;
-  user-select: none;
-}
-
-.link {
-  fill: none;
-  stroke: var(--foreground);
-  stroke-width: .2rem;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  opacity: 0;
-}
-
-.etc {
-  opacity: 0;
-}
-
-.etc, .partnerNode *:not(.marriageDate) {
-  fill: var(--background-higher);
-  text-anchor: middle;
-  cursor: pointer;
-}
-
-.partnerNode.locked circle {
-  cursor: not-allowed;
-}
-
-#family-tree .partnerNode .marriageDate {
-  text-anchor: end;
-}
-
-.infoBackground {
-  fill: var(--background);
-}
-
-#background {
-  fill: transparent;
-  stroke: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  #family-tree-container {
-    background: black;
-  }
-}
-
-@media print {
-  .person .bg {
-    border: solid;
-  }
-
-  .person .focused {
-    font-weight: bold;
-  }
-
-  .partnerNode circle, .partnerNode :not(.marriageDate) {
-    visibility: hidden;
-  }
-
-  .etc, .partnerNode :not(.marriageDate) {
-    fill: var(--background);
-    stroke: var(--foreground-secondary);
-    border: var(--foreground-secondary);
-  }
-}
-
-/* Person node styles */
-.person {
-  color: white;
-  overflow: visible;
-  cursor: pointer;
-  font-size: var(--grid-size);
-  user-select: none;
-  opacity: 0;
-}
-
-.person p {
-  margin: 0;
-  text-align: center;
-  line-height: 1.25;
-}
-
-.person .bg {
-  border-radius: 1.125rem;
-  border-width: .2rem;
-  padding: .5rem .75rem;
-  border-color: var(--background-higher);
-  background-color: var(--background-higher);
-  transition: scale .5s;
-}
-
-.person:hover .bg {
-  scale: 1.05;
-}
-
-/*View option styles*/
-#view-all {
-  display: flex;
-  align-items: baseline;
-  max-width: 100vw;
-  overflow-x: auto;
-  overflow-y: clip;
-  flex-wrap: nowrap;
-  gap: 1rem;
-}
-
-#view-all > * {
-  margin-left: 1rem;
-  display: flex;
-  align-items: baseline;
-}
-
-#view-all > :last-child {
-  margin-right: 1rem;
-}
-
-#view-all div label {
-  white-space: nowrap;
-}
-
-#file-buttons {
-  flex-grow: 1;
-  justify-content: right;
-  font-size: 1.4rem;
-}
diff --git a/src/components/View.tsx b/src/components/View.tsx
deleted file mode 100644
index e8608bd1..00000000
--- a/src/components/View.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from "react";
-import {createContext, useEffect, useState} from "react";
-import {getUrlOption, strings} from "../main";
-import "./View.css";
-import {ColorMode, ViewMode} from "../backend/ViewGraph";
-import TreeView from "./TreeView";
-import InfoPanel from "./InfoPanel";
-import Header from "./Header";
-import SearchField from "./SearchField";
-import {Person} from "../backend/gedcomx-extensions";
-import {parseFile, saveDataAndRedirect} from "./Form";
-import {db} from "../backend/db";
-
-export const FocusPersonContext = createContext<Person>(null);
-
-function ViewOptions(props) {
-  let fileInput = React.createRef<HTMLInputElement>();
-
-  return (
-    <form id="view-all">
-      <div>
-        <label htmlFor="view-selector">{strings.viewOptions.filter.label}</label>
-        <select id="view-selector" className="button inline all" defaultValue={props.view}
-                onChange={props.onViewChanged}>
-          <option value={ViewMode.DEFAULT}>{strings.viewOptions.filter.default}</option>
-          <option value={ViewMode.DESCENDANTS}>{strings.viewOptions.filter.descendants}</option>
-          <option value={ViewMode.ANCESTORS}>{strings.viewOptions.filter.ancestors}</option>
-          <option value={ViewMode.LIVING}>{strings.viewOptions.filter.living}</option>
-          <option value={ViewMode.ALL}>{strings.viewOptions.filter.all}</option>
-        </select>
-      </div>
-
-      <div>
-        <label htmlFor="color-selector">{strings.viewOptions.color.label}</label>
-        <select id="color-selector" className="button inline all" defaultValue={props.colorMode}
-                onChange={props.onColorChanged}>
-          <option value={ColorMode.GENDER}>{strings.gedcomX.gender}</option>
-          <option value={ColorMode.NAME}>{strings.gedcomX.types.namePart.Surname}</option>
-          <option value={ColorMode.AGE}>{strings.gedcomX.qualifiers.fact.Age}</option>
-        </select>
-      </div>
-
-      <div id="file-buttons">
-        <input type="file" hidden ref={fileInput} accept="application/json"
-               onChange={() => parseFile(fileInput.current.files[0]).then(saveDataAndRedirect)}/>
-        <button className="icon-only" onClick={e => {
-          e.preventDefault();
-          fileInput.current.click();
-        }}>📁
-        </button>
-      </div>
-    </form>
-  );
-}
-
-function View() {
-  const [viewMode, setViewMode] = useState(getUrlOption("view", ViewMode.DEFAULT));
-  const [colorMode, setColorMode] = useState(getUrlOption("colorMode", ColorMode.GENDER));
-  const [focusPerson, setFocus] = useState<Person>(null);
-  const [focusHidden, hideFocus] = useState(false);
-
-  useEffect(() => {
-    let url = new URL(window.location.href);
-    let id = url.hash.substring(1);
-    db.personWithId(id)
-      .catch(() => db.persons.toCollection().first().then(p => new Person(p)))
-      .then(p => setFocus(p));
-  }, []);
-
-  useEffect(() => {
-    let root = document.querySelector<HTMLDivElement>("#root");
-    if (focusHidden) {
-      root.classList.remove("sidebar-visible");
-    } else {
-      root.classList.add("sidebar-visible");
-    }
-  }, [focusHidden])
-
-  function onViewChanged(e) {
-    let view = (e.target as HTMLSelectElement).value;
-
-    let url = new URL(window.location.href);
-    if (view === ViewMode.DEFAULT) {
-      url.searchParams.delete("view");
-    } else {
-      url.searchParams.set("view", view);
-    }
-    window.history.pushState({}, "", url.toString());
-
-    setViewMode(view as ViewMode);
-  }
-
-  function onColorChanged(e) {
-    let colorMode = (e.target as HTMLSelectElement).value;
-
-    let url = new URL(window.location.href);
-    if (colorMode === ColorMode.GENDER) {
-      url.searchParams.delete("colorMode");
-    } else {
-      url.searchParams.set("colorMode", colorMode);
-    }
-    window.history.pushState({}, "", url.toString());
-
-    setColorMode(colorMode as ColorMode);
-  }
-
-  function onRefocus(newFocus: Person) {
-    if (newFocus.getId() === focusPerson.getId()) {
-      hideFocus(!focusHidden)
-      return;
-    }
-
-    let url = new URL(window.location.href);
-    url.hash = newFocus.getId();
-    window.history.pushState({}, "", url.toString());
-
-    hideFocus(false);
-    setFocus(newFocus);
-  }
-
-  return (
-    <>
-      <Header>
-        <SearchField onRefocus={onRefocus}/>
-      </Header>
-      <FocusPersonContext.Provider value={focusPerson}>
-        {!focusHidden && <InfoPanel />}
-      </FocusPersonContext.Provider>
-      <main>
-        <article id="family-tree-container">
-          <ViewOptions view={viewMode} colorMode={colorMode} onViewChanged={onViewChanged}
-                       onColorChanged={onColorChanged}/>
-          <FocusPersonContext.Provider value={focusPerson}>
-            <TreeView colorMode={colorMode} focusHidden={focusHidden}
-                      onRefocus={onRefocus} viewMode={viewMode}/>
-          </FocusPersonContext.Provider>
-        </article>
-      </main>
-    </>
-  );
-}
-
-export default View;
diff --git a/src/config.ts b/src/config.ts
index dbb46634..a7e1d9c6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,7 +1,5 @@
 // configuration variables
 const config = {
-  // language to use
-  browserLang: window.navigator.language.substring(0, 2),
   gridSize: 32,
   // distance between nodes
   margin: 20,
diff --git a/src/index.css b/src/index.css
index 1a9b7c0f..457d030b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,321 +1,97 @@
-/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
-/*
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
-
-html {
-  --foreground: black;
-  --foreground-secondary: #595959;
-  --background: white;
-  --background-higher: #d2d2d2;
-  --background-lower: #b6b6b6;
-  --lines: #b6b6b6;
-  --primary: #366120;
-  --secondary: yellow;
-  --positive-green: #91ff91;
-  --warning-foreground: #595900;
-  --warning-background: #ffff91;
-  --error-foreground: #c00;
-  --error-background: #ffe1e6;
-
-  height: 100vh;
-  width: 100vw;
+@media (prefers-color-scheme: light) {
+  :root {
+    --background-color: #D2E8D2;
+  }
 }
 
-/*
- * Remove text-shadow in selection highlight:
- * https://twitter.com/miketaylr/status/12228805301
- *
- * Vendor-prefixed and regular ::selection selectors cannot be combined:
- * https://stackoverflow.com/a/16982510/7133471
- *
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
-  background: var(--primary);
-  text-shadow: none;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #182118;
+  }
 }
 
-::selection {
-  background: var(--primary);
-  text-shadow: none;
+:root {
+  background: var(--background-color);
 }
 
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid var(--lines);
-  margin: 1rem 0;
-  padding: 0;
+#root {
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  gap: 1rem;
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  padding: .5rem 0;
+  font-family: sans-serif;
 }
 
-/*
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-  vertical-align: middle;
+.partnerNode text, .etc text {
+  text-anchor: middle;
 }
 
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
+text.marriageDate {
+  text-anchor: end;
 }
 
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
-  resize: vertical;
+a.active {
+  background: rgba(255, 255, 255, 50%);
 }
 
-body {
-  height: 100%;
-  width: 100%;
+dialog {
+  background: var(--background-color);
 }
 
-:focus-visible {
-  border: solid var(--primary);
-  border-radius: .5em;
+dialog::backdrop {
+  backdrop-filter: blur(1rem);
+  background: rgba(0, 0, 0, 0.5);
 }
 
-
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/*
- * Hide visually and from screen readers
- */
-
-.hidden,
-[hidden] {
-  display: none !important;
+@media (prefers-color-scheme: dark) {
+  a.active {
+    background: rgba(255, 255, 255, 10%);
+  }
 }
 
-/*
- * Hide only visually, but have it available for screen readers:
- * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- *
- * 1. For long content, line feeds are not interpreted as spaces and small width
- *    causes content to wrap 1 word per line:
- *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
- */
-
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-  /* 1 */
+#map, .leaflet-container {
+  height: 500px;
+  border-radius: 1rem;
 }
 
-/*
- * Extends the .sr-only class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
-
-.sr-only.focusable:active,
-.sr-only.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
+progress::-moz-progress-bar, progress::-webkit-progress-bar {
+  /*TODO check webkit styling*/
+  background: #22c55e;
+  border-radius: 999px;
 }
 
-/*
- * Hide visually and from screen readers, but maintain layout
- */
-
-.invisible {
-  visibility: hidden;
+progress:indeterminate::-moz-progress-bar {
+  animation: spin 2s linear infinite;
 }
 
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
+@keyframes spin {
+  from { transform: translate(-100%); }
+  to { transform: translate(100%); }
 }
 
-.clearfix::after {
-  clear: both;
+meter {
+  background-image: none;
 }
 
-/*
- * Fixes emojis being monochromatic rather than colored on Microsoft Edge
- */
-.emoji {
-  font-weight: normal !important;
+*::-moz-meter-bar {
+  background: #0891b2;
 }
 
-@media (prefers-color-scheme: light) {
-  html {
-    --foreground: black;
-    --foreground-secondary: #595959;
-    --background: white;
-    --background-higher: #D7DFD2;
-    --background-lower: #EBEFE9;
-    --lines: #b6b6b6;
-    --positive-green: #99ee87;
-    --warning-foreground: #595900;
-    --warning-background: #ffff91;
-    --error-foreground: #c00;
-    --error-background: #ffe1e6;
-  }
-
-  ::selection {
-    color: var(--background)
-  }
+:-moz-meter-optimum::-moz-meter-bar {
+  background: #15803d;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    --foreground: #ececec;
-    --foreground-secondary: #d0d0d0;
-    --background: #2b2b2b;
-    --background-higher: #4f4f4f;
-    --background-lower: #1a1a1a;
-    --lines: #797979;
-    --positive-green: #126912;
-    --warning-foreground: #ffff91;
-    --warning-background: #595900;
-    --error-foreground: #ffc4c4;
-    --error-background: #710000;
-  }
-
-  a {
-    color: #8585ff;
-  }
-
-  a:visited {
-    color: violet;
-  }
+:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: #eab308;
 }
 
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /*
-   * Don't show links that are fragment identifiers,
-   * or use the `javascript:` pseudo protocol
-   */
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  /*
-   * Printing Tables:
-   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-   */
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-
-  header {
-    display: none;
-  }
+:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: #b91c1c;
 }
diff --git a/src/locales/de.json b/src/locales/de.json
index 744d16fc..42dd4a24 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,81 +1,113 @@
 {
+  "header": {
+    "imageAlt": "Ein lächelnder Baum.",
+    "title": "Stammbaum",
+    "navigationMenu": "Menü"
+  },
   "footer": {
     "sourceCode": "Der Quellcode ist auf {0} verfügbar.",
     "imprint": "Impressum & Datenschutzerklärung",
     "bugReport": "Ein Problem melden"
   },
-  "form": {
-    "fileInputLabel": "Gedcom Datei",
-    "continueSession": "Mit letzter Sitzung fortfahren",
-    "noFileError": "Keine Datei ausgewählt",
-    "graphLoadingError": "Der Graph konnte nicht geladen werden."
-  },
-  "header": {
-    "imageAlt": "Ein lächelnder Baum.",
-    "title": "Stammbaum"
-  },
   "home": {
-    "uploadArticle": {
-      "title": "Datei-Upload",
-      "content": "Wähle die Datei über den unteren Knopf aus. Klicke dann auf den grünen Knopf, um den Stammbaum anzuzeigen.",
-      "openButton": "Stammbaum öffnen",
-      "detailSummary": "Woher bekomme ich die Daten?",
-      "detail": "Die Datei muss eine gültige GedcomX Datei im json Format sein, wie {0} beschrieben."
-    },
-    "navigationArticle": {
-      "title": "Bedienung",
-      "content": "Man kann den Stammbaum durch Ziehen mit der Maus verschieben. Hält man {0} gedrückt, kann man mit dem Mausrad rein- bzw. rauszoomen. Klickt man auf eine Person werden weitere Informationen zu dieser angezeigt. An vielen Personen hängen Kreise, in denen \"+\" oder \"-\" steht. Klickt man auf diese, werden weitere Verwandte ein- oder ausgeblendet."
-    }
+    "title": "Startseite",
+    "tryItOut": "Jetzt ausprobieren!",
+    "continueSession": "Sitzung fortsetzen",
+    "deleteButton": "Daten löschen",
+    "openButton": "Datei öffnen"
   },
   "imprint": {
-    "privacyArticle": {
-      "title": "Datenschutzerklärung",
-      "content": "Alle Stammbaum Daten werden ausschließlich lokal verarbeitet und im local Storage des Browsers gespeichert. Der Service wird auf GitHub Pages gehostet, die entsprechende Datenschutzerklärung kann {0} aufgerufen werden."
+    "title": "Datenschutzerklärung",
+    "introduction": "Vielen Dank für Ihren Besuch auf unserer Webseite. Der Schutz Ihrer persönlichen Daten ist uns ein wichtiges Anliegen. Nachfolgend möchten wir Sie darüber informieren, welche Daten während Ihres Besuchs auf unserer Webseite erfasst und wie diese verwendet werden.",
+    "1": {
+      "title": "Verantwortliche Stelle",
+      "content": "Verantwortliche Stelle für die Datenverarbeitung auf dieser Webseite ist:"
     },
-    "imprintArticle": {
-      "title": "Impressum"
-    }
-  },
-  "infoPanel": {
-    "born": "geb.: {0}",
-    "aka": "alias {0}",
-    "nickname": "Spitzname: {0}",
-    "personImageAlt": "Bild von {0}.",
-    "note": "Anmerkung",
-    "source": "Quelle",
-    "noSourceDescriptionError": "Source description {0} konnte nicht gefunden werden",
-    "confidenceExplanation": "Wie sehr kann den Daten vertraut werden",
-    "confidenceLabel": "Zuversicht: ",
-    "attribution": "Erstellt am {0} von {1}. Bearbeitet am {2} von {3}:",
-    "children": "Kinder",
-    "parents": "Eltern",
-    "partner": "Partner",
-    "godparents": "Paten",
-    "godchildren": "Patenkinder",
-    "enslavedBy": "Versklavt von",
-    "slaves": "Sklaven"
+    "2": {
+      "title": "Erfassung und Verwendung von Daten",
+      "content": {
+        "a": {
+          "title": "Nutzung der Webseite ohne Registrierung",
+          "content": "Sie können unsere Webseite besuchen, ohne personenbezogene Daten anzugeben. Wir erheben und speichern keinerlei persönliche Daten, solange Sie uns diese nicht freiwillig zur Verfügung stellen."
+        },
+        "b": {
+          "title": "Nutzung von Leaflet",
+          "content": "Unsere Webseite verwendet das Leaflet-Kartenframework, um interaktive Karten darzustellen. Dabei werden keine personenbezogenen Daten erfasst oder an Dritte übermittelt. Alle Daten, die Sie über die Kartenfunktion eingeben oder anzeigen lassen, werden ausschließlich lokal in Ihrem Browser gespeichert und verlassen Ihr Gerät nicht."
+        },
+        "c": {
+          "title": "Cookies",
+          "content": "Wir setzen auf unserer Webseite keine Cookies ein. Es werden keine Informationen auf Ihrem Endgerät gespeichert."
+        }
+      }
+    },
+    "3": {
+      "title": "Datensicherheit",
+      "content": "Wir treffen angemessene technische und organisatorische Maßnahmen, um die Sicherheit Ihrer Daten zu gewährleisten und sie vor Manipulation, Verlust, Zerstörung oder dem Zugriff unberechtigter Personen zu schützen. Unsere Sicherheitsmaßnahmen werden entsprechend der technologischen Entwicklung fortlaufend verbessert."
+    },
+    "4": {
+      "title": "Ihre Rechte",
+      "content": "Sie haben das Recht, Auskunft über die zu Ihrer Person gespeicherten Daten zu erhalten. Bei Vorliegen unrichtiger Daten können Sie deren Berichtigung verlangen. Sie können außerdem die Löschung oder Sperrung Ihrer personenbezogenen Daten verlangen, soweit die Speicherung unzulässig oder nicht mehr erforderlich ist. Bitte wenden Sie sich dazu an die oben genannte verantwortliche Stelle."
+    },
+    "5": {
+      "title": "Änderungen dieser Datenschutzerklärung",
+      "content": "Wir behalten uns das Recht vor, diese Datenschutzerklärung bei Bedarf anzupassen, um sie an technische oder rechtliche Entwicklungen anzupassen. Bitte überprüfen Sie diese Datenschutzerklärung regelmäßig, um auf dem neuesten Stand zu bleiben."
+    },
+    "finale": "Wenn Sie Fragen zum Datenschutz auf unserer Webseite haben, können Sie sich gerne an uns wenden. Die Kontaktdaten finden Sie am Anfang dieser Datenschutzerklärung.",
+    "date": "Diese Datenschutzerklärung wurde zuletzt aktualisiert am 05.07.2023."
   },
-  "nodes": {
+  "tree": {
+    "loading": "Lade Stammbaum",
     "lockedFamilyHint": "Diese Familie kann nicht ausgeblendet werden.",
     "hideFamilyHint": "Klicke, um diese Familie auszublenden.",
     "clickPersonHint": "Klicke für weitere Informationen"
   },
   "gedcomX": {
-    "types": {
-      "relationship": {
-        "AncestorDescendant": "Vorfahre - Nachfahre",
-        "Couple": "Paar",
-        "EnslavedBy": "Versklavt von",
-        "Godparent": "Pate",
-        "ParentChild": "Eltern - Kind"
+    "conclusion": {
+      "note": "Anmerkung",
+      "confidence": "Zuversicht",
+      "confidenceExplanation": "Wie sehr kann den Daten vertraut werden",
+      "confidenceLevel": {
+        "High": "Hoch",
+        "Medium": "Mittel",
+        "Low": "Niedrig"
       },
-      "resource": {
-        "Collection": "Sammlung",
-        "PhysicalArtifact": "Physisches Artefakt",
-        "DigitalArtifact": "Digitales Artefakt",
-        "Record": "Aufzeichnung"
+      "attribution": {
+        "created": "Erstellt",
+        "modified": "Geändert",
+        "byPerson": "von {0}"
+      }
+    },
+    "subject": {
+      "evidence": "Beweis",
+      "mediaImageAlt": "Bild von {0}.",
+      "loadingMedia": "Lade Medieninhalt…"
+    },
+    "agent": {
+      "agents": "Agenten",
+      "agent": "Agent",
+      "homepage": "Homepage",
+      "accounts": "Accounts",
+      "onlineAccount": "{0} auf {1}",
+      "person": "Person",
+      "emails": "Emails",
+      "phones": "Telefonnummern",
+      "addresses": "Adressen",
+      "noAgents": "Es sind keine Agenten vorhanden."
+    },
+    "document": {
+      "types": {
+        "Abstract": "Zusammenfassung",
+        "Transcription": "Abschrift",
+        "Translation": "Übersetzung",
+        "Analysis": "Analyse"
       },
-      "event": {
+      "extracted": "extrahiert",
+      "documents": "Dokumente",
+      "document": "Dokument",
+      "noDocuments": "Es sind keine Dokumente vorhanden."
+    },
+    "event": {
+      "types": {
         "Adoption": "Adoption",
         "AdultChristening": "Erwachsenen Taufe",
         "Annulment": "Annulierung",
@@ -111,19 +143,28 @@
         "Ordination": "Priesterweihe",
         "Retirement": "Pensionierung"
       },
-      "document": {
-        "Abstract": "Zusammenfassung",
-        "Transcription": "Abschrift",
-        "Translation": "Übersetzung",
-        "Analysis": "Analyse"
-      },
-      "gender": {
+      "roles": {
+        "Principal": "Auftraggeber / Direktor",
+        "Participant": "Teilnehmer",
+        "Official": "Beamter",
+        "Witness": "Zeuge"
+      }
+    },
+    "person": {
+      "persons": "Personen",
+      "private": "privat",
+      "gender": "Geschlecht",
+      "genderTypes": {
         "Male": "Männlich",
         "Female": "Weiblich",
         "Unknown": "Unbekannt",
         "Intersex": "Intersexuell"
       },
-      "name": {
+      "firstName": "Vorname",
+      "born": "geb.: {0}",
+      "aka": "alias {0}",
+      "nickname": "Spitzname: {0}",
+      "nameTypes": {
         "BirthName": "Geburtsname",
         "MarriedName": "Heiratsname",
         "AlsoKnownAs": "Alias",
@@ -132,144 +173,13 @@
         "FormalName": "Formaler Name",
         "ReligiousName": "Religiöser Name"
       },
-      "fact": {
-        "person": {
-          "Adoption": "Adoption",
-          "AdultChristening": "Erwachsenentaufe",
-          "Amnesty": "Amnestie",
-          "AncestralHall": "Stammeshalle",
-          "AncestralPoem": "Stammesgedicht",
-          "Apprenticeship": "Ausbildung",
-          "Arrest": "Verhaftung",
-          "Award": "Preis",
-          "Baptism": "Taufe",
-          "BarMitzvah": "Bar Mitzvah",
-          "BatMitzvah": "Bat Mitzvah",
-          "Birth": "Geburt",
-          "BirthNotice": "Geburtsanzeige",
-          "Blessing": "Segen",
-          "Branch": "Zweig",
-          "Burial": "Beisetzung",
-          "Caste": "Kaste",
-          "Census": "Volkszählung",
-          "Christening": "Taufe",
-          "Circumcision": "Beschneidung",
-          "Clan": "Clan",
-          "Confirmation": "Konfirmation",
-          "Court": "Gericht",
-          "Cremation": "Einäscherung",
-          "Death": "Tod",
-          "Education": "Ausbildung",
-          "EducationEnrollment": "Einschreibung",
-          "Emigration": "Auswanderung",
-          "Enslavement": "Versklavung",
-          "Ethnicity": "Ethnizität",
-          "Excommunication": "Exkommunikation",
-          "FirstCommunion": "Erstkommunion",
-          "Funeral": "Trauerfeier",
-          "GenderChange": "Geschlechtsänderung",
-          "GenerationNumber": "Generation",
-          "Graduation": "Abschluss",
-          "Heimat": "Heimat",
-          "Immigration": "Einwanderung",
-          "Imprisonment": "Inhaftierung",
-          "Inquest": "Gerichtliche Untersuchung",
-          "LandTransaction": "Grundstückstransaktion",
-          "Language": "Sprache",
-          "Living": "Lebend",
-          "MaritalStatus": "Familienstand",
-          "Medical": "Medizinisch",
-          "MilitaryAward": "Militärauszeichnung",
-          "MilitaryDischarge": "Militär-Entlassung",
-          "MilitaryDraftRegistration": "Militär-Wehrdienst-Registrierung",
-          "MilitaryInduction": "Militär-Einberufung",
-          "MilitaryService": "Militärdienst",
-          "Mission": "Mission",
-          "MoveFrom": "Umzug aus",
-          "MoveTo": "Umzug nach",
-          "MultipleBirth": "Mehrlingsgeburt",
-          "NationalId": "Personalausweisnummer",
-          "Nationality": "Nationalität",
-          "Naturalization": "Einbürgerung",
-          "NumberOfChildren": "Anzahl der Kinder",
-          "NumberOfMarriage": "Anzahl der Eheschließungen",
-          "Obituary": "Todesanzeige",
-          "OfficialPosition": "Offizielle Position",
-          "Occupation": "Beruf",
-          "Ordination": "Ordination",
-          "Pardon": "Begnadigung",
-          "PhysicalDescription": "Körperbeschreibung",
-          "Probate": "Nachlassabwicklung",
-          "Property": "Eigentum",
-          "Race": "Rasse",
-          "Religion": "Religion",
-          "Residence": "Wohnsitz",
-          "Retirement": "Ruhestand",
-          "Stillbirth": "Totgeburt",
-          "TaxAssessment": "Steuerbewertung",
-          "Tribe": "Stamm",
-          "Will": "Testament",
-          "Visit": "Besuch",
-          "Yahrzeit": "Yahrzeit"
-        },
-        "relationship": {
-          "Couple": {
-            "Annulment": "Annullierung",
-            "CommonLawMarriage": "Eingetragene Partnerschaft",
-            "CivilUnion": "Zivilunion",
-            "Divorce": "Scheidung",
-            "DivorceFiling": "Scheidungseinreichung",
-            "DomesticPartnership": "Lebenspartnerschaft",
-            "Engagement": "Verlobung",
-            "Marriage": "Ehe",
-            "MarriageBanns": "Eheaufgebote",
-            "MarriageContract": "Ehevertrag",
-            "MarriageLicense": "Heiratsurkunde",
-            "MarriageNotice": "Heiratsanzeige",
-            "NumberOfChildren": "Anzahl der Kinder",
-            "Separation": "Trennung"
-          },
-          "ParentChild": {
-            "AdoptiveParent": "Adoptiveltern",
-            "BiologicalParent": "Biologische Eltern",
-            "ChildOrder": "Reihenfolge der Kinder",
-            "EnteringHeir": "Eintretender Erbe",
-            "ExitingHeir": "Ausscheidender Erbe",
-            "FosterParent": "Pflegeeltern",
-            "GuardianParent": "Vormund",
-            "StepParent": "Stiefeltern",
-            "SociologicalParent": "Soziologische Eltern",
-            "SurrogateParent": "Ersatzeltern"
-          }
-        }
-      },
-      "role": {
-        "Principal": "Auftraggeber / Direktor",
-        "Participant": "Teilnehmer",
-        "Official": "Beamter",
-        "Witness": "Zeuge"
-      },
-      "namePart": {
+      "namePartTypes": {
         "Prefix": "Präfix",
         "Suffix": "Suffix",
         "Given": "Gegeben",
         "Surname": "Nachname"
-      }
-    },
-    "confidenceLevel": {
-      "High": "Hoch",
-      "Medium": "Mittel",
-      "Low": "Niedrig"
-    },
-    "qualifiers": {
-      "fact": {
-        "Age": "Alter",
-        "Cause": "Ursache",
-        "Religion": "Religion",
-        "Transport": "Transport",
-        "NonConsensual": "Nicht einvernehmlich"
       },
-      "namePart": {
+      "namePartQualifier": {
         "Primary": "primär",
         "Secondary": "sekundär",
         "Middle": "mitte",
@@ -285,29 +195,181 @@
         "Postnom": "Postnom",
         "Particle": "Partikel",
         "RootName": "Wurzelname"
+      },
+      "factTypes": {
+        "Adoption": "Adoption",
+        "AdultChristening": "Erwachsenentaufe",
+        "Amnesty": "Amnestie",
+        "AncestralHall": "Stammeshalle",
+        "AncestralPoem": "Stammesgedicht",
+        "Apprenticeship": "Ausbildung",
+        "Arrest": "Verhaftung",
+        "Award": "Preis",
+        "Baptism": "Taufe",
+        "BarMitzvah": "Bar Mitzvah",
+        "BatMitzvah": "Bat Mitzvah",
+        "Birth": "Geburt",
+        "BirthNotice": "Geburtsanzeige",
+        "Blessing": "Segen",
+        "Branch": "Zweig",
+        "Burial": "Beisetzung",
+        "Caste": "Kaste",
+        "Census": "Volkszählung",
+        "Christening": "Taufe",
+        "Circumcision": "Beschneidung",
+        "Clan": "Clan",
+        "Confirmation": "Konfirmation",
+        "Court": "Gericht",
+        "Cremation": "Einäscherung",
+        "Death": "Tod",
+        "Education": "Ausbildung",
+        "EducationEnrollment": "Einschreibung",
+        "Emigration": "Auswanderung",
+        "Enslavement": "Versklavung",
+        "Ethnicity": "Ethnizität",
+        "Excommunication": "Exkommunikation",
+        "FirstCommunion": "Erstkommunion",
+        "Funeral": "Trauerfeier",
+        "GenderChange": "Geschlechtsänderung",
+        "GenerationNumber": "Generation",
+        "Graduation": "Abschluss",
+        "Heimat": "Heimat",
+        "Immigration": "Einwanderung",
+        "Imprisonment": "Inhaftierung",
+        "Inquest": "Gerichtliche Untersuchung",
+        "LandTransaction": "Grundstückstransaktion",
+        "Language": "Sprache",
+        "Living": "Lebend",
+        "MaritalStatus": "Familienstand",
+        "Medical": "Medizinisch",
+        "MilitaryAward": "Militärauszeichnung",
+        "MilitaryDischarge": "Militär-Entlassung",
+        "MilitaryDraftRegistration": "Militär-Wehrdienst-Registrierung",
+        "MilitaryInduction": "Militär-Einberufung",
+        "MilitaryService": "Militärdienst",
+        "Mission": "Mission",
+        "MoveFrom": "Umzug aus",
+        "MoveTo": "Umzug nach",
+        "MultipleBirth": "Mehrlingsgeburt",
+        "NationalId": "Personalausweisnummer",
+        "Nationality": "Nationalität",
+        "Naturalization": "Einbürgerung",
+        "NumberOfChildren": "Anzahl der Kinder",
+        "NumberOfMarriage": "Anzahl der Eheschließungen",
+        "Obituary": "Todesanzeige",
+        "OfficialPosition": "Offizielle Position",
+        "Occupation": "Beruf",
+        "Ordination": "Ordination",
+        "Pardon": "Begnadigung",
+        "PhysicalDescription": "Körperbeschreibung",
+        "Probate": "Nachlassabwicklung",
+        "Property": "Eigentum",
+        "Race": "Rasse",
+        "Religion": "Religion",
+        "Residence": "Wohnsitz",
+        "Retirement": "Ruhestand",
+        "Stillbirth": "Totgeburt",
+        "TaxAssessment": "Steuerbewertung",
+        "Tribe": "Stamm",
+        "Will": "Testament",
+        "Visit": "Besuch",
+        "Yahrzeit": "Yahrzeit"
+      },
+      "maritalStatus": {
+        "Divorced": "geschieden",
+        "Married": "verheiratet",
+        "Seperated": "getrennt",
+        "Single": "ledig",
+        "Widowed": "verwitwet"
+      }
+    },
+    "relationship": {
+      "relationships": "Verbundene Personen",
+      "children": "Kinder",
+      "parents": "Eltern",
+      "partner": "Partner",
+      "godparents": "Paten",
+      "godchildren": "Patenkinder",
+      "enslavedBy": "Versklavt von",
+      "slaves": "Sklaven",
+      "types": {
+        "AncestorDescendant": "Vorfahre - Nachfahre",
+        "Couple": "Paar",
+        "EnslavedBy": "Versklavt von",
+        "Godparent": "Pate",
+        "ParentChild": "Eltern - Kind"
+      },
+      "factTypes": {
+        "Couple": {
+          "Annulment": "Annullierung",
+          "CommonLawMarriage": "Eingetragene Partnerschaft",
+          "CivilUnion": "Zivilunion",
+          "Divorce": "Scheidung",
+          "DivorceFiling": "Scheidungseinreichung",
+          "DomesticPartnership": "Lebenspartnerschaft",
+          "Engagement": "Verlobung",
+          "Marriage": "Ehe",
+          "MarriageBanns": "Eheaufgebote",
+          "MarriageContract": "Ehevertrag",
+          "MarriageLicense": "Heiratsurkunde",
+          "MarriageNotice": "Heiratsanzeige",
+          "NumberOfChildren": "Anzahl der Kinder",
+          "Separation": "Trennung"
+        },
+        "ParentChild": {
+          "AdoptiveParent": "Adoptiveltern",
+          "BiologicalParent": "Biologische Eltern",
+          "ChildOrder": "Reihenfolge der Kinder",
+          "EnteringHeir": "Eintretender Erbe",
+          "ExitingHeir": "Ausscheidender Erbe",
+          "FosterParent": "Pflegeeltern",
+          "GuardianParent": "Vormund",
+          "StepParent": "Stiefeltern",
+          "SociologicalParent": "Soziologische Eltern",
+          "SurrogateParent": "Ersatzeltern"
+        }
+      }
+    },
+    "placeDescription": {
+      "places": "Orte",
+      "jurisdiction": "Gerichtsbarkeit",
+      "place": "Externe Beschreibung",
+      "spatialDescription": "KML Datei"
+    },
+    "sourceDescription": {
+      "resourceTypes": {
+        "Collection": "Sammlung",
+        "PhysicalArtifact": "Physisches Artefakt",
+        "DigitalArtifact": "Digitales Artefakt",
+        "Record": "Aufzeichnung"
+      },
+      "sourceDescription": "Quelle",
+      "sourceDescriptions": "Quellen",
+      "coverageTitle": "Abdeckung",
+      "coverage": {
+        "spatial": "räumlich",
+        "temporal": "zeitlich"
       }
     },
-    "maritalStatus": {
-      "Divorced": "geschieden",
-      "Married": "verheiratet",
-      "Seperated": "getrennt",
-      "Single": "ledig",
-      "Widowed": "verwitwet"
+    "time": {
+      "year": "{0}",
+      "month": "im {0}",
+      "day": "am {0}",
+      "time": "um {0}"
     },
-    "gender": "Geschlecht",
-    "confidence": "Zuversicht",
-    "ageQualifier": "mit {0} Jahren",
-    "day": "am {0}",
-    "month": "im {0}",
-    "year": "{0}",
-    "time": "um {0}",
     "place": "in {0}",
-    "firstName": "Vorname"
+    "factQualifier": {
+      "Age": "Alter",
+      "ageFormatter": "mit {0} Jahren",
+      "Cause": "Ursache",
+      "Religion": "Religion",
+      "Transport": "Transport",
+      "NonConsensual": "Nicht einvernehmlich"
+    }
   },
   "searchField": {
-    "noPersonFound": "Es konnte keine Person mit diesem Namen gefunden werden!",
     "searchLabel": "Name:",
-    "searchHint": "Nach einer Person suchen"
+    "searchHint": "Max Mustermann"
   },
   "viewOptions": {
     "filter": {
@@ -323,20 +385,24 @@
     }
   },
   "statistics": {
+    "title": "Statistiken",
+    "loading": "Berechne Statistik",
     "location": "Ort",
     "birth_month": "Geburtsmonat",
     "death_month": "Todesmonat",
     "lifeExpectancy": "Lebenserwartung",
     "marriageAge": "Heiratsalter"
   },
-  "loading": {
-    "familyTree": "Lade Stammbaum",
-    "statistic": "Berechne Statistik"
-  },
   "errors": {
     "title": "Uups, etwas ist schief gelaufen",
-    "no_data": "Wir konnten keine Daten finden. Stelle bitte sicher, dass du eine Datei {0} ausgewählt hast."
+    "noData": "Keine Daten vorhanden.",
+    "stack": "Entwicklerdetails",
+    "noFileError": "Keine Datei ausgewählt",
+    "graphLoadingError": "Der Graph konnte nicht geladen werden.",
+    "noPersonFound": "Es konnte keine Person mit diesem Namen gefunden werden!",
+    "noSourceDescriptionError": "Source description {0} konnte nicht gefunden werden"
   },
   "ctrl": "Strg",
-  "linkContent": "hier"
+  "linkContent": "hier",
+  "externalContentButton": "Externe Inhalte anzeigen"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 5a0d345d..ff4375db 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,81 +1,111 @@
 {
+  "header": {
+    "imageAlt": "A smiling tree.",
+    "title": "Family tree",
+    "navigationMenu": "Menu"
+  },
   "footer": {
     "sourceCode": "The source code is available on {0}.",
     "imprint": "Imprint & privacy policy",
     "bugReport": "Report a problem"
   },
-  "form": {
-    "fileInputLabel": "Gedcom File",
-    "continueSession": "Continue with last session",
-    "noFileError": "No gedcom file selected",
-    "graphLoadingError": "The graph could not be loaded."
-  },
-  "header": {
-    "imageAlt": "A smiling tree.",
-    "title": "Family tree"
-  },
   "home": {
-    "uploadArticle": {
-      "title": "File-Upload",
-      "content": "Select the file with the button below. Then click the green button to view the family tree.",
-      "openButton": "Open family tree",
-      "detailSummary": "From where do I get the data?",
-      "detail": "The file must be a valid GedcomX file in json format, as described {0}."
-    },
-    "navigationArticle": {
-      "title": "Usage",
-      "content": "You can move the family tree with your mouse.While pressing {0}, you can zoom in and out with your mouse wheel. Select a person with your left mouse button to show their information. Many people have a circle with \"+\" or \"-\" inside them, clicking on those displays their relatives."
-    }
+    "title": "Home",
+    "tryItOut": "Try it now!",
+    "continueSession": "Continue with last session",
+    "deleteButton": "Remove data",
+    "openButton": "Open family tree"
   },
   "imprint": {
-    "privacyArticle": {
-      "title": "Privacy Policy",
-      "content": "All family tree data is processed locally only and stored in the browser's local storage. The service is hosted on GitHub Pages, the corresponding privacy policy can be found {0}."
+    "title": "Privacy Policy",
+    "introduction": "Thank you for visiting our website. Protecting your personal data is important to us. Below, we would like to inform you about the data collected during your visit to our website and how it is used.",
+    "1": {
+      "title": "Controller",
+      "content": "The controller responsible for data processing on this website is:"
     },
-    "imprintArticle": {
-      "title": "Imprint"
-    }
-  },
-  "infoPanel": {
-    "born": "born: {0}",
-    "aka": "aka {0}",
-    "nickname": "Nickname: {0}",
-    "personImageAlt": "Image of {0}.",
-    "note": "Note",
-    "source": "Source",
-    "noSourceDescriptionError": "Source description {0} could not be found",
-    "confidenceExplanation": "How much can the data be trusted",
-    "confidenceLabel": "Confidence: ",
-    "attribution": "Created on {0} by {1}. Modified on {2} by {3}:",
-    "children": "Children",
-    "parents": "Parents",
-    "partner": "Partner",
-    "godparents": "Godparents",
-    "godchildren": "Godchildren",
-    "enslavedBy": "Enslaved by",
-    "slaves": "Slaves"
+    "2": {
+      "title": "Collection and Use of Data",
+      "content": {
+        "a": {
+          "title": "Use of the Website without Registration",
+          "content": "You can visit our website without providing any personal data. We do not collect or store any personal data unless you voluntarily provide it to us."
+        },
+        "b": {
+          "title": "Use of Leaflet",
+          "content": "Our website uses the Leaflet mapping framework to display interactive maps. No personally identifiable information is collected or transmitted. All data entered or displayed through the mapping function is stored exclusively locally in your browser and does not leave your device."
+        },
+        "c": {
+          "title": "Cookies",
+          "content": "We do not use cookies on our website. No information is stored on your device."
+        }
+      }
+    },
+    "3": {
+      "title": "Data Security",
+      "content": "We implement reasonable technical and organizational measures to ensure the security of your data and protect it against manipulation, loss, destruction, or unauthorized access. Our security measures are continuously improved in line with technological advancements."
+    },
+    "4": {
+      "title": "Your Rights",
+      "content": "You have the right to request information about the data we have stored about you. If any of the data is incorrect, you can request its correction. You may also request the deletion or blocking of your personal data if the storage is inadmissible or no longer necessary. Please contact the responsible controller mentioned above to exercise your rights."
+    },
+    "5": {
+      "title": "Changes to this Privacy Policy",
+      "content": "We reserve the right to update this privacy policy as needed to reflect technological or legal developments. Please check this privacy policy regularly to stay informed."
+    },
+    "finale": "If you have any questions about the privacy of our website, please feel free to contact us. You can find the contact details at the beginning of this privacy policy.",
+    "date": "This privacy policy was last updated on 05.07.2023."
   },
-  "nodes": {
+  "tree": {
+    "loading": "Loading family tree",
     "lockedFamilyHint": "This family cannot be hidden.",
     "hideFamilyHint": "Click to hide this family.",
-    "clickPersonHint": "Click to show more information"
+    "clickPersonHint": "Click to show more information."
   },
   "gedcomX": {
-    "types": {
-      "relationship": {
-        "AncestorDescendant": "Ancestor - Descendant",
-        "Couple": "Couple",
-        "EnslavedBy": "Enslaved by",
-        "Godparent": "Godparent",
-        "ParentChild": "Parent - Child"
+    "conclusion": {
+      "note": "Note",
+      "confidence": "Confidence",
+      "confidenceExplanation": "How much can the data be trusted",
+      "confidenceLevel": {
+        "High": "High",
+        "Medium": "Medium",
+        "Low": "Low"
       },
-      "resource": {
-        "Collection": "Collection",
-        "PhysicalArtifact": "Physical Artifact",
-        "DigitalArtifact": "Digital Artifact",
-        "Record": "Record"
+      "attribution": {
+        "created": "Created",
+        "modified": "Modified",
+        "byPerson": "by {0}"
+      }
+    },
+    "subject": {
+      "evidence": "Evidence",
+      "mediaImageAlt": "Image of {0}.",
+      "loadingMedia": "Loading media content…"
+    },
+    "agent": {
+      "agents": "Agents",
+      "agent": "Agent",
+      "homepage": "Homepage",
+      "accounts": "Accounts",
+      "onlineAccount": "{0} on {1}",
+      "person": "Person",
+      "emails": "Emails",
+      "phones": "Phones",
+      "addresses": "Addresses"
+    },
+    "document": {
+      "types": {
+        "Abstract": "Abstract",
+        "Transcription": "Transcription",
+        "Translation": "Translation",
+        "Analysis": "Analysis"
       },
-      "event": {
+      "extracted": "extracted",
+      "documents": "Documents",
+      "document": "Document"
+    },
+    "event": {
+      "types": {
         "Adoption": "Adoption",
         "AdultChristening": "Adult Christening",
         "Annulment": "Annulment",
@@ -111,19 +141,28 @@
         "Ordination": "Ordination",
         "Retirement": "Retirement"
       },
-      "document": {
-        "Abstract": "Abstract",
-        "Transcription": "Transcription",
-        "Translation": "Translation",
-        "Analysis": "Analysis"
-      },
-      "gender": {
+      "roles": {
+        "Principal": "Principal",
+        "Participant": "Participant",
+        "Official": "Official",
+        "Witness": "Witness"
+      }
+    },
+    "person": {
+      "persons": "Persons",
+      "private": "private",
+      "gender": "Sex",
+      "genderTypes": {
         "Male": "Male",
         "Female": "Female",
         "Unknown": "Unknown",
         "Intersex": "Intersex"
       },
-      "name": {
+      "firstName": "first name",
+      "born": "born: {0}",
+      "aka": "aka {0}",
+      "nickname": "Nickname: {0}",
+      "nameTypes": {
         "BirthName": "Birth Name",
         "MarriedName": "Married Name",
         "AlsoKnownAs": "Aka.",
@@ -132,144 +171,13 @@
         "FormalName": "Formal Name",
         "ReligiousName": "Religious Name"
       },
-      "fact": {
-        "person": {
-          "Adoption": "Adoption",
-          "AdultChristening": "Adult Christening",
-          "Amnesty": "Amnesty",
-          "AncestralHall": "Ancestral Hall",
-          "AncestralPoem": "Ancestral Poem",
-          "Apprenticeship": "Apprenticeship",
-          "Arrest": "Arrest",
-          "Award": "Award",
-          "Baptism": "Baptism",
-          "BarMitzvah": "Bar Mitzvah",
-          "BatMitzvah": "Bat Mitzvah",
-          "Birth": "Birth",
-          "BirthNotice": "Birth Notice",
-          "Blessing": "Blessing",
-          "Branch": "Branch",
-          "Burial": "Burial",
-          "Caste": "Caste",
-          "Census": "Census",
-          "Christening": "Christening",
-          "Circumcision": "Circumcision",
-          "Clan": "Clan",
-          "Confirmation": "Confirmation",
-          "Court": "Court",
-          "Cremation": "Cremation",
-          "Death": "Death",
-          "Education": "Education",
-          "EducationEnrollment": "Education Enrollment",
-          "Emigration": "Emigration",
-          "Enslavement": "Enslavement",
-          "Ethnicity": "Ethnicity",
-          "Excommunication": "Excommunication",
-          "FirstCommunion": "First Communion",
-          "Funeral": "Funeral",
-          "GenderChange": "Gender Change",
-          "GenerationNumber": "Generation Number",
-          "Graduation": "Graduation",
-          "Heimat": "Heimat",
-          "Immigration": "Immigration",
-          "Imprisonment": "Imprisonment",
-          "Inquest": "Inquest",
-          "LandTransaction": "Land Transaction",
-          "Language": "Language",
-          "Living": "Living",
-          "MaritalStatus": "Marital Status",
-          "Medical": "Medical",
-          "MilitaryAward": "Military Award",
-          "MilitaryDischarge": "Military Discharge",
-          "MilitaryDraftRegistration": "Military Draft Registration",
-          "MilitaryInduction": "Military Induction",
-          "MilitaryService": "Military Service",
-          "Mission": "Mission",
-          "MoveFrom": "Move From",
-          "MoveTo": "Move To",
-          "MultipleBirth": "Multiple Birth",
-          "NationalId": "National Id",
-          "Nationality": "Nationality",
-          "Naturalization": "Naturalization",
-          "NumberOfChildren": "Number Of Children",
-          "NumberOfMarriage": "Number Of Marriage",
-          "Obituary": "Obituary",
-          "OfficialPosition": "Official Position",
-          "Occupation": "Occupation",
-          "Ordination": "Ordination",
-          "Pardon": "Pardon",
-          "PhysicalDescription": "Physical Description",
-          "Probate": "Probate",
-          "Property": "Property",
-          "Race": "Race",
-          "Religion": "Religion",
-          "Residence": "Residence",
-          "Retirement": "Retirement",
-          "Stillbirth": "Stillbirth",
-          "TaxAssessment": "Tax Assessment",
-          "Tribe": "Tribe",
-          "Will": "Will",
-          "Visit": "Visit",
-          "Yahrzeit": "Yahrzeit"
-        },
-        "relationship": {
-          "Couple": {
-            "Annulment": "Annulment",
-            "CommonLawMarriage": "Common-Law Marriage",
-            "CivilUnion": "Civil Union",
-            "Divorce": "Divorce",
-            "DivorceFiling": "Divorce Filing",
-            "DomesticPartnership": "Domestic Partnership",
-            "Engagement": "Engagement",
-            "Marriage": "Marriage",
-            "MarriageBanns": "Marriage Banns",
-            "MarriageContract": "Marriage Contract",
-            "MarriageLicense": "Marriage License",
-            "MarriageNotice": "Marriage Notice",
-            "NumberOfChildren": "Number of Children",
-            "Separation": "Separation"
-          },
-          "ParentChild": {
-            "AdoptiveParent": "Adoptive Parent",
-            "BiologicalParent": "Biological Parent",
-            "ChildOrder": "Child Order",
-            "EnteringHeir": "Entering Heir",
-            "ExitingHeir": "Exiting Heir",
-            "FosterParent": "Foster Parent",
-            "GuardianParent": "Guardian Parent",
-            "StepParent": "Step Parent",
-            "SociologicalParent": "Sociological Parent",
-            "SurrogateParent": "Surrogate Parent"
-          }
-        }
-      },
-      "role": {
-        "Principal": "Principal",
-        "Participant": "Participant",
-        "Official": "Official",
-        "Witness": "Witness"
-      },
-      "namePart": {
+      "namePartTypes": {
         "Prefix": "Prefix",
         "Suffix": "Suffix",
         "Given": "Given",
         "Surname": "Surname"
-      }
-    },
-    "confidenceLevel": {
-      "High": "High",
-      "Medium": "Medium",
-      "Low": "Low"
-    },
-    "qualifiers": {
-      "fact": {
-        "Age": "Age",
-        "Cause": "Cause",
-        "Religion": "Religion",
-        "Transport": "Transport",
-        "NonConsensual": "Non-Consensual"
       },
-      "namePart": {
+      "namePartQualifier": {
         "Primary": "Primary",
         "Secondary": "Secondary",
         "Middle": "Middle",
@@ -285,29 +193,181 @@
         "Postnom": "Postnom",
         "Particle": "Particle",
         "RootName": "RootName"
+      },
+      "factTypes": {
+        "Adoption": "Adoption",
+        "AdultChristening": "Adult Christening",
+        "Amnesty": "Amnesty",
+        "AncestralHall": "Ancestral Hall",
+        "AncestralPoem": "Ancestral Poem",
+        "Apprenticeship": "Apprenticeship",
+        "Arrest": "Arrest",
+        "Award": "Award",
+        "Baptism": "Baptism",
+        "BarMitzvah": "Bar Mitzvah",
+        "BatMitzvah": "Bat Mitzvah",
+        "Birth": "Birth",
+        "BirthNotice": "Birth Notice",
+        "Blessing": "Blessing",
+        "Branch": "Branch",
+        "Burial": "Burial",
+        "Caste": "Caste",
+        "Census": "Census",
+        "Christening": "Christening",
+        "Circumcision": "Circumcision",
+        "Clan": "Clan",
+        "Confirmation": "Confirmation",
+        "Court": "Court",
+        "Cremation": "Cremation",
+        "Death": "Death",
+        "Education": "Education",
+        "EducationEnrollment": "Education Enrollment",
+        "Emigration": "Emigration",
+        "Enslavement": "Enslavement",
+        "Ethnicity": "Ethnicity",
+        "Excommunication": "Excommunication",
+        "FirstCommunion": "First Communion",
+        "Funeral": "Funeral",
+        "GenderChange": "Gender Change",
+        "GenerationNumber": "Generation Number",
+        "Graduation": "Graduation",
+        "Heimat": "Heimat",
+        "Immigration": "Immigration",
+        "Imprisonment": "Imprisonment",
+        "Inquest": "Inquest",
+        "LandTransaction": "Land Transaction",
+        "Language": "Language",
+        "Living": "Living",
+        "MaritalStatus": "Marital Status",
+        "Medical": "Medical",
+        "MilitaryAward": "Military Award",
+        "MilitaryDischarge": "Military Discharge",
+        "MilitaryDraftRegistration": "Military Draft Registration",
+        "MilitaryInduction": "Military Induction",
+        "MilitaryService": "Military Service",
+        "Mission": "Mission",
+        "MoveFrom": "Move From",
+        "MoveTo": "Move To",
+        "MultipleBirth": "Multiple Birth",
+        "NationalId": "National Id",
+        "Nationality": "Nationality",
+        "Naturalization": "Naturalization",
+        "NumberOfChildren": "Number Of Children",
+        "NumberOfMarriage": "Number Of Marriage",
+        "Obituary": "Obituary",
+        "OfficialPosition": "Official Position",
+        "Occupation": "Occupation",
+        "Ordination": "Ordination",
+        "Pardon": "Pardon",
+        "PhysicalDescription": "Physical Description",
+        "Probate": "Probate",
+        "Property": "Property",
+        "Race": "Race",
+        "Religion": "Religion",
+        "Residence": "Residence",
+        "Retirement": "Retirement",
+        "Stillbirth": "Stillbirth",
+        "TaxAssessment": "Tax Assessment",
+        "Tribe": "Tribe",
+        "Will": "Will",
+        "Visit": "Visit",
+        "Yahrzeit": "Yahrzeit"
+      },
+      "maritalStatus": {
+        "Divorced": "divorced",
+        "Married": "married",
+        "Seperated": "seperated",
+        "Single": "single",
+        "Widowed": "widowed"
       }
     },
-    "maritalStatus": {
-      "Divorced": "divorced",
-      "Married": "married",
-      "Seperated": "seperated",
-      "Single": "single",
-      "Widowed": "widowed"
+    "relationship": {
+      "relationships": "Relationships",
+      "children": "Children",
+      "parents": "Parents",
+      "partner": "Partner",
+      "godparents": "Godparents",
+      "godchildren": "Godchildren",
+      "enslavedBy": "Enslaved by",
+      "slaves": "Slaves",
+      "types": {
+        "AncestorDescendant": "Ancestor - Descendant",
+        "Couple": "Couple",
+        "EnslavedBy": "Enslaved by",
+        "Godparent": "Godparent",
+        "ParentChild": "Parent - Child"
+      },
+      "factTypes": {
+        "Couple": {
+          "Annulment": "Annulment",
+          "CommonLawMarriage": "Common-Law Marriage",
+          "CivilUnion": "Civil Union",
+          "Divorce": "Divorce",
+          "DivorceFiling": "Divorce Filing",
+          "DomesticPartnership": "Domestic Partnership",
+          "Engagement": "Engagement",
+          "Marriage": "Marriage",
+          "MarriageBanns": "Marriage Banns",
+          "MarriageContract": "Marriage Contract",
+          "MarriageLicense": "Marriage License",
+          "MarriageNotice": "Marriage Notice",
+          "NumberOfChildren": "Number of Children",
+          "Separation": "Separation"
+        },
+        "ParentChild": {
+          "AdoptiveParent": "Adoptive Parent",
+          "BiologicalParent": "Biological Parent",
+          "ChildOrder": "Child Order",
+          "EnteringHeir": "Entering Heir",
+          "ExitingHeir": "Exiting Heir",
+          "FosterParent": "Foster Parent",
+          "GuardianParent": "Guardian Parent",
+          "StepParent": "Step Parent",
+          "SociologicalParent": "Sociological Parent",
+          "SurrogateParent": "Surrogate Parent"
+        }
+      }
+    },
+    "placeDescription": {
+      "places": "Places",
+      "jurisdiction": "Jurisdiction",
+      "place": "External Description",
+      "spatialDescription": "KML file"
+    },
+    "sourceDescription": {
+      "resourceTypes": {
+        "Collection": "Collection",
+        "PhysicalArtifact": "Physical Artifact",
+        "DigitalArtifact": "Digital Artifact",
+        "Record": "Record"
+      },
+      "sourceDescription": "Source",
+      "sourceDescriptions": "Sources",
+      "coverageTitle": "Coverage",
+      "coverage": {
+        "spatial": "spatial",
+        "temporal": "temporal"
+      }
+    },
+    "time": {
+      "year": "in {0}",
+      "month": "in {0}",
+      "day": "on {0}",
+      "time": "at {0}"
     },
-    "gender": "Sex",
-    "confidence": "Confidence",
-    "ageQualifier": "with {0} years old",
-    "day": "on {0}",
-    "month": "in {0}",
-    "year": "in {0}",
-    "time": "at {0}",
     "place": "in {0}",
-    "firstName": "first name"
+    "factQualifier": {
+      "Age": "Age",
+      "ageFormatter": "with {0} years old",
+      "Cause": "Cause",
+      "Religion": "Religion",
+      "Transport": "Transport",
+      "NonConsensual": "Non-Consensual"
+    }
   },
   "searchField": {
-    "noPersonFound": "No person with that name found!",
     "searchLabel": "Name:",
-    "searchHint": "Search for a person"
+    "searchHint": "Jon Doe"
   },
   "viewOptions": {
     "filter": {
@@ -323,20 +383,24 @@
     }
   },
   "statistics": {
+    "title": "Statistics",
+    "loading": "Calculating statistic",
     "location": "Location",
     "birth_month": "birth month",
     "death_month": "death month",
     "lifeExpectancy": "Life Expectancy",
     "marriageAge": "Marriage age"
   },
-  "loading": {
-    "familyTree": "Loading family tree",
-    "statistic": "Calculating statistic"
-  },
   "errors": {
     "title": "Whoops, something went wrong",
-    "no_data": "We couldn't find any data. Please make sure to select a file over {0}."
+    "noData": "No data available.",
+    "stack": "Details for developers",
+    "noFileError": "No gedcom file selected",
+    "graphLoadingError": "The graph could not be loaded.",
+    "noPersonFound": "No person with that name found!",
+    "noSourceDescriptionError": "Source description {0} could not be found"
   },
   "ctrl": "Ctrl",
-  "linkContent": "here"
+  "linkContent": "here",
+  "externalContentButton": "Show external content"
 }
diff --git a/src/main.ts b/src/main.ts
index d80b5bfa..7de3ee59 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -40,13 +40,3 @@ export function unique<T extends Equals>(elements: T[]): T[] {
 export async function hasData() {
   return db.persons.toCollection().first().then(p => typeof p !== "undefined").catch(() => false);
 }
-
-export function getUrlOption<T>(name: string, fallback: T): T {
-  let url = new URL(window.location.href);
-  if (url.searchParams.has(name)) {
-    let value = url.searchParams.get(name) as T;
-    if (value) return value;
-  }
-
-  return fallback;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..e98243fc
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.tsx", "./public/*.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/types/gedcomx-js/gedcomx-js.d.ts b/types/gedcomx-js/gedcomx-js.d.ts
index 12c34824..8f4af050 100644
--- a/types/gedcomx-js/gedcomx-js.d.ts
+++ b/types/gedcomx-js/gedcomx-js.d.ts
@@ -81,6 +81,8 @@ declare module "gedcomx-js" {
 
     setAgents(agents: Agent[] | object[]): Root
 
+    addAgent(agent: Agent | object): Root
+
     getEvents(): Event[]
 
     setEvents(events: Event[] | object[]): Root
@@ -89,19 +91,19 @@ declare module "gedcomx-js" {
 
     getDocuments(): Document[]
 
-    setDocuments(documents: Document[]): Root
+    setDocuments(documents: Document[] | object[]): Root
 
-    addDocument(document: Document): Root
+    addDocument(document: Document | object): Root
 
     getPlaces(): PlaceDescription[]
 
     setPlaces(places: PlaceDescription[]): Root
 
-    addPlace(place: PlaceDescription): Root
+    addPlace(place: PlaceDescription | object): Root
 
     getAttribution(): Attribution
 
-    setAttribution(attribution: Attribution): Root
+    setAttribution(attribution: Attribution | object): Root
   }
 
   export default function GedcomX(json: any): Root;
@@ -119,9 +121,9 @@ declare module "gedcomx-js" {
   export class Attribution extends ExtensibleData {
     changeMessage: string
     contributor: ResourceReference
-    created: Date
+    created
     creator: ResourceReference
-    modified: Date
+    modified
 
     getChangeMessage(): string
 
@@ -131,17 +133,17 @@ declare module "gedcomx-js" {
 
     setContributor(contributor: object | ResourceReference): Attribution
 
-    getCreated(): Date
+    getCreated()
 
-    setCreated(date: Date | Number): Attribution
+    setCreated(date: number): Attribution
 
     getCreator(): ResourceReference
 
-    setCreator(creator: ResourceReference)
+    setCreator(creator: ResourceReference): Attribution
 
-    getModified(): Date
+    getModified()
 
-    setModified(date: Date | Number): Attribution
+    setModified(date: number): Attribution
   }
 
   export class Conclusion extends ExtensibleData {
@@ -154,31 +156,31 @@ declare module "gedcomx-js" {
 
     getAttribution(): Attribution;
 
-    setAttribution(attribution: Attribution);
+    setAttribution(attribution: Attribution): Conclusion;
 
     getAnalysis(): ResourceReference;
 
-    setAnalysis(analysis: ResourceReference);
+    setAnalysis(analysis: ResourceReference): Conclusion;
 
     getConfidence(): string;
 
-    setConfidence(confidence: string);
+    setConfidence(confidence: string): Conclusion;
 
     getLang(): string;
 
-    setLang(lang: string);
+    setLang(lang: string): Conclusion;
 
     getNotes(): Note[];
 
-    setNotes(notes: Note[]);
+    setNotes(notes: Note[]): Conclusion;
 
-    addNote(note: Note);
+    addNote(note: Note): Conclusion;
 
     getSources(): SourceReference[];
 
-    setSources(sources: SourceReference[]);
+    setSources(sources: SourceReference[]): Conclusion;
 
-    addSource(source: SourceReference);
+    addSource(source: SourceReference): Conclusion;
   }
 
   export class EvidenceReference extends ResourceReference {
@@ -235,7 +237,7 @@ declare module "gedcomx-js" {
 
     setCitations(citations: SourceCitation[] | object[]): SourceDescription
 
-    addCitation(citation: SourceCitation | object)
+    addCitation(citation: SourceCitation | object): SourceDescription
 
     getMediaType(): string
 
@@ -255,9 +257,9 @@ declare module "gedcomx-js" {
 
     addSource(source: SourceReference): SourceDescription
 
-    getAnalysis(): string
+    getAnalysis(): ResourceReference
 
-    setAnalysis(analysis: string): SourceDescription
+    setAnalysis(analysis: ResourceReference | object): SourceDescription
 
     getComponentOf(): SourceReference
 
@@ -285,7 +287,7 @@ declare module "gedcomx-js" {
 
     addRight(right: ResourceReference | object): SourceDescription
 
-    getCoverage(): Coverage
+    getCoverage(): Coverage[]
 
     setCoverage(coverage: Coverage[] | object[]): SourceDescription
 
@@ -319,9 +321,9 @@ declare module "gedcomx-js" {
 
     getValues(type?: string): string[]
 
-    setValues(values: string[], type?: string)
+    setValues(values: string[], type?: string): Identifiers
 
-    addValue(value: string, type?: string)
+    addValue(value: string, type?: string): Identifiers
   }
 
   export class Subject extends Conclusion {
@@ -338,7 +340,7 @@ declare module "gedcomx-js" {
 
     setEvidence(evidence: object[] | EvidenceReference[]);
 
-    addEvidence(evidence: object | EvidenceReference)
+    addEvidence(evidence: object | EvidenceReference): Subject
 
     getIdentifiers(): Identifiers
 
@@ -731,7 +733,7 @@ declare module "gedcomx-js" {
     setStreet6(street6: string): Address
   }
 
-  class Event extends Subject {
+  export class Event extends Subject {
     type: string
     date: Date
     place: PlaceReference
@@ -756,7 +758,7 @@ declare module "gedcomx-js" {
     addRole(role: EventRole | object): Event
   }
 
-  class Document extends Conclusion {
+  export class Document extends Conclusion {
     type: string
     extracted: string
     textType: string
@@ -779,7 +781,7 @@ declare module "gedcomx-js" {
     setText(text: string): Document
   }
 
-  class PlaceDescription extends Subject {
+  export class PlaceDescription extends Subject {
     type: string
     names: TextValue[]
     place: ResourceReference
@@ -824,7 +826,7 @@ declare module "gedcomx-js" {
     setSpatialDescription(spatial: ResourceReference): PlaceDescription
   }
 
-  class EventRole extends Conclusion {
+  export class EventRole extends Conclusion {
     person: ResourceReference
     type: string
     details: string
@@ -842,7 +844,7 @@ declare module "gedcomx-js" {
     setDetails(details: string): EventRole
   }
 
-  class Coverage extends ExtensibleData {
+  export class Coverage extends ExtensibleData {
     spatial: PlaceReference
     temporal: Date
 
diff --git a/website.iml b/website.iml
index 5cd5f1b4..70bbe1d2 100644
--- a/website.iml
+++ b/website.iml
@@ -7,5 +7,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="leaflet" level="application" />
   </component>
 </module>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 1305743d..f1974ba8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1318,6 +1318,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.42.0.tgz#484a1d638de2911e6f5a30c12f49c7e4a3270fb6"
   integrity sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==
 
+"@faker-js/faker@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.0.2.tgz#bab698c5d3da9c52744e966e0e3eedb6c8b05c37"
+  integrity sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -1682,6 +1687,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@react-leaflet/core@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
+  integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
+
 "@react-spring/animated@~9.7.2":
   version "9.7.2"
   resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.2.tgz#0119db8075e91d693ec45c42575541e01b104a70"
@@ -1728,10 +1738,10 @@
     "@react-spring/shared" "~9.7.2"
     "@react-spring/types" "~9.7.2"
 
-"@remix-run/router@1.6.3":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad"
-  integrity sha512-EXJysQ7J3veRECd0kZFQwYYd5sJMcq2O/m60zu1W2l3oVQ9xtub8jTOtYRE0+M2iomyG/W3Ps7+vp2kna0C27Q==
+"@remix-run/router@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.1.tgz#fea7ac35ae4014637c130011f59428f618730498"
+  integrity sha512-bgVQM4ZJ2u2CM8k1ey70o1ePFXsEzYVZoWghh6WjM8p59jQ7HxzbHW4SbnWFG7V9ig9chLawQxDTZ3xzOF8MkQ==
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
@@ -2038,6 +2048,11 @@
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.5.tgz#857c1afffd3f51319bbc5b301956aca68acaa7b8"
   integrity sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==
 
+"@types/d3-array@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.3.tgz#87d990bf504d14ad6b16766979d04e943c046dac"
+  integrity sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==
+
 "@types/d3-axis@*":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.2.tgz#96e11d51256baf5bdb2fa73a17d302993e79df07"
@@ -2064,7 +2079,7 @@
   dependencies:
     "@types/d3" "^3"
 
-"@types/d3-color@*":
+"@types/d3-color@*", "@types/d3-color@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
   integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
@@ -2116,7 +2131,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.4.tgz#2d50bd2b695f709797e1745644f6bc123e6e5f5a"
   integrity sha512-q7xbVLrWcXvSBBEoadowIUJ7sRpS1yvgMWnzHJggFy5cUZBq2HZL5k/pBSm0GdYWS1vs5/EDwMjSKF55PDY4Aw==
 
-"@types/d3-format@*":
+"@types/d3-format@*", "@types/d3-format@3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d"
   integrity sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==
@@ -2145,7 +2160,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz#50657f420d565a06c0b950a4b82eee0a369f2dea"
   integrity sha512-AbStKxNyWiMDQPGDguG2Kuhlq1Sv539pZSxYbx4UZeYkutpPwXCcgyiRrlV4YH64nIOsKx7XVnOMy9O7rJsXkg==
 
-"@types/d3-interpolate@*", "@types/d3-interpolate@^3.0.1":
+"@types/d3-interpolate@*", "@types/d3-interpolate@3.0.1", "@types/d3-interpolate@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
   integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
@@ -2194,6 +2209,13 @@
   dependencies:
     "@types/d3-time" "*"
 
+"@types/d3-scale@4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.2.tgz#41be241126af4630524ead9cb1008ab2f0f26e69"
+  integrity sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==
+  dependencies:
+    "@types/d3-time" "*"
+
 "@types/d3-selection@*":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.5.tgz#27cd53b7672d405025e2414d98532d7934c16ebd"
@@ -2218,7 +2240,12 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.0.tgz#ee7b6e798f8deb2d9640675f8811d0253aaa1946"
   integrity sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==
 
-"@types/d3-time@*":
+"@types/d3-time-format@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-2.1.0.tgz#011e0fb7937be34a9a8f580ae1e2f2f1336a8a22"
+  integrity sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==
+
+"@types/d3-time@*", "@types/d3-time@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
   integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
@@ -2401,6 +2428,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/leaflet@^1.9.3":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.3.tgz#7aac302189eb3aa283f444316167995df42a5467"
+  integrity sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/lodash@^4.14.172":
   version "4.14.195"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
@@ -2416,10 +2450,10 @@
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
   integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
 
-"@types/node@*", "@types/node@^20.2.5":
-  version "20.3.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
-  integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
+"@types/node@*", "@types/node@^20.3.3":
+  version "20.3.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.3.tgz#329842940042d2b280897150e023e604d11657d6"
+  integrity sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -2479,6 +2513,13 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/sanitize-html@^2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.9.0.tgz#5b609f7592de22ef80a0930c39670329753dca1b"
+  integrity sha512-4fP/kEcKNj2u39IzrxWYuf/FnCCwwQCpif6wwY6ROUS1EPRIfWJjGkY3HIowY1EX/VbX5e86yq8AAE7UPMgATg==
+  dependencies:
+    htmlparser2 "^8.0.0"
+
 "@types/scheduler@*":
   version "0.16.3"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
@@ -2678,7 +2719,7 @@
     prop-types "^15.5.10"
     react-use-measure "^2.0.4"
 
-"@visx/axis@3.1.0", "@visx/axis@^3.1.0":
+"@visx/axis@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@visx/axis/-/axis-3.1.0.tgz#775b221e5abfdec25304c607eeae8cda1a8bade6"
   integrity sha512-JDj/1VYx0JO0pHFtwoFtYcnqdoZFh/dpHImEl169S5nTslSFlIoNTXA/ekpBP6ELkEZ59gmF1X5k29x6MFBwCA==
@@ -2692,6 +2733,20 @@
     classnames "^2.3.1"
     prop-types "^15.6.0"
 
+"@visx/axis@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@visx/axis/-/axis-3.2.0.tgz#6c6fc9bae92388f94a4b1c97b913f77b9b352fae"
+  integrity sha512-EqRsJshvXDB2R2o9U8BHiWNLz+HtHsVcPF0PKNO6BN20okV5KogOl1KPb0wUB0xD4vbAzc94fIm+MBaijpEWQg==
+  dependencies:
+    "@types/react" "*"
+    "@visx/group" "3.0.0"
+    "@visx/point" "3.0.1"
+    "@visx/scale" "3.2.0"
+    "@visx/shape" "3.2.0"
+    "@visx/text" "3.0.0"
+    classnames "^2.3.1"
+    prop-types "^15.6.0"
+
 "@visx/bounds@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@visx/bounds/-/bounds-3.0.0.tgz#cf357cbff90a1fe5f95eb9d9288dd8794b744a7f"
@@ -2915,7 +2970,14 @@
     d3-scale "^4.0.2"
     d3-time "^2.1.1"
 
-"@visx/shape@3.0.0", "@visx/shape@^3.0.0":
+"@visx/scale@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@visx/scale/-/scale-3.2.0.tgz#a10a41e77331061819e4c9568e76158f3489a951"
+  integrity sha512-8XOZ+LDr/QVC61EBtO4xvcRJQ/M0bfQHme/EJsiZU5DabrD3cHJAOxNW6pLF5PkvDGQII2V3delijNPDqTiTNg==
+  dependencies:
+    "@visx/vendor" "3.2.0"
+
+"@visx/shape@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@visx/shape/-/shape-3.0.0.tgz#a1d4bd0e12cc94c164252f175997932a09c24652"
   integrity sha512-t6lpP9bIA1vwChDwiOUWl92ro29XF/M8IVNWRA0pm4LGxGGTACvxG3Agfcdi3JprahUVqPpnRCwuR36PDanq3Q==
@@ -2933,15 +2995,33 @@
     lodash "^4.17.21"
     prop-types "^15.5.10"
 
-"@visx/stats@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@visx/stats/-/stats-3.0.0.tgz#b3a9af638cf054b62c15a00f1e11cbbe84b5ba00"
-  integrity sha512-NtzAzzP4QMTLGPrBXzn8NU7VbvWPUShtLwbVzwIivIht3FWa9vnhu64mOYWEPc32u+JgnvuymAMZoifPF8ilTw==
+"@visx/shape@3.2.0", "@visx/shape@^3.0.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@visx/shape/-/shape-3.2.0.tgz#2ddc9bbb17bcea32835fea6d2a09b20a3d119791"
+  integrity sha512-NJw5lWokh6tvViOtj5eiZKJuqlE7QPhJUTi0CiBI5h3vH0h84PGxqvdH+PNYr+Hze4U+qKuppDmjFkFx/8MjTw==
+  dependencies:
+    "@types/d3-path" "^1.0.8"
+    "@types/d3-shape" "^1.3.1"
+    "@types/lodash" "^4.14.172"
+    "@types/react" "*"
+    "@visx/curve" "3.0.0"
+    "@visx/group" "3.0.0"
+    "@visx/scale" "3.2.0"
+    classnames "^2.3.1"
+    d3-path "^1.0.5"
+    d3-shape "^1.2.0"
+    lodash "^4.17.21"
+    prop-types "^15.5.10"
+
+"@visx/stats@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@visx/stats/-/stats-3.2.0.tgz#e39216f16cf0293c67330cc9feab3f7fb03fc24c"
+  integrity sha512-aySaeqzC2xcItKTHt046kgm0qA6Yai0GDY34M+dHZbW/Q3JMGSbWeCZYiUW72S6Xruolc09E+fcFVgTGw1uUCw==
   dependencies:
     "@types/d3-shape" "^1.3.2"
     "@types/react" "*"
     "@visx/group" "3.0.0"
-    "@visx/scale" "3.0.0"
+    "@visx/scale" "3.2.0"
     classnames "^2.3.1"
     d3-shape "^1.2.0"
     prop-types "^15.5.10"
@@ -2980,6 +3060,27 @@
     prop-types "^15.5.10"
     react-use-measure "^2.0.4"
 
+"@visx/vendor@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@visx/vendor/-/vendor-3.2.0.tgz#05f1ab97ced594d456abe60d2136b298c08d6f1b"
+  integrity sha512-QBvachNdlwnz5aimPiXJwErGaGL/FjP/lzXT1uoHuGQQeeSxvodUd6tuSt/sxaoVFzqup557qJdVLqxSCQYs5A==
+  dependencies:
+    "@types/d3-array" "3.0.3"
+    "@types/d3-color" "3.1.0"
+    "@types/d3-format" "3.0.1"
+    "@types/d3-interpolate" "3.0.1"
+    "@types/d3-scale" "4.0.2"
+    "@types/d3-time" "3.0.0"
+    "@types/d3-time-format" "2.1.0"
+    d3-array "3.2.1"
+    d3-color "3.1.0"
+    d3-format "3.1.0"
+    d3-interpolate "3.0.1"
+    d3-scale "4.0.2"
+    d3-time "3.1.0"
+    d3-time-format "4.1.0"
+    internmap "2.0.3"
+
 "@visx/visx@^3.1.2":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@visx/visx/-/visx-3.1.2.tgz#8a68591b1e7093ba5374567b155a6750d5744a72"
@@ -4379,6 +4480,13 @@ d3-array@2, d3-array@^2.6.0:
   dependencies:
     internmap "1 - 2"
 
+d3-array@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.1.tgz#39331ea706f5709417d31bbb6ec152e0328b39b3"
+  integrity sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==
+  dependencies:
+    internmap "1 - 2"
+
 d3-axis@3:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
@@ -4409,7 +4517,7 @@ d3-cloud@^1.2.5:
   dependencies:
     d3-dispatch "^1.0.3"
 
-"d3-color@1 - 3", d3-color@3:
+"d3-color@1 - 3", d3-color@3, d3-color@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
@@ -4484,7 +4592,7 @@ d3-force@3:
     d3-quadtree "1 - 3"
     d3-timer "1 - 3"
 
-"d3-format@1 - 3", d3-format@3:
+"d3-format@1 - 3", d3-format@3, d3-format@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
@@ -4518,7 +4626,7 @@ d3-interpolate-path@2.2.1:
   resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz#fd8ff20a90aff3f380bcd1c15305e7b531e55d07"
   integrity sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q==
 
-"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3, d3-interpolate@^3.0.1:
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3, d3-interpolate@3.0.1, d3-interpolate@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
@@ -4568,7 +4676,7 @@ d3-scale-chromatic@3:
     d3-color "1 - 3"
     d3-interpolate "1 - 3"
 
-d3-scale@4, d3-scale@^4.0.2:
+d3-scale@4, d3-scale@4.0.2, d3-scale@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
@@ -4610,14 +4718,14 @@ d3-shape@^2.0.0:
   dependencies:
     d3-path "1 - 2"
 
-"d3-time-format@2 - 4", d3-time-format@4:
+"d3-time-format@2 - 4", d3-time-format@4, d3-time-format@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
   integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
   dependencies:
     d3-time "1 - 3"
 
-"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3, d3-time@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
   integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
@@ -4950,12 +5058,21 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -4981,6 +5098,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -4998,6 +5122,15 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -5081,6 +5214,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^4.2.0, entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -6121,6 +6259,16 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+htmlparser2@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -6293,7 +6441,7 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-"internmap@1 - 2":
+"internmap@1 - 2", internmap@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
@@ -6445,6 +6593,11 @@ is-plain-obj@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
   integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-potential-custom-element-name@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
@@ -7305,6 +7458,11 @@ launch-editor@^2.6.0:
     picocolors "^1.0.0"
     shell-quote "^1.7.3"
 
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7933,6 +8091,11 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 parse5@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -8573,7 +8736,7 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
+postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
   version "8.4.24"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
   integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
@@ -8801,6 +8964,13 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-leaflet@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780"
+  integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==
+  dependencies:
+    "@react-leaflet/core" "^2.1.0"
+
 react-localization@^1.0.19:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/react-localization/-/react-localization-1.0.19.tgz#b65a7fa58096cff6aa38bc3a0c4817ec97469ef0"
@@ -8813,20 +8983,20 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^6.11.2:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.13.0.tgz#6651f456bb2af42ef14f6880123b1f575539e81f"
-  integrity sha512-6Nqoqd7fgwxxVGdbiMHTpDHCYPq62d7Wk1Of7B82vH7ZPwwsRaIa22zRZKPPg413R5REVNiyuQPKDG1bubcOFA==
+react-router-dom@^6.14.1:
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.1.tgz#0ad7ba7abdf75baa61169d49f096f0494907a36f"
+  integrity sha512-ssF6M5UkQjHK70fgukCJyjlda0Dgono2QGwqGvuk7D+EDGHdacEN3Yke2LTMjkrpHuFwBfDFsEjGVXBDmL+bWw==
   dependencies:
-    "@remix-run/router" "1.6.3"
-    react-router "6.13.0"
+    "@remix-run/router" "1.7.1"
+    react-router "6.14.1"
 
-react-router@6.13.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.13.0.tgz#7e4427a271dae0cafbdb88c56ccbd9b1434ee93f"
-  integrity sha512-Si6KnfEnJw7gUQkNa70dlpI1bul46FuSxX5t5WwlUBxE25DAz2BjVkwaK8Y2s242bQrZPXCpmwLPtIO5pv4tXg==
+react-router@6.14.1:
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.14.1.tgz#5e82bcdabf21add859dc04b1859f91066b3a5810"
+  integrity sha512-U4PfgvG55LdvbQjg5Y9QRWyVxIdO1LlpYT7x+tMAxd9/vmiPuJhIwdxZuIQLN/9e3O4KFDHYfR9gzGeYMasW8g==
   dependencies:
-    "@remix-run/router" "1.6.3"
+    "@remix-run/router" "1.7.1"
 
 react-scripts@5.0.1:
   version "5.0.1"
@@ -9197,6 +9367,18 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sanitize-html@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
+  integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^8.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sanitize.css@*:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"
@@ -9764,7 +9946,7 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tailwindcss@^3.0.2:
+tailwindcss@^3.0.2, tailwindcss@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
   integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
@@ -10026,10 +10208,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
 typeson-registry@^1.0.0-alpha.20:
   version "1.0.0-alpha.39"