diff --git a/package-lock.json b/package-lock.json
index e549411b3..c68ef8082 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,7 +52,11 @@
         "@ngx-translate/core": "^16.0.4",
         "@ngx-translate/http-loader": "^16.0.1",
         "@openid/appauth": "^1.3.1",
+        "@placemarkio/check-geojson": "^0.1.14",
         "@sentry/browser": "^7.37.2",
+        "@tmcw/togeojson": "^7.1.2",
+        "@turf/clean-coords": "^7.2.0",
+        "@turf/truncate": "^7.2.0",
         "@turf/turf": "^7.1.0",
         "@types/leaflet-draw": "^1.0.6",
         "angular-svg-icon": "^16.1.0",
@@ -77,6 +81,7 @@
         "ngx-file-drop": "^16.0.0",
         "ngx-logger": "^4.2.1",
         "ngx-markdown": "^20.0.0",
+        "nve-designsystem": "^2.16.0",
         "observable-webworker": "^3.4.0",
         "pouchdb-adapter-idb": "^7.2.2",
         "rxjs": "^7.8.1",
@@ -4526,6 +4531,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.2.0.tgz",
+      "integrity": "sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.6.3",
       "dev": true,
@@ -5090,6 +5104,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@geoman-io/leaflet-geoman-free": {
       "version": "2.14.2",
       "license": "MIT",
@@ -6196,6 +6235,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.4.0.tgz",
+      "integrity": "sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/react": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz",
+      "integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==",
+      "license": "BSD-3-Clause",
+      "peerDependencies": {
+        "@types/react": "17 || 18 || 19"
+      }
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.1.tgz",
+      "integrity": "sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.4.0"
+      }
+    },
     "node_modules/@lmdb/lmdb-darwin-arm64": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.4.2.tgz",
@@ -7599,6 +7662,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/@placemarkio/check-geojson": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@placemarkio/check-geojson/-/check-geojson-0.1.14.tgz",
+      "integrity": "sha512-PZvNKzt6STytUw21TUkqU+TG6dbwTWb1ACosvInBYTBm37zsr8C74J6crBTQ3BWkyd6YeitYd4HibJzBEyk6Aw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.52.3",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.3.tgz",
@@ -8430,6 +8502,45 @@
         "node": ">=10"
       }
     },
+    "node_modules/@shoelace-style/animations": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.2.0.tgz",
+      "integrity": "sha512-avvo1xxkLbv2dgtabdewBbqcJfV0e0zCwFqkPMnHFGbJbBHorRFfMAHh1NG9ymmXn0jW95ibUVH03E1NYXD6Gw==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/claviska"
+      }
+    },
+    "node_modules/@shoelace-style/localize": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz",
+      "integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA==",
+      "license": "MIT"
+    },
+    "node_modules/@shoelace-style/shoelace": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.20.1.tgz",
+      "integrity": "sha512-FSghU95jZPGbwr/mybVvk66qRZYpx5FkXL+vLNpy1Vp8UsdwSxXjIHE3fsvMbKWTKi9UFfewHTkc5e7jAqRYoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^4.1.0",
+        "@floating-ui/dom": "^1.6.12",
+        "@lit/react": "^1.0.6",
+        "@shoelace-style/animations": "^1.2.0",
+        "@shoelace-style/localize": "^3.2.1",
+        "composed-offset-position": "^0.0.6",
+        "lit": "^3.2.1",
+        "qr-creator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14.17.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/claviska"
+      }
+    },
     "node_modules/@sigstore/bundle": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-3.1.0.tgz",
@@ -8664,6 +8775,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tmcw/togeojson": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@tmcw/togeojson/-/togeojson-7.1.2.tgz",
+      "integrity": "sha512-QKnFs9DAuqqBVj4d6c69tV1Dj2TspSBTqffivoN0YoBCVdP/JY1+WaYCJbzU49RkoU5NOSOJ3jtFHCdEUVh21A==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@tootallnate/quickjs-emscripten": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
@@ -10058,36 +10178,42 @@
       }
     },
     "node_modules/@turf/clean-coords": {
-      "version": "7.1.0",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/clean-coords/-/clean-coords-7.2.0.tgz",
+      "integrity": "sha512-+5+J1+D7wW7O/RDXn46IfCHuX1gIV1pIAQNSA7lcDbr3HQITZj334C4mOGZLEcGbsiXtlHWZiBtm785Vg8i+QQ==",
       "license": "MIT",
       "dependencies": {
-        "@turf/helpers": "^7.1.0",
-        "@turf/invariant": "^7.1.0",
+        "@turf/helpers": "^7.2.0",
+        "@turf/invariant": "^7.2.0",
         "@types/geojson": "^7946.0.10",
-        "tslib": "^2.6.2"
+        "tslib": "^2.8.1"
       },
       "funding": {
         "url": "https://opencollective.com/turf"
       }
     },
     "node_modules/@turf/clean-coords/node_modules/@turf/helpers": {
-      "version": "7.1.0",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.2.0.tgz",
+      "integrity": "sha512-cXo7bKNZoa7aC7ydLmUR02oB3IgDe7MxiPuRz3cCtYQHn+BJ6h1tihmamYDWWUlPHgSNF0i3ATc4WmDECZafKw==",
       "license": "MIT",
       "dependencies": {
         "@types/geojson": "^7946.0.10",
-        "tslib": "^2.6.2"
+        "tslib": "^2.8.1"
       },
       "funding": {
         "url": "https://opencollective.com/turf"
       }
     },
     "node_modules/@turf/clean-coords/node_modules/@turf/invariant": {
-      "version": "7.1.0",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.2.0.tgz",
+      "integrity": "sha512-kV4u8e7Gkpq+kPbAKNC21CmyrXzlbBgFjO1PhrHPgEdNqXqDawoZ3i6ivE3ULJj2rSesCjduUaC/wyvH/sNr2Q==",
       "license": "MIT",
       "dependencies": {
-        "@turf/helpers": "^7.1.0",
+        "@turf/helpers": "^7.2.0",
         "@types/geojson": "^7946.0.10",
-        "tslib": "^2.6.2"
+        "tslib": "^2.8.1"
       },
       "funding": {
         "url": "https://opencollective.com/turf"
@@ -11838,6 +11964,19 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/line-split/node_modules/@turf/truncate": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/truncate/-/truncate-6.5.0.tgz",
+      "integrity": "sha512-pFxg71pLk+eJj134Z9yUoRhIi8vqnnKvCYwdT4x/DQl/19RVdq1tV3yqOT3gcTQNfniteylL5qV1uTBDV5sgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/line-to-polygon": {
       "version": "7.1.0",
       "license": "MIT",
@@ -13690,11 +13829,41 @@
       }
     },
     "node_modules/@turf/truncate": {
-      "version": "6.5.0",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/truncate/-/truncate-7.2.0.tgz",
+      "integrity": "sha512-jyFzxYbPugK4XjV5V/k6Xr3taBjjvo210IbPHJXw0Zh7Y6sF+hGxeRVtSuZ9VP/6oRyqAOHKUrze+OOkPqBgUg==",
       "license": "MIT",
       "dependencies": {
-        "@turf/helpers": "^6.5.0",
-        "@turf/meta": "^6.5.0"
+        "@turf/helpers": "^7.2.0",
+        "@turf/meta": "^7.2.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/truncate/node_modules/@turf/helpers": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.2.0.tgz",
+      "integrity": "sha512-cXo7bKNZoa7aC7ydLmUR02oB3IgDe7MxiPuRz3cCtYQHn+BJ6h1tihmamYDWWUlPHgSNF0i3ATc4WmDECZafKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/truncate/node_modules/@turf/meta": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.2.0.tgz",
+      "integrity": "sha512-igzTdHsQc8TV1RhPuOLVo74Px/hyPrVgVOTgjWQZzt3J9BVseCdpfY/0cJBdlSRI4S/yTmmHl7gAqjhpYH5Yaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.2.0",
+        "@types/geojson": "^7946.0.10"
       },
       "funding": {
         "url": "https://opencollective.com/turf"
@@ -14042,19 +14211,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/turf/node_modules/@turf/truncate": {
-      "version": "7.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@turf/helpers": "^7.1.0",
-        "@turf/meta": "^7.1.0",
-        "@types/geojson": "^7946.0.10",
-        "tslib": "^2.6.2"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/union": {
       "version": "7.1.0",
       "license": "MIT",
@@ -14785,6 +14941,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/responselike": {
       "version": "1.0.0",
       "dev": true,
@@ -14871,8 +15037,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/@types/websql": {
       "version": "0.0.27",
@@ -16572,6 +16737,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/composed-offset-position": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.6.tgz",
+      "integrity": "sha512-Q7dLompI6lUwd7LWyIcP66r4WcS9u7AL2h8HaeipiRfCRPLMWqRx8fYsjb4OHi6UQFifO7XtNC2IlEJ1ozIFxw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@floating-ui/utils": "^0.2.5"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -17162,6 +17336,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/custom-event": {
       "version": "1.0.1",
       "dev": true,
@@ -19794,6 +19975,12 @@
         }
       }
     },
+    "node_modules/fontfaceobserver": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
+      "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -22217,6 +22404,37 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/lit": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz",
+      "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.1.tgz",
+      "integrity": "sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.4.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.1.tgz",
+      "integrity": "sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/lmdb": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.4.2.tgz",
@@ -24269,6 +24487,20 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nve-designsystem": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/nve-designsystem/-/nve-designsystem-2.16.0.tgz",
+      "integrity": "sha512-5GYYHtfBBQOLHZjN+r6jX9Fj76IKysuN312THUPc7U5nkzRi+Bl99DZIMejALUjj3xNCmOZBUn7erowxummfVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@shoelace-style/shoelace": "^2.20.1",
+        "fontfaceobserver": "^2.3.0",
+        "lit": "^3.3.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "^4.44.2"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "dev": true,
@@ -25605,6 +25837,12 @@
         "node": ">=0.9"
       }
     },
+    "node_modules/qr-creator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
+      "integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==",
+      "license": "MIT"
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "dev": true,
diff --git a/package.json b/package.json
index c72d3d8d1..5ac1b8496 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,11 @@
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",
     "@openid/appauth": "^1.3.1",
+    "@placemarkio/check-geojson": "^0.1.14",
     "@sentry/browser": "^7.37.2",
