diff --git a/.gitignore b/.gitignore
index 9b6dd35..fc1c33c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+auto-imports.d.ts
+components.d.ts
+/public/fonts/
diff --git a/manual.d.ts b/manual.d.ts
new file mode 100644
index 0000000..c79ac71
--- /dev/null
+++ b/manual.d.ts
@@ -0,0 +1,7 @@
+// TODO: move after refactoring
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        title: string
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index aff37e3..ff39d56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,9 @@
         "prettier": "^3.0.3",
         "prettier-plugin-tailwindcss": "^0.5.5",
         "tailwindcss": "^3.3.3",
+        "unplugin-auto-import": "^0.16.7",
+        "unplugin-vue-components": "^0.25.2",
+        "unplugin-vue-router": "^0.7.0",
         "vite": "^4.4.5"
       }
     },
@@ -42,6 +45,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.6.tgz",
+      "integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
@@ -53,6 +83,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -487,92 +531,110 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz",
+      "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@sentry-internal/tracing": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.74.1.tgz",
-      "integrity": "sha512-nNaiZreQxCitG2PzYPaC7XtyA9OMsETGYMKAtiK4p62/uTmeYbsBva9BoNx1XeiHRwbrVQYRMKQ9nV5e2jS4/A==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.75.1.tgz",
+      "integrity": "sha512-nynV+7iVcF8k3CqhvI2K7iA8h4ovJhgYHKnXR8RDDevQOqNG2AEX9+hjCj9fZM4MhKHYFqf1od2oO9lTr38kwg==",
       "dependencies": {
-        "@sentry/core": "7.74.1",
-        "@sentry/types": "7.74.1",
-        "@sentry/utils": "7.74.1",
-        "tslib": "^2.4.1 || ^1.9.3"
+        "@sentry/core": "7.75.1",
+        "@sentry/types": "7.75.1",
+        "@sentry/utils": "7.75.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/browser": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.74.1.tgz",
-      "integrity": "sha512-OYWNne/KO60lOvkIpIlJUyiJt/9j8DGI57thSDFEYSmmbNqMitczUTBOaEStouvHKyfchqLZm1CZfWKt+z0VOA==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.75.1.tgz",
+      "integrity": "sha512-0+jPfPA5P9HVYYRQraDokGCY2NiMknSfz11dggClK4VmjvG+hOXiEyf73SFVwLFnv/hwrkWySjoIrVCX65xXQA==",
       "dependencies": {
-        "@sentry-internal/tracing": "7.74.1",
-        "@sentry/core": "7.74.1",
-        "@sentry/replay": "7.74.1",
-        "@sentry/types": "7.74.1",
-        "@sentry/utils": "7.74.1",
-        "tslib": "^2.4.1 || ^1.9.3"
+        "@sentry-internal/tracing": "7.75.1",
+        "@sentry/core": "7.75.1",
+        "@sentry/replay": "7.75.1",
+        "@sentry/types": "7.75.1",
+        "@sentry/utils": "7.75.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/core": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.74.1.tgz",
-      "integrity": "sha512-LvEhOSfdIvwkr+PdlrT/aA/iOLhkXrSkvjqAQyogE4ddCWeYfS0NoirxNt1EaxMBAWKhYZRqzkA7WA4LDLbzlA==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.75.1.tgz",
+      "integrity": "sha512-Kw4KyKBxbxbh8OKO0S11Tm0gWP+6AaXXYrsq3hp8H338l/wOmIzyckmCbUrc/XJeoRqaFLJbdcCrcUEDZUvsVQ==",
       "dependencies": {
-        "@sentry/types": "7.74.1",
-        "@sentry/utils": "7.74.1",
-        "tslib": "^2.4.1 || ^1.9.3"
+        "@sentry/types": "7.75.1",
+        "@sentry/utils": "7.75.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/replay": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.74.1.tgz",
-      "integrity": "sha512-qmbOl+jYdyhoHFbPp9WemKx8UojID5hVmuVLxNIP0ANqAwmE9OQEK9YFg2cf7L/TpKb1tqz0qLgi5MYIdcdpgQ==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.75.1.tgz",
+      "integrity": "sha512-MKQTDWNYs9QXCJ+irGX5gu8Kxdk/Ds5puhILy8+DnCoXgXuPFRMGob1Sxt8qXmbQmcGeogsx221MNTselsRS6g==",
       "dependencies": {
-        "@sentry/core": "7.74.1",
-        "@sentry/types": "7.74.1",
-        "@sentry/utils": "7.74.1"
+        "@sentry-internal/tracing": "7.75.1",
+        "@sentry/core": "7.75.1",
+        "@sentry/types": "7.75.1",
+        "@sentry/utils": "7.75.1"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry/types": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.74.1.tgz",
-      "integrity": "sha512-2jIuPc+YKvXqZETwr2E8VYnsH1zsSUR/wkIvg1uTVeVNyoowJv+YsOtCdeGyL2AwiotUBSPKu7O1Lz0kq5rMOQ==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.75.1.tgz",
+      "integrity": "sha512-km+ygqgMDaFfTrbQwdhrptFqx0Oq15jZABqIoIpbaOCkCAMm+tyCqrFS8dTfaq5wpCktqWOy2qU/DOpppO99Cg==",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/utils": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.74.1.tgz",
-      "integrity": "sha512-qUsqufuHYcy5gFhLZslLxA5kcEOkkODITXW3c7D+x+8iP/AJqa8v8CeUCVNS7RetHCuIeWAbbTClC4c411EwQg==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.75.1.tgz",
+      "integrity": "sha512-QzW2eRjY20epD//9/tQ0FTNwdAL6XZi+LyJNUQIeK3NMnc5NgHrgpxId87gmFq8cNx47utH1Blub8RuMbKqiwQ==",
       "dependencies": {
-        "@sentry/types": "7.74.1",
-        "tslib": "^2.4.1 || ^1.9.3"
+        "@sentry/types": "7.75.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/vue": {
-      "version": "7.74.1",
-      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-7.74.1.tgz",
-      "integrity": "sha512-t74d7ZkgQSHAgyaV+sDNFAWMOBl6CPFhBlzplzCvmgaUf5rj5kAlElztm2KFqOFplfPSyJx20wc741exjfuQOw==",
+      "version": "7.75.1",
+      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-7.75.1.tgz",
+      "integrity": "sha512-GUasSjHOU5Ge4bseuS5Hv35nirGVOT72TjKy0f8e29Oom9gveHTkeOVHIfs2gHT4cmGqzdsON+Dk4vSfG6PSBg==",
       "dependencies": {
-        "@sentry/browser": "7.74.1",
-        "@sentry/core": "7.74.1",
-        "@sentry/types": "7.74.1",
-        "@sentry/utils": "7.74.1",
-        "tslib": "^2.4.1 || ^1.9.3"
+        "@sentry/browser": "7.75.1",
+        "@sentry/core": "7.75.1",
+        "@sentry/types": "7.75.1",
+        "@sentry/utils": "7.75.1"
       },
       "engines": {
         "node": ">=8"
@@ -582,13 +644,19 @@
       }
     },
     "node_modules/@typeform/embed": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@typeform/embed/-/embed-4.1.0.tgz",
-      "integrity": "sha512-6ngjoVgnk32SviuX0OldbB3Sj9sQf4Hb9H6cb9i+UciHYm+koRzDnxAkw8ubvmWxWjkEJVTiJrAwDaDCMnMoLQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@typeform/embed/-/embed-4.3.0.tgz",
+      "integrity": "sha512-a3NBbq6H4hujr+wUa9u+c3BoAp7f6suP8bIjrdhe+qCOSpRTjzUPqNOm3gSUd9LWr8EJgJVOQvfDEhp2dgQ1hg==",
       "engines": {
         "node": ">=10"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.3.tgz",
+      "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.18",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
@@ -607,37 +675,62 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-macros/common": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.8.0.tgz",
+      "integrity": "sha512-auDJJzE0z3uRe3867e0DsqcseKImktNf5ojCZgUKqiVxb2yTlwlgOVAYCgoep9oITqxkXQymSvFeKhedi8PhaA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.17",
+        "@rollup/pluginutils": "^5.0.4",
+        "@vue/compiler-sfc": "^3.3.4",
+        "ast-kit": "^0.11.2",
+        "local-pkg": "^0.4.3",
+        "magic-string-ast": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.6.tgz",
-      "integrity": "sha512-2JNjemwaNwf+MkkatATVZi7oAH1Hx0B04DdPH3ZoZ8vKC1xZVP7nl4HIsk8XYd3r+/52sqqoz9TWzYc3yE9dqA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
+      "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
       "dependencies": {
         "@babel/parser": "^7.23.0",
-        "@vue/shared": "3.3.6",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.6.tgz",
-      "integrity": "sha512-1MxXcJYMHiTPexjLAJUkNs/Tw2eDf2tY3a0rL+LfuWyiKN2s6jvSwywH3PWD8bKICjfebX3GWx2Os8jkRDq3Ng==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
+      "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.6",
-        "@vue/shared": "3.3.6"
+        "@vue/compiler-core": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.6.tgz",
-      "integrity": "sha512-/Kms6du2h1VrXFreuZmlvQej8B1zenBqIohP0690IUBkJjsFvJxY0crcvVRJ0UhMgSR9dewB+khdR1DfbpArJA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.7.tgz",
+      "integrity": "sha512-7pfldWy/J75U/ZyYIXRVqvLRw3vmfxDo2YLMwVtWVNew8Sm8d6wodM+OYFq4ll/UxfqVr0XKiVwti32PCrruAw==",
       "dependencies": {
         "@babel/parser": "^7.23.0",
-        "@vue/compiler-core": "3.3.6",
-        "@vue/compiler-dom": "3.3.6",
-        "@vue/compiler-ssr": "3.3.6",
-        "@vue/reactivity-transform": "3.3.6",
-        "@vue/shared": "3.3.6",
+        "@vue/compiler-core": "3.3.7",
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/compiler-ssr": "3.3.7",
+        "@vue/reactivity-transform": "3.3.7",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5",
         "postcss": "^8.4.31",
@@ -645,12 +738,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.6.tgz",
-      "integrity": "sha512-QTIHAfDCHhjXlYGkUg5KH7YwYtdUM1vcFl/FxFDlD6d0nXAmnjizka3HITp8DGudzHndv2PjKVS44vqqy0vP4w==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
+      "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.6",
-        "@vue/shared": "3.3.6"
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -659,60 +752,60 @@
       "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.6.tgz",
-      "integrity": "sha512-gtChAumfQz5lSy5jZXfyXbKrIYPf9XEOrIr6rxwVyeWVjFhJwmwPLtV6Yis+M9onzX++I5AVE9j+iPH60U+B8Q==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
+      "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
       "dependencies": {
-        "@vue/shared": "3.3.6"
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.6.tgz",
-      "integrity": "sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.7.tgz",
+      "integrity": "sha512-APhRmLVbgE1VPGtoLQoWBJEaQk4V8JUsqrQihImVqKT+8U6Qi3t5ATcg4Y9wGAPb3kIhetpufyZ1RhwbZCIdDA==",
       "dependencies": {
         "@babel/parser": "^7.23.0",
-        "@vue/compiler-core": "3.3.6",
-        "@vue/shared": "3.3.6",
+        "@vue/compiler-core": "3.3.7",
+        "@vue/shared": "3.3.7",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.5"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.6.tgz",
-      "integrity": "sha512-qp7HTP1iw1UW2ZGJ8L3zpqlngrBKvLsDAcq5lA6JvEXHmpoEmjKju7ahM9W2p/h51h0OT5F2fGlP/gMhHOmbUA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.7.tgz",
+      "integrity": "sha512-LHq9du3ubLZFdK/BP0Ysy3zhHqRfBn80Uc+T5Hz3maFJBGhci1MafccnL3rpd5/3wVfRHAe6c+PnlO2PAavPTQ==",
       "dependencies": {
-        "@vue/reactivity": "3.3.6",
-        "@vue/shared": "3.3.6"
+        "@vue/reactivity": "3.3.7",
+        "@vue/shared": "3.3.7"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.6.tgz",
-      "integrity": "sha512-AoX3Cp8NqMXjLbIG9YR6n/pPLWE9TiDdk6wTJHFnl2GpHzDFH1HLBC9wlqqQ7RlnvN3bVLpzPGAAH00SAtOxHg==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.7.tgz",
+      "integrity": "sha512-PFQU1oeJxikdDmrfoNQay5nD4tcPNYixUBruZzVX/l0eyZvFKElZUjW4KctCcs52nnpMGO6UDK+jF5oV4GT5Lw==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.6",
-        "@vue/shared": "3.3.6",
+        "@vue/runtime-core": "3.3.7",
+        "@vue/shared": "3.3.7",
         "csstype": "^3.1.2"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.6.tgz",
-      "integrity": "sha512-kgLoN43W4ERdZ6dpyy+gnk2ZHtcOaIr5Uc/WUP5DRwutgvluzu2pudsZGoD2b7AEJHByUVMa9k6Sho5lLRCykw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
+      "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.6",
-        "@vue/shared": "3.3.6"
+        "@vue/compiler-ssr": "3.3.7",
+        "@vue/shared": "3.3.7"
       },
       "peerDependencies": {
-        "vue": "3.3.6"
+        "vue": "3.3.7"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.6.tgz",
-      "integrity": "sha512-Xno5pEqg8SVhomD0kTSmfh30ZEmV/+jZtyh39q6QflrjdJCXah5lrnOLi9KB6a5k5aAHXMXjoMnxlzUkCNfWLQ=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
+      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg=="
     },
     "node_modules/@vueuse/core": {
       "version": "10.5.0",
@@ -797,6 +890,18 @@
         }
       }
     },
+    "node_modules/acorn": {
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -822,6 +927,47 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "node_modules/ast-kit": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.11.2.tgz",
+      "integrity": "sha512-Q0DjXK4ApbVoIf9GLyCo252tUH44iTnD/hiJ2TQaJeydYWSpKk0sI34+WMel8S9Wt5pbLgG02oJ+gkgX5DV3sQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.22.14",
+        "@rollup/pluginutils": "^5.0.4",
+        "pathe": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.5.0.tgz",
+      "integrity": "sha512-NsyHMxBh4dmdEHjBo1/TBZvCKxffmZxRYhmclfu0PP6Aftre47jOHYaYaNqJcV0bxihxFXhDkzLHUwHc0ocd0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.22.7",
+        "ast-kit": "^0.9.4"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/ast-walker-scope/node_modules/ast-kit": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.9.5.tgz",
+      "integrity": "sha512-kbL7ERlqjXubdDd+szuwdlQ1xUxEz9mCz1+m07ftNVStgwRb2RWw+U6oKo08PAvOishMxiqz1mlJyLl8yQx2Qg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.22.7",
+        "@rollup/pluginutils": "^5.0.2",
+        "pathe": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -866,9 +1012,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
-      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
+      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
       "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.0",
@@ -955,9 +1101,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001551",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001551.tgz",
-      "integrity": "sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==",
+      "version": "1.0.30001554",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
+      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
       "dev": true,
       "funding": [
         {
@@ -1057,6 +1203,23 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1079,9 +1242,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.562",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.562.tgz",
-      "integrity": "sha512-kMGVZLP65O2/oH7zzaoIA5hcr4/xPYO6Sa83FrIpWcd7YPPtSlxqwxTd8lJIwKxaiXM6FGsYK4ukyJ40XkW7jg==",
+      "version": "1.4.568",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.568.tgz",
+      "integrity": "sha512-3TCOv8+BY6Ltpt1/CmGBMups2IdKOyfEmz4J8yIS4xLSeMm0Rf+psSaxLuswG9qMKt+XbNbmADybtXGpTFlbDg==",
       "dev": true
     },
     "node_modules/esbuild": {
@@ -1130,6 +1293,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1251,6 +1426,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -1283,13 +1467,16 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/has": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
-      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
       "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
       "engines": {
-        "node": ">= 0.4.0"
+        "node": ">= 0.4"
       }
     },
     "node_modules/inflight": {
@@ -1321,12 +1508,12 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -1371,6 +1558,24 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
     "node_modules/laravel-vue-i18n": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/laravel-vue-i18n/-/laravel-vue-i18n-2.7.1.tgz",
@@ -1395,6 +1600,18 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1412,6 +1629,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/magic-string-ast": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-0.3.0.tgz",
+      "integrity": "sha512-0shqecEPgdFpnI3AP90epXyxZy9g6CRZ+SZ7BcqFwYmtFEnZ1jpevcV5HoyVnlDS9gCnc1UIg3Rsvp3Ci7r8OA==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.2"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1467,6 +1696,24 @@
         "node": "*"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
+      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "ufo": "^1.3.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -1569,6 +1816,12 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/pathe": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "dev": true
+    },
     "node_modules/php-parser": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/php-parser/-/php-parser-3.1.3.tgz",
@@ -1659,6 +1912,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
+      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "dev": true,
+      "dependencies": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -1989,6 +2253,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/scule": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
+      "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+      "dev": true
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -1997,6 +2267,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
+      "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
@@ -2032,9 +2314,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -2042,10 +2324,10 @@
         "chokidar": "^3.5.3",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.12",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.18.2",
+        "jiti": "^1.19.1",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
@@ -2089,6 +2371,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2107,10 +2398,206 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    "node_modules/ufo": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz",
+      "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
+      "dev": true
+    },
+    "node_modules/unimport": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.4.0.tgz",
+      "integrity": "sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.4",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.3.1",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.3",
+        "mlly": "^1.4.2",
+        "pathe": "^1.1.1",
+        "pkg-types": "^1.0.3",
+        "scule": "^1.0.0",
+        "strip-literal": "^1.3.0",
+        "unplugin": "^1.5.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.0.tgz",
+      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.10.0",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.16.7.tgz",
+      "integrity": "sha512-w7XmnRlchq6YUFJVFGSvG1T/6j8GrdYN6Em9Wf0Ye+HXgD/22kont+WnuCAA0UaUoxtuvRR1u/mXKy63g/hfqQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.6",
+        "@rollup/pluginutils": "^5.0.5",
+        "fast-glob": "^3.3.1",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.5",
+        "minimatch": "^9.0.3",
+        "unimport": "^3.4.0",
+        "unplugin": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.2.2",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/local-pkg": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "dev": true,
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.25.2",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
+      "integrity": "sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.5",
+        "@rollup/pluginutils": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.0",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.1",
+        "minimatch": "^9.0.3",
+        "resolve": "^1.22.2",
+        "unplugin": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/unplugin-vue-router": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.7.0.tgz",
+      "integrity": "sha512-ddRreGq0t5vlSB7OMy4e4cfU1w2AwBQCwmvW3oP/0IHQiokzbx4hd3TpwBu3eIAFVuhX2cwNQwp1U32UybTVCw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.19",
+        "@rollup/pluginutils": "^5.0.4",
+        "@vue-macros/common": "^1.8.0",
+        "ast-walker-scope": "^0.5.0",
+        "chokidar": "^3.5.3",
+        "fast-glob": "^3.3.1",
+        "json5": "^2.2.3",
+        "local-pkg": "^0.4.3",
+        "mlly": "^1.4.2",
+        "pathe": "^1.1.1",
+        "scule": "^1.0.0",
+        "unplugin": "^1.5.0",
+        "yaml": "^2.3.2"
+      },
+      "peerDependencies": {
+        "vue-router": "^4.1.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
     },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
@@ -2204,15 +2691,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.6.tgz",
-      "integrity": "sha512-jJIDETeWJnoY+gfn4ZtMPMS5KtbP4ax+CT4dcQFhTnWEk8xMupFyQ0JxL28nvT/M4+p4a0ptxaV2WY0LiIxvRg==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.7.tgz",
+      "integrity": "sha512-YEMDia1ZTv1TeBbnu6VybatmSteGOS3A3YgfINOfraCbf85wdKHzscD6HSS/vB4GAtI7sa1XPX7HcQaJ1l24zA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.6",
-        "@vue/compiler-sfc": "3.3.6",
-        "@vue/runtime-dom": "3.3.6",
-        "@vue/server-renderer": "3.3.6",
-        "@vue/shared": "3.3.6"
+        "@vue/compiler-dom": "3.3.7",
+        "@vue/compiler-sfc": "3.3.7",
+        "@vue/runtime-dom": "3.3.7",
+        "@vue/server-renderer": "3.3.7",
+        "@vue/shared": "3.3.7"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -2245,6 +2732,21 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+      "dev": true
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 879170a..014919f 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4",
     "@sentry/vue": "^7.73.0",
     "@typeform/embed": "^4.0.0",
     "@vitejs/plugin-vue": "^4.4.0",
@@ -17,17 +16,21 @@
     "laravel-vue-i18n": "^2.7.1",
     "openseadragon": "^4.1.0",
     "pinia": "^2.1.6",
+    "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.4.5",
     "autoprefixer": "^10.4.16",
     "axios": "^1.5",
     "lodash": "^4.17.21",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.5",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-vue-components": "^0.25.2",
+    "unplugin-vue-router": "^0.7.0",
+    "vite": "^4.4.5"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 625b20f..35c5c5b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,7 @@
 </template>
 
 <script setup>
-import Header from './components/Header.vue'
-import { onMounted } from 'vue'
+import Header from './components/layout/Header.vue'
 
 const setViewHeight = () => {
     let vh = window.innerHeight * 0.01
diff --git a/src/app.js b/src/app.js
index a19ff3a..8c82fe9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2,108 +2,22 @@ import './bootstrap'
 import './css/style.css'
 
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router/auto'
 import { i18nVue } from 'laravel-vue-i18n'
 import { createPinia } from 'pinia'
 import * as Sentry from '@sentry/vue'
 
 import App from './App.vue'
-import Collection from './views/Collection.vue'
-import Interaction from './views/Interaction.vue'
-import ItemDetail from './views/ItemDetail.vue'
-import SectionDetail from './views/SectionDetail.vue'
-import PlaceDetail from './views/PlaceDetail.vue'
-import RewardDetail from './views/RewardDetail.vue'
-import LockedItemDetail from './views/LockedItemDetail.vue'
 import { useHistoryStore } from './stores/HistoryStore'
 import { useLocaleStore } from './stores/LocaleStore'
 
-const routes = [
-    {
-        name: 'home',
-        path: '/',
-        component: Interaction,
-        meta: {
-            title: 'Atlas SNG',
-        },
-    },
-    {
-        name: 'locked_item_detail',
-        path: '/locked_item_detail/:id',
-        component: LockedItemDetail,
-        meta: {
-            title: 'Locked artwork detail'
-        }
-    },
-    {
-        name: 'item_detail',
-        path: '/detail/:id',
-        component: ItemDetail,
-        meta: {
-            title: 'Artwork detail',
-        },
-    },
-    {
-        name: 'section_detail',
-        path: '/group/:id',
-        component: SectionDetail,
-        meta: {
-            title: 'Artwork group detail',
-        },
-    },
-    {
-        name: 'section_item_detail',
-        path: '/group/:section_id/:id',
-        component: ItemDetail,
-        meta: {
-            title: 'Group › Artwork detail',
-        },
-    },
-    {
-        name: 'story',
-        path: '/story/:id',
-        component: Interaction,
-        meta: {
-            title: 'Story',
-        },
-    },
-    {
-        name: 'my_collection',
-        path: '/collection',
-        component: Collection,
-        meta: {
-            title: 'My timeline',
-        },
-    },
-    {
-        name: 'collection_detail',
-        path: '/:id?',
-        component: Collection,
-        meta: {
-            title: 'My timeline',
-        },
-    },
-    {
-        name: 'place_detail',
-        path: '/place/:id',
-        component: PlaceDetail,
-        meta: {
-            title: 'Place detail',
-        },
-    },
-    {
-        name: 'reward_detail',
-        path: '/reward/:id',
-        component: RewardDetail,
-    },
-]
 
 const history = createWebHistory()
 const router = createRouter({
     history,
-    routes,
+
     scrollBehavior(to, from, savedPosition) {
-        if (to.name === 'home') {
+        if (to.path === '/') {
             return savedPosition
         }
         return { top: 0 }
diff --git a/src/components/About.vue b/src/components/about/About.vue
similarity index 94%
rename from src/components/About.vue
rename to src/components/about/About.vue
index 4fb1a3f..12a0179 100644
--- a/src/components/About.vue
+++ b/src/components/about/About.vue
@@ -12,7 +12,7 @@
                             </h1>
                         </div>
                         <div>
-                            <img src="../img/about-ester.png" />
+                            <img src="../../img/about-ester.png" />
                         </div>
                     </div>
 
@@ -87,7 +87,7 @@
 
                         <img
                             class="mt-8 max-w-[8rem]"
-                            src="../img/eea_grants.png"
+                            src="../../img/eea_grants.png"
                             alt="Iceland Lichtenstein Norway grants"
                         />
                     </template>
@@ -146,15 +146,9 @@
 </style>
 
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import AboutCollapsible from './AboutCollapsible.vue'
-import CardModal from '../components/CardModal.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
-import SvgLogo from './svg/Logo.vue'
-import SvgInfo from './svg/Info.vue'
-import { useInteractionStore } from '../stores/InteractionStore'
-import { useSurvey } from '../composables/Survey'
+import CardModal from '../layout/CardModal.vue'
+import ConfirmButton from '../forms/ConfirmButton.vue'
 
 const props = defineProps(['opened'])
 const router = useRouter()
diff --git a/src/components/AboutCollapsible.vue b/src/components/about/AboutCollapsible.vue
similarity index 88%
rename from src/components/AboutCollapsible.vue
rename to src/components/about/AboutCollapsible.vue
index 47d1578..ff30500 100644
--- a/src/components/AboutCollapsible.vue
+++ b/src/components/about/AboutCollapsible.vue
@@ -13,9 +13,6 @@
 </template>
 
 <script setup>
-import { nextTick, ref, watch } from 'vue'
-import SvgDownArrow from './svg/DownArrow.vue'
-
 const props = defineProps(['initialOpen'])
 const el = ref(null)
 const open = ref(props.initialOpen)
diff --git a/src/components/AuthorDetails.vue b/src/components/author/AuthorDetails.vue
similarity index 100%
rename from src/components/AuthorDetails.vue
rename to src/components/author/AuthorDetails.vue
diff --git a/src/components/AuthorSummary.vue b/src/components/author/AuthorSummary.vue
similarity index 100%
rename from src/components/AuthorSummary.vue
rename to src/components/author/AuthorSummary.vue
diff --git a/src/components/AuthorityDetails.vue b/src/components/author/AuthorityDetails.vue
similarity index 95%
rename from src/components/AuthorityDetails.vue
rename to src/components/author/AuthorityDetails.vue
index c1af861..65bea14 100644
--- a/src/components/AuthorityDetails.vue
+++ b/src/components/author/AuthorityDetails.vue
@@ -37,10 +37,9 @@
 </template>
 
 <script setup>
-import { defineProps, ref, onMounted } from 'vue'
 import { Carousel, Slide } from 'vue3-carousel'
-import ItemImage from './ItemImage.vue'
-import ItemPreview from './ItemPreview.vue'
+import ItemImage from '../general/ItemImage.vue'
+import ItemPreview from '../general/ItemPreview.vue'
 
 const props = defineProps(['authority'])
 const relatedItems = ref([])
diff --git a/src/components/AuthoritySummary.vue b/src/components/author/AuthoritySummary.vue
similarity index 100%
rename from src/components/AuthoritySummary.vue
rename to src/components/author/AuthoritySummary.vue
diff --git a/src/components/Bucketlist.vue b/src/components/bucketlist/Bucketlist.vue
similarity index 86%
rename from src/components/Bucketlist.vue
rename to src/components/bucketlist/Bucketlist.vue
index 5cc2732..833ca3b 100644
--- a/src/components/Bucketlist.vue
+++ b/src/components/bucketlist/Bucketlist.vue
@@ -24,7 +24,7 @@
             <p v-if="!unlocked" class="pt-1">{{ $t('The story unlocks when all artworks have been found') }}</p>
             <router-link
                 :class="[{ 'pointer-events-none': !unlocked }, 'block']"
-                :to="{ name: 'reward_detail', params: { id: bucketlist.id } }"
+                :to="`/reward/${bucketlist.id}`"
             >
                 <Thumbnail class="mt-4" :class="[unlocked ? 'bg-green' : 'bg-green/20']" :truncate-description="false">
                     <template #image>
@@ -51,7 +51,7 @@
             <h3 class="text-1.5xl font-medium leading-6">{{ $t('Found') }}</h3>
             <div class="mt-4 flex flex-col gap-y-4">
                 <router-link
-                    :to="{ name: 'item_detail', params: { id: item.id } }"
+                    :to="`/item/${item.id}`"
                     v-for="item in found"
                     :key="item.id"
                 >
@@ -65,7 +65,7 @@
                 <router-link
                     v-for="item in notFound"
                     :key="item.id"
-                    :to="{ name: 'locked_item_detail', params: { id: item.id } }"
+                    :to="`/locked/${item.id}`"
                 >
                     <LockedItemThumbnail :item="item" />
                 </router-link>
@@ -75,14 +75,10 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useBucketlistStore } from '../stores/BucketlistStore'
-import { useInteractionStore } from '../stores/InteractionStore'
 import LockedItemThumbnail from './LockedItemThumbnail.vue'
-import ItemThumbnail from './ItemThumbnail.vue'
-import Thumbnail from './Thumbnail.vue'
-import ResponsiveImageWithSizes from './ResponsiveImageWithSizes.vue'
-import SvgLock from './svg/Lock.vue'
+import ItemThumbnail from '../general/ItemThumbnail.vue'
+import Thumbnail from '../general/Thumbnail.vue'
+import ResponsiveImageWithSizes from '../general/ResponsiveImageWithSizes.vue'
 
 const bucketlistStore = useBucketlistStore()
 const interactionStore = useInteractionStore()
diff --git a/src/components/LockedItemThumbnail.vue b/src/components/bucketlist/LockedItemThumbnail.vue
similarity index 76%
rename from src/components/LockedItemThumbnail.vue
rename to src/components/bucketlist/LockedItemThumbnail.vue
index b66cadd..cd2ed0e 100644
--- a/src/components/LockedItemThumbnail.vue
+++ b/src/components/bucketlist/LockedItemThumbnail.vue
@@ -7,7 +7,7 @@
             />
         </template>
         <template #icon>
-            <CaretRight />
+            <SvgCaretRight />
         </template>
         <template #title>{{ item.title }}</template>
         <template #description>{{ item.exhibition.name }}<br />{{ item.location_formatted }}</template>
@@ -15,9 +15,8 @@
 </template>
 
 <script setup>
-import ResponsiveImageWithSizes from './ResponsiveImageWithSizes.vue'
-import Thumbnail from './Thumbnail.vue'
-import CaretRight from './svg/CaretRight.vue'
+import ResponsiveImageWithSizes from '../general/ResponsiveImageWithSizes.vue'
+import Thumbnail from '../general/Thumbnail.vue'
 
 const props = defineProps(['item'])
 </script>
diff --git a/src/components/CircleButton.vue b/src/components/forms/CircleButton.vue
similarity index 100%
rename from src/components/CircleButton.vue
rename to src/components/forms/CircleButton.vue
diff --git a/src/components/ConfirmButton.vue b/src/components/forms/ConfirmButton.vue
similarity index 100%
rename from src/components/ConfirmButton.vue
rename to src/components/forms/ConfirmButton.vue
diff --git a/src/components/RectangleButton.vue b/src/components/forms/RectangleButton.vue
similarity index 100%
rename from src/components/RectangleButton.vue
rename to src/components/forms/RectangleButton.vue
diff --git a/src/components/StoryButton.vue b/src/components/forms/StoryButton.vue
similarity index 81%
rename from src/components/StoryButton.vue
rename to src/components/forms/StoryButton.vue
index 3218c14..71af579 100644
--- a/src/components/StoryButton.vue
+++ b/src/components/forms/StoryButton.vue
@@ -9,7 +9,7 @@
                     <div class="shrink-0">
                         <img
                             class="h-16 w-16 rounded-xl border-2"
-                            src="../img/avatar-ester.png"
+                            src="../../img/avatar-ester.png"
                             alt="Avatar"
                         />
                     </div>
@@ -25,7 +25,7 @@
                     </div>
                 </div>
             </div>
-            <ChatCircleSmall />
+            <SvgChatCircleSmall />
         </div>
     </div>
     <CardModal @close="toggleModal" :visible="modalActive">
@@ -47,11 +47,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import ChatCircleSmall from './svg/ChatCircleSmall.vue'
-import CardModal from '../components/CardModal.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
+import CardModal from '../layout/CardModal.vue'
+import ConfirmButton from './ConfirmButton.vue'
 
 const props = defineProps(['storyId'])
 const modalActive = ref(false)
@@ -62,9 +59,6 @@ const toggleModal = () => {
 }
 
 const openStory = () => {
-    router.push({
-        name: 'story',
-        params: { id: props.storyId },
-    })
+    router.push(`/story/${props.storyId}`)
 }
 </script>
diff --git a/src/components/WebumeniaButton.vue b/src/components/forms/WebumeniaButton.vue
similarity index 90%
rename from src/components/WebumeniaButton.vue
rename to src/components/forms/WebumeniaButton.vue
index 923d661..fff4ac0 100644
--- a/src/components/WebumeniaButton.vue
+++ b/src/components/forms/WebumeniaButton.vue
@@ -22,8 +22,6 @@
 </template>
 
 <script setup>
-import SvgArrowSquareOut from './svg/ArrowSquareOut.vue'
-import SvgSearch from './svg/Search.vue'
 
 const props = defineProps(['url'])
 </script>
diff --git a/src/components/Collapsible.vue b/src/components/general/Collapsible.vue
similarity index 92%
rename from src/components/Collapsible.vue
rename to src/components/general/Collapsible.vue
index 3b5bf7f..ec3ef8f 100644
--- a/src/components/Collapsible.vue
+++ b/src/components/general/Collapsible.vue
@@ -15,7 +15,6 @@
 </template>
 
 <script setup>
-import SvgDownArrow from './svg/DownArrow.vue'
 
 const props = defineProps(['open'])
 </script>
diff --git a/src/components/ImageLightbox.vue b/src/components/general/ImageLightbox.vue
similarity index 90%
rename from src/components/ImageLightbox.vue
rename to src/components/general/ImageLightbox.vue
index 698155e..861fa9c 100644
--- a/src/components/ImageLightbox.vue
+++ b/src/components/general/ImageLightbox.vue
@@ -27,11 +27,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
 import ItemImage from './ItemImage.vue'
-import SvgArrowsOut from './svg/ArrowsOut.vue'
-import SvgClose from './svg/Close.vue'
-import ZoomViewer from './ZoomViewer.vue'
+import ZoomViewer from '../misc/ZoomViewer.vue'
 
 const props = defineProps(['alt', 'offsetTop', 'src', 'srcset', 'images', 'imageAspectRatio', 'imgClass'])
 
diff --git a/src/components/ImageMovable.vue b/src/components/general/ImageMovable.vue
similarity index 92%
rename from src/components/ImageMovable.vue
rename to src/components/general/ImageMovable.vue
index 65e46fb..5bd2216 100644
--- a/src/components/ImageMovable.vue
+++ b/src/components/general/ImageMovable.vue
@@ -11,14 +11,13 @@
     />
     <div
         class="absolute bottom-0 right-0 h-10 w-12 border-1 border-black bg-white px-2 py-1 text-right"
-        :class="{ 'bg-red': ratioImg <= 0.75 && offsetTop != 0 }"
+        :class="{ 'bg-red': ratioImg <= 0.75 && offsetTop !== 0 }"
     >
         {{ currentOffsetTop }}
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
 import ItemImage from './ItemImage.vue'
 
 const props = defineProps(['alt', 'offsetTop', 'src', 'srcset'])
diff --git a/src/components/ItemImage.vue b/src/components/general/ItemImage.vue
similarity index 95%
rename from src/components/ItemImage.vue
rename to src/components/general/ItemImage.vue
index c54bf2c..9622582 100644
--- a/src/components/ItemImage.vue
+++ b/src/components/general/ItemImage.vue
@@ -15,7 +15,6 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue'
 const props = defineProps(['alt', 'offsetTop', 'src', 'srcset'])
 const isLoading = ref(true)
 
diff --git a/src/components/ItemLoader.vue b/src/components/general/ItemLoader.vue
similarity index 76%
rename from src/components/ItemLoader.vue
rename to src/components/general/ItemLoader.vue
index f131f30..fcdcd62 100644
--- a/src/components/ItemLoader.vue
+++ b/src/components/general/ItemLoader.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useItemStore } from '../stores/ItemStore'
 
 const props = defineProps(['id'])
 const item = ref(null)
diff --git a/src/components/ItemPreview.vue b/src/components/general/ItemPreview.vue
similarity index 90%
rename from src/components/ItemPreview.vue
rename to src/components/general/ItemPreview.vue
index 6f26907..ed94877 100644
--- a/src/components/ItemPreview.vue
+++ b/src/components/general/ItemPreview.vue
@@ -38,10 +38,8 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue'
-import SvgClose from './svg/Close.vue'
-import ConfirmButton from './ConfirmButton.vue'
-import WebumeniaButton from './WebumeniaButton.vue'
+import ConfirmButton from '../forms/ConfirmButton.vue'
+import WebumeniaButton from '../forms/WebumeniaButton.vue'
 
 const props = defineProps(['item'])
 const emit = defineEmits(['close'])
diff --git a/src/components/ItemThumbnail.vue b/src/components/general/ItemThumbnail.vue
similarity index 100%
rename from src/components/ItemThumbnail.vue
rename to src/components/general/ItemThumbnail.vue
diff --git a/src/components/ResponsiveImage.vue b/src/components/general/ResponsiveImage.vue
similarity index 100%
rename from src/components/ResponsiveImage.vue
rename to src/components/general/ResponsiveImage.vue
diff --git a/src/components/ResponsiveImageWithSizes.vue b/src/components/general/ResponsiveImageWithSizes.vue
similarity index 95%
rename from src/components/ResponsiveImageWithSizes.vue
rename to src/components/general/ResponsiveImageWithSizes.vue
index 4be1966..6c686fd 100644
--- a/src/components/ResponsiveImageWithSizes.vue
+++ b/src/components/general/ResponsiveImageWithSizes.vue
@@ -11,8 +11,6 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
 const props = defineProps(['image'])
 const img = ref(null)
 const sizes = ref('1px')
diff --git a/src/components/ResponsiveVideoEmbed.vue b/src/components/general/ResponsiveVideoEmbed.vue
similarity index 100%
rename from src/components/ResponsiveVideoEmbed.vue
rename to src/components/general/ResponsiveVideoEmbed.vue
diff --git a/src/components/Thumbnail.vue b/src/components/general/Thumbnail.vue
similarity index 100%
rename from src/components/Thumbnail.vue
rename to src/components/general/Thumbnail.vue
diff --git a/src/components/VideoSummary.vue b/src/components/general/VideoSummary.vue
similarity index 100%
rename from src/components/VideoSummary.vue
rename to src/components/general/VideoSummary.vue
diff --git a/src/components/InteractionItem.vue b/src/components/interactions/InteractionItem.vue
similarity index 90%
rename from src/components/InteractionItem.vue
rename to src/components/interactions/InteractionItem.vue
index 8b40f76..60f763f 100644
--- a/src/components/InteractionItem.vue
+++ b/src/components/interactions/InteractionItem.vue
@@ -5,7 +5,7 @@
         </div>
         <span>
             {{ label }}
-            <router-link class="underline hover:no-underline" :to="{ name: 'item_detail', params: { id: item.id } }"
+            <router-link class="underline hover:no-underline" :to="`/item/${item.id}`"
                 >{{ item.author }} &mdash; {{ item.title }}</router-link
             >
         </span>
diff --git a/src/components/InteractionItemFavourited.vue b/src/components/interactions/InteractionItemFavourited.vue
similarity index 83%
rename from src/components/InteractionItemFavourited.vue
rename to src/components/interactions/InteractionItemFavourited.vue
index cdc4c5a..ef6d7e8 100644
--- a/src/components/InteractionItemFavourited.vue
+++ b/src/components/interactions/InteractionItemFavourited.vue
@@ -4,7 +4,6 @@
 
 <script setup>
 import InteractionItem from './InteractionItem.vue'
-import SvgHeartSmall from './svg/HeartSmall.vue'
 
 const props = defineProps(['item'])
 </script>
diff --git a/src/components/InteractionItemViewed.vue b/src/components/interactions/InteractionItemViewed.vue
similarity index 85%
rename from src/components/InteractionItemViewed.vue
rename to src/components/interactions/InteractionItemViewed.vue
index 4a75f65..b64559c 100644
--- a/src/components/InteractionItemViewed.vue
+++ b/src/components/interactions/InteractionItemViewed.vue
@@ -4,7 +4,6 @@
 
 <script setup>
 import InteractionItem from './InteractionItem.vue'
-import SvgEye from './svg/Eye.vue'
 
 const props = defineProps(['item'])
 </script>
diff --git a/src/components/InteractionPlaceViewed.vue b/src/components/interactions/InteractionPlaceViewed.vue
similarity index 80%
rename from src/components/InteractionPlaceViewed.vue
rename to src/components/interactions/InteractionPlaceViewed.vue
index 8e9527e..a4d5e3a 100644
--- a/src/components/InteractionPlaceViewed.vue
+++ b/src/components/interactions/InteractionPlaceViewed.vue
@@ -7,7 +7,7 @@
             {{ $t('Viewed') }}
             <router-link
                 class="underline hover:no-underline"
-                :to="{ name: 'place_detail', params: { id: place.id } }"
+                :to="`/place/${place.id}`"
                 >{{ place.title }}</router-link
             >
         </span>
@@ -15,7 +15,5 @@
 </template>
 
 <script setup>
-import SvgEye from './svg/Eye.vue'
-
 const props = defineProps(['place'])
 </script>
diff --git a/src/components/InteractionSectionViewed.vue b/src/components/interactions/InteractionSectionViewed.vue
similarity index 79%
rename from src/components/InteractionSectionViewed.vue
rename to src/components/interactions/InteractionSectionViewed.vue
index 8d38eb4..a7a4c75 100644
--- a/src/components/InteractionSectionViewed.vue
+++ b/src/components/interactions/InteractionSectionViewed.vue
@@ -7,7 +7,7 @@
             {{ $t('Viewed') }}
             <router-link
                 class="underline hover:no-underline"
-                :to="{ name: 'section_detail', params: { id: section.id } }"
+                :to="`/section/${section.id}`"
                 >{{ section.title }}</router-link
             >
         </span>
@@ -15,7 +15,6 @@
 </template>
 
 <script setup>
-import SvgEye from './svg/Eye.vue'
 
 const props = defineProps(['section'])
 </script>
diff --git a/src/components/InteractionStory.vue b/src/components/interactions/InteractionStory.vue
similarity index 87%
rename from src/components/InteractionStory.vue
rename to src/components/interactions/InteractionStory.vue
index 70f15b4..0c677c1 100644
--- a/src/components/InteractionStory.vue
+++ b/src/components/interactions/InteractionStory.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="scroll-my-20" :id="active ? 'active-story' : undefined">
-        <img v-if="first" class="mx-auto mb-8 h-40 markdown" src="../img/interaction-intro-ester.svg" alt="Ester" />
+        <img v-if="first" class="mx-auto mb-8 h-40 markdown" src="../../img/interaction-intro-ester.svg" alt="Ester" />
         <img
             v-else-if="activeOrTransitioning"
             class="h-12 w-12 rounded-xl object-cover"
-            src="../img/avatar-ester.png"
+            src="../../img/avatar-ester.png"
             alt="Avatar"
         />
 
@@ -50,12 +50,8 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import ResponsiveImageWithSizes from './ResponsiveImageWithSizes.vue'
+import ResponsiveImageWithSizes from '../general/ResponsiveImageWithSizes.vue'
 import StoryVideoLightbox from './StoryVideoLightbox.vue'
-import SvgArrowUp from './svg/ArrowUp.vue'
-import SvgChatCircle from './svg/ChatCircle.vue'
-import { useInteractionStore } from '../stores/InteractionStore'
 
 const interactionStore = useInteractionStore()
 
diff --git a/src/components/StoryVideoLightbox.vue b/src/components/interactions/StoryVideoLightbox.vue
similarity index 85%
rename from src/components/StoryVideoLightbox.vue
rename to src/components/interactions/StoryVideoLightbox.vue
index a29a594..c7eb81b 100644
--- a/src/components/StoryVideoLightbox.vue
+++ b/src/components/interactions/StoryVideoLightbox.vue
@@ -30,11 +30,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import ResponsiveImage from './ResponsiveImage.vue'
-import ResponsiveVideoEmbed from './ResponsiveVideoEmbed.vue'
-import SvgClose from './svg/Close.vue'
-import SvgPlay from './svg/Play.vue'
+import ResponsiveImage from '../general/ResponsiveImage.vue'
+import ResponsiveVideoEmbed from '../general/ResponsiveVideoEmbed.vue'
 
 const props = defineProps(['story'])
 const visible = ref(false)
diff --git a/src/components/CardModal.vue b/src/components/layout/CardModal.vue
similarity index 100%
rename from src/components/CardModal.vue
rename to src/components/layout/CardModal.vue
diff --git a/src/components/CodePanel.vue b/src/components/layout/CodePanel.vue
similarity index 86%
rename from src/components/CodePanel.vue
rename to src/components/layout/CodePanel.vue
index 738c467..7e2d3c6 100644
--- a/src/components/CodePanel.vue
+++ b/src/components/layout/CodePanel.vue
@@ -62,13 +62,9 @@
 </template>
 
 <script setup>
-import { computed } from '@vue/reactivity'
-import { onMounted, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useInteractionStore } from '../stores/InteractionStore'
-import CircleButton from '../components/CircleButton.vue'
-import HelpModal from '../components/HelpModal.vue'
-import ViewedItemsCount from '../components/ViewedItemsCount.vue'
+import CircleButton from '../forms/CircleButton.vue'
+import HelpModal from './HelpModal.vue'
+import ViewedItemsCount from '../misc/ViewedItemsCount.vue'
 
 const interactionStore = useInteractionStore()
 const router = useRouter()
@@ -96,22 +92,13 @@ const verifyCode = () => {
             const id = data.data.codeable_id
             switch (data.data.codeable_type) {
                 case 'item':
-                    router.push({
-                        name: 'item_detail',
-                        params: { id },
-                    })
+                    router.push(`/item/${id}`)
                     break
                 case 'section':
-                    router.push({
-                        name: 'section_detail',
-                        params: { id },
-                    })
+                    router.push(`/section/${id}`)
                     break
                 case 'place':
-                    router.push({
-                        name: 'place_detail',
-                        params: { id },
-                    })
+                    router.push(`/place/${id}`)
                     break
             }
         })
diff --git a/src/components/Header.vue b/src/components/layout/Header.vue
similarity index 52%
rename from src/components/Header.vue
rename to src/components/layout/Header.vue
index dcd95b1..f5c5d5b 100644
--- a/src/components/Header.vue
+++ b/src/components/layout/Header.vue
@@ -2,49 +2,48 @@
     <div class="sticky top-0 z-20 flex w-full items-center whitespace-nowrap border-y-2 border-black bg-white">
         <HistoryBack v-slot="{ back }">
             <button
-                @click="route.name === 'home' ? (openedAbout = !openedAbout) : back()"
+                @click="isFrontpage ? (isOpenedAbout = !isOpenedAbout) : back()"
                 class="border-r-2"
-                :class="[route.name === 'home' ? 'border-r-black bg-green p-2' : 'flex-1 border-r-transparent p-3']"
+                :class="[isFrontpage ? 'border-r-black bg-green p-2' : 'flex-1 border-r-transparent p-3']"
             >
-                <SvgBack v-if="route.name !== 'home'" />
-                <SvgClose v-else-if="openedAbout" />
+                <SvgBack v-if="route.path !== '/'" />
+                <SvgClose v-else-if="isOpenedAbout" />
                 <SvgLogo v-else />
             </button>
         </HistoryBack>
-        <h1 class="grow px-2.5 text-1.5xl font-medium" :class="{ 'text-center': route.name !== 'home' }" id="title">
-            {{ $t(openedAbout ? 'About the App' : route.meta.title ?? '') }}
-            <span v-if="route.name === 'my_collection'">({{ interactionStore.viewedItemsCount }})</span>
+        <h1 class="grow px-2.5 text-1.5xl font-medium" :class="{ 'text-center': !isFrontpage }" id="title">
+            {{ $t(isOpenedAbout ? 'About the App' : route.meta.title ?? '') }}
+            <span v-if="isMyCollection">({{ interactionStore.viewedItemsCount }})</span>
         </h1>
-        <div class="flex-1 border-l-2 border-transparent px-3 text-right" v-if="route.name === 'my_collection'">
+        <div class="flex-1 border-l-2 border-transparent px-3 text-right" v-if="isMyCollection">
             <!-- <button class="rounded-xl bg-green px-3 py-1 text-sm font-bold" @click="scroll('share')">
                 {{ $t('Share') }}
             </button> -->
         </div>
-        <LanguageSwitcher v-else-if="route.name === 'home'" />
+        <LanguageSwitcher v-else-if="isFrontpage" />
         <ViewedItemsCount v-else class="flex-1 border-l-2 border-l-transparent px-4 py-2" :show-tooltip="isActive" />
     </div>
 
-    <About :opened="openedAbout" />
+    <About :opened="isOpenedAbout" />
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { useInteractionStore } from '../stores/InteractionStore'
-import About from './About.vue'
-import HistoryBack from './HistoryBack.vue'
+import About from '../about/About.vue'
+import HistoryBack from '../misc/HistoryBack.vue'
 import LanguageSwitcher from './LanguageSwitcher.vue'
-import ViewedItemsCount from './ViewedItemsCount.vue'
-import SvgBack from './svg/Back.vue'
-import SvgClose from './svg/Close.vue'
-import SvgLogo from './svg/Logo.vue'
-import { useRoute } from 'vue-router'
+import ViewedItemsCount from '../misc/ViewedItemsCount.vue'
 
 const route = useRoute()
-
-const openedAbout = ref(false)
 const interactionStore = useInteractionStore()
+
+const isOpenedAbout = ref(false)
 const isActive = ref(false)
 
+const title = computed(() => route.meta.title ?? 'Atlas SNG')
+
+const isFrontpage = computed(() => route.path === '/')
+const isMyCollection = computed(() => route.path === '/collection')
+
 const displayTooltip = () => {
     isActive.value = true
     setTimeout(() => {
@@ -52,7 +51,7 @@ const displayTooltip = () => {
     }, 3000)
 }
 
-const title = computed(() => this?.$route?.meta?.title ? this.$route.meta.title : 'Atlas SNG')
+
 
 const scroll = (id) => {
     document.getElementById(id).scrollIntoView({
diff --git a/src/components/HelpModal.vue b/src/components/layout/HelpModal.vue
similarity index 95%
rename from src/components/HelpModal.vue
rename to src/components/layout/HelpModal.vue
index 8559168..39b04e4 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/layout/HelpModal.vue
@@ -40,10 +40,9 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
 import { Carousel, Slide } from 'vue3-carousel'
 import 'vue3-carousel/dist/carousel.css'
-import HelpStep from '../components/HelpStep.vue'
+import HelpStep from '../misc/HelpStep.vue'
 
 const props = defineProps({
     visible: Boolean,
diff --git a/src/components/LanguageSwitcher.vue b/src/components/layout/LanguageSwitcher.vue
similarity index 74%
rename from src/components/LanguageSwitcher.vue
rename to src/components/layout/LanguageSwitcher.vue
index 69c41d8..7dd7369 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/layout/LanguageSwitcher.vue
@@ -21,14 +21,7 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
-import { useInteractionStore } from '../stores/InteractionStore'
-import { useItemStore } from '../stores/ItemStore'
-import { useLocaleStore } from '../stores/LocaleStore'
-import { useSectionStore } from '../stores/SectionStore'
-import { useStoryStore } from '../stores/StoryStore'
-import { usePlaceStore } from '../stores/PlaceStore'
-import { useBucketlistStore } from '../stores/BucketlistStore'
+
 
 const router = useRouter()
 const interactionStore = useInteractionStore()
diff --git a/src/components/HelpStep.vue b/src/components/misc/HelpStep.vue
similarity index 91%
rename from src/components/HelpStep.vue
rename to src/components/misc/HelpStep.vue
index ed3bb69..b04532c 100644
--- a/src/components/HelpStep.vue
+++ b/src/components/misc/HelpStep.vue
@@ -13,8 +13,8 @@
 </template>
 
 <script setup>
-import ConfirmButton from '../components/ConfirmButton.vue'
+import ConfirmButton from '../forms/ConfirmButton.vue'
 import ProgressDots from './ProgressDots.vue'
 
 const props = defineProps(['title', 'body1', 'body2', 'btnFn', 'btnText', 'activeStep'])
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/HistoryBack.vue b/src/components/misc/HistoryBack.vue
similarity index 65%
rename from src/components/HistoryBack.vue
rename to src/components/misc/HistoryBack.vue
index 77f4742..492513f 100644
--- a/src/components/HistoryBack.vue
+++ b/src/components/misc/HistoryBack.vue
@@ -3,9 +3,6 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router'
-import { useHistoryStore } from '../stores/HistoryStore'
-
 const router = useRouter()
 const historyStore = useHistoryStore()
 
@@ -13,7 +10,7 @@ const back = () => {
     if (historyStore.getState().back) {
         router.back()
     } else {
-        router.push({ name: 'home' })
+        router.push('/')
     }
 }
 </script>
diff --git a/src/components/ProgressDots.vue b/src/components/misc/ProgressDots.vue
similarity index 100%
rename from src/components/ProgressDots.vue
rename to src/components/misc/ProgressDots.vue
diff --git a/src/components/ViewedItemsCount.vue b/src/components/misc/ViewedItemsCount.vue
similarity index 81%
rename from src/components/ViewedItemsCount.vue
rename to src/components/misc/ViewedItemsCount.vue
index eb9f5d1..6768d24 100644
--- a/src/components/ViewedItemsCount.vue
+++ b/src/components/misc/ViewedItemsCount.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="{ name: 'my_collection' }" class="relative">
+    <router-link to="/collection" class="relative">
         <div class="flex h-full items-center justify-end">
             <div class="mr-1 text-lg font-bold">{{ interactionStore.viewedItemsCount }}</div>
             <SvgEye :class="{ '!fill-green': interactionStore.viewedItemsCount }" />
@@ -20,9 +20,6 @@
 </template>
 
 <script setup>
-import { useInteractionStore } from '../stores/InteractionStore'
-import { useItemStore } from '../stores/ItemStore'
-import SvgEye from './svg/Eye.vue'
 
 const props = defineProps(['showTooltip'])
 const interactionStore = useInteractionStore()
diff --git a/src/components/ZoomViewer.vue b/src/components/misc/ZoomViewer.vue
similarity index 90%
rename from src/components/ZoomViewer.vue
rename to src/components/misc/ZoomViewer.vue
index e6a1f14..bf4b694 100644
--- a/src/components/ZoomViewer.vue
+++ b/src/components/misc/ZoomViewer.vue
@@ -4,7 +4,6 @@
 
 <script setup>
 import OpenSeaDragon from 'openseadragon'
-import { onMounted, onBeforeUnmount, ref } from 'vue'
 const props = defineProps(['tileSources'])
 const viewer = ref(null)
 //TODO: navigation for multiple images
@@ -24,4 +23,4 @@ onBeforeUnmount(() => {
     }
 })
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/svg/ArrowSquareOut.vue b/src/components/svg/SvgArrowSquareOut.vue
similarity index 100%
rename from src/components/svg/ArrowSquareOut.vue
rename to src/components/svg/SvgArrowSquareOut.vue
diff --git a/src/components/svg/ArrowUp.vue b/src/components/svg/SvgArrowUp.vue
similarity index 100%
rename from src/components/svg/ArrowUp.vue
rename to src/components/svg/SvgArrowUp.vue
diff --git a/src/components/svg/ArrowsOut.vue b/src/components/svg/SvgArrowsOut.vue
similarity index 100%
rename from src/components/svg/ArrowsOut.vue
rename to src/components/svg/SvgArrowsOut.vue
diff --git a/src/components/svg/Back.vue b/src/components/svg/SvgBack.vue
similarity index 100%
rename from src/components/svg/Back.vue
rename to src/components/svg/SvgBack.vue
diff --git a/src/components/svg/CaretRight.vue b/src/components/svg/SvgCaretRight.vue
similarity index 100%
rename from src/components/svg/CaretRight.vue
rename to src/components/svg/SvgCaretRight.vue
diff --git a/src/components/svg/ChatCircle.vue b/src/components/svg/SvgChatCircle.vue
similarity index 100%
rename from src/components/svg/ChatCircle.vue
rename to src/components/svg/SvgChatCircle.vue
diff --git a/src/components/svg/ChatCircleSmall.vue b/src/components/svg/SvgChatCircleSmall.vue
similarity index 100%
rename from src/components/svg/ChatCircleSmall.vue
rename to src/components/svg/SvgChatCircleSmall.vue
diff --git a/src/components/svg/Close.vue b/src/components/svg/SvgClose.vue
similarity index 100%
rename from src/components/svg/Close.vue
rename to src/components/svg/SvgClose.vue
diff --git a/src/components/svg/Code.vue b/src/components/svg/SvgCode.vue
similarity index 100%
rename from src/components/svg/Code.vue
rename to src/components/svg/SvgCode.vue
diff --git a/src/components/svg/DownArrow.vue b/src/components/svg/SvgDownArrow.vue
similarity index 100%
rename from src/components/svg/DownArrow.vue
rename to src/components/svg/SvgDownArrow.vue
diff --git a/src/components/svg/Eye.vue b/src/components/svg/SvgEye.vue
similarity index 100%
rename from src/components/svg/Eye.vue
rename to src/components/svg/SvgEye.vue
diff --git a/src/components/svg/Heart.vue b/src/components/svg/SvgHeart.vue
similarity index 100%
rename from src/components/svg/Heart.vue
rename to src/components/svg/SvgHeart.vue
diff --git a/src/components/svg/HeartSmall.vue b/src/components/svg/SvgHeartSmall.vue
similarity index 100%
rename from src/components/svg/HeartSmall.vue
rename to src/components/svg/SvgHeartSmall.vue
diff --git a/src/components/svg/Info.vue b/src/components/svg/SvgInfo.vue
similarity index 100%
rename from src/components/svg/Info.vue
rename to src/components/svg/SvgInfo.vue
diff --git a/src/components/svg/LinkSimple.vue b/src/components/svg/SvgLinkSimple.vue
similarity index 100%
rename from src/components/svg/LinkSimple.vue
rename to src/components/svg/SvgLinkSimple.vue
diff --git a/src/components/svg/Lock.vue b/src/components/svg/SvgLock.vue
similarity index 100%
rename from src/components/svg/Lock.vue
rename to src/components/svg/SvgLock.vue
diff --git a/src/components/svg/Logo.vue b/src/components/svg/SvgLogo.vue
similarity index 100%
rename from src/components/svg/Logo.vue
rename to src/components/svg/SvgLogo.vue
diff --git a/src/components/svg/Play.vue b/src/components/svg/SvgPlay.vue
similarity index 100%
rename from src/components/svg/Play.vue
rename to src/components/svg/SvgPlay.vue
diff --git a/src/components/svg/Question.vue b/src/components/svg/SvgQuestion.vue
similarity index 100%
rename from src/components/svg/Question.vue
rename to src/components/svg/SvgQuestion.vue
diff --git a/src/components/svg/Search.vue b/src/components/svg/SvgSearch.vue
similarity index 100%
rename from src/components/svg/Search.vue
rename to src/components/svg/SvgSearch.vue
diff --git a/src/components/ShareCollection.vue b/src/components/timeline/ShareCollection.vue
similarity index 90%
rename from src/components/ShareCollection.vue
rename to src/components/timeline/ShareCollection.vue
index 96b2a1e..2ffdda3 100644
--- a/src/components/ShareCollection.vue
+++ b/src/components/timeline/ShareCollection.vue
@@ -9,9 +9,6 @@
 </template>
 
 <script setup>
-import { useItemStore } from '../stores/ItemStore'
-import { onMounted, ref } from 'vue'
-import SvgLinkSimple from './svg/LinkSimple.vue'
 
 const itemStore = useItemStore()
 const loading = ref(true)
diff --git a/src/components/Timeline.vue b/src/components/timeline/Timeline.vue
similarity index 79%
rename from src/components/Timeline.vue
rename to src/components/timeline/Timeline.vue
index fb8dca3..2c5db84 100644
--- a/src/components/Timeline.vue
+++ b/src/components/timeline/Timeline.vue
@@ -12,7 +12,7 @@
             </div>
         </template> -->
         <div class="mt-6 flex flex-col gap-y-3">
-            <router-link :to="{ name: 'home', hash: '#code' }">
+            <router-link to="/#code">
                 <Thumbnail :truncate-description="false" class="border-2">
                     <template #image>
                         <div class="flex h-full w-full items-center justify-center bg-black">
@@ -27,7 +27,7 @@
                 </Thumbnail>
             </router-link>
             <ItemLoader :id="id" v-slot="{ item }" v-for="id in interactionStore.viewedItemIds" :key="id">
-                <router-link :to="{ name: 'item_detail', params: { id } }">
+                <router-link :to="`/item/${id}`">
                     <ItemThumbnail :item="item" />
                 </router-link>
             </ItemLoader>
@@ -36,14 +36,10 @@
 </template>
 
 <script setup>
-import { useInteractionStore } from '../stores/InteractionStore'
-import ItemLoader from './ItemLoader.vue'
-import ItemThumbnail from './ItemThumbnail.vue'
+import ItemLoader from '../general/ItemLoader.vue'
+import ItemThumbnail from '../general/ItemThumbnail.vue'
 import ShareCollection from './ShareCollection.vue'
-import Thumbnail from './Thumbnail.vue'
-import SvgCode from './svg/Code.vue'
-import SvgEye from './svg/Eye.vue'
-import CaretRight from './svg/CaretRight.vue'
+import Thumbnail from '../general/Thumbnail.vue'
 
 const interactionStore = useInteractionStore()
 </script>
diff --git a/src/composables/Survey.js b/src/composables/Survey.js
index bff6871..2651d3e 100644
--- a/src/composables/Survey.js
+++ b/src/composables/Survey.js
@@ -4,7 +4,6 @@ import { useStorage } from '@vueuse/core'
 import { createPopup } from '@typeform/embed'
 import '@typeform/embed/build/css/popup.css'
 import { getActiveLanguage } from 'laravel-vue-i18n'
-import { useInteractionStore } from '../stores/InteractionStore'
 
 export function useSurvey() {
     const interactionStore = useInteractionStore()
diff --git a/src/pages/[id].vue b/src/pages/[id].vue
new file mode 100644
index 0000000..5b7ba01
--- /dev/null
+++ b/src/pages/[id].vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <Bucketlist :id="bucketlistId" v-if="bucketlistId" class="px-4 py-6" />
+        <hr class="border border-gray-soft" />
+        <Timeline />
+    </div>
+</template>
+
+<script setup>
+import Bucketlist from '~/components/bucketlist/Bucketlist.vue'
+import Timeline from '~/components/timeline/Timeline.vue'
+
+// TODO: do we need this if we have /collection?
+
+definePage({
+  meta: {
+    title: 'My timeline',
+  },
+})
+
+const route = useRoute()
+const itemStore = useItemStore()
+const bucketlistId = import.meta.env.VITE_DEFAULT_BUCKETLIST
+
+onMounted(async () => {
+    if (route.params.id) {
+        itemStore.fetch(route.params.id)
+    }
+})
+</script>
diff --git a/src/views/Collection.vue b/src/pages/collection.vue
similarity index 66%
rename from src/views/Collection.vue
rename to src/pages/collection.vue
index 0e94949..c83afd1 100644
--- a/src/views/Collection.vue
+++ b/src/pages/collection.vue
@@ -7,11 +7,14 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useItemStore } from '../stores/ItemStore'
-import Bucketlist from '../components/Bucketlist.vue'
-import Timeline from '../components/Timeline.vue'
+import Bucketlist from '~/components/bucketlist/Bucketlist.vue'
+import Timeline from '~/components/timeline/Timeline.vue'
+
+definePage({
+  meta: {
+    title: 'Atlas SNG',
+  },
+})
 
 const route = useRoute()
 const itemStore = useItemStore()
diff --git a/src/views/Interaction.vue b/src/pages/index.vue
similarity index 81%
rename from src/views/Interaction.vue
rename to src/pages/index.vue
index 9f3daac..9054f8a 100644
--- a/src/views/Interaction.vue
+++ b/src/pages/index.vue
@@ -39,7 +39,8 @@
     <CodePanel />
 </template>
 
-<style setup>
+<style>
+// TODO: dont use global scope
 .interactions-enter-active,
 .interactions-leave-active {
     transition: all 0.7s ease;
@@ -51,21 +52,13 @@
 </style>
 
 <script setup>
-import { nextTick, onMounted } from 'vue'
 import { watchDebounced } from '@vueuse/core'
-import { useRoute } from 'vue-router'
-import CodePanel from '../components/CodePanel.vue'
-import InteractionItemFavourited from '../components/InteractionItemFavourited.vue'
-import InteractionItemViewed from '../components/InteractionItemViewed.vue'
-import InteractionSectionViewed from '../components/InteractionSectionViewed.vue'
-import InteractionPlaceViewed from '../components/InteractionPlaceViewed.vue'
-import InteractionStory from '../components/InteractionStory.vue'
-import { useInteractionStore } from '../stores/InteractionStore'
-import { useItemStore } from '../stores/ItemStore'
-import { useSectionStore } from '../stores/SectionStore'
-import { useStoryStore } from '../stores/StoryStore'
-import { usePlaceStore } from '../stores/PlaceStore'
-import { useSurvey } from '../composables/Survey'
+import CodePanel from '~/components/layout/CodePanel.vue'
+import InteractionItemFavourited from '~/components/interactions/InteractionItemFavourited.vue'
+import InteractionItemViewed from '~/components/interactions/InteractionItemViewed.vue'
+import InteractionSectionViewed from '~/components/interactions/InteractionSectionViewed.vue'
+import InteractionPlaceViewed from '~/components/interactions/InteractionPlaceViewed.vue'
+import InteractionStory from '~/components/interactions/InteractionStory.vue'
 
 const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
diff --git a/src/views/ItemDetail.vue b/src/pages/item/[id].vue
similarity index 81%
rename from src/views/ItemDetail.vue
rename to src/pages/item/[id].vue
index 75808ae..e56c953 100644
--- a/src/views/ItemDetail.vue
+++ b/src/pages/item/[id].vue
@@ -12,9 +12,7 @@
             <div class="flex items-center">
                 <router-link
                     tag="button"
-                    :to="
-                        unlocked ? { name: 'reward_detail', params: { id: bucketlist.id } } : { name: 'my_collection' }
-                    "
+                    :to="unlocked ? `/reward/${bucketlist.id}` : '/collection'"
                     class="rounded-xl border-2 bg-green px-4 py-3 text-center font-bold capitalize leading-none"
                     >{{ $t(unlocked ? 'reward' : 'list') }}</router-link
                 >
@@ -99,25 +97,19 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useBucketlistStore } from '../stores/BucketlistStore'
-import { useInteractionStore } from '../stores/InteractionStore'
-import { useItemStore } from '../stores/ItemStore'
-import AuthorityDetails from '../components/AuthorityDetails.vue'
-import AuthoritySummary from '../components/AuthoritySummary.vue'
-import Collapsible from '../components/Collapsible.vue'
-import ImageLightbox from '../components/ImageLightbox.vue'
-import ImageMovable from '../components/ImageMovable.vue'
-import WebumeniaButton from '../components/WebumeniaButton.vue'
-import StoryButton from '../components/StoryButton.vue'
-import VideoSummary from '../components/VideoSummary.vue'
-import ResponsiveVideoEmbed from '../components/ResponsiveVideoEmbed.vue'
-import AuthorSummary from '../components/AuthorSummary.vue'
-import AuthorDetails from '../components/AuthorDetails.vue'
-import HistoryBack from '../components/HistoryBack.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
-import SvgBack from '../components/svg/Back.vue'
+import AuthorityDetails from '~/components/author/AuthorityDetails.vue'
+import AuthoritySummary from '~/components/author/AuthoritySummary.vue'
+import Collapsible from '~/components/general/Collapsible.vue'
+import ImageLightbox from '~/components/general/ImageLightbox.vue'
+import ImageMovable from '~/components/general/ImageMovable.vue'
+import WebumeniaButton from '~/components/forms/WebumeniaButton.vue'
+import StoryButton from '~/components/forms/StoryButton.vue'
+import VideoSummary from '~/components/general/VideoSummary.vue'
+import ResponsiveVideoEmbed from '~/components/general/ResponsiveVideoEmbed.vue'
+import AuthorSummary from '~/components/author/AuthorSummary.vue'
+import AuthorDetails from '~/components/author/AuthorDetails.vue'
+import HistoryBack from '~/components/misc/HistoryBack.vue'
+import ConfirmButton from '~/components/forms/ConfirmButton.vue'
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
diff --git a/src/views/LockedItemDetail.vue b/src/pages/locked/[id].vue
similarity index 84%
rename from src/views/LockedItemDetail.vue
rename to src/pages/locked/[id].vue
index 083186d..a7d5ebc 100644
--- a/src/views/LockedItemDetail.vue
+++ b/src/pages/locked/[id].vue
@@ -24,12 +24,8 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useBucketlistStore } from '../stores/BucketlistStore'
-import { useItemStore } from '../stores/ItemStore'
-import ItemImage from '../components/ItemImage.vue'
-import CodePanel from '../components/CodePanel.vue'
+import ItemImage from '~/components/general/ItemImage.vue'
+import CodePanel from '~/components/layout/CodePanel.vue'
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
diff --git a/src/views/PlaceDetail.vue b/src/pages/place/[id].vue
similarity index 79%
rename from src/views/PlaceDetail.vue
rename to src/pages/place/[id].vue
index 56149e9..8e6ba36 100644
--- a/src/views/PlaceDetail.vue
+++ b/src/pages/place/[id].vue
@@ -57,19 +57,14 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import Collapsible from '../components/Collapsible.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
-import ImageLightbox from '../components/ImageLightbox.vue'
-import ImageMovable from '../components/ImageMovable.vue'
-import StoryButton from '../components/StoryButton.vue'
-import VideoSummary from '../components/VideoSummary.vue'
-import HistoryBack from '../components/HistoryBack.vue'
-import ResponsiveVideoEmbed from '../components/ResponsiveVideoEmbed.vue'
-import SvgBack from '../components/svg/Back.vue'
-import { usePlaceStore } from '../stores/PlaceStore'
-import { useInteractionStore } from '../stores/InteractionStore'
+import Collapsible from '~/components/general/Collapsible.vue'
+import ConfirmButton from '~/components/forms/ConfirmButton.vue'
+import ImageLightbox from '~/components/general/ImageLightbox.vue'
+import ImageMovable from '~/components/general/ImageMovable.vue'
+import StoryButton from '~/components/forms/StoryButton.vue'
+import VideoSummary from '~/components/general/VideoSummary.vue'
+import HistoryBack from '~/components/misc/HistoryBack.vue'
+import ResponsiveVideoEmbed from '~/components/general/ResponsiveVideoEmbed.vue'
 
 const route = useRoute()
 const interactionStore = useInteractionStore()
diff --git a/src/views/RewardDetail.vue b/src/pages/reward/[id].vue
similarity index 81%
rename from src/views/RewardDetail.vue
rename to src/pages/reward/[id].vue
index 146ba8d..ce28c4a 100644
--- a/src/views/RewardDetail.vue
+++ b/src/pages/reward/[id].vue
@@ -17,10 +17,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useBucketlistStore } from '../stores/BucketlistStore'
-import ImageLightbox from '../components/ImageLightbox.vue'
+import ImageLightbox from "~/components/general/ImageLightbox.vue";
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
diff --git a/src/views/SectionDetail.vue b/src/pages/section/[id].vue
similarity index 79%
rename from src/views/SectionDetail.vue
rename to src/pages/section/[id].vue
index 815a5bc..312ac8c 100644
--- a/src/views/SectionDetail.vue
+++ b/src/pages/section/[id].vue
@@ -26,7 +26,7 @@
             <router-link
                 v-for="item in section.items"
                 :key="item"
-                :to="{ name: 'section_item_detail', params: { section_id: route.params.id, id: item.id } }"
+                :to="`/section/${route.params.id}/${item.id}`"
             >
                 <ItemThumbnail :item="item" />
             </router-link>
@@ -45,15 +45,10 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useSectionStore } from '../stores/SectionStore'
-import { useInteractionStore } from '../stores/InteractionStore'
-import HistoryBack from '../components/HistoryBack.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
-import ItemThumbnail from '../components/ItemThumbnail.vue'
-import SvgBack from '../components/svg/Back.vue'
-import ItemImage from '../components/ItemImage.vue'
+import HistoryBack from '~/components/misc/HistoryBack.vue'
+import ConfirmButton from '~/components/forms/ConfirmButton.vue'
+import ItemThumbnail from '~/components/general/ItemThumbnail.vue'
+import ItemImage from '~/components/general/ItemImage.vue'
 
 const route = useRoute()
 const props = defineProps(['section'])
@@ -64,6 +59,8 @@ const section = ref(null)
 onMounted(async () => {
     const id = route.params.id
     section.value = await sectionStore.load(id)
+
+    // TODO: where did item come from?
     interactionStore.addSectionViewed(item.value.id)
 })
 </script>
diff --git a/src/pages/section/[sectionId]/[id].vue b/src/pages/section/[sectionId]/[id].vue
new file mode 100644
index 0000000..e56c953
--- /dev/null
+++ b/src/pages/section/[sectionId]/[id].vue
@@ -0,0 +1,140 @@
+<template>
+    <div v-if="item">
+        <article class="flex justify-between border-b-2 bg-green/20 p-4 pb-5" v-if="bucketlist">
+            <div>
+                <h3 class="font-medium">
+                    {{ $t('Scavenger hunt:') }} <span class="italic">{{ bucketlist.title }}</span>
+                </h3>
+                <p class="mt-1 text-2xl font-medium leading-snug">
+                    {{ $t(':found of :all artworks found', { found: found.length, all: bucketlist.items.length }) }}
+                </p>
+            </div>
+            <div class="flex items-center">
+                <router-link
+                    tag="button"
+                    :to="unlocked ? `/reward/${bucketlist.id}` : '/collection'"
+                    class="rounded-xl border-2 bg-green px-4 py-3 text-center font-bold capitalize leading-none"
+                    >{{ $t(unlocked ? 'reward' : 'list') }}</router-link
+                >
+            </div>
+        </article>
+        <div class="relative w-full border-b-2 border-black bg-gray-softest">
+            <ImageMovable
+                v-if="route.query.edit"
+                :alt="`${item.author}: ${item.title}`"
+                :src="item.image_src"
+                :srcset="item.image_srcset"
+                :offset-top="item.offset_top"
+            />
+            <ImageLightbox
+                v-else
+                :alt="`${item.author}: ${item.title}`"
+                :src="item.image_src"
+                :srcset="item.image_srcset"
+                :offset-top="item.offset_top"
+                :images="item.images"
+                :image-aspect-ratio="item.image_aspect_ratio"
+            />
+        </div>
+        <div class="relative h-full border-black px-4 pb-24 pt-8">
+            <div class="absolute -top-8 inline-block rounded-md bg-black p-1.5" v-if="item.code">
+                <img class="h-9 w-9" :src="codeImage" :alt="item.code" />
+            </div>
+            <h2 class="text-1.5xl font-bold">{{ item.title }}</h2>
+            <h3 class="text-lg text-gray-dark">{{ item.author }} · {{ item.dating }}</h3>
+            <div class="text-lg text-gray-dark" v-if="item.location_formatted">
+                {{ $t('Location') }}: {{ item.location_formatted }}
+            </div>
+            <div class="my-4 space-y-4 markdown" v-html="item.description"></div>
+            <Collapsible :open="i === 0" v-for="(authority, i) in item.authorities" :key="authority.id" class="my-4">
+                <template v-slot:summary>
+                    <AuthoritySummary :authority="authority" />
+                </template>
+                <template v-slot:content v-if="authority.biography">
+                    <AuthorityDetails :authority="authority" />
+                </template>
+            </Collapsible>
+            <Collapsible v-if="!item.authorities.length && item.author_description" :open="true" class="my-4">
+                <template v-slot:summary>
+                    <AuthorSummary :item="item" />
+                </template>
+                <template v-slot:content>
+                    <AuthorDetails :item="item" />
+                </template>
+            </Collapsible>
+            <Collapsible v-if="item.video_embed" class="my-4">
+                <template v-slot:summary>
+                    <VideoSummary
+                        :thumbnail="item.video_thumbnail"
+                        :title="item.video_title"
+                        :subtitle="item.video_subtitle"
+                    />
+                </template>
+                <template v-slot:content>
+                    <ResponsiveVideoEmbed
+                        :src="item.video_embed"
+                        :width="item.video_aspect_ratio.width"
+                        :height="item.video_aspect_ratio.height"
+                    />
+                </template>
+            </Collapsible>
+            <StoryButton :storyId="item.story_id" class="my-4" v-if="item.story_id" />
+            <WebumeniaButton :url="item.webumenia_url" class="my-4" />
+        </div>
+        <div
+            class="pointer-events-none fixed bottom-0 h-24 w-full bg-gradient-to-t from-white to-transparent md:max-w-lg"
+        >
+            <div class="pointer-events-auto p-4 pt-8">
+                <HistoryBack v-slot="{ back }">
+                    <ConfirmButton class="group bg-white" @click="back">
+                        <SvgBack class="mr-2 group-active:stroke-white" />
+                        {{ $t('Back') }}
+                    </ConfirmButton>
+                </HistoryBack>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import AuthorityDetails from '~/components/author/AuthorityDetails.vue'
+import AuthoritySummary from '~/components/author/AuthoritySummary.vue'
+import Collapsible from '~/components/general/Collapsible.vue'
+import ImageLightbox from '~/components/general/ImageLightbox.vue'
+import ImageMovable from '~/components/general/ImageMovable.vue'
+import WebumeniaButton from '~/components/forms/WebumeniaButton.vue'
+import StoryButton from '~/components/forms/StoryButton.vue'
+import VideoSummary from '~/components/general/VideoSummary.vue'
+import ResponsiveVideoEmbed from '~/components/general/ResponsiveVideoEmbed.vue'
+import AuthorSummary from '~/components/author/AuthorSummary.vue'
+import AuthorDetails from '~/components/author/AuthorDetails.vue'
+import HistoryBack from '~/components/misc/HistoryBack.vue'
+import ConfirmButton from '~/components/forms/ConfirmButton.vue'
+
+const route = useRoute()
+const bucketlistStore = useBucketlistStore()
+const interactionStore = useInteractionStore()
+const itemStore = useItemStore()
+const item = ref(null)
+const bucketlist = ref(null)
+const found = computed(() => bucketlist.value.items.filter((item) => interactionStore.isItemViewed(item.id)))
+const unlocked = computed(() => found.value.length === bucketlist.value.items.length)
+
+onMounted(async () => {
+    const id = route.params.id
+    item.value = await itemStore.load(id)
+    interactionStore.addItemViewed(item.value.id)
+    const defaultBucketlist = item.value.bucketlists.find(
+        (bucketlist) => bucketlist.id === import.meta.env.VITE_DEFAULT_BUCKETLIST
+    )
+    if (defaultBucketlist) {
+        bucketlist.value =
+            bucketlistStore.get(defaultBucketlist.id) || (await bucketlistStore.load(defaultBucketlist.id))
+    }
+})
+
+const codeImage = computed(() => {
+    return `${import.meta.env.VITE_API_URL}/img/${item.value.code}.svg`
+})
+
+</script>
diff --git a/src/pages/story/[id].vue b/src/pages/story/[id].vue
new file mode 100644
index 0000000..f98e7e4
--- /dev/null
+++ b/src/pages/story/[id].vue
@@ -0,0 +1,134 @@
+<template>
+    <div class="grow bg-black px-4 pb-bar text-lg text-white">
+        <TransitionGroup name="interactions">
+            <template v-for="(interaction, i) in interactionStore.interactions" :key="i">
+                <InteractionStory
+                    :ref="(component) => setStoryRef(component, interaction)"
+                    v-if="interaction.type === 'story'"
+                    :story="storyStore.get(interaction.id)"
+                    :linkId="interaction.linkId"
+                    :active="interaction === interactionStore.active"
+                    :first="i === 0"
+                    @navigate="(link) => navigate(interaction, link)"
+                    @undo="undo(interaction)"
+                    class="my-8"
+                />
+                <InteractionItemFavourited
+                    v-else-if="interaction.type === 'itemFavourited'"
+                    :item="itemStore.get(interaction.id)"
+                    class="my-4"
+                />
+                <InteractionItemViewed
+                    v-else-if="interaction.type === 'itemViewed'"
+                    :item="itemStore.get(interaction.id)"
+                    class="my-4"
+                />
+                <InteractionSectionViewed
+                    v-else-if="interaction.type === 'sectionViewed'"
+                    :section="sectionStore.get(interaction.id)"
+                    class="my-4"
+                />
+                <InteractionPlaceViewed
+                    v-else-if="interaction.type === 'placeViewed'"
+                    :place="placeStore.get(interaction.id)"
+                    class="my-4"
+                />
+            </template>
+        </TransitionGroup>
+    </div>
+    <CodePanel />
+</template>
+
+<style>
+// TODO: dont use global scope
+.interactions-enter-active,
+.interactions-leave-active {
+    transition: all 0.7s ease;
+}
+.interactions-enter-from,
+.interactions-leave-to {
+    opacity: 0;
+}
+</style>
+
+<script setup>
+import {watchDebounced} from "@vueuse/core";
+
+import CodePanel from '~/components/layout/CodePanel.vue'
+import InteractionItemFavourited from '~/components/interactions/InteractionItemFavourited.vue'
+import InteractionItemViewed from '~/components/interactions/InteractionItemViewed.vue'
+import InteractionSectionViewed from '~/components/interactions/InteractionSectionViewed.vue'
+import InteractionPlaceViewed from '~/components/interactions/InteractionPlaceViewed.vue'
+import InteractionStory from '~/components/interactions/InteractionStory.vue'
+
+const interactionStore = useInteractionStore()
+const itemStore = useItemStore()
+const sectionStore = useSectionStore()
+const storyStore = useStoryStore()
+const placeStore = usePlaceStore()
+const route = useRoute()
+const storyMap = new Map()
+
+const navigate = (interaction, link) => {
+    interactionStore.selectLink(interaction, link)
+    loadStory(link.story_id)
+}
+
+const undo = (interaction) => {
+    storyMap.get(interaction).transitioning = true
+    const previous = interactionStore.setPreviousActive(interaction)
+    nextTick(() => {
+        storyMap.get(previous).$el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'end',
+        })
+        interactionStore.remove(interaction)
+    })
+}
+
+const setStoryRef = (component, interaction) => {
+    if (component) {
+        storyMap.set(interaction, component)
+    }
+}
+
+const scrollActiveIntoView = () => {
+    const el = document.querySelector('#active-story')
+
+    if (el) {
+        el.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+        })
+    }
+}
+
+const loadStory = async (id) => {
+    const story = storyStore.get(id) || (await storyStore.load(id))
+    interactionStore.addStory(story.id)
+    nextTick(scrollActiveIntoView)
+}
+
+onMounted(async () => {
+    if (route.params.id) {
+        interactionStore.clear()
+        loadStory(route.params.id)
+    } else if (!interactionStore.activeStory) {
+        loadStory(interactionStore.lastStory?.id || import.meta.env.VITE_DEFAULT_STORY)
+    }
+
+    nextTick(scrollActiveIntoView)
+})
+
+const { toggle: toggleSurvey, shouldLaunch: shouldSurveyLaunch } = useSurvey()
+
+watchDebounced(
+    shouldSurveyLaunch,
+    () => {
+        if (shouldSurveyLaunch.value) {
+            toggleSurvey()
+        }
+    },
+    { immediate: true, debounce: 1000 }
+)
+</script>
diff --git a/vite.config.js b/vite.config.js
index 05c1740..03fbaf0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,42 @@
+import path from 'node:path'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+
+
+
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+    resolve: {
+        alias: {
+            '~/': `${path.resolve(__dirname, 'src')}/`,
+        },
+    },
+  plugins: [
+      VueRouter(),
+      AutoImport({
+          dts: true,
+          dirs: [
+                'src/composables',
+                'src/stores',
+              ],
+          imports: [
+              'vue',
+              VueRouterAutoImports,
+          ]
+      }),
+      Components({
+          dts: true,
+          dirs: [
+                'src/components/svg',
+          ]
+      }),
+      vue(),
+  ],
 })