From 29dd5929d571f0fda4e7d426d27e6805716da5a6 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Sat, 16 Dec 2023 16:08:53 +0100
Subject: [PATCH] refactor: clean up internationalization mess

change dashboard route to root
add i18n eslint plugin
---
 .eslintrc                                     | 102 ++++-----
 package.json                                  |  10 +-
 pnpm-lock.yaml                                | 122 ++++++++---
 src/app/App.vue                               |   6 +-
 src/app/components/base/button/Button.vue     |  14 ++
 .../components/base/draggable/Draggable.vue   |   1 +
 src/app/components/base/link/Link.vue         |  21 +-
 .../AnimatedRouterView.vue                    |  23 --
 .../ComponentTransition.vue                   |  28 +++
 src/app/pages/Frame.vue                       |  27 ++-
 src/app/pages/dashboard/Dashboard.vue         |  38 ++--
 .../widgets/header-panels/SummaryPanels.vue   |  14 +-
 src/app/pages/dashboard/summary/Summary.vue   |   6 +-
 .../widgets/charts/DevelopmentChart.vue       |   6 +-
 .../widgets/tables/GroupsSummaryTable.vue     |   6 +-
 .../widgets/tables/TotalsSummaryTable.vue     |  12 +-
 src/app/pages/expenses/Expenses.vue           |   4 +-
 src/app/pages/income/Income.vue               |   4 +-
 .../admin/create-user/CreateUserDialog.vue    |   4 +-
 src/app/pages/navigation/auth/LoginDialog.vue |  10 +-
 .../currency/ChangeCurrencyButton.vue         |   2 +-
 src/app/pages/navigation/info/InfoButton.vue  |   2 +-
 src/app/pages/navigation/info/InfoDialog.vue  |  15 +-
 .../language/ChangeLanguageButton.vue         |   2 +-
 .../navigation/{ => theme}/ThemeButton.vue    |   2 +-
 .../pages/navigation/tools/ToolsButton.vue    |   4 +-
 .../change-password/ChangePasswordButton.vue  |   6 +-
 .../change-password/ChangePasswordDialog.vue  |  17 +-
 .../tools/copy-paste/CopyButton.vue           |   2 +-
 .../tools/copy-paste/PasteButton.vue          |   2 +-
 .../tools/demo/LoadDemoDataButton.vue         |   2 +-
 .../navigation/tools/export/ExportButton.vue  |   4 +-
 .../navigation/tools/import/ImportButton.vue  |   8 +-
 .../tools/import/screens/BudgetFileScreen.vue |  11 +-
 .../screens/GoogleAnnualBudgetScreen.vue      |   8 +-
 .../PrivacyModeButton.vue                     |   2 +-
 .../navigation/year/SelectYearButton.vue      |   2 +-
 .../pages/shared/{pane => }/BudgetGroup.vue   |  10 +-
 .../pages/shared/{pane => }/BudgetGroups.vue  |  10 +-
 .../pages/shared/{pane => }/BudgetPane.vue    |   2 +-
 src/app/pages/shared/ChartPlaceholder.vue     |   2 +-
 src/app/pages/shared/Pane.vue                 |   3 +-
 src/i18n/locales/de.json                      | 202 ++++++++++--------
 src/i18n/locales/en.json                      | 186 ++++++++--------
 src/router.ts                                 |  25 +--
 45 files changed, 560 insertions(+), 429 deletions(-)
 delete mode 100644 src/app/components/misc/animated-router-view/AnimatedRouterView.vue
 create mode 100644 src/app/components/misc/component-transition/ComponentTransition.vue
 rename src/app/pages/navigation/{ => theme}/ThemeButton.vue (95%)
 rename src/app/pages/navigation/tools/{privacy-mode-button => privacy-mode}/PrivacyModeButton.vue (84%)
 rename src/app/pages/shared/{pane => }/BudgetGroup.vue (95%)
 rename src/app/pages/shared/{pane => }/BudgetGroups.vue (89%)
 rename src/app/pages/shared/{pane => }/BudgetPane.vue (96%)

diff --git a/.eslintrc b/.eslintrc
index 984ebe1f..a34327ab 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,52 +1,58 @@
 {
-    "parser": "vue-eslint-parser",
-    "parserOptions": {
-        "parser": "@typescript-eslint/parser",
-        "extraFileExtensions": [".vue"]
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "extraFileExtensions": [
+      ".vue"
+    ]
+  },
+  "env": {
+    "node": true
+  },
+  "globals": {
+    "defineModel": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@intlify/vue-i18n/recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": true,
+      "node": true
     },
-    "env": {
-        "node": true
-    },
-    "globals": {
-        "defineModel": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:vue/vue3-recommended",
-        "plugin:prettier/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript"
-    ],
-    "settings": {
-        "import/resolver": {
-            "typescript": true,
-            "node": true
-        }
-    },
-    "rules": {
-        "vue/multi-word-component-names": "off",
-        "vue/require-default-prop": "off",
-        "vue/no-v-html": "off",
-        "prettier/prettier": "error",
-        "no-console": "error",
-        "import/order": [
-            "error",
-            {
-                "groups": [
-                    "builtin",
-                    "external",
-                    "internal",
-                    "parent",
-                    "sibling",
-                    "index",
-                    "type",
-                    "object"
-                ],
-                "alphabetize": {
-                    "order": "asc"
-                }
-            }
-        ]
+    "vue-i18n": {
+      "localeDir": "src/i18n/locales/*.json"
     }
+  },
+  "rules": {
+    "vue/multi-word-component-names": "off",
+    "vue/require-default-prop": "off",
+    "vue/no-v-html": "off",
+    "prettier/prettier": "error",
+    "no-console": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "type",
+          "object"
+        ],
+        "alphabetize": {
+          "order": "asc"
+        }
+      }
+    ]
+  }
 }
diff --git a/package.json b/package.json
index d90b17a1..01802fad 100644
--- a/package.json
+++ b/package.json
@@ -13,19 +13,14 @@
         "dev": "vite --host",
         "build": "vue-tsc --noEmit && vite build",
         "preview": "vite preview",