+    "@tmcw/togeojson": "^7.1.2",
+    "@turf/clean-coords": "^7.2.0",
+    "@turf/truncate": "^7.2.0",
     "@turf/turf": "^7.1.0",
     "@types/leaflet-draw": "^1.0.6",
     "angular-svg-icon": "^16.1.0",
@@ -106,6 +110,7 @@
     "ngx-file-drop": "^16.0.0",
     "ngx-logger": "^4.2.1",
     "ngx-markdown": "^20.0.0",
+    "nve-designsystem": "^2.16.0",
     "observable-webworker": "^3.4.0",
     "pouchdb-adapter-idb": "^7.2.2",
     "rxjs": "^7.8.1",
diff --git a/src/app/core/services/database/database.service.ts b/src/app/core/services/database/database.service.ts
index 2b53a0df0..b6f10ca3f 100644
--- a/src/app/core/services/database/database.service.ts
+++ b/src/app/core/services/database/database.service.ts
@@ -55,6 +55,7 @@ export class DatabaseService {
    * @returns Returns a promise with the value of the given key
    */
   async get<T>(key: string): Promise<T> {
+    // TODO: Legg til null på type
     await firstValueFrom(this.ready$);
     return this.database.get(key);
   }
diff --git a/src/app/core/services/geojson/geojson-item.model.ts b/src/app/core/services/geojson/geojson-item.model.ts
new file mode 100644
index 000000000..3144ac97e
--- /dev/null
+++ b/src/app/core/services/geojson/geojson-item.model.ts
@@ -0,0 +1,8 @@
+export interface GeoJSONItem {
+  id: string;
+  name: string;
+  date?: number;
+  visibleOnMap?: boolean;
+  comment?: string;
+  lengthKm?: number;
+}
diff --git a/src/app/core/services/geojson/geojson.service.ts b/src/app/core/services/geojson/geojson.service.ts
new file mode 100644
index 000000000..89f619f69
--- /dev/null
+++ b/src/app/core/services/geojson/geojson.service.ts
@@ -0,0 +1,127 @@
+import { Injectable, effect, inject, signal } from '@angular/core';
+import { DatabaseService } from '../database/database.service';
+import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
+import { GeoJSONItem } from './geojson-item.model';
+import { LoggingService } from 'src/app/modules/shared/services/logging/logging.service';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { cleanFeatureCollection } from 'src/app/pages/plans/geojson';
+import { length } from '@turf/turf';
+
+const DEBUG_TAG = 'GeoJSON';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GeoJSONService {
+  private db = inject(DatabaseService);
+  private logger = inject(LoggingService);
+
+  metadata = signal<GeoJSONItem[]>([]);
+  readonly metadata$ = toObservable(this.metadata);
+  private initialized = false;
+
+  constructor() {
+    this.init();
+
+    effect(() => {
+      const metadata = this.metadata();
+      if (!this.initialized) return;
+      this.saveMetadata(metadata);
+    });
+  }
+
+  private async init() {
+    this.logger.debug('Init', DEBUG_TAG);
+    const items = await this.getMetadata();
+    if (items && items.length > 0) {
+      this.metadata.set(items);
+    }
+    setTimeout(() => (this.initialized = true)); // For å unngå en første unødvendig lagring i effecten
+  }
+
+  private async saveMetadata(items: GeoJSONItem[]) {
+    this.logger.debug('Saving metadata', DEBUG_TAG, { n: items.length });
+    await this.db.set('geojson-metadata', items);
+  }
+
+  private getMetadata() {
+    this.logger.debug('Reading metadata', DEBUG_TAG);
+    return this.db.get<GeoJSONItem[]>('geojson-metadata');
+  }
+
+  /**
+   * Kalkulerer lengden av LineString features i et GeoJSON objekt
+   * @param geojson
+   * @returns lengde i kilometer
+   */
+  private calculateLengthKm(geojson: Feature<Geometry, GeoJsonProperties>[]): number {
+    return geojson.reduce((sum, feature) => sum + length(feature), 0);
+  }
+
+  /**
+   * Updates metadata for a given item
+   * @param item the geojson item to update
+   */
+  updateMetadata(item: GeoJSONItem) {
+    this.metadata.update((items) => {
+      const other = items.filter((x) => x.id !== item.id);
+      return [...other, item];
+    });
+  }
+
+  /**
+   * Save a geojson object with a given id
+   * @param metadata metadata for the geojson
+   * @param geojson geojson object
+   */
+  async save(metadata: GeoJSONItem, geojson: FeatureCollection): Promise<void> {
+    this.logger.debug('Save', DEBUG_TAG, { metadata });
+    try {
+      cleanFeatureCollection(geojson);
+    } catch (error) {
+      this.logger.error(error, DEBUG_TAG, 'Error in cleaning process, but object may be mutated - half cleaned');
+    }
+
+    try {
+      const lineFeatures = geojson.features.filter((f) => f.geometry.type === 'LineString');
+
+      if (lineFeatures.length) {
+        const lengthKm = this.calculateLengthKm(lineFeatures);
+        metadata.lengthKm = lengthKm;
+      }
+
+      await this.db.set(`geojson:${metadata.id}`, geojson);
+      this.metadata.update((items) => [...items, metadata]);
+    } catch (error) {
+      this.logger.error(error, DEBUG_TAG, 'Could not save', { metadata, geojson });
+      throw error;
+    }
+  }
+
+  /**
+   * Get a geojson object by id
+   * @param id unique id for the geojson
+   */
+  async get(id: GeoJSONItem['id']): Promise<FeatureCollection> {
+    this.logger.debug('Get', DEBUG_TAG, { id });
+    return this.db.get<FeatureCollection>(`geojson:${id}`);
+  }
+
+  /**
+   * Remove a geojson object by id
+   * @param id unique id for the geojson
+   */
+  async remove(id: GeoJSONItem['id']): Promise<void> {
+    this.logger.debug('Remove', DEBUG_TAG, { id });
+    await this.db.remove(`geojson:${id}`);
+    this.metadata.update((items) => items.filter((item) => item.id !== id));
+  }
+
+  /**
+   * List all geojson ids
+   */
+  // async listIds(): Promise<GeoJSONItem['id'][]> {
+  //   const keys = await this.db.keys();
+  //   return keys.filter((k) => k.startsWith('geojson:')).map((k) => k.replace('geojson:', ''));
+  // }
+}
diff --git a/src/app/modules/map-image/map-image.component.ts b/src/app/modules/map-image/map-image.component.ts
index ef3775fc3..ec46766a4 100644
--- a/src/app/modules/map-image/map-image.component.ts
+++ b/src/app/modules/map-image/map-image.component.ts
@@ -50,6 +50,7 @@ export class MapImageComponent {
         ...x.layerConfig.options,
       })
     );
+
     const mapSettings: L.MapOptions = {
       zoom: settings.map.tiles.zoomLevelObservationList,
       maxZoom: settings.map.tiles.maxZoom,
diff --git a/src/app/modules/map/components/map/map.component.html b/src/app/modules/map/components/map/map.component.html
index 6c76c5152..7363737d0 100644
--- a/src/app/modules/map/components/map/map.component.html
+++ b/src/app/modules/map/components/map/map.component.html
@@ -9,18 +9,14 @@
   ></app-map-controls>
 }
 