-        "lint:src": "eslint '{scripts,src}/**/*.{js,ts,vue}' --no-error-on-unmatched-pattern",
-        "lint:src:fix": "pnpm run lint:src --fix",
-        "lint:i18n": "li18nt 'src/i18n/locales/*.json' --config src/i18n/.li18ntrc",
-        "lint:i18n:fix": "pnpm run lint:i18n --fix",
-        "lint": "pnpm run lint:i18n && pnpm run lint:src",
-        "lint:fix": "pnpm run lint:i18n:fix && pnpm run lint:src:fix",
+        "lint": "eslint '{scripts,src}/**/*.{js,ts,vue}' --no-error-on-unmatched-pattern",
+        "lint:fix": "pnpm run lint --fix",
         "test:ci": "pnpm run lint:fix && pnpm run build",
         "gen:icons": "node scripts/icons.js"
     },
     "dependencies": {
         "@popperjs/core": "2.11.8",
         "echarts": "5.4.3",
-        "li18nt": "5.0.0",
         "papaparse": "5.4.1",
         "vue": "3.3.9",
         "vue-i18n": "9.8.0",
@@ -33,6 +28,7 @@
         "yuppee": "0.3.0"
     },
     "devDependencies": {
+        "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
         "@types/ackee-tracker": "5.0.4",
         "@types/node": "20.10.2",
         "@types/papaparse": "5.3.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88535dc4..82e3ac3f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ dependencies:
   echarts:
     specifier: 5.4.3
     version: 5.4.3
-  li18nt:
-    specifier: 5.0.0
-    version: 5.0.0
   papaparse:
     specifier: 5.4.1
     version: 5.4.1
@@ -31,6 +28,9 @@ dependencies:
     version: 0.3.0
 
 devDependencies:
+  '@intlify/eslint-plugin-vue-i18n':
+    specifier: ^2.0.0
+    version: 2.0.0(eslint@8.55.0)
   '@types/ackee-tracker':
     specifier: 5.0.4
     version: 5.0.4
@@ -1552,6 +1552,23 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
+  /@eslint/eslintrc@1.4.1:
+    resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.20.0
+      ignore: 5.2.4
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@eslint/eslintrc@2.1.4:
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1600,7 +1617,32 @@ packages:
     dependencies:
       '@intlify/message-compiler': 9.8.0
       '@intlify/shared': 9.8.0
-    dev: false
+
+  /@intlify/eslint-plugin-vue-i18n@2.0.0(eslint@8.55.0):
+    resolution: {integrity: sha512-ECBD0TvQNa56XKyuM6FPIGAAl7MP6ODcgjBQJrzucNxcTb8fYTWmZ+xgBuvmvAtA0iE0D4Wp18UMild2N0bGyw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint/eslintrc': 1.4.1
+      '@intlify/core-base': 9.8.0
+      '@intlify/message-compiler': 9.8.0
+      debug: 4.3.4
+      eslint: 8.55.0
+      glob: 8.1.0
+      ignore: 5.2.4
+      is-language-code: 3.1.0
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      jsonc-eslint-parser: 2.4.0
+      lodash: 4.17.21
+      parse5: 7.1.2
+      semver: 7.5.4
+      vue-eslint-parser: 9.3.1(eslint@8.55.0)
+      yaml-eslint-parser: 1.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
   /@intlify/message-compiler@9.8.0:
     resolution: {integrity: sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==}
@@ -1608,12 +1650,10 @@ packages:
     dependencies:
       '@intlify/shared': 9.8.0
       source-map-js: 1.0.2
-    dev: false
 
   /@intlify/shared@9.8.0:
     resolution: {integrity: sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==}
     engines: {node: '>= 16'}
-    dev: false
 
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@@ -2390,6 +2430,7 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
 
   /big-integer@1.6.51:
     resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
@@ -2423,6 +2464,7 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
+    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -2491,11 +2533,6 @@ packages:
       supports-color: 7.2.0
     dev: true
 
-  /chalk@5.3.0:
-    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
-    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
-    dev: false
-
   /chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -2536,11 +2573,6 @@ packages:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
-  /commander@9.5.0:
-    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
-    engines: {node: ^12.20.0 || >=14}
-    dev: false
-
   /common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -2711,6 +2743,11 @@ packages:
       tapable: 2.2.1
     dev: true
 
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: true
+
   /es-abstract@1.22.2:
     resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
     engines: {node: '>= 0.4'}
@@ -3233,6 +3270,7 @@ packages:
 
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
 
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@@ -3335,7 +3373,7 @@ packages:
       inherits: 2.0.4
       minimatch: 5.1.6
       once: 1.4.0
-    dev: false
+    dev: true
 
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -3483,9 +3521,11 @@ packages:
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
+    dev: true
 
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
 
   /internal-slot@1.0.5:
     resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
@@ -3581,6 +3621,12 @@ packages:
       is-docker: 3.0.0
     dev: true
 
+  /is-language-code@3.1.0:
+    resolution: {integrity: sha512-zJdQ3QTeLye+iphMeK3wks+vXSRFKh68/Pnlw7aOfApFSEIOhYa8P9vwwa6QrImNNBMJTiL1PpYF0f4BxDuEgA==}
+    dependencies:
+      '@babel/runtime': 7.22.5
+    dev: true
+
   /is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
     dev: true
@@ -3754,6 +3800,16 @@ packages:
     hasBin: true
     dev: true
 
+  /jsonc-eslint-parser@2.4.0:
+    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.9.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.5.4
+    dev: true
+
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -3780,15 +3836,6 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /li18nt@5.0.0:
-    resolution: {integrity: sha512-0jCITOmggEkZG021Rz3ObS6BHJBEyafyT+DXAMl3fBuOHKJVG2Cl/1SGZrtFEtr7wuQrmjYUP49Oh4in1y0pWw==}
-    hasBin: true
-    dependencies:
-      chalk: 5.3.0
-      commander: 9.5.0
-      glob: 8.1.0
-    dev: false
-
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -3875,6 +3922,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       brace-expansion: 2.0.1
+    dev: true
 
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
@@ -3987,6 +4035,7 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
+    dev: true
 
   /onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -4049,6 +4098,12 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse5@7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+    dependencies:
+      entities: 4.5.0
+    dev: true
+
   /path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
     dev: true
@@ -5094,6 +5149,7 @@ packages:
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
 
   /xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
@@ -5108,6 +5164,20 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
+  /yaml-eslint-parser@1.2.2:
+    resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      lodash: 4.17.21
+      yaml: 2.3.4
+    dev: true
+
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+    engines: {node: '>= 14'}
+    dev: true
+
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
diff --git a/src/app/App.vue b/src/app/App.vue
index 94bf8e2a..12ec739d 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -48,8 +48,10 @@ watch(
   }
 );
 
-watchEffect(() => {
-  document.title = ['app.name', ...router.currentRoute.value.matched.map((v) => v.name as string)].map(t).join(' / ');
+watch(router.currentRoute, (route) => {
+  if (route) {
+    document.title = t(`page.${route.name as string}.title`);
+  }
 });
 </script>
 
diff --git a/src/app/components/base/button/Button.vue b/src/app/components/base/button/Button.vue
index c292bef1..54647da7 100644
--- a/src/app/components/base/button/Button.vue
+++ b/src/app/components/base/button/Button.vue
@@ -31,6 +31,7 @@ const props = withDefaults(
     text?: string;
     tooltip?: string;
     type?: 'button' | 'reset' | 'submit';
+    size?: 'm' | 'l';
     tooltipPosition?: Placement;
     color?: Color;
     textual?: boolean;
@@ -40,6 +41,7 @@ const props = withDefaults(
   {
     color: 'primary',
     type: 'button',
+    size: 'm',
     textual: false,
     rounded: false,
     disabled: false
@@ -51,6 +53,7 @@ const theme = useThemeStyles(() => props.color);
 const classes = computed(() => [
   props.class,
   styles.button,
+  styles[props.size],
   {
     [styles.hasIcon]: props.icon,
     [styles.disabled]: props.disabled,
@@ -94,6 +97,17 @@ const classes = computed(() => [
     line-height: 1em;
   }
 
+  &.l {
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .text {
+      font-size: var(--font-size-m);
+    }
+  }
+
   &:focus {
     box-shadow: 0 0 0 2px v-bind('theme.focus');
   }
diff --git a/src/app/components/base/draggable/Draggable.vue b/src/app/components/base/draggable/Draggable.vue
index 09718e44..ed183679 100644
--- a/src/app/components/base/draggable/Draggable.vue
+++ b/src/app/components/base/draggable/Draggable.vue
@@ -20,6 +20,7 @@
       <span :class="$style.text">{{ label }}</span>
     </div>
 
+    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
     <div ref="element" :class="$style.hidden">hidden</div>
   </div>
 </template>
diff --git a/src/app/components/base/link/Link.vue b/src/app/components/base/link/Link.vue
index 29cc8b4c..78878d8e 100644
--- a/src/app/components/base/link/Link.vue
+++ b/src/app/components/base/link/Link.vue
@@ -2,7 +2,7 @@
   <a
     v-if="isExternalLink"
     v-tooltip="{ text: tooltip, position: tooltipPosition }"
-    :href="to"
+    :href="href"
     :class="classes"
     rel="noopener,noreferrer,nofollow"
     target="_blank"
@@ -10,7 +10,7 @@
     <Icon v-if="icon" :class="$style.icon" :icon="icon" />
     <slot />
   </a>
-  <RouterLink v-else v-tooltip="{ text: tooltip, position: tooltipPosition }" :to="to" :class="classes">
+  <RouterLink v-else v-tooltip="{ text: tooltip, position: tooltipPosition }" :to="href" :class="classes">
     <Icon v-if="icon" :class="$style.icon" :icon="icon" />
     <slot />
   </RouterLink>
@@ -19,6 +19,7 @@
 <script lang="ts" setup>
 import { Placement } from '@popperjs/core';
 import { computed, useCssModule, useSlots } from 'vue';
+import { useRouter } from 'vue-router';
 import { AppIcon } from '@components/base/icon/Icon.types';
 import Icon from '@components/base/icon/Icon.vue';
 import { Color, useThemeStyles } from '@composables';
@@ -28,23 +29,29 @@ const props = withDefaults(
   defineProps<{
     class?: ClassNames;
     icon?: AppIcon;
-    color?: Color;
+    color?: Color | ((currentRoute: boolean) => Color);
     custom?: boolean;
     tooltip?: string;
     tooltipPosition?: Placement;
-    to: string;
+    name?: string;
+    to?: string;
   }>(),
   {
-    color: 'primary',
     custom: undefined
   }
 );
 
 const slots = useSlots();
 const styles = useCssModule();
-const theme = useThemeStyles(() => props.color);
+const router = useRouter();
+const theme = useThemeStyles(() =>
+  typeof props.color === 'function'
+    ? props.color(router.currentRoute.value.name === props.name)
+    : props.color ?? 'primary'
+);
 
-const isExternalLink = computed(() => props.to.startsWith('http'));
+const href = computed(() => (props.name ? router.resolve({ name: props.name }).href : props.to ?? ''));
+const isExternalLink = computed(() => href.value.startsWith('http'));
 
 const classes = computed(() => [
   props.class,
diff --git a/src/app/components/misc/animated-router-view/AnimatedRouterView.vue b/src/app/components/misc/animated-router-view/AnimatedRouterView.vue
deleted file mode 100644
index b4735a1a..00000000
--- a/src/app/components/misc/animated-router-view/AnimatedRouterView.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <RouterView v-slot="{ Component }">
-    <Transition
-      :enter-active-class="$style.transitionTarget"
-      :enter-from-class="$style.transitionOrigin"
-      :leave-active-class="$style.transitionTarget"
-      :leave-to-class="$style.transitionOrigin"
-      mode="out-in"
-    >
-      <component :is="Component" />
-    </Transition>
-  </RouterView>
-</template>
-
-<style lang="scss" module>
-.transitionTarget {
-  transition: all var(--transition-s);
-}
-
-.transitionOrigin {
-  opacity: 0;
-}
-</style>
diff --git a/src/app/components/misc/component-transition/ComponentTransition.vue b/src/app/components/misc/component-transition/ComponentTransition.vue
new file mode 100644
index 00000000..a1cee0a7
--- /dev/null
+++ b/src/app/components/misc/component-transition/ComponentTransition.vue
@@ -0,0 +1,28 @@
+<template>
+  <Transition
+    :enter-active-class="$style.transitionTarget"
+    :enter-from-class="$style.transitionOrigin"
+    :leave-active-class="$style.transitionTarget"
+    :leave-to-class="$style.transitionOrigin"
+    mode="out-in"
+  >
+    <component :is="is" />
+  </Transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  is: Object;
+}>();
+</script>
+
+<style lang="scss" module>
+.transitionTarget {
+  transition: all var(--transition-s);
+}
+
+.transitionOrigin {
+  opacity: 0;
+}
+</style>
diff --git a/src/app/pages/Frame.vue b/src/app/pages/Frame.vue
index 4c7f79a5..d93ecaef 100644
--- a/src/app/pages/Frame.vue
+++ b/src/app/pages/Frame.vue
@@ -6,13 +6,13 @@
 
       <Link
         v-for="button of buttons"
-        :key="button.id"
+        :key="button.name"
         :tooltip="button.tooltip"
         tooltip-position="right"
         :class="$style.btn"
-        :color="router.currentRoute.value.path.startsWith(button.link) ? 'primary' : 'dimmed'"
+        :color="(currentRoute) => (currentRoute ? 'primary' : 'dimmed')"
         :icon="button.icon"
-        :to="button.link"
+        :name="button.name"
       />
 
       <ToolsButton :class="[$style.top, $style.btn]" />
@@ -28,7 +28,9 @@
     </div>
 
     <div ref="panes" :class="$style.panes">
-      <AnimatedRouterView />
+      <RouterView v-slot="{ Component }">
+        <ComponentTransition :is="Component" />
+      </RouterView>
     </div>
   </div>
 </template>
@@ -36,38 +38,35 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import InfoButton from '@app/pages/navigation/info/InfoButton.vue';
 import { AppIcon } from '@components/base/icon/Icon.types';
 import Link from '@components/base/link/Link.vue';
-import AnimatedRouterView from '@components/misc/animated-router-view/AnimatedRouterView.vue';
+import ComponentTransition from '@components/misc/component-transition/ComponentTransition.vue';
 import { useMediaQuery } from '@composables';
 import { useStorage } from '@storage/index';
-import ThemeButton from './navigation/ThemeButton.vue';
 import AdminButton from './navigation/admin/AdminButton.vue';
 import CloudButton from './navigation/auth/CloudButton.vue';
 import ChangeCurrencyButton from './navigation/currency/ChangeCurrencyButton.vue';
 import ChangeLanguageButton from './navigation/language/ChangeLanguageButton.vue';
+import ThemeButton from './navigation/theme/ThemeButton.vue';
 import ToolsButton from './navigation/tools/ToolsButton.vue';
 import SelectYearButton from './navigation/year/SelectYearButton.vue';
 
 const menu = ref<HTMLDivElement>();
-const router = useRouter();
 const media = useMediaQuery();
 const { user } = useStorage();
 const { t } = useI18n();
 
 interface FrameButton {
   icon: AppIcon;
-  id: string;
-  link: string;
+  name: string;
   tooltip: string;
 }
 
-const buttons = computed<FrameButton[]>(() => [
-  { icon: 'donut-chart', id: 'dashboard', link: '/dashboard', tooltip: t('navigation.menu.dashboard') },
-  { icon: 'hand-coin', id: 'income', link: '/income', tooltip: t('navigation.menu.income') },
-  { icon: 'shopping-basket-2', id: 'expenses', link: '/expenses', tooltip: t('navigation.menu.expenses') }
+const buttons = computed((): FrameButton[] => [
+  { icon: 'donut-chart', name: 'dashboard', tooltip: t('page.dashboard.title') },
+  { icon: 'hand-coin', name: 'income', tooltip: t('page.income.title') },
+  { icon: 'shopping-basket-2', name: 'expenses', tooltip: t('page.expenses.title') }
 ]);
 </script>
 
diff --git a/src/app/pages/dashboard/Dashboard.vue b/src/app/pages/dashboard/Dashboard.vue
index 50bd11a4..9bc1a115 100644
--- a/src/app/pages/dashboard/Dashboard.vue
+++ b/src/app/pages/dashboard/Dashboard.vue
@@ -6,7 +6,7 @@
     </template>
     <template #title>
       <span>
-        <i18n-t keypath="dashboard.header">
+        <i18n-t keypath="page.dashboard.header">
           <template #year>
             <TextWheel :values="allYears" :value="state.activeYear" />
           </template>
@@ -15,40 +15,42 @@
     </template>
     <template #header>
       <div :class="$style.viewButtons">
-        <Link
-          :tooltip="t('navigation.menu.dashboard')"
-          tooltip-position="bottom-end"
-          to="/dashboard"
-          :color="router.currentRoute.value.path.endsWith('/dashboard') ? 'primary' : 'dimmed'"
+        <Button
+          textual
+          size="l"
           icon="pi-chart-line"
+          :tooltip="t('page.dashboard.title')"
+          :color="view === Overview ? 'primary' : 'dimmed'"
+          @click="view = Overview"
         />
-        <Link
-          :tooltip="t('dashboard.tableOverview')"
-          tooltip-position="bottom-end"
-          to="/dashboard/summary"
-          :color="router.currentRoute.value.path.endsWith('/dashboard/summary') ? 'primary' : 'dimmed'"
+        <Button
+          textual
+          size="l"
           icon="grid-line"
+          :tooltip="t('page.dashboard.tables')"
+          :color="view === Summary ? 'primary' : 'dimmed'"
+          @click="view = Summary"
         />
       </div>
     </template>
-    <AnimatedRouterView />
+    <ComponentTransition :is="view" />
   </Pane>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import Button from '@components/base/button/Button.vue';
-import Link from '@components/base/link/Link.vue';
 import TextWheel from '@components/base/text-wheel/TextWheel.vue';
-import AnimatedRouterView from '@components/misc/animated-router-view/AnimatedRouterView.vue';
+import ComponentTransition from '@components/misc/component-transition/ComponentTransition.vue';
 import { useDataStore } from '@store/state';
 import Pane from '../shared/Pane.vue';
+import Overview from './overview/Overview.vue';
+import Summary from './summary/Summary.vue';
 
 const { t } = useI18n();
 const { state, changeYear } = useDataStore();
-const router = useRouter();
+const view = shallowRef(Overview);
 
 const allYears = computed(() => state.years.map((v) => v.year));
 
@@ -70,7 +72,7 @@ const rotateYear = (dir: -1 | 1) => {
 
 .viewButtons {
   display: flex;
-  grid-gap: 10px;
+  grid-gap: 4px;
 }
 
 .version {
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
index 079d2415..654584e0 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
@@ -1,36 +1,36 @@
 <template>
   <div :class="classes" @animationend="animationsDone++">
-    <SummaryPanel :values="income" color="success" to="/income" :title="t('dashboard.income')" />
+    <SummaryPanel :values="income" color="success" to="/income" :title="t('page.dashboard.income')" />
 
     <SummaryPanel
       :sub-title="n(expensePercentage, 'percent')"
       to="/expenses"
       :values="expenses"
       color="warning"
-      :title="t('dashboard.expenses')"
+      :title="t('page.dashboard.expenses')"
     />
 
     <SummaryPanel
       :sub-title="n(endingBalanceTotal ? 1 - expensePercentage : 0, 'percent')"
       :values="endingBalance"
       color="primary"
-      :title="t('dashboard.endingBalance')"
+      :title="t('page.dashboard.endingBalance')"
     />
 
     <SummaryPanel
       :sub-title="n(remainingBalancePercentage, 'percent')"
       :alt="
         state.activeYear < time.year.value
-          ? t('dashboard.yearInThePast')
+          ? t('page.dashboard.yearInThePast')
           : state.activeYear > time.year.value
-            ? t('dashboard.yearInTheFuture')
+            ? t('page.dashboard.yearInTheFuture')
             : time.month.value === 11
-              ? t('dashboard.yearEnding')
+              ? t('page.dashboard.yearEnding')
               : undefined
       "
       :values="remainingBalance"
       color="secondary"
-      :title="t('dashboard.remainingBalance', { year: state.activeYear + 1 })"
+      :title="t('page.dashboard.remainingBalance', { year: state.activeYear + 1 })"
     />
   </div>
 </template>
diff --git a/src/app/pages/dashboard/summary/Summary.vue b/src/app/pages/dashboard/summary/Summary.vue
index 47a713ba..bb2f79b0 100644
--- a/src/app/pages/dashboard/summary/Summary.vue
+++ b/src/app/pages/dashboard/summary/Summary.vue
@@ -6,9 +6,9 @@
       :import="() => import('./widgets/charts/DevelopmentChart.vue')"
     />
 
-    <TotalsSummaryTable :title="t('dashboard.summary')" :income="income" :expenses="expenses" />
-    <GroupsSummaryTable :title="t('dashboard.income')" :groups="state.income" />
-    <GroupsSummaryTable :title="t('dashboard.expenses')" :groups="state.expenses" />
+    <TotalsSummaryTable :title="t('page.dashboard.summary')" :income="income" :expenses="expenses" />
+    <GroupsSummaryTable :title="t('page.dashboard.income')" :groups="state.income" />
+    <GroupsSummaryTable :title="t('page.dashboard.expenses')" :groups="state.expenses" />
   </div>
 </template>
 
diff --git a/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue b/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue
index 3fcebdee..869a8565 100644
--- a/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue
+++ b/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue
@@ -37,9 +37,9 @@ const data = computed((): LineChartConfig => {
   return {
     labels: months.value,
     series: [
-      { name: t('dashboard.income'), color: 'var(--c-success-light-dimmed)', data: income },
-      { name: t('dashboard.expenses'), color: 'var(--c-danger-light-dimmed)', data: expenses },
-      { name: t('dashboard.endingBalance'), color: 'var(--c-primary-light-dimmed)', data: endingBalance }
+      { name: t('page.dashboard.income'), color: 'var(--c-success-light-dimmed)', data: income },
+      { name: t('page.dashboard.expenses'), color: 'var(--c-danger-light-dimmed)', data: expenses },
+      { name: t('page.dashboard.endingBalance'), color: 'var(--c-primary-light-dimmed)', data: endingBalance }
     ]
   };
 });
diff --git a/src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue b/src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue
index 568ca8e1..2553b252 100644
--- a/src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue
+++ b/src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue
@@ -10,8 +10,8 @@
       >
         {{ month }}
       </span>
-      <span :class="$style.bold">{{ t('budget.total') }}</span>
-      <span :class="$style.bold">{{ t('budget.average') }}</span>
+      <span :class="$style.bold">{{ t('shared.total') }}</span>
+      <span :class="$style.bold">{{ t('shared.average') }}</span>
 
       <!-- Groups -->
       <template v-for="(group, groupIndex) of flatted" :key="group.id">
@@ -33,7 +33,7 @@
 
       <!-- Totals -->
       <template v-if="flatted.length > 1">
-        <span :class="$style.bold">{{ t('budget.total') }}</span>
+        <span :class="$style.bold">{{ t('shared.total') }}</span>
         <span v-for="(month, index) of months" :key="month" :class="$style.bold">
           {{ n(sum(flatted.map((v) => v.totals[index])), 'currency') }}
         </span>
diff --git a/src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue b/src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue
index 4bc2e41a..85f54773 100644
--- a/src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue
+++ b/src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue
@@ -9,11 +9,11 @@
         :class="[$style.bold, { [$style.currentMonth]: isCurrentMonth(index) }]"
         >{{ month }}</span
       >
-      <span :class="$style.bold">{{ t('budget.total') }}</span>
-      <span :class="$style.bold">{{ t('budget.average') }}</span>
+      <span :class="$style.bold">{{ t('shared.total') }}</span>
+      <span :class="$style.bold">{{ t('shared.average') }}</span>
 
       <!-- Income -->
-      <span :class="[$style.bold, $style.muted]">{{ t('dashboard.income') }}</span>
+      <span :class="[$style.bold, $style.muted]">{{ t('page.income.title') }}</span>
       <span
         v-for="(amount, index) of income"
         :key="index"
@@ -25,7 +25,7 @@
       <span :class="$style.muted">{{ n(average(income), 'currency') }}</span>
 
       <!-- Expenses -->
-      <span :class="[$style.bold, $style.muted]">{{ t('dashboard.expenses') }}</span>
+      <span :class="[$style.bold, $style.muted]">{{ t('page.expenses.title') }}</span>
       <span
         v-for="(amount, index) of expenses"
         :key="index"
@@ -37,7 +37,7 @@
       <span :class="$style.muted">{{ n(average(expenses), 'currency') }}</span>
 
       <!-- Net savings  -->
-      <span :class="[$style.bold, $style.muted]">{{ t('dashboard.netSavings') }}</span>
+      <span :class="[$style.bold, $style.muted]">{{ t('page.dashboard.netSavings') }}</span>
       <span
         v-for="(amount, index) of netSavings"
         :key="index"
@@ -49,7 +49,7 @@
       <span :class="$style.muted">{{ n(average(netSavings), 'currency') }}</span>
 
       <!-- Ending balance  -->
-      <span :class="$style.bold">{{ t('dashboard.endingBalance') }}</span>
+      <span :class="$style.bold">{{ t('page.dashboard.endingBalance') }}</span>
       <span
         v-for="(amount, index) of endingBalance"
         :key="index"
diff --git a/src/app/pages/expenses/Expenses.vue b/src/app/pages/expenses/Expenses.vue
index a20979b8..8273498c 100644
--- a/src/app/pages/expenses/Expenses.vue
+++ b/src/app/pages/expenses/Expenses.vue
@@ -1,10 +1,10 @@
 <template>
-  <BudgetPane :title="t('dashboard.expenses')" type="expenses" />
+  <BudgetPane :title="t('page.expenses.title')" type="expenses" />
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import BudgetPane from '../shared/pane/BudgetPane.vue';
+import BudgetPane from '../shared/BudgetPane.vue';
 
 const { t } = useI18n();
 </script>
diff --git a/src/app/pages/income/Income.vue b/src/app/pages/income/Income.vue
index cf9abff6..1761df0e 100644
--- a/src/app/pages/income/Income.vue
+++ b/src/app/pages/income/Income.vue
@@ -1,10 +1,10 @@
 <template>
-  <BudgetPane :title="t('dashboard.income')" type="income" />
+  <BudgetPane :title="t('page.income.title')" type="income" />
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import BudgetPane from '../shared/pane/BudgetPane.vue';
+import BudgetPane from '../shared/BudgetPane.vue';
 
 const { t } = useI18n();
 </script>
diff --git a/src/app/pages/navigation/admin/create-user/CreateUserDialog.vue b/src/app/pages/navigation/admin/create-user/CreateUserDialog.vue
index e87708f6..fb37befc 100644
--- a/src/app/pages/navigation/admin/create-user/CreateUserDialog.vue
+++ b/src/app/pages/navigation/admin/create-user/CreateUserDialog.vue
@@ -19,8 +19,8 @@
       />
       <CheckBoxField v-model="newUser.admin" :label="t('navigation.admin.admin')" />
 
-      <Alert v-if="state === 'errored'" :text="t('navigation.admin.errors.generic')" type="error" />
-      <Alert v-if="state === 'conflict'" :text="t('navigation.admin.errors.conflict')" type="error" />
+      <Alert v-if="state === 'errored'" :text="t('navigation.admin.error')" type="error" />
+      <Alert v-if="state === 'conflict'" :text="t('navigation.admin.conflict')" type="error" />
     </Form>
   </Dialog>
 </template>
diff --git a/src/app/pages/navigation/auth/LoginDialog.vue b/src/app/pages/navigation/auth/LoginDialog.vue
index 5854051f..55726e2a 100644
--- a/src/app/pages/navigation/auth/LoginDialog.vue
+++ b/src/app/pages/navigation/auth/LoginDialog.vue
@@ -1,9 +1,9 @@
 <template>
-  <Dialog :open="open" :title="t('auth.welcomeBack')" @close="emit('close')">
-    <Form :submit-label="t('auth.signIn')" @submit="signIn">
-      <TextField v-model="username" required :label="t('auth.username')" type="text" />
-      <TextField v-model="password" required :label="t('auth.password')" type="password" />
-      <Alert v-if="state === 'errored'" :text="t('auth.errors.loginFailed')" type="error" />
+  <Dialog :open="open" :title="t('navigation.auth.welcomeBack')" @close="emit('close')">
+    <Form :submit-label="t('navigation.auth.signIn')" @submit="signIn">
+      <TextField v-model="username" required :label="t('navigation.auth.username')" type="text" />
+      <TextField v-model="password" required :label="t('navigation.auth.password')" type="password" />
+      <Alert v-if="state === 'errored'" :text="t('navigation.auth.loginFailed')" type="error" />
     </Form>
   </Dialog>
 </template>
diff --git a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
index 3f9b89b9..b75461a2 100644
--- a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
+++ b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
@@ -1,6 +1,6 @@
 <template>
   <ContextMenu
-    :tooltip="t('navigation.currency')"
+    :tooltip="t('navigation.currency.change')"
     tooltip-position="right"
     :class="classes"
     :options="currencies"
diff --git a/src/app/pages/navigation/info/InfoButton.vue b/src/app/pages/navigation/info/InfoButton.vue
index eaf797eb..029e0cdc 100644
--- a/src/app/pages/navigation/info/InfoButton.vue
+++ b/src/app/pages/navigation/info/InfoButton.vue
@@ -1,6 +1,6 @@
 <template>
   <Button
-    :tooltip="t('app.about')"
+    :tooltip="t('navigation.info.about')"
     :class="classes"
     textual
     color="dimmed"
diff --git a/src/app/pages/navigation/info/InfoDialog.vue b/src/app/pages/navigation/info/InfoDialog.vue
index 4b4c862e..c8bd1841 100644
--- a/src/app/pages/navigation/info/InfoDialog.vue
+++ b/src/app/pages/navigation/info/InfoDialog.vue
@@ -1,16 +1,23 @@
 <template>
-  <Dialog :open="open" :title="t('app.about')" @close="emit('close')">
+  <Dialog :open="open" :title="t('navigation.info.about')" @close="emit('close')">
     <div :class="$style.infoBox">
       <span :class="$style.link">
-        <i18n-t keypath="app.github">
+        <i18n-t keypath="navigation.info.github">
           <template #link>
+            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
             <Link :custom="false" color="primary" to="https://github.com/simonwep/ocular">Github</Link>
           </template>
         </i18n-t>
       </span>
-      <span :class="$style.love">{{ t('app.madeWithLove') }}</span>
+      <span :class="$style.love">{{ t('navigation.info.madeWithLove') }}</span>
       <span :class="$style.meta">
-        {{ OCULAR_BUILD_VERSION }} / {{ new Date(OCULAR_BUILD_TIMESTAMP).toDateString() }} / {{ OCULAR_BUILD_SHA }}
+        {{
+          t('navigation.info.meta', {
+            version: OCULAR_BUILD_VERSION,
+            date: new Date(OCULAR_BUILD_TIMESTAMP).toDateString(),
+            sha: OCULAR_BUILD_SHA
+          })
+        }}
       </span>
     </div>
   </Dialog>
diff --git a/src/app/pages/navigation/language/ChangeLanguageButton.vue b/src/app/pages/navigation/language/ChangeLanguageButton.vue
index eb0c6d76..eef9812d 100644
--- a/src/app/pages/navigation/language/ChangeLanguageButton.vue
+++ b/src/app/pages/navigation/language/ChangeLanguageButton.vue
@@ -1,6 +1,6 @@
 <template>
   <ContextMenu
-    :tooltip="t('navigation.language')"
+    :tooltip="t('navigation.language.switch')"
     tooltip-position="right"
     :class="classes"
     :options="locales"
diff --git a/src/app/pages/navigation/ThemeButton.vue b/src/app/pages/navigation/theme/ThemeButton.vue
similarity index 95%
rename from src/app/pages/navigation/ThemeButton.vue
rename to src/app/pages/navigation/theme/ThemeButton.vue
index c20892cf..702dd67a 100644
--- a/src/app/pages/navigation/ThemeButton.vue
+++ b/src/app/pages/navigation/theme/ThemeButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <Button :tooltip="t('navigation.theme')" :class="classes" :icon="icon" textual @click="toggle" />
+  <Button :tooltip="t('navigation.theme.change')" :class="classes" :icon="icon" textual @click="toggle" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/app/pages/navigation/tools/ToolsButton.vue b/src/app/pages/navigation/tools/ToolsButton.vue
index b82ee8f4..f374e11d 100644
--- a/src/app/pages/navigation/tools/ToolsButton.vue
+++ b/src/app/pages/navigation/tools/ToolsButton.vue
@@ -1,6 +1,6 @@
 <template>
   <ContextMenu
-    :tooltip="t('navigation.tools')"
+    :tooltip="t('navigation.tools.tools')"
     :position="media === 'mobile' ? 'top' : 'right-end'"
     tooltip-position="right"
     :class="classes"
@@ -33,7 +33,7 @@ import PasteButton from './copy-paste/PasteButton.vue';
 import LoadDemoDataButton from './demo/LoadDemoDataButton.vue';
 import ExportButton from './export/ExportButton.vue';
 import ImportButton from './import/ImportButton.vue';
-import PrivacyModeButton from './privacy-mode-button/PrivacyModeButton.vue';
+import PrivacyModeButton from './privacy-mode/PrivacyModeButton.vue';
 
 const props = defineProps<{
   class: ClassNames;
diff --git a/src/app/pages/navigation/tools/change-password/ChangePasswordButton.vue b/src/app/pages/navigation/tools/change-password/ChangePasswordButton.vue
index b59d1f99..c790990d 100644
--- a/src/app/pages/navigation/tools/change-password/ChangePasswordButton.vue
+++ b/src/app/pages/navigation/tools/change-password/ChangePasswordButton.vue
@@ -1,5 +1,9 @@
 <template>
-  <ContextMenuButton icon="key-2-line" :text="t('auth.changePassword')" @click="showChangePasswordDialog = true" />
+  <ContextMenuButton
+    icon="key-2-line"
+    :text="t('navigation.tools.changePassword.change')"
+    @click="showChangePasswordDialog = true"
+  />
   <ChangePasswordDialog :open="showChangePasswordDialog" @close="showChangePasswordDialog = false" />
 </template>
 
diff --git a/src/app/pages/navigation/tools/change-password/ChangePasswordDialog.vue b/src/app/pages/navigation/tools/change-password/ChangePasswordDialog.vue
index 7c2053d4..7973737c 100644
--- a/src/app/pages/navigation/tools/change-password/ChangePasswordDialog.vue
+++ b/src/app/pages/navigation/tools/change-password/ChangePasswordDialog.vue
@@ -1,18 +1,23 @@
 <template>
-  <Dialog :title="t('auth.changePassword')" :open="open" @close="emit('close')">
-    <Form :submit-label="t('auth.changePassword')" @submit="submit">
-      <TextField v-model="currentPassword" required :label="t('auth.currentPassword')" type="password" />
+  <Dialog :title="t('navigation.tools.changePassword.change')" :open="open" @close="emit('close')">
+    <Form :submit-label="t('navigation.tools.changePassword.change')" @submit="submit">
+      <TextField
+        v-model="currentPassword"
+        required
+        :label="t('navigation.tools.changePassword.current')"
+        type="password"
+      />
       <TextField
         v-model="newPassword"
         :min-length="8"
         :max-length="64"
         required
-        :label="t('auth.newPassword')"
+        :label="t('navigation.tools.changePassword.new')"
         type="password"
         show-password-strength
       />
-      <Alert v-if="state === 'invalid-password'" :text="t('auth.errors.invalidPassword')" type="error" />
-      <Alert v-if="state === 'errored'" :text="t('auth.errors.generic')" type="error" />
+      <Alert v-if="state === 'invalid-password'" :text="t('navigation.tools.changePassword.invalid')" type="error" />
+      <Alert v-if="state === 'errored'" :text="t('navigation.tools.changePassword.unknownError')" type="error" />
     </Form>
   </Dialog>
 </template>
diff --git a/src/app/pages/navigation/tools/copy-paste/CopyButton.vue b/src/app/pages/navigation/tools/copy-paste/CopyButton.vue
index bd7c67e8..81d8c84e 100644
--- a/src/app/pages/navigation/tools/copy-paste/CopyButton.vue
+++ b/src/app/pages/navigation/tools/copy-paste/CopyButton.vue
@@ -1,7 +1,7 @@
 <template>
   <ContextMenuButton
     :text="
-      t('navigation.clipboard.copy', {
+      t('navigation.tools.copyPaste.copy', {
         year: state.activeYear
       })
     "
diff --git a/src/app/pages/navigation/tools/copy-paste/PasteButton.vue b/src/app/pages/navigation/tools/copy-paste/PasteButton.vue
index fee4640f..1c12512f 100644
--- a/src/app/pages/navigation/tools/copy-paste/PasteButton.vue
+++ b/src/app/pages/navigation/tools/copy-paste/PasteButton.vue
@@ -2,7 +2,7 @@
   <ContextMenuButton
     v-if="clipboard.data.value"
     :text="
-      t('navigation.clipboard.paste', {
+      t('navigation.tools.copyPaste.paste', {
         from: clipboard.data.value?.year,
         to: state.activeYear
       })
diff --git a/src/app/pages/navigation/tools/demo/LoadDemoDataButton.vue b/src/app/pages/navigation/tools/demo/LoadDemoDataButton.vue
index 479d1edf..5db468e2 100644
--- a/src/app/pages/navigation/tools/demo/LoadDemoDataButton.vue
+++ b/src/app/pages/navigation/tools/demo/LoadDemoDataButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContextMenuButton :text="t('navigation.loadDemoData')" icon="magic-line" @click="loadDemoData" />
+  <ContextMenuButton :text="t('navigation.tools.demo.loadDemoData')" icon="magic-line" @click="loadDemoData" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/app/pages/navigation/tools/export/ExportButton.vue b/src/app/pages/navigation/tools/export/ExportButton.vue
index d7f5950b..cf6a4eee 100644
--- a/src/app/pages/navigation/tools/export/ExportButton.vue
+++ b/src/app/pages/navigation/tools/export/ExportButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContextMenuButton :text="t('navigation.export.export')" icon="download-cloud-2-line" @click="save" />
+  <ContextMenuButton :text="t('navigation.tools.export.export')" icon="download-cloud-2-line" @click="save" />
 </template>
 
 <script lang="ts" setup>
@@ -12,6 +12,6 @@ const { serialize } = useDataStore();
 const { t } = useI18n();
 
 const save = () => {
-  saveFile(serialize(), `${t('navigation.export.fileName')}.json`, 'application/json');
+  saveFile(serialize(), 'ocular-data.json', 'application/json');
 };
 </script>
diff --git a/src/app/pages/navigation/tools/import/ImportButton.vue b/src/app/pages/navigation/tools/import/ImportButton.vue
index 119c3101..1518cecd 100644
--- a/src/app/pages/navigation/tools/import/ImportButton.vue
+++ b/src/app/pages/navigation/tools/import/ImportButton.vue
@@ -1,14 +1,14 @@
 <template>
-  <ContextMenuButton :text="t('navigation.import.import')" icon="upload-cloud-2-line" @click="visible = true" />
+  <ContextMenuButton :text="t('navigation.tools.import.import')" icon="upload-cloud-2-line" @click="visible = true" />
 
   <Dialog ref="dialog" :open="visible" @close="visible = false">
     <Steps ref="steps" v-slot="{ previous }" @finish="close">
       <Step :class="$style.step">
-        <h1 :class="$style.title">{{ t('navigation.import.start.title') }}</h1>
-        <Button icon="file-fill" :text="t('navigation.import.start.ocular')" @click="next(BudgetFileScreen)" />
+        <h1 :class="$style.title">{{ t('navigation.tools.import.what.title') }}</h1>
+        <Button icon="file-fill" :text="t('navigation.tools.import.what.ocular')" @click="next(BudgetFileScreen)" />
         <Button
           icon="google-fill"
-          :text="t('navigation.import.start.google')"
+          :text="t('navigation.tools.import.what.google')"
           @click="next(GoogleAnnualBudgetScreen)"
         />
       </Step>
diff --git a/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue b/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
index 99f8264c..4f1b3722 100644
--- a/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
+++ b/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
@@ -1,12 +1,17 @@
 <template>
-  <Screen :back="back" :class="$style.screen" :title="t('navigation.import.start.ocular')">
+  <Screen :back="back" :class="$style.screen" :title="t('navigation.tools.import.what.ocular')">
     <FilePicker
       v-model="budgetFile"
       :class="$style.input"
-      :placeholder="t('navigation.import.ocular.pickFile')"
+      :placeholder="t('navigation.tools.import.ocular.pickFile')"
       :accept="['.json']"
     />
-    <Button v-if="budgetFile" icon="upload-cloud-2-line" :text="t('navigation.import.import')" @click="load" />
+    <Button
+      v-if="budgetFile"
+      icon="upload-cloud-2-line"
+      :text="t('navigation.tools.import.ocular.import')"
+      @click="load"
+    />
   </Screen>
 </template>
 
diff --git a/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue b/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
index 097ef3a0..872944fe 100644
--- a/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
+++ b/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
@@ -1,21 +1,21 @@
 <template>
-  <Screen :back="back" :class="$style.screen" :title="t('navigation.import.start.google')">
+  <Screen :back="back" :class="$style.screen" :title="t('navigation.tools.import.google.import')">
     <FilePicker
       v-model="incomeFile"
       :class="$style.input"
-      :placeholder="t('navigation.import.google.income')"
+      :placeholder="t('navigation.tools.import.google.income')"
       :accept="['.csv']"
     />
     <FilePicker
       v-model="expensesFile"
       :class="$style.input"
-      :placeholder="t('navigation.import.google.expenses')"
+      :placeholder="t('navigation.tools.import.google.expenses')"
       :accept="['.csv']"
     />
     <Button
       v-if="expensesFile && incomeFile"
       icon="upload-cloud-2-line"
-      :text="t('navigation.import.import')"
+      :text="t('navigation.tools.import.google.import')"
       @click="load"
     />
   </Screen>
diff --git a/src/app/pages/navigation/tools/privacy-mode-button/PrivacyModeButton.vue b/src/app/pages/navigation/tools/privacy-mode/PrivacyModeButton.vue
similarity index 84%
rename from src/app/pages/navigation/tools/privacy-mode-button/PrivacyModeButton.vue
rename to src/app/pages/navigation/tools/privacy-mode/PrivacyModeButton.vue
index 0762efff..0cc98d5b 100644
--- a/src/app/pages/navigation/tools/privacy-mode-button/PrivacyModeButton.vue
+++ b/src/app/pages/navigation/tools/privacy-mode/PrivacyModeButton.vue
@@ -1,6 +1,6 @@
 <template>
   <ContextMenuButton
-    :text="privacyMode ? t('navigation.disablePrivacyMode') : t('navigation.enablePrivacyMode')"
+    :text="privacyMode ? t('navigation.tools.privacyMode.disable') : t('navigation.tools.privacyMode.enable')"
     :icon="privacyMode ? 'eye-line' : 'eye-close'"
     @click="togglePrivacyMode"
   />
diff --git a/src/app/pages/navigation/year/SelectYearButton.vue b/src/app/pages/navigation/year/SelectYearButton.vue
index bbd25ab0..c1247d0d 100644
--- a/src/app/pages/navigation/year/SelectYearButton.vue
+++ b/src/app/pages/navigation/year/SelectYearButton.vue
@@ -1,6 +1,6 @@
 <template>
   <ContextMenu
-    :tooltip="t('navigation.year')"
+    :tooltip="t('navigation.theme.change')"
     tooltip-position="right"
     :position="media === 'mobile' ? 'top' : 'right-end'"
     :options="options"
diff --git a/src/app/pages/shared/pane/BudgetGroup.vue b/src/app/pages/shared/BudgetGroup.vue
similarity index 95%
rename from src/app/pages/shared/pane/BudgetGroup.vue
rename to src/app/pages/shared/BudgetGroup.vue
index 552fed5a..055f47d7 100644
--- a/src/app/pages/shared/pane/BudgetGroup.vue
+++ b/src/app/pages/shared/BudgetGroup.vue
@@ -14,11 +14,11 @@
   </span>
 
   <span :class="$style.top">
-    <span>{{ t('budget.total') }}</span>
+    <span>{{ t('shared.total') }}</span>
   </span>
 
   <span :class="[$style.top, $style.end]">
-    <span>{{ t('budget.average') }}</span>
+    <span>{{ t('shared.average') }}</span>
   </span>
 
   <!-- Budgets -->
@@ -119,11 +119,11 @@ const buildDraggableText = (store: DraggableEvent) => {
       const dstLabel = sameGroup ? dst.name : `${dstGroup.name} » ${dst.name}`;
 
       return store.type === 'before'
-        ? t('budget.prepend', { from: srcLabel, to: dstLabel })
-        : t('budget.append', { from: srcLabel, to: dstLabel });
+        ? t('shared.prepend', { from: srcLabel, to: dstLabel })
+        : t('shared.append', { from: srcLabel, to: dstLabel });
     }
 
-    return t('budget.move', { from: src.name });
+    return t('shared.move', { from: src.name });
   }
 };
 
diff --git a/src/app/pages/shared/pane/BudgetGroups.vue b/src/app/pages/shared/BudgetGroups.vue
similarity index 89%
rename from src/app/pages/shared/pane/BudgetGroups.vue
rename to src/app/pages/shared/BudgetGroups.vue
index 781836ac..88596b6f 100644
--- a/src/app/pages/shared/pane/BudgetGroups.vue
+++ b/src/app/pages/shared/BudgetGroups.vue
@@ -19,7 +19,7 @@
     <span />
 
     <!-- Sums -->
-    <span :class="$style.sum">{{ t('budget.totals') }}</span>
+    <span :class="$style.sum">{{ t('shared.totals') }}</span>
     <Currency v-for="(sum, index) of totals" :key="index" :value="sum" :class="$style.sum" />
     <span />
     <span />
@@ -32,7 +32,7 @@
 
     <!-- Footer -->
     <span />
-    <Button :class="$style.addGroupBtn" icon="plus" :text="t('budget.addGroup')" @click="addBudgetGroup(type)" />
+    <Button :class="$style.addGroupBtn" icon="plus" :text="t('shared.addGroup')" @click="addBudgetGroup(type)" />
   </div>
 </template>
 
@@ -78,11 +78,11 @@ const buildDraggableText = (store: DraggableEvent) => {
   if (src) {
     if (dst) {
       return store.type === 'before'
-        ? t('budget.prepend', { from: src.name, to: dst.name })
-        : t('budget.append', { from: src.name, to: dst.name });
+        ? t('shared.prepend', { from: src.name, to: dst.name })
+        : t('shared.append', { from: src.name, to: dst.name });
     }
 
-    return t('budget.move', { from: src.name });
+    return t('shared.move', { from: src.name });
   }
 };
 
diff --git a/src/app/pages/shared/pane/BudgetPane.vue b/src/app/pages/shared/BudgetPane.vue
similarity index 96%
rename from src/app/pages/shared/pane/BudgetPane.vue
rename to src/app/pages/shared/BudgetPane.vue
index 8fd1c81b..56cdd37e 100644
--- a/src/app/pages/shared/pane/BudgetPane.vue
+++ b/src/app/pages/shared/BudgetPane.vue
@@ -12,8 +12,8 @@ import { computed } from 'vue';
 import MiniChart from '@components/charts/mini-chart/MiniChart.vue';
 import { useDataStore } from '@store/state';
 import { totals } from '@store/state/utils/budgets';
-import Pane from '../Pane.vue';
 import BudgetGroups from './BudgetGroups.vue';
+import Pane from './Pane.vue';
 
 const props = defineProps<{
   title: string;
diff --git a/src/app/pages/shared/ChartPlaceholder.vue b/src/app/pages/shared/ChartPlaceholder.vue
index 68c204b6..d4980090 100644
--- a/src/app/pages/shared/ChartPlaceholder.vue
+++ b/src/app/pages/shared/ChartPlaceholder.vue
@@ -4,7 +4,7 @@
       <Icon icon="shopping-basket-2" :class="$style.icon" />
       <Icon icon="hand-coin" :class="$style.icon" />
     </div>
-    <span>{{ t('dashboard.graph.placeholder') }}</span>
+    <span>{{ t('shared.placeholder') }}</span>
   </div>
 </template>
 
diff --git a/src/app/pages/shared/Pane.vue b/src/app/pages/shared/Pane.vue
index 6ae13ab4..0996e29a 100644
--- a/src/app/pages/shared/Pane.vue
+++ b/src/app/pages/shared/Pane.vue
@@ -6,6 +6,7 @@
         <slot v-if="$slots.title" name="title" />
         <span v-else>{{ title }}</span>
         <template v-if="amount">
+          <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
           <span> - </span>
           <Currency :value="amount" />
         </template>
@@ -21,8 +22,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import Currency from '@components/base/currency/Currency.vue';
+import { useScrollShadow } from '@composables';
 import { ClassNames } from '@utils';
-import { useScrollShadow } from '../../../composables/useScrollShadow';
 
 const props = defineProps<{
   class?: ClassNames;
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index ec6d7996..aeb92e15 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -1,114 +1,126 @@
 {
   "_numberFormats": {
     "currency": {
-      "currency": "EUR",
+      "currency": "USD",
       "minimumFractionDigits": 0,
-      "style": "currency"
+      "style": "Währung"
     },
     "percent": {
       "maximumFractionDigits": 0,
-      "style": "percent"
+      "style": "Prozent"
     }
   },
-  "app": {
-    "about": "Über Ocular",
-    "github": "Schau dir dieses Projekt auf {link} an!",
-    "madeWithLove": "Made with ❤️ by Simon",
-    "name": "Ocular"
-  },
-  "auth": {
-    "changePassword": "Passwort ändern",
-    "currentPassword": "Aktuelles Passwort",
-    "errors": {
-      "generic": "Irgendwas ist schiefgelaufen, versuche es später erneut.",
-      "invalidPassword": "Das aktuelle Passwort ist inkorrekt.",
-      "loginFailed": "Nutzername und/oder Passwort inkorrekt."
+  "navigation": {
+    "tools": {
+      "tools": "Werkzeuge",
+      "changePassword": {
+        "change": "Passwort ändern",
+        "current": "Aktuelles Passwort",
+        "new": "Neues Passwort",
+        "invalid": "Aktuelles Passwort ungültig.",
+        "unknownError": "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut."
+      },
+      "copyPaste": {
+        "copy": "Daten kopieren von {year}",
+        "paste": "Daten einfügen von {from} nach {to}"
+      },
+      "demo": {
+        "loadDemoData": "Demo-Daten laden"
+      },
+      "export": {
+        "export": "Als JSON-Datei exportieren"
+      },
+      "import": {
+        "import": "Aus JSON-Datei importieren",
+        "what": {
+          "google": "Google Sheets Jahresbudgetdatei",
+          "ocular": "Eine zuvor exportierte Datei",
+          "title": "Was möchten Sie importieren?"
+        },
+        "ocular": {
+          "pickFile": "Wählen Sie Ihre .json-Datei zum Importieren aus",
+          "import": "Ocular-Daten importieren"
+        },
+        "google": {
+          "import": "Google-Daten importieren",
+          "pickFile": "Wählen Sie Ihre .csv-Datei zum Importieren aus",
+          "expenses": "Ausgaben.csv",
+          "income": "Einnahmen.csv"
+        }
+      },
+      "privacyMode": {
+        "disable": "In den öffentlichen Modus wechseln",
+        "enable": "In den Datenschutzmodus wechseln"
+      }
+    },
+    "language": {
+      "switch": "Zu einer anderen Sprache wechseln"
     },
-    "newPassword": "Neues Passwort",
-    "password": "Passwort",
-    "signIn": "Einloggen",
-    "username": "Benutzername",
-    "welcomeBack": "Willkommen zurück!"
+    "info": {
+      "about": "Über Ocular",
+      "github": "Schauen Sie sich dieses Projekt auf {link} an!",
+      "madeWithLove": "Hergestellt mit ❤️ von Simon",
+      "meta": "{version} / {date} / {sha}"
+    },
+    "currency": {
+      "change": "Ändern Sie die zu verwendende Währung"
+    },
+    "theme": {
+      "change": "Farbthema ändern"
+    },
+    "year": {
+      "change": "Wechseln Sie zu einem anderen Jahr"
+    },
+    "auth": {
+      "welcomeBack": "Willkommen zurück!",
+      "signIn": "Anmelden",
+      "username": "Benutzername",
+      "password": "Passwort",
+      "loginFailed": "Anmeldung fehlgeschlagen, Benutzername und/oder Passwort ungültig."
+    },
+    "admin": {
+      "settings": "Admin-Einstellungen",
+      "createUser": "Benutzer erstellen",
+      "username": "Benutzername",
+      "password": "Passwort",
+      "admin": "Admin",
+      "conflict": "Ein Benutzer mit diesem Namen existiert bereits.",
+      "error": "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut.",
+      "deleteUserConfirmation": "Sind Sie sicher, dass Sie diesen Benutzer löschen möchten?",
+      "manageUsers": "Benutzer verwalten",
+      "noUsersFound": "Keine Benutzer gefunden..."
+    }
   },
-  "budget": {
+  "shared": {
     "addGroup": "Gruppe hinzufügen",
-    "append": "„{from}“ nach „{to}“ verschieben",
+    "append": "Verschiebe „{from}“ nach „{to}“",
     "average": "Durchschnitt",
-    "move": "„{from}“ verschieben",
-    "prepend": "„{from}“ vor „{to}“ verschieben",
-    "total": "Summe",
-    "totals": "Summen"
+    "move": "Verschiebe „{from}“",
+    "prepend": "Verschiebe „{from}“ vor „{to}“",
+    "total": "Gesamt",
+    "totals": "Summen",
+    "placeholder": "Beginnen Sie damit, die Registerkarten für Einnahmen/Ausgaben auszufüllen! :)"
   },
-  "dashboard": {
-    "distribution": "Verteilung",
-    "endingBalance": "Endsaldo",
-    "expenses": "Ausgaben",
-    "graph": {
-      "placeholder": "Beginne damit, Einkünfte & Ausgaben einzutragen! :)"
+  "page": {
+    "income": {
+      "title": "Einnahmen"
     },
-    "header": "Übersicht - Jährliches Budget für {year}",
-    "income": "Einkünfte",
-    "netSavings": "Netto-Einsparung",
-    "remainingBalance": "Verbleibender Saldo bis {year}",
-    "summary": "Zusammenfassung",
-    "tableOverview": "Tabellenübersicht",
-    "yearEnding": "Das Jahr ist zu Ende...",
-    "yearInTheFuture": "Jahr liegt in der Zukunft",
-    "yearInThePast": "Jahr liegt in der Vergangenheit"
-  },
-  "navigation": {
-    "admin": {
-      "admin": "Administrator",
-      "createUser": "Benutzer hinzufügen",
-      "deleteUserConfirmation": "Soll der Nutzer {name} wirklich gelöscht werden?",
-      "errors": {
-        "conflict": "Ein Nutzer mit diesem Namen existiert bereits.",
-        "generic": "Irgendwas ist schiefgelaufen, versuche es später erneut."
-      },
-      "manageUsers": "Nutzer verwalten",
-      "noUsersFound": "Keine Nutzer gefunden...",
-      "password": "Passwort",
-      "settings": "Admin-Einstellungen",
-      "username": "Benutzername"
+    "expenses": {
+      "title": "Ausgaben"
     },
-    "clipboard": {
-      "copy": "Daten von {year} kopieren",
-      "paste": "Daten von {from} in {to} einfügen"
-    },
-    "currency": "Zu andere Währung wechseln",
-    "disablePrivacyMode": "In den öffentlichen Modus wechseln",
-    "enablePrivacyMode": "In den Privatsphären-Modus wechseln",
-    "export": {
-      "export": "Daten als JSON-Datei exportieren",
-      "fileName": "Jährliches Budget"
-    },
-    "githubProject": "Schau dir dieses Projekt auf GitHub an!",
-    "import": {
-      "google": {
-        "expenses": "Ausgaben.csv",
-        "income": "Einkünfte.csv"
-      },
-      "import": "Daten von einer JSON-Datei importieren",
-      "ocular": {
-        "pickFile": ".json-Datei auswählen"
-      },
-      "start": {
-        "google": "Eine Annual-Budget-Datei von Google-Sheets",
-        "ocular": "Eine von Ocular exportierte Datei",
-        "title": "Was soll importiert werden?"
-      }
-    },
-    "language": "Andere Sprache verwenden",
-    "loadDemoData": "Demo Daten laden",
-    "menu": {
-      "dashboard": "Übersicht",
+    "dashboard": {
+      "title": "Dashboard",
+      "tables": "Tabellen",
+      "income": "Einnahmen",
       "expenses": "Ausgaben",
-      "export": "Exportieren",
-      "import": "Imoportiere",
-      "income": "Einkünfte"
-    },
-    "theme": "Switch theme",
-    "tools": "Hilfsmittel",
-    "year": "Zu einem anderen Jahr springen"
+      "summary": "Zusammenfassung",
+      "endingBalance": "Endsaldo",
+      "header": "Übersicht - Jährliches Budget für {year}",
+      "remainingBalance": "Verbleibendes Guthaben bis {year}",
+      "netSavings": "Nettoersparnisse",
+      "yearInThePast": "Jahr liegt in der Vergangenheit",
+      "yearInTheFuture": "Jahr liegt in der Zukunft",
+      "yearEnding": "Dieses Jahr neigt sich dem Ende zu..."
+    }
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 4cb7f866..aa1f8f1a 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -10,105 +10,117 @@
       "style": "percent"
     }
   },
-  "app": {
-    "about": "About Ocular",
-    "github": "Check this project out on {link}!",
-    "madeWithLove": "Made with ❤️ by Simon",
-    "name": "Ocular"
-  },
-  "auth": {
-    "changePassword": "Change password",
-    "currentPassword": "Current password",
-    "errors": {
-      "generic": "Something went wrong, please try again later.",
-      "invalidPassword": "Current password invalid.",
+  "navigation": {
+    "tools": {
+      "tools": "Tools",
+      "changePassword": {
+        "change": "Change password",
+        "current": "Current password",
+        "new": "New password",
+        "invalid": "Current password invalid.",
+        "unknownError": "Something went wrong, please try again later."
+      },
+      "copyPaste": {
+        "copy": "Copy data from {year}",
+        "paste": "Paste data from {from} into {to}"
+      },
+      "demo": {
+        "loadDemoData": "Load demo data"
+      },
+      "export": {
+        "export": "Export as json file"
+      },
+      "import": {
+        "import": "Import from json file",
+        "what": {
+          "google": "Google-Sheets annual budget file",
+          "ocular": "A previously exported file",
+          "title": "What would you like to import?"
+        },
+        "ocular": {
+          "pickFile": "Select your .json file to import",
+          "import": "Import ocular data"
+        },
+        "google": {
+          "import": "Import google data",
+          "pickFile": "Select your .csv file to import",
+          "expenses": "Expenses.csv",
+          "income": "Income.csv"
+        }
+      },
+      "privacyMode": {
+        "disable": "Switch to public mode",
+        "enable": "Switch to privacy mode"
+      }
+    },
+    "language": {
+      "switch": "Switch to a different language"
+    },
+    "info": {
+      "about": "About Ocular",
+      "github": "Check this project out on {link}!",
+      "madeWithLove": "Made with ❤️ by Simon",
+      "meta": "{version} / {date} / {sha}"
+    },
+    "currency": {
+      "change": "Change the currency that should be used"
+    },
+    "theme": {
+      "change": "Change color theme"
+    },
+    "year": {
+      "change": "Switch to a different year"
+    },
+    "auth": {
+      "welcomeBack": "Welcome back!",
+      "signIn": "Sign in",
+      "username": "Username",
+      "password": "Password",
       "loginFailed": "Login failed, username and/or password invalid."
     },
-    "newPassword": "New password",
-    "password": "Password",
-    "signIn": "Sign in",
-    "username": "Username",
-    "welcomeBack": "Welcome back!"
+    "admin": {
+      "settings": "Admin settings",
+      "createUser": "Create user",
+      "username": "Username",
+      "password": "Password",
+      "admin": "Admin",
+      "conflict": "A user with this name already exists.",
+      "error": "Something went wrong, please try again later.",
+      "deleteUserConfirmation": "Are you sure you want to delete this user?",
+      "manageUsers": "Manage users",
+      "noUsersFound": "No users found..."
+    }
   },
-  "budget": {
+  "shared": {
     "addGroup": "Add Group",
     "append": "Move “{from}” after “{to}”",
     "average": "Average",
     "move": "Move “{from}”",
     "prepend": "Move “{from}” before “{to}”",
     "total": "Total",
-    "totals": "Totals"
+    "totals": "Totals",
+    "placeholder": "Start by filling out the income / expenses tabs! :)"
   },
-  "dashboard": {
-    "distribution": "Distribution",
-    "endingBalance": "Ending Balance",
-    "expenses": "Expenses",
-    "graph": {
-      "placeholder": "Start by filling out the income / expenses tabs! :)"
+  "page": {
+    "income": {
+      "title": "Income"
     },
-    "header": "Dashboard - Annual Budget for {year}",
-    "income": "Income",
-    "netSavings": "Net Savings",
-    "remainingBalance": "Remaining Balance until {year}",
-    "summary": "Summary",
-    "tableOverview": "Table overview",
-    "yearEnding": "This Year is coming to an end...",
-    "yearInTheFuture": "Year is in the future",
-    "yearInThePast": "Year is in the past"
-  },
-  "navigation": {
-    "admin": {
-      "admin": "Admin",
-      "createUser": "Add user",
-      "deleteUserConfirmation": "Are you sure you want to delete {name}?",
-      "errors": {
-        "conflict": "A user with this name already exists.",
-        "generic": "Something went wrong, please try again later."
-      },
-      "manageUsers": "Manage users",
-      "noUsersFound": "No users found...",
-      "password": "Password",
-      "settings": "Admin settings",
-      "username": "Username"
-    },
-    "clipboard": {
-      "copy": "Copy data from {year}",
-      "paste": "Paste data from {from} into {to}"
-    },
-    "currency": "Change the currency that should be used",
-    "disablePrivacyMode": "Switch to public mode",
-    "enablePrivacyMode": "Switch to privacy mode",
-    "export": {
-      "export": "Export as JSON file",
-      "fileName": "Annual Budget"
+    "expenses": {
+      "title": "Expenses"
     },
-    "githubProject": "Check this project out on GitHub!",
-    "import": {
-      "google": {
-        "expenses": "Expenses.csv",
-        "income": "Income.csv"
-      },
-      "import": "Import from JSON file",
-      "ocular": {
-        "pickFile": "Select your .json file to import"
-      },
-      "start": {
-        "google": "Google-Sheets annual budget file",
-        "ocular": "A previously exported file",
-        "title": "What would you like to import?"
-      }
-    },
-    "language": "Switch to a different language",
-    "loadDemoData": "Load demo data",
-    "menu": {
-      "dashboard": "Dashboard",
+    "dashboard": {
+      "title": "Dashboard",
+      "tables": "Tables",
+      "income": "Income",
       "expenses": "Expenses",
-      "export": "Export",
-      "import": "Import",
-      "income": "Income"
-    },
-    "theme": "Switch theme",
-    "tools": "Tools",
-    "year": "Switch to a different year"
+      "summary": "Summary",
+      "endingBalance": "Ending Balance",
+      "header": "Übersicht - Jährliches Budget für {year}",
+      "remainingBalance": "Remaining Balance until {year}",
+      "netSavings": "Net Savings",
+      "yearInThePast": "Year is in the past",
+      "yearInTheFuture": "Year is in the future",
+      "yearEnding": "This Year is coming to an end..."
+    }
   }
 }
diff --git a/src/router.ts b/src/router.ts
index 1f388d8a..5431da98 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -5,34 +5,17 @@ export const router = createRouter({
   routes: [
     {
       path: '/',
-      strict: true,
-      redirect: '/dashboard'
-    },
-    {
-      path: '/dashboard',
-      name: 'navigation.menu.dashboard',
-      component: () => import('./app/pages/dashboard/Dashboard.vue'),
-      children: [
-        {
-          path: '',
-          name: 'dashboard.distribution',
-          component: () => import('./app/pages/dashboard/overview/Overview.vue')
-        },
-        {
-          path: 'summary',
-          name: 'dashboard.summary',
-          component: () => import('./app/pages/dashboard/summary/Summary.vue')
-        }
-      ]
+      name: 'dashboard',
+      component: () => import('./app/pages/dashboard/Dashboard.vue')
     },
     {
       path: '/income',
-      name: 'navigation.menu.income',
+      name: 'income',
       component: () => import('./app/pages/income/Income.vue')
     },
     {
       path: '/expenses',
-      name: 'navigation.menu.expenses',
+      name: 'expenses',
       component: () => import('./app/pages/expenses/Expenses.vue')
     },
     {