-@if (showObserverTrips()) {
-  <div
-    #observerTripsContainer
-    class="observer-trip-backdrop"
-    style="display: none"
-    (click)="removeObserverTripDescription()"
-  >
+<!-- TODO: I stedet for dette, få opp detaljside for en tur som modal? -->
+@if (showObserverTrips() && metadataName()) {
+  <div class="observer-trip-backdrop" (click)="removeObserverTripDescription()">
     <div class="observer-trip-desc">
       <div>
-        <strong>Obsturbeskrivelse{{ observationTripName ? " " + observationTripName : "" }}:</strong>
+        <strong>Obsturbeskrivelse{{ metadataName() ? " " + metadataName() : "" }}:</strong>
       </div>
-      <div>{{ observationTripDescription }}</div>
+      <div>{{ metadataDescription() }}</div>
     </div>
   </div>
 }
diff --git a/src/app/modules/map/components/map/map.component.ts b/src/app/modules/map/components/map/map.component.ts
index 9d2fc3c89..f194b429a 100644
--- a/src/app/modules/map/components/map/map.component.ts
+++ b/src/app/modules/map/components/map/map.component.ts
@@ -1,7 +1,6 @@
 import {
   AfterViewInit,
   Component,
-  ElementRef,
   EventEmitter,
   Injector,
   NgZone,
@@ -9,7 +8,6 @@ import {
   OnInit,
   Output,
   inject,
-  viewChild,
   input,
   effect,
   untracked,
@@ -19,7 +17,7 @@ import { Capacitor } from '@capacitor/core';
 import { Position } from '@capacitor/geolocation';
 import { Platform } from '@ionic/angular/standalone';
 import L from 'leaflet';
-import { BehaviorSubject, combineLatest, firstValueFrom, fromEventPattern, race, Subject, timer } from 'rxjs';
+import { BehaviorSubject, combineLatest, firstValueFrom, fromEventPattern, Subject, timer } from 'rxjs';
 import { distinctUntilChanged, filter, take, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { isAndroidOrIos } from 'src/app/core/helpers/ionic/platform-helper';
 import { MapLayerZIndex } from 'src/app/core/models/maplayer-zindex.enum';
@@ -46,10 +44,12 @@ import { MapService } from '../../services/map/map.service';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
 import { MapControlsComponent } from '../map-controls/map-controls.component';
 import type { FeatureCollection } from 'geojson';
+import { GeoJSONService } from 'src/app/core/services/geojson/geojson.service';
+import { GeoJSONItem } from 'src/app/core/services/geojson/geojson-item.model';
+import { TranslateService } from '@ngx-translate/core';
 
 const DEBUG_TAG = 'MapComponent';
 
-const noObserverTripDescription = 'Turen har ikke beskrivelse';
 const observerTripsMinZoom = 10;
 
 export const isTopoMapLayer = (mapId: string) => (<string[]>Object.values(TopoMapLayer)).includes(mapId);
@@ -95,6 +95,8 @@ export class MapComponent implements OnInit, OnDestroy, AfterViewInit {
   private platform = inject(Platform);
   private mapZoomService = inject(MapZoomService);
   private observerTripsService = inject(ObserverTripsService);
+  private geoJSONService = inject(GeoJSONService);
+  private translateService = inject(TranslateService);
 
   readonly showControls = input(true);
   readonly showZoomButtons = input(true);
@@ -135,11 +137,25 @@ export class MapComponent implements OnInit, OnDestroy, AfterViewInit {
    */
   readonly activateFollowModeOnStartup = input(false);
 
-  readonly observerTripsContainer = viewChild<ElementRef<HTMLDivElement>>('observerTripsContainer');
-  observationTripName = '';
-  observationTripDescription?: string;
-  private observationTripLayers?: L.GeoJSON[] | null;
-  private removeObserverTripEventHandlers = new Subject<void>();
+  readonly metadataName = signal<string | undefined>(undefined);
+  readonly metadataDescription = signal<string | undefined>(undefined);
+
+  /**
+   * Holds all active geojson layers and handler info, keyed by unique id (e.g. trip id)
+   */
+  private geojsonLayers = new Map<
+    string,
+    {
+      /**
+       * Leaflet layer with GeoJSON FeatureCollection
+       */
+      layer: L.Layer;
+      /**
+       * Save event handler so it can be removed if the layer is removed
+       */
+      showGeojsonWhenZoomedIn: () => void;
+    }
+  >();
 
   private map?: L.Map;
   private layerGroup = L.layerGroup();
@@ -235,85 +251,89 @@ export class MapComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   removeObserverTripDescription() {
-    const element = this.observerTripsContainer();
-    if (element) {
-      element.nativeElement.style.display = 'none';
-    }
-  }
-
-  private removeObserverTripMapLayers(map: L.Map) {
-    if (this.observationTripLayers != null) {
-      this.observationTripLayers.forEach((l) => {
-        if (map.hasLayer(l)) {
-          map.removeLayer(l);
-        }
-      });
-    }
-    this.observationTripLayers = null;
+    this.metadataName.set(undefined);
+    this.metadataDescription.set(undefined);
   }
 
-  private async showOrHideObserverTripsLayer(map: L.Map, geojson: FeatureCollection | null) {
-    if (geojson == null) {
-      this.removeObserverTripMapLayers(map);
-      this.removeObserverTripEventHandlers.next();
-      return;
-    }
-
-    // NB: The side menu icon has the same style
-    const geojsonLayer = L.geoJSON(geojson, { style: { dashArray: '4', color: 'red', stroke: true } });
-    this.observationTripLayers = [geojsonLayer];
-    let layerToBindClickHandlerTo: L.GeoJSON;
+  /**
+   * Add a single geojson layer by id.
+   * @param map Leaflet map
+   * @param id Unique id for the geojson layer
+   * @param geojson FeatureCollection to add
+   * @param metadata Metadata associated with the geojson layer
+   */
+  private async addGeojsonLayer(map: L.Map, id: string, geojson: FeatureCollection, metadata?: GeoJSONItem) {
+    const pointIcon = L.icon({
+      iconUrl: '/assets/icon/map/prev-used-place.svg',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      shadowUrl: 'leaflet/marker-shadow.png',
+      shadowSize: [41, 41],
+    });
+    const geojsonLayer = L.geoJSON(geojson, {
+      style: { dashArray: '4', color: 'red', stroke: true },
+      pointToLayer: (_, latlng) => {
+        return L.marker(latlng, { icon: pointIcon });
+      },
+    });
 
+    let extraTapRadiusLayer: L.Layer | undefined;
     if (isAndroidOrIos(this.platform)) {
       // To get a bigger tap hit radius on devices, add the geojson twice with much wider stroke
-      const bgLayer = L.geoJSON(geojson, { style: { color: 'rgba(0,0,0,0)', weight: 30, stroke: true } });
-      layerToBindClickHandlerTo = bgLayer;
-      this.observationTripLayers.push(bgLayer);
-    } else {
-      layerToBindClickHandlerTo = geojsonLayer;
+      extraTapRadiusLayer = L.geoJSON(geojson, { style: { color: 'rgba(0,0,0,0)', weight: 30, stroke: true } });
     }
 
+    const layer: L.Layer = extraTapRadiusLayer ? L.featureGroup([geojsonLayer, extraTapRadiusLayer]) : geojsonLayer;
+
+    // Add layer to map if zoom is sufficient
     if (map.getZoom() >= observerTripsMinZoom) {
-      this.observationTripLayers.forEach((l) => l.addTo(map));
+      layer.addTo(map);
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const clickHandler = (e: any) => {
-      this.observationTripName = e.layer?.feature?.properties?.navn;
-      this.observationTripDescription = e.layer?.feature?.properties?.beskrivelse || noObserverTripDescription;
-      const container = this.observerTripsContainer();
-      if (container) {
-        container.nativeElement.style.display = 'block';
-      }
+    // Click handler for this geojson
+    const setMetadata = (e: L.LeafletMouseEvent) => {
+      const missingName = this.translateService.instant('PLANS.MISSING_NAME');
+      const missingDescription = this.translateService.instant('PLANS.MISSING_COMMENT');
+      const name = metadata?.name || e.layer?.feature?.properties?.navn || missingName;
+      const description = metadata?.comment || e.layer?.feature?.properties?.beskrivelse || missingDescription;
+      this.metadataName.set(name);
+      this.metadataDescription.set(description);
     };
 
-    const addOrRemoveLayers = () => {
+    // Zoom handler for this geojson
+    const showGeojsonLayerWhenZoomedIn = () => {
       const zoomLevel = map.getZoom();
       if (zoomLevel < observerTripsMinZoom) {
-        if (map.hasLayer(geojsonLayer)) {
-          this.observationTripLayers?.forEach((l) => map.removeLayer(l));
-        }
+        if (map.hasLayer(layer)) map.removeLayer(layer);
       } else {
-        if (!map.hasLayer(geojsonLayer)) {
-          this.observationTripLayers?.forEach((l) => map.addLayer(l));
-        }
+        if (!map.hasLayer(layer)) map.addLayer(layer);
       }
     };
 
-    layerToBindClickHandlerTo.on('click', clickHandler);
-    map.on('zoomend', addOrRemoveLayers);
+    layer.on('click', setMetadata);
+    map.on('zoomend', showGeojsonLayerWhenZoomedIn);
 
-    // Clean up event listeners on destroy or when toggled off
-    race(
-      this.ngDestroy$,
-      this.removeObserverTripEventHandlers,
-      this.observerTripsService.toggledOn.pipe(filter((toggledOn) => !toggledOn))
-    )
-      .pipe(take(1))
-      .subscribe(() => {
-        layerToBindClickHandlerTo.off('click', clickHandler);
-        map.off('zoomend', addOrRemoveLayers);
-      });
+    // Store layer and event handler info for this id
+    this.geojsonLayers.set(id, {
+      layer,
+      showGeojsonWhenZoomedIn: showGeojsonLayerWhenZoomedIn,
+    });
+  }
+
+  /**
+   * Remove a single geojson layer by id and clean up event handlers.
+   * @param map Leaflet map
+   * @param id Unique id for the geojson layer
+   */
+  private async removeGeojsonLayer(map: L.Map, id: string) {
+    const entry = this.geojsonLayers.get(id);
+    if (entry) {
+      if (map.hasLayer(entry.layer)) map.removeLayer(entry.layer);
+      entry.layer.off(); // Remove all event listeners
+      // Clean up event listeners
+      map.off('zoomend', entry.showGeojsonWhenZoomedIn);
+      this.geojsonLayers.delete(id);
+    }
   }
 
   onLeafletMapReady(map: L.Map) {
@@ -340,8 +360,13 @@ export class MapComponent implements OnInit, OnDestroy, AfterViewInit {
       });
 
     if (this.showObserverTrips()) {
+      // For backward compatibility, use a single id if only one geojson is provided
       this.observerTripsService.geojson$.pipe(takeUntil(this.ngDestroy$)).subscribe((geojson) => {
-        this.showOrHideObserverTripsLayer(map, geojson);
+        if (geojson) {
+          this.addGeojsonLayer(map, 'obsturer', geojson);
+        } else {
+          this.removeGeojsonLayer(map, 'obsturer');
+        }
       });
     }
 
@@ -450,6 +475,24 @@ export class MapComponent implements OnInit, OnDestroy, AfterViewInit {
       }
     });
 
+    // Lytt på endringer i evt. geojson-metadata og tegn geojson-lag (på nytt)
+    this.geoJSONService.metadata$.pipe(takeUntil(this.ngDestroy$)).subscribe(async (metadataForAllTracks) => {
+      if (metadataForAllTracks && map) {
+        metadataForAllTracks.forEach(async (trackMetadata) => {
+          // Fjern eksisterende geojson-lag for id
+          this.removeGeojsonLayer(map, trackMetadata.id);
+          if (!trackMetadata.visibleOnMap) {
+            return;
+          }
+          // Hent oppdatert geojson fra tjenesten
+          const geojson = await this.geoJSONService.get(trackMetadata.id);
+          if (geojson) {
+            this.addGeojsonLayer(map, trackMetadata.id, geojson, trackMetadata);
+          }
+        });
+      }
+    });
+
     if (isAndroidOrIos(this.platform)) {
       this.initOfflineMaps();
     }
diff --git a/src/app/pages/plans/geojson.spec.ts b/src/app/pages/plans/geojson.spec.ts
new file mode 100644
index 000000000..0e41d2101
--- /dev/null
+++ b/src/app/pages/plans/geojson.spec.ts
@@ -0,0 +1,173 @@
+import { cleanFeatureCollection } from './geojson';
+import { FeatureCollection, Point, LineString } from 'geojson';
+
+describe('cleanFeatureCollection', () => {
+  it('should remove all properties from features', () => {
+    const fc: FeatureCollection = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: [10, 60, 100] },
+          properties: { foo: 'bar', keep: 123 },
+        },
+      ],
+    };
+    cleanFeatureCollection(fc);
+    expect(fc.features[0].properties).toEqual({});
+  });
+
+  it('should handle all geometry types', () => {
+    const fc: FeatureCollection = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: [1.1234567, 2.2345678, 3.3456789] },
+          properties: { a: 1 },
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'LineString',
+            coordinates: [
+              [1.1234567, 2.2345678, 3.3],
+              [4.4, 5.5, 6.6],
+            ],
+          },
+          properties: { b: 2 },
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [1.1234567, 2.2345678, 3.3],
+                [4.4, 5.5, 6.6],
+                [7.7, 8.8, 9.9],
+                [1.1234567, 2.2345678, 3.3],
+              ],
+            ],
+          },
+          properties: { c: 3 },
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'MultiPoint',
+            coordinates: [
+              [1.1, 2.2, 3.3],
+              [4.4, 5.5, 6.6],
+            ],
+          },
+          properties: { d: 4 },
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'MultiLineString',
+            coordinates: [
+              [
+                [1.1, 2.2, 3.3],
+                [4.4, 5.5, 6.6],
+              ],
+              [
+                [7.7, 8.8, 9.9],
+                [10.1, 11.2, 12.3],
+              ],
+            ],
+          },
+          properties: { e: 5 },
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'MultiPolygon',
+            coordinates: [
+              [
+                [
+                  [1.1, 2.2, 3.3],
+                  [4.4, 5.5, 6.6],
+                  [7.7, 8.8, 9.9],
+                  [1.1, 2.2, 3.3],
+                ],
+              ],
+            ],
+          },
+          properties: { f: 6 },
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'GeometryCollection',
+            geometries: [
+              { type: 'Point', coordinates: [1.1234567, 2.2345678, 3.3] },
+              {
+                type: 'LineString',
+                coordinates: [
+                  [1.1, 2.2, 3.3],
+                  [4.4, 5.5, 6.6],
+                ],
+              },
+            ],
+          },
+          properties: { g: 7 },
+        },
+      ],
+    };
+    expect(() => cleanFeatureCollection(fc)).not.toThrow();
+    // For nå tester denne bare at egenskapene er nullstilt
+    // (og at ikke cleanFeatureCollection kræsjer for en eller flere av geometritypene)
+    for (const feature of fc.features) {
+      expect(feature.properties).toEqual({});
+    }
+  });
+
+  it('should truncate coordinates to 6 decimals and remove height', () => {
+    const fc: FeatureCollection = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: [10.123456789, 60.987654321, 123.456] },
+          properties: {},
+        },
+      ],
+    };
+    cleanFeatureCollection(fc);
+    const coords = (fc.features[0].geometry as Point).coordinates;
+    expect(coords.length).toBe(2);
+    expect(coords[0]).toBeCloseTo(10.123457, 6);
+    expect(coords[1]).toBeCloseTo(60.987654, 6);
+  });
+
+  it('should handle LineString and remove all properties', () => {
+    const fc: FeatureCollection = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'LineString',
+            coordinates: [
+              [10.123456789, 60.987654321, 123.456],
+              [11.123456789, 61.987654321, 223.456],
+            ],
+          },
+          properties: { foo: 'bar' },
+        },
+      ],
+    };
+    cleanFeatureCollection(fc);
+    const coords = (fc.features[0].geometry as LineString).coordinates;
+    expect(coords[0].length).toBe(2);
+    expect(coords[1].length).toBe(2);
+    expect(fc.features[0].properties).toEqual({});
+  });
+
+  it('should not throw on empty FeatureCollection', () => {
+    const fc: FeatureCollection = { type: 'FeatureCollection', features: [] };
+    expect(() => cleanFeatureCollection(fc)).not.toThrow();
+  });
+});
diff --git a/src/app/pages/plans/geojson.ts b/src/app/pages/plans/geojson.ts
new file mode 100644
index 000000000..74bcd307b
--- /dev/null
+++ b/src/app/pages/plans/geojson.ts
@@ -0,0 +1,46 @@
+import { FeatureCollection, Geometry, GeometryCollection } from 'geojson';
+import { cleanCoords } from '@turf/clean-coords';
+import { truncate } from '@turf/truncate';
+
+/**
+ * For nå fjerner denne bare alle properties fra hver feature.
+ * Vi må sikkert legge til noen tillatte egenskaper her etter hvert som vi kan bruke.
+ * Denne endrer objektet som sendes inn.
+ */
+function removeProperties(fc: FeatureCollection) {
+  for (const feature of fc.features) {
+    feature.properties = {};
+  }
+}
+
+function isGeometryCollection(geometry: Geometry): geometry is GeometryCollection {
+  return geometry.type === 'GeometryCollection';
+}
+
+/**
+ * Fjerner eventuelle unødvendige koordinatpar fra geometriene.
+ */
+function cleanCoordinates(geometry: Geometry) {
+  if (isGeometryCollection(geometry)) {
+    for (const g of geometry.geometries) {
+      cleanCoordinates(g);
+    }
+  } else {
+    cleanCoords(geometry, { mutate: true });
+  }
+}
+
+/**
+ * Fjerner unødvendige koordinater/desimaler og egenskaper.
+ * Endrer objektet som sendes inn (dette er raskest).
+ */
+export function cleanFeatureCollection(fc: FeatureCollection) {
+  // NB: coordinates: 2 fjerner høydekoordinat.
+  // Vi bruker ikke høyde til noe enda, derfor fjernes den.
+  // Tror ikke vi kan anta at alle importerte geojson / gpx har høyde, tenker derfor det er like greit å fjerne den.
+  truncate(fc, { mutate: true, precision: 6, coordinates: 2 });
+  for (const feature of fc.features) {
+    cleanCoordinates(feature.geometry);
+  }
+  removeProperties(fc);
+}
diff --git a/src/app/pages/plans/gpx.ts b/src/app/pages/plans/gpx.ts
new file mode 100644
index 000000000..31d70cfbe
--- /dev/null
+++ b/src/app/pages/plans/gpx.ts
@@ -0,0 +1,20 @@
+import { FileSystemEntry } from 'ngx-file-drop';
+import { assertIsFileEntry, toText } from './utils';
+import { gpx } from '@tmcw/togeojson';
+import { isGpxFile } from './utils';
+
+function assertIsGpxFile(fileEntry: FileSystemEntry): asserts fileEntry is FileSystemFileEntry {
+  assertIsFileEntry(fileEntry);
+  if (!isGpxFile(fileEntry)) {
+    throw new Error('fileEntry is not GPX file');
+  }
+}
+
+export async function toGeoJSON(fileEntry: FileSystemEntry) {
+  assertIsGpxFile(fileEntry);
+  const text = await toText(fileEntry);
+  const parser = new DOMParser();
+  const xml = parser.parseFromString(text, 'application/xml');
+  const geojson = gpx(xml);
+  return geojson;
+}
diff --git a/src/app/pages/plans/plan/plan.page.css b/src/app/pages/plans/plan/plan.page.css
new file mode 100644
index 000000000..0c3f103f4
--- /dev/null
+++ b/src/app/pages/plans/plan/plan.page.css
@@ -0,0 +1,55 @@
+nve-menu-item {
+  nve-icon {
+    --icon-size: 30px;
+  }
+}
+
+nve-menu-item::part(base) {
+  height: fit-content;
+}
+
+nve-input::part(form-control-label) {
+  font: var(--label-small);
+  color: black;
+}
+
+nve-tag::part(extra),
+nve-tag::part(text) {
+  line-height: 1;
+}
+
+.button-group {
+  display: flex;
+  gap: var(--spacing-small);
+}
+
+.tag-row {
+  display: flex;
+  gap: var(--spacing-x-small);
+}
+
+.content {
+  max-width: var(--form-max-width);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+  padding: var(--spacing-small);
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+}
+
+.map {
+  height: 400px;
+  width: 100%;
+}
+
+@media screen and (max-width: 650px) {
+  .map {
+    height: 200px;
+  }
+}
diff --git a/src/app/pages/plans/plan/plan.page.html b/src/app/pages/plans/plan/plan.page.html
new file mode 100644
index 000000000..8a01da455
--- /dev/null
+++ b/src/app/pages/plans/plan/plan.page.html
@@ -0,0 +1,48 @@
+@if (itemMetadata(); as info) {
+  <ion-header>
+    <ion-toolbar appHeaderColor>
+      <ion-buttons slot="start">
+        <ion-back-button text="" defaultHref="/plans"></ion-back-button>
+      </ion-buttons>
+      <ion-title> {{ info.name }} </ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <div class="content">
+      <div class="map" leaflet [leafletOptions]="mapOptions()" (leafletMapReady)="onMapReady($event)"></div>
+      <div class="tag-row">
+        <nve-tag saturation="default" variant="neutral">
+          <nve-icon slot="prefix" src="assets\icon\calendar_today.svg" />
+          <span>{{ "PLANS.DATE_EDITED" | translate }}</span> <span slot="extra">{{ info.date | date: "short" }}</span>
+        </nve-tag>
+        <nve-tag saturation="default" variant="neutral">
+          <nve-icon slot="prefix" src="assets\icon\altitude.svg" />
+          <span slot="extra">-- {{ "MAP_CENTER_INFO.ABOVE_SEA_LEVEL" | translate }}</span>
+        </nve-tag>
+        <nve-tag saturation="default" variant="neutral">
+          <nve-icon slot="prefix" src="assets\icon\arrow_range.svg" />
+          <span slot="extra">{{ info.lengthKm ? `${info.lengthKm.toFixed(2)} km` : '-- km' }}</span>
+        </nve-tag>
+      </div>
+      <form>
+        <nve-checkbox [checked]="visibleOnMap()" (sl-change)="onVisibleOnMapChange($event)">
+          {{ "PLANS.VISIBLE_ON_MAP" | translate }}
+        </nve-checkbox>
+        <nve-input [value]="name()" [label]="'PLANS.NAME' | translate" (sl-change)="onNameChange($event)"></nve-input>
+        <nve-textarea
+          [value]="comment()"
+          (sl-change)="onCommentChange($event)"
+          [label]="'PLANS.COMMENT' | translate"
+        ></nve-textarea>
+        <div class="button-group">
+          <nve-button variant="primary" type="submit" (click)="onSave()">Lagre</nve-button>
+          <nve-button variant="danger" type="button" (click)="onRemove()">
+            <nve-icon slot="prefix" src="assets/icon/delete_white.svg"></nve-icon>
+            {{ "PLANS.DELETE" | translate }}
+          </nve-button>
+        </div>
+      </form>
+    </div>
+  </ion-content>
+}
diff --git a/src/app/pages/plans/plan/plan.page.ts b/src/app/pages/plans/plan/plan.page.ts
new file mode 100644
index 000000000..401d17b5e
--- /dev/null
+++ b/src/app/pages/plans/plan/plan.page.ts
@@ -0,0 +1,172 @@
+import { Component, inject, input, CUSTOM_ELEMENTS_SCHEMA, computed, linkedSignal } from '@angular/core';
+import {
+  IonToolbar,
+  IonContent,
+  IonBackButton,
+  IonTitle,
+  IonHeader,
+  IonButtons,
+  isPlatform,
+} from '@ionic/angular/standalone';
+import { GeoJSONService } from 'src/app/core/services/geojson/geojson.service';
+import { DatePipe } from '@angular/common';
+import 'nve-designsystem/components/nve-icon/nve-icon.component.js';
+import 'nve-designsystem/components/nve-menu-item/nve-menu-item.component.js';
+import 'nve-designsystem/components/nve-button/nve-button.component.js';
+import 'nve-designsystem/components/nve-input/nve-input.component.js';
+import 'nve-designsystem/components/nve-textarea/nve-textarea.component.js';
+import 'nve-designsystem/components/nve-checkbox/nve-checkbox.component.js';
+import 'nve-designsystem/components/nve-tag/nve-tag.component.js';
+import { TranslatePipe } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+import L from 'leaflet';
+import { LineString, Point } from 'geojson';
+import { LeafletModule } from '@bluehalo/ngx-leaflet';
+import { settings } from 'src/settings';
+import {
+  MapLayersService,
+  OfflineCapableMapLayersService,
+} from 'src/app/modules/static-map-image/static-tiles.service';
+
+@Component({
+  selector: 'app-plan.page',
+  templateUrl: './plan.page.html',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    DatePipe,
+    IonContent,
+    IonToolbar,
+    IonBackButton,
+    IonTitle,
+    IonHeader,
+    IonButtons,
+    TranslatePipe,
+    LeafletModule,
+  ],
+  providers: [
+    {
+      provide: MapLayersService,
+      useClass: isPlatform('hybrid') ? OfflineCapableMapLayersService : MapLayersService,
+    },
+  ],
+  styleUrl: './plan.page.css',
+})
+export class PlanPage {
+  geoJSONService = inject(GeoJSONService);
+  private mapLayersService = inject(MapLayersService);
+  router = inject(Router);
+  id = input.required<string>();
+  private map?: L.Map;
+
+  private layerGroup = L.layerGroup();
+
+  itemMetadata = computed(() => this.geoJSONService.metadata().find((m) => m.id === this.id()));
+
+  name = linkedSignal<string>(() => this.itemMetadata()?.name || '');
+  comment = linkedSignal<string>(() => this.itemMetadata()?.comment || '');
+  visibleOnMap = linkedSignal<boolean>(() => this.itemMetadata()?.visibleOnMap || false);
+
+  mapOptions = computed(() => {
+    const mapConfig = this.mapLayersService.mapConfig();
+    const layersConfig = mapConfig.map((map) => ({
+      layerId: map.layer,
+      layerConfig: settings.map.tiles.topoMapLayers[map.layer],
+    }));
+    const layers = layersConfig.map((x) =>
+      L.tileLayer(x.layerConfig.url, {
+        minZoom: settings.map.tiles.minZoom,
+        maxZoom: settings.map.tiles.maxZoom,
+        updateWhenIdle: settings.map.tiles.updateWhenIdle,
+        ...x.layerConfig.options,
+      })
+    );
+    const mapSettings: L.MapOptions = {
+      zoom: settings.map.tiles.zoomLevelObservationList,
+      maxZoom: settings.map.tiles.maxZoom,
+      minZoom: 8,
+      bounceAtZoomLimits: false,
+      attributionControl: false,
+      zoomControl: false,
+      layers,
+    };
+    return mapSettings;
+  });
+
+  async calculateAndCenterMap() {
+    const geoJSON = await this.geoJSONService.get(this.id());
+
+    if (!geoJSON || !this.map) return;
+
+    this.layerGroup.clearLayers();
+    const geoJsonLayer = L.geoJSON(geoJSON);
+    this.layerGroup.addLayer(geoJsonLayer);
+
+    if (!this.map.hasLayer(this.layerGroup)) {
+      this.layerGroup.addTo(this.map);
+    }
+
+    const lineFeatures = geoJSON.features.map((f) => {
+      if (f.geometry && f.geometry.type === 'LineString') {
+        return f.geometry as LineString;
+      }
+      return null;
+    });
+    const pointFeatures = geoJSON.features.map((f) => {
+      if (f.geometry && f.geometry.type === 'Point') {
+        return f.geometry as Point;
+      }
+      return null;
+    });
+
+    const lineCoords: [number, number][] = lineFeatures
+      .filter((f): f is LineString => f !== null)
+      .flatMap((f) => f.coordinates as [number, number][]);
+
+    const pointCoords: [number, number][] = pointFeatures
+      .filter((f): f is Point => f !== null)
+      .map((f) => f.coordinates as [number, number]);
+
+    const flatCoords: [number, number][] = [...lineCoords, ...pointCoords];
+
+    const latLngs = flatCoords.map(([lng, lat]) => L.latLng(lat, lng));
+
+    this.map.fitBounds(L.latLngBounds(latLngs), { padding: [5, 5] });
+  }
+
+  onMapReady(map: L.Map) {
+    this.map = map;
+    this.calculateAndCenterMap();
+  }
+
+  onNameChange(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.name.set(value);
+  }
+
+  onCommentChange(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.comment.set(value);
+  }
+  onVisibleOnMapChange(event: Event) {
+    const checked = (event.target as HTMLInputElement).checked;
+    this.visibleOnMap.set(checked);
+  }
+
+  async onRemove() {
+    await this.geoJSONService.remove(this.id());
+    await this.router.navigate(['/plans']);
+  }
+
+  async onSave() {
+    const itemToUpdate = {
+      id: this.id(),
+      name: this.name(),
+      comment: this.comment(),
+      visibleOnMap: this.visibleOnMap(),
+      lengthKm: this.itemMetadata()?.lengthKm,
+      date: Date.now(),
+    };
+    this.geoJSONService.updateMetadata(itemToUpdate);
+    await this.router.navigate(['/plans']);
+  }
+}
diff --git a/src/app/pages/plans/plans.page.css b/src/app/pages/plans/plans.page.css
new file mode 100644
index 000000000..cb84f08b7
--- /dev/null
+++ b/src/app/pages/plans/plans.page.css
@@ -0,0 +1,72 @@
+:host {
+  justify-content: unset;
+}
+.content {
+  height: 100%;
+  width: 100%;
+  max-width: var(--desktop-max-width);
+  margin: 0 auto;
+  margin-bottom: var(--spacing-large);
+  overflow: auto;
+  padding: 0px var(--spacing-medium);
+}
+svg {
+  fill: currentColor;
+}
+
+.filter-panel {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: var(--spacing-medium);
+  padding: var(--spacing-small) 0px;
+}
+
+nve-select {
+  width: fit-content;
+}
+
+@media screen and (max-width: 650px) {
+  .filter-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  nve-select {
+    width: 100%;
+  }
+}
+
+.text-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font: var(--label-medium);
+}
+
+nve-menu-item {
+  nve-icon {
+    --icon-size: 30px;
+  }
+}
+
+nve-menu-item::part(base) {
+  height: fit-content;
+}
+
+nve-badge::part(base) {
+  line-height: 1;
+}
+
+.drop-zone-wrapper {
+  height: 200px;
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/src/app/pages/plans/plans.page.html b/src/app/pages/plans/plans.page.html
new file mode 100644
index 000000000..6ac719202
--- /dev/null
+++ b/src/app/pages/plans/plans.page.html
@@ -0,0 +1,72 @@
+<!-- Side som viser planer og sporfiler -->
+<app-header>
+  <!-- Høyremeny -->
+  <ion-buttons slot="end">
+    <ion-menu-button color="light"> </ion-menu-button>
+  </ion-buttons>
+
+  <ion-title>{{ "PLANS.TITLE" | translate }}</ion-title>
+</app-header>
+<ion-content>
+  <div class="content">
+    <div class="filter-panel">
+      <nve-select
+        [label]="'PLANS.SHOW' | translate"
+        [value]="visibilityFilter()"
+        (sl-change)="onVisibilityFilterChange($event)"
+      >
+        <nve-option value="all">{{ "PLANS.SHOW_ALL" | translate }}</nve-option>
+        <nve-option value="onlyVisibleOnMap">{{ "PLANS.SHOW_ONLY_VISIBLE_ON_MAP" | translate }}</nve-option>
+      </nve-select>
+      <nve-select [label]="'PLANS.SORT_TITLE' | translate" [value]="sortValue()" (sl-change)="onSortChange($event)">
+        <nve-option value="name">{{ "PLANS.SORT_BY_NAME" | translate }}</nve-option>
+        <nve-option value="date">{{ "PLANS.SORT_BY_TIME" | translate }}</nve-option>
+      </nve-select>
+    </div>
+
+    <nve-menu>
+      @for (item of items(); track item.id; let last = $last) {
+        <a [routerLink]="item.id" routerDirection="forward">
+          <nve-menu-item>
+            <nve-icon slot="prefix" src="/assets/icon/tour.svg"></nve-icon>
+            <div class="text-wrapper">
+              <span class="label"
+                >{{ item.name }}
+                @if (item.visibleOnMap) {
+                  <nve-badge variant="success">{{ "PLANS.VISIBLE_ON_MAP" | translate }}</nve-badge>
+                }
+              </span>
+              <span
+                >{{ item.date | date }}
+                @if (item.lengthKm !== undefined && item.lengthKm !== null) {
+                  , {{ item.lengthKm.toFixed(2) }} km
+                }
+              </span>
+            </div>
+            <nve-icon slot="suffix" name="chevron_forward"></nve-icon
+          ></nve-menu-item>
+        </a>
+        @if (!last) {
+          <nve-divider></nve-divider>
+        }
+      }
+    </nve-menu>
+
+    <div class="drop-zone-wrapper">
+      <ngx-file-drop dropZoneClassName="drop-zone" [accept]="'.gpx, .geojson, .json'" (onFileDrop)="onFileDrop($event)">
+        <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+          <button type="button" (click)="openFileSelector()">
+            <h1>{{ "PLANS.IMPORT_BUTTON.CAPTION" | translate }}</h1>
+            <p>
+              @if (!isMobile) {
+                {{ "PLANS.IMPORT_BUTTON.DROP_LABEL_DESKTOP" | translate }}
+              } @else {
+                {{ "PLANS.IMPORT_BUTTON.DROP_LABEL_MOBILE" | translate }}
+              }
+            </p>
+          </button>
+        </ng-template>
+      </ngx-file-drop>
+    </div>
+  </div>
+</ion-content>
diff --git a/src/app/pages/plans/plans.page.spec.ts b/src/app/pages/plans/plans.page.spec.ts
new file mode 100644
index 000000000..56717500f
--- /dev/null
+++ b/src/app/pages/plans/plans.page.spec.ts
@@ -0,0 +1,62 @@
+import { sortByName, sortByDate } from './plans.page';
+import { GeoJSONItem } from 'src/app/core/services/geojson/geojson-item.model';
+
+describe('sortByName', () => {
+  it('sorts items alphabetically by name', () => {
+    const items: GeoJSONItem[] = [
+      { id: '1', name: 'Charlie' },
+      { id: '2', name: 'Alice' },
+      { id: '3', name: 'Bob' },
+    ];
+    const sorted = sortByName(items);
+    expect(sorted.map((i) => i.name)).toEqual(['Alice', 'Bob', 'Charlie']);
+  });
+
+  it('does not mutate the original array', () => {
+    const items: GeoJSONItem[] = [
+      { id: '1', name: 'Charlie' },
+      { id: '2', name: 'Alice' },
+      { id: '3', name: 'Bob' },
+    ];
+    const itemsCopy = [...items];
+    const sorted = sortByName(items);
+    expect(sorted).not.toBe(items);
+    expect(items).toEqual(itemsCopy);
+  });
+});
+
+describe('sortByDate', () => {
+  it('sorts items by date, newest first', () => {
+    const items: GeoJSONItem[] = [
+      { id: '1', name: 'A', date: 100 },
+      { id: '2', name: 'B', date: 300 },
+      { id: '3', name: 'C', date: 200 },
+    ];
+    const sorted = sortByDate(items);
+    expect(sorted.map((i) => i.date)).toEqual([300, 200, 100]);
+  });
+
+  it('does not mutate the original array', () => {
+    const items: GeoJSONItem[] = [
+      { id: '1', name: 'A', date: 100 },
+      { id: '2', name: 'B', date: 300 },
+      { id: '3', name: 'C', date: 200 },
+    ];
+    const itemsCopy = [...items];
+    const sorted = sortByDate(items);
+    expect(sorted).not.toBe(items);
+    expect(items).toEqual(itemsCopy);
+  });
+
+  it('handles items with missing dates', () => {
+    const items: GeoJSONItem[] = [
+      { id: '1', name: 'A', date: 100 },
+      { id: '2', name: 'B' },
+      { id: '3', name: 'C', date: 200 },
+    ];
+    const sorted = sortByDate(items);
+    expect(sorted[0].date).toBe(200);
+    expect(sorted[1].date).toBe(100);
+    expect(sorted[2].date).toBeUndefined();
+  });
+});
diff --git a/src/app/pages/plans/plans.page.ts b/src/app/pages/plans/plans.page.ts
new file mode 100644
index 000000000..3b03d3280
--- /dev/null
+++ b/src/app/pages/plans/plans.page.ts
@@ -0,0 +1,121 @@
+import { Platform } from '@ionic/angular';
+import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core';
+import { IonButtons, IonMenuButton, IonRouterLinkWithHref, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { TranslatePipe } from '@ngx-translate/core';
+import { HeaderComponent } from 'src/app/modules/shared/components/header/header.component';
+import 'nve-designsystem/components/nve-button/nve-button.component.js';
+import 'nve-designsystem/components/nve-menu/nve-menu.component.js';
+import 'nve-designsystem/components/nve-menu-item/nve-menu-item.component.js';
+import 'nve-designsystem/components/nve-divider/nve-divider.component.js';
+import 'nve-designsystem/components/nve-badge/nve-badge.component.js';
+import 'nve-designsystem/components/nve-select/nve-select.component.js';
+import 'nve-designsystem/components/nve-option/nve-option.component.js';
+import 'nve-designsystem/components/nve-icon/nve-icon.component.js';
+import { NgxFileDropEntry, NgxFileDropModule } from 'ngx-file-drop';
+import { toGeoJSON } from './utils';
+import { GeoJSONService } from 'src/app/core/services/geojson/geojson.service';
+import { GeoJSONItem } from 'src/app/core/services/geojson/geojson-item.model';
+import { generateShortRandomId } from './utils';
+import { DatePipe } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-plans',
+  templateUrl: './plans.page.html',
+  styleUrl: './plans.page.css',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    HeaderComponent,
+    IonButtons,
+    DatePipe,
+    IonMenuButton,
+    IonTitle,
+    TranslatePipe,
+    TranslatePipe,
+    NgxFileDropModule,
+    RouterLink,
+    IonRouterLinkWithHref,
+    IonContent,
+  ],
+})
+/** Side som viser planer og sporfiler */
+export class PlansPage {
+  private platform = inject(Platform);
+  private router = inject(Router);
+  private geoJSON = inject(GeoJSONService);
+
+  isMobile = this.platform.is('mobile') || this.platform.is('android') || this.platform.is('ios');
+
+  sortValue = signal<'name' | 'date'>('date');
+  visibilityFilter = signal<'all' | 'onlyVisibleOnMap'>('all');
+  items = computed(() => {
+    const sorter = sortFunctions[this.sortValue()];
+    const sortedItems = sorter(this.geoJSON.metadata());
+    if (this.visibilityFilter() === 'onlyVisibleOnMap') {
+      return sortedItems.filter((item) => item.visibleOnMap);
+    }
+    return sortedItems;
+  });
+
+  /**
+   * Log GPX filenames when files are dropped in the dropzone
+   */
+  async onFileDrop(files: NgxFileDropEntry[]) {
+    for (const { fileEntry, relativePath } of files) {
+      const geojson = await toGeoJSON(fileEntry);
+      const id = generateShortRandomId();
+      const metadata: GeoJSONItem = { id, name: relativePath, date: Date.now(), visibleOnMap: true };
+      await this.geoJSON.save(metadata, geojson);
+      // Åpne detaljsiden kun når en fil er lastet opp.
+      if (files.length === 1) {
+        this.router.navigate(['/plans', id]);
+      }
+    }
+  }
+
+  /**
+   * Hånderer sorting når bruker endrer valg i select
+   */
+  onSortChange(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    const value = select.value as 'name' | 'date';
+    this.sortValue.set(value);
+  }
+
+  /**
+   * Hånderer visning av planer filter når bruker endrer valg i select
+   */
+  onVisibilityFilterChange(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    const value = select.value as 'all' | 'onlyVisibleOnMap';
+    this.visibilityFilter.set(value);
+  }
+}
+
+/**
+ * Sorterer basert på navn, alfabetisk
+ */
+export function sortByName(items: GeoJSONItem[]) {
+  return items.toSorted((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Sorterer basert på dato, nyeste først
+ */
+export function sortByDate(items: GeoJSONItem[]) {
+  return items.toSorted((a, b) => {
+    if (a.date && b.date) {
+      return b.date - a.date;
+    }
+    if (!a.date && !b.date) {
+      return 0;
+    }
+    return a.date ? -1 : 1;
+  });
+}
+
+const sortFunctions = {
+  name: sortByName,
+  date: sortByDate,
+} as const;
diff --git a/src/app/pages/plans/utils.ts b/src/app/pages/plans/utils.ts
new file mode 100644
index 000000000..9dec947ae
--- /dev/null
+++ b/src/app/pages/plans/utils.ts
@@ -0,0 +1,51 @@
+import { FileSystemEntry } from 'ngx-file-drop';
+import { toGeoJSON as gpxToGeoJSON } from './gpx';
+import { FeatureCollection } from 'geojson';
+import { check } from '@placemarkio/check-geojson';
+
+export function assertIsFileEntry(fileEntry: FileSystemEntry): asserts fileEntry is FileSystemFileEntry {
+  if (!fileEntry.isFile) {
+    throw new Error('fileEntry is not a file');
+  }
+}
+
+export function isGpxFile(fileEntry: FileSystemEntry): boolean {
+  return fileEntry.name.toLowerCase().endsWith('.gpx');
+}
+
+function isGeoJSONFile(fileEntry: FileSystemEntry): boolean {
+  return fileEntry.name.toLowerCase().endsWith('.geojson') || fileEntry.name.toLowerCase().endsWith('.json');
+}
+
+export function toText(fileEntry: FileSystemFileEntry): Promise<string> {
+  return new Promise((resolve, reject) => {
+    fileEntry.file((file: File) => {
+      file
+        .text()
+        .then((text) => resolve(text))
+        .catch((reason) => reject(reason));
+    });
+  });
+}
+
+export function generateShortRandomId(length = 6) {
+  // Generate a random number and convert it to a base-36 string (0-9 and a-z).
+  // The substring(2) removes the "0." prefix from the generated string.
+  // We then take a substring of the desired length.
+  return Math.random()
+    .toString(36)
+    .substring(2, length + 2);
+}
+
+// leser en GPX- eller GeoJSON-fil og returnerer et GeoJSON-objekt
+export async function toGeoJSON(fileEntry: FileSystemEntry): Promise<FeatureCollection> {
+  assertIsFileEntry(fileEntry);
+  if (isGpxFile(fileEntry)) {
+    return await gpxToGeoJSON(fileEntry);
+  }
+  if (isGeoJSONFile(fileEntry)) {
+    const fileContent = await toText(fileEntry);
+    return check(fileContent) as FeatureCollection; // hvis denne blir for kresen, kan vi prøve scavenge i stedet
+  }
+  throw new Error('Unsupported file type. Only GPX and GeoJSON files are supported.');
+}
diff --git a/src/app/pages/tabs/tabs.page.html b/src/app/pages/tabs/tabs.page.html
index b9185f817..795d3d5c4 100644
--- a/src/app/pages/tabs/tabs.page.html
+++ b/src/app/pages/tabs/tabs.page.html
@@ -1,47 +1,60 @@
 <ion-tabs>
-  <ion-tab-bar slot="bottom" [class.tab-bar--desktop]="isDesktop()" color="primary" *ngIf="!isFullscreen()">
-    <ng-container *ngIf="selectedTab$ | async as selectedTab">
-      <!-- home will navigate to route '' / start page / map page, but it is not allowed to set '' as a tab value. Router config redirects to ''. -->
-      <ion-tab-button
-        [class.tab-button--active]="selectedTab === 'home'"
-        tab="home"
-        [selected]="selectedTab === 'home'"
-        [layout]="isDesktop() ? 'icon-end' : 'icon-top'"
-      >
-        <ion-icon name="map-outline" aria-hidden="true"></ion-icon>
-        <ion-label>{{ "TABS.MAP" | translate }}</ion-label>
-      </ion-tab-button>
-      <ion-tab-button
-        [class.tab-button--active]="selectedTab === 'search'"
-        tab="search"
-        [selected]="selectedTab === 'search'"
-        [layout]="isDesktop() ? 'icon-end' : 'icon-top'"
-      >
-        <ion-icon name="list" aria-hidden="true"></ion-icon>
-        <ion-label>{{ "TABS.LIST" | translate }}</ion-label>
-      </ion-tab-button>
-      @if (isNative) {
+  @if (!isFullscreen()) {
+    <ion-tab-bar slot="bottom" [class.tab-bar--desktop]="isDesktop()" color="primary">
+      @if (selectedTab()) {
+        <!-- home will navigate to route '' / start page / map page, but it is not allowed to set '' as a tab value. Router config redirects to ''. -->
         <ion-tab-button
-          tab="warning-list"
-          [selected]="selectedTab === 'warning-list'"
-          [class.tab-button--active]="selectedTab === 'warning-list'"
+          [class.tab-button--active]="selectedTab() === 'home'"
+          tab="home"
+          [selected]="selectedTab() === 'home'"
+          [layout]="iconLayout()"
         >
-          <ion-icon name="warning" aria-hidden="true"></ion-icon>
-          <ion-label>{{ "TABS.WARNINGS" | translate }}</ion-label>
-          <ion-badge *ngIf="showBadge()" [color]="badgeColor()">{{ badgeText() }}</ion-badge>
+          <ion-icon name="map-outline" aria-hidden="true"></ion-icon>
+          <ion-label>{{ "TABS.MAP" | translate }}</ion-label>
         </ion-tab-button>
-      } @else {
         <ion-tab-button
-          class="tab-button--desktop"
-          [href]="warningsLink()"
-          target="_blank"
-          [layout]="isDesktop() ? 'icon-end' : 'icon-top'"
-          [class.tab-button--active]="selectedTab === 'warning-list'"
+          [class.tab-button--active]="selectedTab() === 'search'"
+          tab="search"
+          [selected]="selectedTab() === 'search'"
+          [layout]="iconLayout()"
         >
-          <ion-icon name="open-outline" aria-hidden="true"></ion-icon>
-          <ion-label>{{ "TABS.WARNINGS" | translate }}</ion-label>
+          <ion-icon name="list" aria-hidden="true"></ion-icon>
+          <ion-label>{{ "TABS.LIST" | translate }}</ion-label>
+        </ion-tab-button>
+        @if (isNative) {
+          <ion-tab-button
+            tab="warning-list"
+            [selected]="selectedTab() === 'warning-list'"
+            [class.tab-button--active]="selectedTab() === 'warning-list'"
+          >
+            <ion-icon name="warning" aria-hidden="true"></ion-icon>
+            <ion-label>{{ "TABS.WARNINGS" | translate }}</ion-label>
+            @if (showBadge()) {
+              <ion-badge [color]="badgeColor()">{{ badgeText() }}</ion-badge>
+            }
+          </ion-tab-button>
+        } @else {
+          <ion-tab-button
+            class="tab-button--desktop"
+            [href]="warningsLink()"
+            target="_blank"
+            [layout]="iconLayout()"
+            [class.tab-button--active]="selectedTab() === 'warning-list'"
+          >
+            <ion-icon name="open-outline" aria-hidden="true"></ion-icon>
+            <ion-label>{{ "TABS.WARNINGS" | translate }}</ion-label>
+          </ion-tab-button>
+        }
+        <ion-tab-button
+          [class.tab-button--active]="selectedTab() === 'plans'"
+          tab="plans"
+          [selected]="selectedTab() === 'plans'"
+          [layout]="iconLayout()"
+        >
+          <ion-icon src="/assets/icon/tour.svg" aria-hidden="true"></ion-icon>
+          <ion-label>{{ "TABS.PLANS" | translate }}</ion-label>
         </ion-tab-button>
       }
-    </ng-container>
-  </ion-tab-bar>
+    </ion-tab-bar>
+  }
 </ion-tabs>
diff --git a/src/app/pages/tabs/tabs.page.ts b/src/app/pages/tabs/tabs.page.ts
index 10ffc6b72..1c659e41d 100644
--- a/src/app/pages/tabs/tabs.page.ts
+++ b/src/app/pages/tabs/tabs.page.ts
@@ -7,10 +7,9 @@ import { GeoHazard, LangKey } from '../../modules/common-core/models';
 import { SearchCriteriaService } from '../../core/services/search-criteria/search-criteria.service';
 import { WarningService } from '../../core/services/warning/warning.service';
 import { TABS, TabsService } from './tabs.service';
-import { NgIf, AsyncPipe } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { addIcons } from 'ionicons';
-import { mapOutline, list, warning, openOutline } from 'ionicons/icons';
+import { mapOutline, list, warning, openOutline, analyticsOutline } from 'ionicons/icons';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { BreakpointService } from 'src/app/core/services/breakpoint.service';
 import { Capacitor } from '@capacitor/core';
@@ -20,7 +19,7 @@ import { settings } from 'src/settings';
   selector: 'app-tabs',
   templateUrl: 'tabs.page.html',
   styleUrls: ['tabs.page.scss'],
-  imports: [AsyncPipe, IonBadge, IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, NgIf, TranslatePipe],
+  imports: [IonBadge, IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, TranslatePipe],
 })
 export class TabsPage {
   private fullscreenService = inject(FullscreenService);
@@ -34,14 +33,13 @@ export class TabsPage {
   private currentGeoHazardSubscription = toSignal(this.userSettingService.currentGeoHazard$, {
     initialValue: [GeoHazard.NotSpecified],
   });
-  readonly selectedTab$: Observable<TABS | null>;
+  selectedTab = toSignal(this.tabsService.selectedTab$, { initialValue: null });
   isFullscreen = toSignal(this.fullscreenService.isFullscreen$, { initialValue: false });
   isDesktop = inject(BreakpointService).isDesktop;
   isNative = Capacitor.isNativePlatform();
 
   constructor() {
-    this.selectedTab$ = this.tabsService.selectedTab$;
-    addIcons({ mapOutline, list, warning, openOutline });
+    addIcons({ mapOutline, list, warning, openOutline, analyticsOutline });
     combineLatest([
       this.searchCriteriaService.searchCriteria$,
       toObservable(this.searchCriteriaService.isExtentCriteriaActive),
@@ -102,6 +100,8 @@ export class TabsPage {
     }
   });
 
+  iconLayout = computed(() => (this.isDesktop() ? 'icon-start' : 'icon-top'));
+
   private async applyCurrentQueryParams(path: TABS | null) {
     if (path == TABS.HOME || path == TABS.WARNING_LIST) {
       await this.searchCriteriaService.applyQueryParams();
diff --git a/src/app/pages/tabs/tabs.routes.ts b/src/app/pages/tabs/tabs.routes.ts
index f7cc41d04..db6c50ebe 100644
--- a/src/app/pages/tabs/tabs.routes.ts
+++ b/src/app/pages/tabs/tabs.routes.ts
@@ -3,6 +3,9 @@ import { TabsPage } from './tabs.page';
 import { canActivateStartWizard } from '../../core/guards/start-wizard.guard';
 import { desktopBlockGuard } from 'src/app/core/guards/desktop-block.guard';
 
+/**
+ * Ruter for navigasjon mellom faner nederst på skjermen
+ */
 export const routes: Routes = [
   {
     path: '',
@@ -50,6 +53,14 @@ export const routes: Routes = [
         loadComponent: () => import('../warning-list/warning-list.page').then((m) => m.WarningListPage),
         canActivate: [desktopBlockGuard],
       },
+      {
+        path: 'plans',
+        loadComponent: () => import('../plans/plans.page').then((m) => m.PlansPage),
+      },
+      {
+        path: 'plans/:id',
+        loadComponent: () => import('../plans/plan/plan.page').then((m) => m.PlanPage),
+      },
       // Redirect from old regobs.no route
       {
         path: 'observation/search',
diff --git a/src/app/pages/tabs/tabs.service.ts b/src/app/pages/tabs/tabs.service.ts
index 2f57cacb1..c95f729fb 100644
--- a/src/app/pages/tabs/tabs.service.ts
+++ b/src/app/pages/tabs/tabs.service.ts
@@ -7,6 +7,7 @@ export enum TABS {
   HOME = 'home',
   OBSERVATION_LIST = 'search',
   WARNING_LIST = 'warning-list',
+  PLANS = 'plans',
 }
 
 /**
@@ -37,6 +38,8 @@ export class TabsService {
       return TABS.OBSERVATION_LIST;
     } else if (cleanPath.indexOf(TABS.WARNING_LIST) > -1) {
       return TABS.WARNING_LIST;
+    } else if (cleanPath.indexOf(TABS.PLANS) > -1) {
+      return TABS.PLANS;
     } else if (cleanPath === '') {
       return TABS.HOME;
     }
diff --git a/src/assets/fonts/source-sans-3-latin-400-italic.woff2 b/src/assets/fonts/source-sans-3-latin-400-italic.woff2
new file mode 100644
index 000000000..515b6b332
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-400-italic.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-400-normal.woff2 b/src/assets/fonts/source-sans-3-latin-400-normal.woff2
new file mode 100644
index 000000000..0c4242ed4
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-400-normal.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-600-italic.woff2 b/src/assets/fonts/source-sans-3-latin-600-italic.woff2
new file mode 100644
index 000000000..b216f26c1
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-600-italic.woff2 differ
diff --git a/src/assets/fonts/source-sans-3-latin-600-normal.woff2 b/src/assets/fonts/source-sans-3-latin-600-normal.woff2
new file mode 100644
index 000000000..93511778f
Binary files /dev/null and b/src/assets/fonts/source-sans-3-latin-600-normal.woff2 differ
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 5895613bd..1b01a7e24 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -351,6 +351,28 @@
     },
     "UNZIP_ERROR_MESSAGE_GENERIC": "Could not save map package to disk. Please try again. On iPhone/iPad you must have the Varsom app active while downloading and unzipping."
   },
+  "PLANS": {
+    "TITLE": "Plans and tracks",
+    "IMPORT_BUTTON": {
+      "CAPTION": "Import GPX/GeoJSON files",
+      "DROP_LABEL_DESKTOP": "Drag and drop or click to add",
+      "DROP_LABEL_MOBILE": "Tap to add files"
+    },
+    "DELETE": "Delete",
+    "MISSING_COMMENT": "Description/comment missing",
+    "MISSING_NAME": "Track without name",
+    "NAME": "Name",
+    "SORT_TITLE": " Sort by",
+    "SORT_BY_NAME": "Name",
+    "SORT_BY_TIME": "Last saved",
+    "DATE_EDITED": "Last saved",
+    "SHOW": "Show",
+    "SHOW_ONLY_VISIBLE_ON_MAP": "Only visible on map",
+    "SHOW_ALL": "All",
+    "FILE_NAME": "File name",
+    "COMMENT": "Comment",
+    "VISIBLE_ON_MAP": "Visible on map"
+  },
   "POPUP_DISCLAMER": {
     "ABOUT_OBSERVATIONS": {
       "HEADER": "About observations",
@@ -1015,7 +1037,8 @@
     "LIST": "List",
     "MAP": "Map",
     "TRIPS": "Trips",
-    "WARNINGS": "Warnings"
+    "WARNINGS": "Warnings",
+    "PLANS": "Plans"
   },
   "TRIP": {
     "COMMENT_CAPTION": "Description (required)",
diff --git a/src/assets/i18n/nb.json b/src/assets/i18n/nb.json
index 1f9026372..b73ca145c 100644
--- a/src/assets/i18n/nb.json
+++ b/src/assets/i18n/nb.json
@@ -350,6 +350,28 @@
     },
     "UNZIP_ERROR_MESSAGE_GENERIC": "Klarte ikke lagre kartpakke på disk. Vennligst prøv igjen. På iPhone/iPad må du ha Varsom-appen aktiv inntil kartpakka er lasted ned og pakket ut."
   },
+  "PLANS": {
+    "TITLE": "Planer og spor",
+    "IMPORT_BUTTON": {
+      "CAPTION": "Importer GPX/GeoJSON-filer",
+      "DROP_LABEL_DESKTOP": "Dra og slipp eller klikk for å legge til",
+      "DROP_LABEL_MOBILE": "Trykk for å legge til filer"
+    },
+    "DELETE": "Slett",
+    "MISSING_COMMENT": "Beskrivelse/kommentar mangler",
+    "MISSING_NAME": "Spor uten navn",
+    "NAME": "Navn",
+    "SORT_TITLE": "Sortering",
+    "SORT_BY_NAME": "Navn",
+    "SORT_BY_TIME": "Sist lagret",
+    "DATE_EDITED": "Sist lagret",
+    "SHOW": "Vis",
+    "SHOW_ONLY_VISIBLE_ON_MAP": "Kun synlige i kart",
+    "SHOW_ALL": "Alle",
+    "FILE_NAME": "Filnavn",
+    "COMMENT": "Kommentar",
+    "VISIBLE_ON_MAP": "Vises i kart"
+  },
   "POPUP_DISCLAMER": {
     "ABOUT_OBSERVATIONS": {
       "HEADER": "Om observasjoner",
@@ -1013,8 +1035,8 @@
   "TABS": {
     "LIST": "Liste",
     "MAP": "Kart",
-    "TRIPS": "Turer",
-    "WARNINGS": "Varsler"
+    "WARNINGS": "Varsler",
+    "PLANS": "Planer"
   },
   "TRIP": {
     "COMMENT_CAPTION": "Beskrivelse (obligatorisk)",
diff --git a/src/assets/icon/altitude.svg b/src/assets/icon/altitude.svg
new file mode 100644
index 000000000..3fa969218
--- /dev/null
+++ b/src/assets/icon/altitude.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M720-480v-168l-64 64-56-56 160-160 160 160-56 57-64-64v167h-80ZM40-80l240-320 180 240h300L560-426 460-294l-50-66 150-200L920-80H40Zm420-80Z"/></svg>
diff --git a/src/assets/icon/arrow_range.svg b/src/assets/icon/arrow_range.svg
new file mode 100644
index 000000000..ff649ba06
--- /dev/null
+++ b/src/assets/icon/arrow_range.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M280-280 80-480l200-200 56 56-103 104h494L624-624l56-56 200 200-200 200-56-56 103-104H233l103 104-56 56Z"/></svg>
diff --git a/src/assets/icon/calendar_today.svg b/src/assets/icon/calendar_today.svg
new file mode 100644
index 000000000..59a9af4bf
--- /dev/null
+++ b/src/assets/icon/calendar_today.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>
diff --git a/src/assets/icon/check_black.svg b/src/assets/icon/check_black.svg
new file mode 100644
index 000000000..d3831a2cb
--- /dev/null
+++ b/src/assets/icon/check_black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M400-304 240-464l56-56 104 104 264-264 56 56-320 320Z"/></svg>
diff --git a/src/assets/icon/delete_white.svg b/src/assets/icon/delete_white.svg
new file mode 100644
index 000000000..892aca9e2
--- /dev/null
+++ b/src/assets/icon/delete_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
diff --git a/src/assets/icon/input.svg b/src/assets/icon/input.svg
new file mode 100644
index 000000000..ed46ae92a
--- /dev/null
+++ b/src/assets/icon/input.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M160-160q-33 0-56.5-23.5T80-240v-120h80v120h640v-480H160v120H80v-120q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm300-140-56-58 83-82H80v-80h407l-83-82 56-58 180 180-180 180Z"/></svg>
diff --git a/src/assets/icon/tour.svg b/src/assets/icon/tour.svg
new file mode 100644
index 000000000..f5eca29b3
--- /dev/null
+++ b/src/assets/icon/tour.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 13.125C17.5264 13.125 17.0722 12.9275 16.7373 12.5758C16.4024 12.2242 16.2143 11.7473 16.2143 11.25C16.2143 10.7527 16.4024 10.2758 16.7373 9.92417C17.0722 9.57254 17.5264 9.375 18 9.375C18.4736 9.375 18.9278 9.57254 19.2627 9.92417C19.5976 10.2758 19.7857 10.7527 19.7857 11.25C19.7857 11.4962 19.7395 11.74 19.6498 11.9675C19.56 12.195 19.4285 12.4017 19.2627 12.5758C19.0969 12.7499 18.9 12.888 18.6834 12.9823C18.4667 13.0765 18.2345 13.125 18 13.125ZM18 6C16.6739 6 15.4021 6.55312 14.4645 7.53769C13.5268 8.52226 13 9.85761 13 11.25C13 15.1875 18 21 18 21C18 21 23 15.1875 23 11.25C23 9.85761 22.4732 8.52226 21.5355 7.53769C20.5979 6.55312 19.3261 6 18 6Z" fill="#6996A3"/>
+<path d="M2 2C4.33333 2.66667 9 4.8 9 8C9 12 4 11 4 15C4 19 12.6667 20.5 17 21" stroke="#6996A3" stroke-width="2" stroke-linejoin="round" stroke-dasharray="4 1.7"/>
+</svg>
diff --git a/src/global.scss b/src/global.scss
index 2a5333470..435f42c63 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -25,6 +25,10 @@
 @import '@ionic/angular/css/flex-utils.css';
 @import './app/core/helpers/leaflet/user-marker/user-marker.css';
 @import '@ionic/angular/css/text-transformation.css';
+
+/* Varsom-tema for NVE designsystem */
+@import 'nve-designsystem/css/varsom.css';
+
 /**
  * Ionic Dark Mode
  * -----------------------------------------------------
@@ -55,6 +59,40 @@ a {
   unicode-range: U+2190-2199, U+2B08, U+2B09, U+2B0A, U+2B0B;
 }
 
+/* Source Sans Pro brukes av NVE designsystem. TODO: Er ikke helt sikker på om vi trenger italic-variantene */
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  src:
+    local('Source Sans Pro'),
+    url('/fonts/source-sans-3-latin-600-italic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+}
+
 :root {
   --ion-color-primary: #00425f;
   --ion-color-primary-rgb: 0, 66, 95;
diff --git a/src/main.ts b/src/main.ts
index a3c930389..676b85759 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,8 +27,9 @@ import { httpFactory } from './app/modules/auth/factories/http-factory';
 import { AuthService, Browser, DefaultBrowser } from 'ionic-appauth';
 import { CapacitorBrowser } from 'ionic-appauth/lib/capacitor';
 import { authFactory } from './app/modules/auth/factories/auth-factory';
-import { register } from 'swiper/element/bundle';
+import { register as registerSwiperWebComponents } from 'swiper/element/bundle';
 import { mapOldParamsToNew } from './app/core/services/search-criteria/url-params';
+import { icons, registerIconLibrary } from 'nve-designsystem/registerIcons/systemLibraryCustomization.js';
 
 if (environment.production) {
   enableProdMode();
@@ -46,8 +47,18 @@ function replaceOldParamsWithNew() {
   }
 }
 
+// fordi vi overstyrer Shoelace sine system-ikoner i NVE designsystem må vi registrere disse ikonene manuelt
+function registerNveDesignsystemIcons() {
+  registerIconLibrary('system', {
+    resolver: (name) => {
+      return `data:image/svg+xml, ${encodeURIComponent(icons[name])}`;
+    },
+  });
+}
+
 function startApp() {
-  register();
+  registerSwiperWebComponents();
+  registerNveDesignsystemIcons();
   replaceOldParamsWithNew();
 
   console.log('starting app');
diff --git a/tsconfig.json b/tsconfig.json
index 006da19b7..d2053c32d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,8 @@
     "experimentalDecorators": true,
     "moduleResolution": "bundler",
     "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
+    "target": "es2023",
+    "module": "esnext",
     // "sourceMap": true,
     // "inlineSources": true,
     // "sourceRoot": "/",
@@ -51,4 +51,4 @@
     "strictTemplates": true,
     "strictStandalone": true
   }
-}
\ No newline at end of file
+}