Merge branch 'dev'

2024-05-08 18:01:43 +02:00
parent a5465d6483 6fcf8cd1da
commit f1f87bebf4
46 changed files with 1411 additions and 189 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -15,7 +15,6 @@ module.exports = {
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  rules: {
-    indent: ['error', 2],
    'prettier/prettier': [
      'error',
      {
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite Project</title>
+    <title>YoRHa System</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,14 @@
      "name": "vue-template",
      "version": "0.0.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/vue-fontawesome": "^3.0.3",
        "@vueuse/core": "^10.1.2",
        "pinia": "^2.0.35",
-        "vue": "^3.2.47",
+        "sass": "^1.62.1",
+        "vue": "^3.3.1",
        "vue-router": "^4.1.6"
      },
      "devDependencies": {
@@ -35,7 +40,7 @@
        "start-server-and-test": "^2.0.0",
        "tailwindcss": "^3.3.2",
        "typescript": "~5.0.4",
-        "vite": "^4.3.4",
+        "vite": "^4.3.5",
        "vitest": "^0.31.0",
        "vue-tsc": "^1.6.4"
      }
@@ -529,6 +534,60 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+      "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
    "node_modules/@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -612,8 +671,7 @@
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.15",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.18",
@@ -1151,56 +1209,6 @@
        "@vue/shared": "3.3.0-beta.5"
      }
    },
-    "node_modules/@volar/vue-language-core/node_modules/@vue/compiler-sfc": {
-      "version": "3.3.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.0-beta.5.tgz",
-      "integrity": "sha512-CbiY2dkzU5IG652ygLUSufLGvXPKI12TQp1PeHs9acjgFjhvSJCSKmAOaCWnXgFsAgpbipPHgAMfWJ8B0h6Sjw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.0-beta.5",
-        "@vue/compiler-dom": "3.3.0-beta.5",
-        "@vue/compiler-ssr": "3.3.0-beta.5",
-        "@vue/reactivity-transform": "3.3.0-beta.5",
-        "@vue/shared": "3.3.0-beta.5",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
-        "source-map-js": "^1.0.2"
-      }
-    },
-    "node_modules/@volar/vue-language-core/node_modules/@vue/compiler-ssr": {
-      "version": "3.3.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.0-beta.5.tgz",
-      "integrity": "sha512-16njciFrQ8ejVdH5tsaPbJwpkpBB2z2VWCxfC69UOylCgPxiW01syE9S/mozRvv5Ken9Sr9bd2MjebG/SEpPNg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.3.0-beta.5",
-        "@vue/shared": "3.3.0-beta.5"
-      }
-    },
-    "node_modules/@volar/vue-language-core/node_modules/@vue/reactivity": {
-      "version": "3.3.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.0-beta.5.tgz",
-      "integrity": "sha512-YrikWho94hX4lYoTKr1TtMtzzC8hSXVFw9sXlw2Fl6dyXDztu/djI2vNT4FbbcH1Hbm1+yKM09zrJYvkN/tlYA==",
-      "dev": true,
-      "dependencies": {
-        "@vue/shared": "3.3.0-beta.5"
-      }
-    },
-    "node_modules/@volar/vue-language-core/node_modules/@vue/reactivity-transform": {
-      "version": "3.3.0-beta.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.0-beta.5.tgz",
-      "integrity": "sha512-v/PCri6+vL8WwwgowHlIopwiqonCj9wV60ZYDdX8AMDxk9Q01h2cWh61JF4XOX7qDs7NdJ7zSVyKSz4B98OXBw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.0-beta.5",
-        "@vue/shared": "3.3.0-beta.5",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
-      }
-    },
    "node_modules/@volar/vue-language-core/node_modules/@vue/shared": {
      "version": "3.3.0-beta.5",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.0-beta.5.tgz",
@@ -1245,57 +1253,49 @@
      }
    },
    "node_modules/@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.1.tgz",
+      "integrity": "sha512-5le1qYSBgLWg2jdLrbydlhnPJkkzMw46UrRUvTnOKlfg6pThtm9ohhqBhNPHbr0RcM1MCbK5WZe/3Ghz0SZjpQ==",
      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.21.3",
+        "@vue/shared": "3.3.1",
        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.0.2"
      }
    },
    "node_modules/@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.1.tgz",
+      "integrity": "sha512-VmgIsoLivCft3+oNc5KM7b9wd0nZxP/g2qilMwi1hJyGA624KWnNKHn4hzBQs4FpzydUVpNy+TWVT8KiRCh3MQ==",
      "dependencies": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.3.1",
+        "@vue/shared": "3.3.1"
      }
    },
    "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.1.tgz",
+      "integrity": "sha512-G+FPwBbXSLaA4+Ry5/bdD9Oda+sRslQcE9o6JSZaougRiT4OjVL0vtkbQHPrGRTULZV28OcrAjRfSZOSB0OTXQ==",
      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.20.15",
+        "@vue/compiler-core": "3.3.1",
+        "@vue/compiler-dom": "3.3.1",
+        "@vue/compiler-ssr": "3.3.1",
+        "@vue/reactivity-transform": "3.3.1",
+        "@vue/shared": "3.3.1",
        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
+        "magic-string": "^0.30.0",
        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "source-map-js": "^1.0.2"
      }
    },
    "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.1.tgz",
+      "integrity": "sha512-QOQWGNCWuSeyKx4KvWSJlnIMGg+/2oCHgkFUYo7aJ+9Uaaz45yRgKQ+FNigy50NYBQIhpXn2e4OSR8GXh4knrQ==",
      "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.3.1",
+        "@vue/shared": "3.3.1"
      }
    },
    "node_modules/@vue/devtools-api": {
@@ -1342,68 +1342,60 @@
      }
    },
    "node_modules/@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.1.tgz",
+      "integrity": "sha512-zCfmazOtyUdC1NS/EPiSYJ4RqojqmTAviJyBbyVvY8zAv5NhK44Yfw0E1tt+m5vz0ZO1ptI9jDKBr3MWIEkpgw==",
      "dependencies": {
-        "@vue/shared": "3.2.47"
+        "@vue/shared": "3.3.1"
      }
    },
    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.1.tgz",
+      "integrity": "sha512-MkOrJauAGH4MNdxGW/PmrDegMyOGX0wGIdKUZJRBXOTpotDONg7/TPJe2QeGeBCow/5v9iOqZOWCfvmOWIaDMg==",
      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.20.15",
+        "@vue/compiler-core": "3.3.1",
+        "@vue/shared": "3.3.1",
        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
-      }
-    },
-    "node_modules/@vue/reactivity-transform/node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "magic-string": "^0.30.0"
      }
    },
    "node_modules/@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.1.tgz",
+      "integrity": "sha512-Ljb37LYafhQqKIasc0r32Cva8gIh6VeSMjlwO6V03tCjHd18gmjP0F4UD+8/a59sGTysAgA8Rb9lIC2DVxRz2Q==",
      "dependencies": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.3.1",
+        "@vue/shared": "3.3.1"
      }
    },
    "node_modules/@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.1.tgz",
+      "integrity": "sha512-NBjYbQPtMklb7lsJsM2Juv5Ygry6mvZP7PdH1GZqrzfLkvlplQT3qCtQMd/sib6yiy8t9m/Y4hVU7X9nzb9Oeg==",
      "dependencies": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/runtime-core": "3.3.1",
+        "@vue/shared": "3.3.1",
+        "csstype": "^3.1.1"
      }
    },
    "node_modules/@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.1.tgz",
+      "integrity": "sha512-sod8ggOwbkQXw3lBjfzrbdxRS9lw/lNHoMaXghHawNYowf+4WoaLWD5ouz6fPZadUqNKAsqK95p8DYb1vcVfPA==",
      "dependencies": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.3.1",
+        "@vue/shared": "3.3.1"
      },
      "peerDependencies": {
-        "vue": "3.2.47"
+        "vue": "3.3.1"
      }
    },
    "node_modules/@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.1.tgz",
+      "integrity": "sha512-ybDBtQ+479HL/bkeIOIAwgpeAEACzztkvulJLbK3JMFuTOv4qDivmV3AIsR8RHYJ+RD9tQxcHWBsX4GqEcYrfw=="
    },
    "node_modules/@vue/test-utils": {
      "version": "2.3.2",
@@ -1665,7 +1657,6 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@@ -1908,7 +1899,6 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@@ -1951,7 +1941,6 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
      "dependencies": {
        "fill-range": "^7.0.1"
      },
@@ -2163,7 +2152,6 @@
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
      "funding": [
        {
          "type": "individual",
@@ -2190,7 +2178,6 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@@ -2405,9 +2392,9 @@
      }
    },
    "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
    "node_modules/cypress": {
      "version": "12.11.0",
@@ -3338,7 +3325,6 @@
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -3477,7 +3463,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@@ -3932,6 +3917,11 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4041,7 +4031,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@@ -4120,7 +4109,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -4138,7 +4126,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@@ -4178,7 +4165,6 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -4787,7 +4773,6 @@
      "version": "0.30.0",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.4.13"
      },
@@ -5017,7 +5002,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -5494,7 +5478,6 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -5950,7 +5933,6 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@@ -6174,6 +6156,22 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "dev": true
    },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/saxes": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6304,14 +6302,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6320,12 +6310,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
-    },
    "node_modules/spdx-correct": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -6824,7 +6808,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
@@ -7245,15 +7228,15 @@
      }
    },
    "node_modules/vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.1.tgz",
+      "integrity": "sha512-3Rwy4I5idbPVSDZu6I+fFh6tdDSZbauImCTqLxE7y0LpHtiDvPeY01OI7RkFPbva1nk4hoO0sv/NzosH2h60sg==",
      "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.3.1",
+        "@vue/compiler-sfc": "3.3.1",
+        "@vue/runtime-dom": "3.3.1",
+        "@vue/server-renderer": "3.3.1",
+        "@vue/shared": "3.3.1"
      }
    },
    "node_modules/vue-eslint-parser": {
--- a/package.json
+++ b/package.json
@@ -15,9 +15,14 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@vueuse/core": "^10.1.2",
    "pinia": "^2.0.35",
-    "vue": "^3.2.47",
+    "sass": "^1.62.1",
+    "vue": "^3.3.1",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
@@ -42,7 +47,7 @@
    "start-server-and-test": "^2.0.0",
    "tailwindcss": "^3.3.2",
    "typescript": "~5.0.4",
-    "vite": "^4.3.4",
+    "vite": "^4.3.5",
    "vitest": "^0.31.0",
    "vue-tsc": "^1.6.4"
  }
--- a/public/backgrounds/tile-bg.svg
+++ b/public/backgrounds/tile-bg.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 5 5" style="enable-background:new 0 0 5 5;" xml:space="preserve">
+<polygon points="4.5,0 4.5,4.5 0,4.5 0,5 5,5 5,0 "/>
+</svg>
--- a/public/backgrounds/yorha-bg-left.svg
+++ b/public/backgrounds/yorha-bg-left.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511 566" style="enable-background:new 0 0 511 566;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{clip-path:url(#SVGID_00000054248822295797075820000001563571821240251807_);}
+	.st2{fill:none;stroke:#1D1D1B;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g class="st0">
+	<defs>
+		<rect id="SVGID_1_" y="0.5" class="st0" width="511.5" height="566"/>
+	</defs>
+	<clipPath id="SVGID_00000000912880200899487680000006902560803219149977_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000000912880200899487680000006902560803219149977_);">
+		<g>
+			<circle class="st2" cx="1.3" cy="2.2" r="179.1"/>
+			<line class="st2" x1="-177.9" y1="-177" x2="476.1" y2="477"/>
+			<line class="st2" x1="-231" y1="-177.1" x2="338" y2="391.9"/>
+			<line class="st2" x1="-131.2" y1="-177.1" x2="437.8" y2="391.9"/>
+			<circle class="st2" cx="1.3" cy="2.2" r="170.2"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/public/backgrounds/yorha-bg-right.svg
+++ b/public/backgrounds/yorha-bg-right.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511 566" style="enable-background:new 0 0 511 566;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{clip-path:url(#SVGID_00000158709037777668649130000009517331871316557969_);}
+	.st2{fill:none;stroke:#1D1D1B;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g class="st0">
+	<g>
+		<defs>
+			<rect id="SVGID_1_" y="0.5" width="511.5" height="566"/>
+		</defs>
+		<clipPath id="SVGID_00000057861603827395612620000008022258052803901577_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g style="clip-path:url(#SVGID_00000057861603827395612620000008022258052803901577_);">
+			<g>
+				<circle class="st2" cx="510.8" cy="565.7" r="179.1"/>
+				<line class="st2" x1="690" y1="744.9" x2="36" y2="90.9"/>
+				<line class="st2" x1="743.1" y1="745" x2="174.1" y2="176"/>
+				<line class="st2" x1="643.3" y1="745" x2="74.3" y2="176"/>
+				<circle class="st2" cx="510.8" cy="565.7" r="170.2"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
--- a/public/images/item-enhancement-icon.png
+++ b/public/images/item-enhancement-icon.png
--- a/public/images/item-enhancement-md.png
+++ b/public/images/item-enhancement-md.png
--- a/public/images/item-enhancement.png
+++ b/public/images/item-enhancement.png
--- a/public/images/item-restorative-icon.png
+++ b/public/images/item-restorative-icon.png
--- a/public/images/item-restorative-md.png
+++ b/public/images/item-restorative-md.png
--- a/public/images/item-restorative.png
+++ b/public/images/item-restorative.png
--- a/public/sounds/btn-click.mp3
+++ b/public/sounds/btn-click.mp3
--- a/public/sounds/btn-hover.mp3
+++ b/public/sounds/btn-hover.mp3
--- a/public/yorha-cursor.svg
+++ b/public/yorha-cursor.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#2D2C21;}
+</style>
+<rect x="28" y="23" transform="matrix(6.123234e-17 -1 1 6.123234e-17 5 54)" class="st0" width="3" height="3"/>
+<rect x="28" y="6" transform="matrix(6.123234e-17 -1 1 6.123234e-17 22 37)" class="st0" width="3" height="3"/>
+<g>
+	<path class="st0" d="M1,16l7,7l23-7L8,9L1,16z M10,16c0,0.8-0.7,1.5-1.5,1.5S7,16.8,7,16s0.7-1.5,1.5-1.5S10,15.2,10,16z"/>
+</g>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,5 +3,60 @@ import { RouterView } from 'vue-router'
 </script>

 <template>
-  <RouterView />
+  <div id="wrapper" class="py-16 px-8">
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+#wrapper {
+  position: relative;
+  min-height: 100dvh;
+  min-height: 100vh;
+  max-height: 100dvh;
+  max-height: 100vh;
+  overflow-x: hidden;
+
+  display: grid;
+  grid-template-rows: 1fr;
+  isolation: isolate;
+
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.12) 0%,
+    rgba(0, 0, 0, 0) 10%,
+    rgba(0, 0, 0, 0) 90%,
+    rgba(0, 0, 0, 0.12) 100%
+  );
+
+  &::after,
+  &::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 50%;
+    content: '';
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+
+  &::before {
+    left: 0;
+    background-image: url('/backgrounds/yorha-bg-left.svg');
+    background-position: left;
+  }
+  &::after {
+    right: 0;
+    background-image: url('/backgrounds/yorha-bg-right.svg');
+    background-position: right;
+  }
+}
+</style>
--- a/src/assets/animations/_fade.scss
+++ b/src/assets/animations/_fade.scss
@@ -0,0 +1,14 @@
+.fade {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.2s ease;
+  }
+}
--- a/src/assets/base/body.scss
+++ b/src/assets/base/body.scss
@@ -0,0 +1,8 @@
+body {
+  @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400 tracking-[-0.03em];
+  word-spacing: 0.5em;
+
+  &::before {
+    @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
+  }
+}
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @import 'base/body';
+}
+
+@layer utilities {
+  @import 'utilities/scrollbar';
+}
+
+/**
+* ANIMATIONS FOR TRANSITIONS
+*/
+@import 'animations/fade'
--- a/src/assets/utilities/_scrollbar.scss
+++ b/src/assets/utilities/_scrollbar.scss
@@ -0,0 +1,5 @@
+.y-scrollbar {
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+}
--- a/src/components/YrhBanner.vue
+++ b/src/components/YrhBanner.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="banner shadow-sharpest bg-y-beige-300 py-3 px-9">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 15px;
+    border-left-width: 8px;
+    border-right-width: 2px;
+    border-color: var(--color-y-beige-900);
+    opacity: 0.9;
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    content: '';
+    bottom: 5px;
+    right: 5px;
+    height: 8px;
+    width: 8px;
+    background-color: var(--color-y-beige-900);
+    opacity: 0.9;
+  }
+}
+</style>
--- a/src/components/YrhButton.vue
+++ b/src/components/YrhButton.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import { useElementHover, useFocus } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppConfig } from '@/stores/configStore'
+
+const router = useRouter()
+const { globalSound } = useAppConfig()
+
+const hoverSfx = new Audio('/sounds/btn-hover.mp3')
+const clickSfx = new Audio('/sounds/btn-click.mp3')
+hoverSfx.volume = globalSound
+clickSfx.volume = globalSound
+
+const btnRef = ref<HTMLElement | null>()
+const isBtnHovered = useElementHover(btnRef)
+const { focused: isBtnFocused } = useFocus(btnRef)
+
+const emit = defineEmits(['clicked'])
+
+const props = defineProps<{
+  href?: string
+  target?: string
+  rel?: string
+  disabled?: boolean
+  isActive?: boolean
+  hasSquare?: boolean
+  hasArrow?: boolean | 'force'
+  noBg?: boolean
+}>()
+
+const attributes = {
+  href: props.href,
+  target: props.target,
+  rel: props.rel,
+  disabled: props.disabled
+}
+
+const isInternalLink = computed(() => props.href && props.href.charAt(0) === '/')
+
+const elementTag = computed(() => {
+  if (props.href) {
+    if (isInternalLink.value) {
+      return 'button'
+    }
+    return 'a'
+  }
+  return 'button'
+})
+
+const shouldArrowDisplay = computed(
+  () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
+)
+
+function playHoverSfx() {
+  hoverSfx.play()
+}
+
+function handleClick(e: MouseEvent) {
+  clickSfx.play()
+  emit('clicked')
+
+  if (props.href && isInternalLink) {
+    router.push(props.href)
+  }
+}
+
+function handleMouseOver() {
+  if (!isBtnFocused.value) {
+    playHoverSfx()
+  }
+}
+
+function handleFocusin() {
+  if (!isBtnHovered.value) {
+    playHoverSfx()
+  }
+}
+</script>
+
+<template>
+  <component
+    ref="btnRef"
+    :is="elementTag"
+    v-bind="attributes"
+    class="btn inline-block w-full p-1 px-2 text-left"
+    :class="{
+      active: isActive,
+      'bg-y-beige-500 hover:shadow-md focus-visible:shadow-md': !noBg,
+      'text-y-beige-700': noBg
+    }"
+    @mousedown="handleClick"
+    @keyup.enter="handleClick"
+    @keyup.space="handleClick"
+    @focusin="handleFocusin"
+    @mouseover="handleMouseOver"
+  >
+    <Transition name="fade" :duration="{ enter: 100, leave: 100 }">
+      <img
+        v-if="shouldArrowDisplay"
+        src="/yorha-cursor.svg"
+        height="32"
+        width="32"
+        class="absolute top-1/2 -translate-y-1/2 -left-11 scale-90 pointer-events-none transition-all"
+        :class="{ 'invert-[.33] opacity-60': props.hasArrow === 'force' }"
+        alt=""
+      />
+    </Transition>
+    <span class="mr-1" v-if="hasSquare">
+      <font-awesome-icon :icon="['fas', 'square']" />
+    </span>
+    <slot />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  position: relative;
+  isolation: isolate;
+
+  transition-property: color;
+  transition-duration: 0.5s;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transition-delay: 0;
+
+  & + & {
+    margin-top: 1rem;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    left: 0;
+    height: 100%;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    top: 0;
+    left: 0;
+    width: 0%;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    background-color: var(--color-y-beige-700);
+    z-index: -1;
+  }
+
+  &::before {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    transition-property: border-color;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+    border-top: 0.05rem solid transparent;
+    border-bottom: 0.05rem solid transparent;
+  }
+
+  &:not(:focus, :hover, .active) {
+    transition-delay: 0.15s;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus,
+  &:hover,
+  &.active {
+    color: var(--color-y-beige-400);
+
+    &::before {
+      height: calc(100% + 0.35rem);
+      border-top-color: var(--color-y-beige-700);
+      border-bottom-color: var(--color-y-beige-700);
+    }
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+</style>
--- a/src/components/YrhCard.vue
+++ b/src/components/YrhCard.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+const slots = useSlots()
+
+const props = defineProps<{
+  breatheBottom?: boolean
+}>()
+</script>
+
+<template>
+  <article
+    class="h-full grid grid-rows-[auto_1fr_1fr_auto] gap-4 bg-y-beige-300"
+    :class="{ 'pb-4': props.breatheBottom }"
+  >
+    <header class="px-4 py-1 bg-y-beige-700">
+      <span class="tracking-wider text-lg text-y-beige-400">
+        <slot name="title" />
+      </span>
+    </header>
+
+    <figure v-if="slots.image" class="mx-4">
+      <div class="h-full bg-y-beige-500 grid place-items-center">
+        <slot name="image" />
+      </div>
+    </figure>
+
+    <div class="mx-4">
+      <slot name="content" />
+    </div>
+
+    <footer v-if="slots.footer" class="mx-4">
+      <slot name="footer" />
+    </footer>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+figure {
+  &::after {
+    content: '';
+    @apply block w-full h-[0.1rem] my-3 bg-y-beige-500;
+  }
+}
+</style>
--- a/src/components/YrhHeading.vue
+++ b/src/components/YrhHeading.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
+<template>
+  <div class="flex items-end">
+    <h1 class="text-4xl tracking-wider">
+      <slot />
+    </h1>
+    <span v-if="slots.subtitle" class="ml-2 text-lg font-medium">
+      <slot name="subtitle" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  text-shadow: 5px 5px 0px var(--color-y-beige-500);
+}
+</style>
--- a/src/components/YrhNav.vue
+++ b/src/components/YrhNav.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import YrhButton from './YrhButton.vue'
+
+const { bannerText } = storeToRefs(useBannerStore())
+
+const props = defineProps<{
+  items?: MenuItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'change-nav', key: string | null): void
+}>()
+
+const clickedKey = ref<string | null>(null)
+const activeKey = ref<string | null>(null)
+
+function handleClickedKey(e: Event, item: MenuItem) {
+  clickedKey.value = item.id
+  emit('change-nav', item.id)
+}
+
+function handleActiveBtn(e: Event, item: MenuItem) {
+  if (document.activeElement && e.type === 'mouseenter') {
+    ;(document.activeElement as HTMLElement).blur()
+  }
+
+  activeKey.value = item.id
+  bannerText.value = item.bannerText
+}
+
+function handleInactiveState() {
+  if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
+    bannerText.value = null
+  }
+  activeKey.value = null
+}
+</script>
+
+<template>
+  <div class="relative">
+    <menu v-if="props.items">
+      <li
+        v-for="item in props.items"
+        :key="item.id"
+        class="transition-all"
+        :class="item.id === clickedKey ? 'w-full' : 'w-11/12'"
+      >
+        <YrhButton
+          has-square
+          :href="item.href"
+          :has-arrow="item.id === clickedKey ? 'force' : true"
+          :is-active="item.id === clickedKey"
+          @mouseenter="handleActiveBtn($event, item)"
+          @focus="handleActiveBtn($event, item)"
+          @mouseleave="handleInactiveState"
+          @blur="handleInactiveState"
+          @clicked="handleClickedKey($event, item)"
+        >
+          {{ item.label }}
+        </YrhButton>
+      </li>
+    </menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  position: relative;
+  @apply pl-11;
+
+  li:not(:first-child) {
+    @apply mt-3;
+  }
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 15px;
+    border-left-width: 8px;
+    border-right-width: 2px;
+    border-color: var(--color-y-beige-900);
+    opacity: 0.25;
+  }
+}
+</style>
--- a/src/components/config/YrhAudioMenu.vue
+++ b/src/components/config/YrhAudioMenu.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import YrhAudioSlider from './YrhAudioSlider.vue'
+</script>
+
+<template>
+  <menu>
+    <li>
+      <YrhAudioSlider>Volume</YrhAudioSlider>
+    </li>
+  </menu>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  position: relative;
+  @apply pl-11;
+
+  li:not(:first-child) {
+    @apply mt-3;
+  }
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 15px;
+    border-left-width: 8px;
+    border-right-width: 2px;
+    border-color: var(--color-y-beige-900);
+    opacity: 0.25;
+  }
+}
+</style>
--- a/src/components/config/YrhAudioSlider.vue
+++ b/src/components/config/YrhAudioSlider.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import YrhButton from '../YrhButton.vue'
+</script>
+
+<template>
+  <YrhButton>
+    <slot />
+  </YrhButton>
+</template>
--- a/src/components/datas/YrhStatusCard.vue
+++ b/src/components/datas/YrhStatusCard.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { useStatusStore } from '@/stores/datas/statusStore'
+import { storeToRefs } from 'pinia'
+import YrhCard from '../YrhCard.vue'
+
+const { androidData } = storeToRefs(useStatusStore())
+</script>
+
+<template>
+  <YrhCard>
+    <template #title> Status </template>
+    <template #content>
+      <div class="flex justify-between">
+        <span>
+          {{ androidData.designation }}
+        </span>
+        <span> Lv : {{ androidData.level || 0 }} </span>
+      </div>
+      <hr class="my-2 border-t-2 border-y-beige-500" />
+      <div class="flex justify-between">
+        <span> Funds (G): </span>
+        <span> {{ androidData.funds || 0 }} </span>
+      </div>
+      <div class="flex justify-between">
+        <span> EXP: </span>
+        <span> {{ androidData.exp || 0 }} </span>
+      </div>
+      <div class="flex justify-between">
+        <span> HP: </span>
+        <span> {{ androidData.hp || 0 }} / {{ androidData.maxHp || 0 }} </span>
+      </div>
+      <hr class="my-2 border-t-2 border-y-beige-500" />
+      <div class="flex justify-between">
+        <span> Attack (Light) : </span>
+        <span> {{ androidData.attackLightBonus || 0 }} </span>
+      </div>
+      <div class="flex justify-between">
+        <span> Attack (Heavy) : </span>
+        <span> {{ androidData.attackHeavyBonus || 0 }} </span>
+      </div>
+      <div class="flex justify-between">
+        <span> Ranged Attack : </span>
+        <div class="flex gap-6">
+          <span>{{ androidData.attackRangedBonus || 0 }}&nbsp;+</span>
+          <span>{{ androidData.attackRangedRaw || 0 }}</span>
+        </div>
+      </div>
+      <div class="flex justify-between">
+        <span> Defense : </span>
+        <span> {{ androidData.defenseRaw || 0 }} </span>
+      </div>
+
+      <div class="mt-2 text-y-beige-500 flex justify-around">
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+        <font-awesome-icon :icon="['far', 'square']" />
+      </div>
+      <hr class="mt-2 mb-0 border-t-2 border-y-beige-500" />
+    </template>
+
+    <template #footer>
+      <div class="h-full grid place-items-center">
+        <span class="text-xs uppercase">No error</span>
+      </div>
+    </template>
+  </YrhCard>
+</template>
--- a/src/components/datas/items/ItemSelection.vue
+++ b/src/components/datas/items/ItemSelection.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import YrhButton from '@/components/YrhButton.vue'
+import type { GameItem } from '@/models/YrhGameItem'
+import { useItemStore } from '@/stores/datas/itemStore'
+import { storeToRefs } from 'pinia'
+
+const { currentItem } = storeToRefs(useItemStore())
+
+const props = defineProps<{
+  items: GameItem[]
+}>()
+
+function handleSelectedItem(item: GameItem) {
+  currentItem.value = item
+}
+</script>
+
+<template>
+  <div class="h-full relative pl-11">
+    <menu
+      class="h-[calc(100%-16px)] overflow-auto py-2 bg-y-beige-300 max-h-full shadow-sharpest y-scrollbar"
+    >
+      <li v-for="item in props.items" :key="item.name" class="mb-2 last:mb-0">
+        <YrhButton
+          no-bg
+          :has-arrow="item.name === currentItem?.name ? 'force' : true"
+          @clicked="handleSelectedItem(item)"
+          :is-active="item.name === currentItem?.name"
+        >
+          <span class="flex justify-between">
+            <span class="flex items-center">
+              <span v-if="item.category">
+                <img
+                  :src="`/images/item-${item.category}-icon.png`"
+                  class="pr-2"
+                  height="24"
+                  width="24"
+                  alt=""
+                />
+              </span>
+              <span>{{ item.name }}</span>
+            </span>
+            <span v-if="item.numberHeld">{{ item.numberHeld }}</span>
+          </span>
+        </YrhButton>
+      </li>
+    </menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  &::before {
+    @apply block absolute -top-2 -bottom-2 left-0 w-4;
+    content: '';
+    border-left-width: 8px;
+    border-right-width: 2px;
+    border-color: var(--color-y-beige-900);
+    opacity: 0.25;
+  }
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,20 @@
-import './assets/main.css'
-
+import './assets/main.scss'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faSquare } from '@fortawesome/free-solid-svg-icons'
+import { faSquare as faSquareHollow } from '@fortawesome/free-regular-svg-icons'
+
+/* add icons to the library */
+library.add(faSquare, faSquareHollow)
+
 const app = createApp(App)

 app.use(createPinia())
 app.use(router)
-
+app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')
--- a/src/models/YrhAndroidData.ts
+++ b/src/models/YrhAndroidData.ts
@@ -0,0 +1,15 @@
+export interface AndroidData {
+  designation: string
+  funds?: number
+  exp?: number
+  level?: number
+  hp?: number
+  maxHp?: number
+  attackLightRaw?: number
+  attackLightBonus?: number
+  attackHeavyRaw?: number
+  attackHeavyBonus?: number
+  attackRangedRaw?: number
+  attackRangedBonus?: number
+  defenseRaw?: number
+}
--- a/src/models/YrhGameItem.ts
+++ b/src/models/YrhGameItem.ts
@@ -0,0 +1,6 @@
+export interface GameItem {
+  name: string
+  description: string
+  category?: 'restorative' | 'enhancement' | 'support'
+  numberHeld?: number
+}
--- a/src/models/YrhNavItem.ts
+++ b/src/models/YrhNavItem.ts
@@ -0,0 +1,6 @@
+export interface MenuItem {
+  id: string
+  label: string
+  bannerText: string
+  href?: string
+}
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+
+import HomeVue from '../views/Home.vue'
+import DataVue from '../views/Data.vue'
+import ItemsVue from '@/views/datas/Items.vue'
+import ConfigVue from '@/views/Config.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -7,7 +11,24 @@ const router = createRouter({
    {
      path: '/',
      name: 'home',
-      component: HomeView
+      component: HomeVue
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: ConfigVue
+    },
+    {
+      path: '/data',
+      name: 'data',
+      component: DataVue,
+      children: [
+        {
+          path: 'items',
+          name: 'items',
+          component: ItemsVue
+        }
+      ]
    }
  ]
 })
--- a/src/stores/banner.ts
+++ b/src/stores/banner.ts
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useBannerStore = defineStore('bannerStore', () => {
+  const bannerText = ref<string | null>(null)
+
+  return { bannerText }
+})
--- a/src/stores/configStore.ts
+++ b/src/stores/configStore.ts
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppConfig = defineStore('appConfig', () => {
+  const globalSound = ref<number>(0.5)
+
+  return { globalSound }
+})
--- a/src/stores/datas/itemStore.ts
+++ b/src/stores/datas/itemStore.ts
@@ -0,0 +1,102 @@
+import type { GameItem } from '@/models/YrhGameItem'
+import { defineStore } from 'pinia'
+import { ref, type Ref } from 'vue'
+
+export const useItemStore = defineStore('itemStore', () => {
+  const availableItems: Ref<GameItem[]> = ref([
+    {
+      name: 'Melee Attack Up (S)',
+      description: 'Weapon attacks do double damage for 15 seconds.',
+      category: 'enhancement',
+      numberHeld: 4
+    },
+    {
+      name: 'Melee Attack Up (L)',
+      description: 'Weapon attacks do double damage for 30 seconds.',
+      category: 'enhancement',
+      numberHeld: 1
+    },
+    {
+      name: 'Melee Defense Up (S)',
+      description: 'Melee damage taken is reduced by 50% for 15 seconds.',
+      category: 'enhancement',
+      numberHeld: 4
+    },
+    {
+      name: 'Melee Defense Up (L)',
+      description: 'Melee damage taken is reduced by 50% for 30 seconds.',
+      category: 'enhancement',
+      numberHeld: 1
+    },
+    // {
+    //   name: 'Skill Salve (L)',
+    //   description: 'Skill gauge replenishes twice as fast for 30 seconds',
+    //   category: 'support',
+    //   numberHeld: 6
+    // },
+    {
+      name: 'Impact Bracer (S)',
+      description: 'Prevents staggering from an attack for 15 seconds',
+      category: 'enhancement',
+      numberHeld: 2
+    },
+    {
+      name: 'Impact Bracer (L)',
+      description: 'Prevents staggering from an attack for 30 seconds',
+      category: 'enhancement',
+      numberHeld: 34
+    },
+    {
+      name: "Popola's Booze",
+      description:
+        'Increases the power of weapon-based attacks by 50% for 30 seconds. Also restores 100% HP.',
+      numberHeld: 1
+    },
+    {
+      name: 'Small Recovery',
+      description: 'Restores 25% of HP.',
+      category: 'restorative',
+      numberHeld: 12
+    },
+    {
+      name: 'Medium Recovery',
+      description: 'Restores 75% of HP.',
+      category: 'restorative',
+      numberHeld: 31
+    },
+    {
+      name: 'Full Recovery',
+      description: 'Restores all of your HP.',
+      category: 'restorative',
+      numberHeld: 34
+    },
+    {
+      name: 'Visual Cure',
+      description: 'Cures visual status ailments.',
+      category: 'restorative',
+      numberHeld: 87
+    },
+    {
+      name: 'Aural Cure',
+      description: 'Cures aural status ailments.',
+      category: 'restorative',
+      numberHeld: 60
+    },
+    {
+      name: 'Cure Manipulation',
+      description: 'Cure control anomalies.',
+      category: 'restorative',
+      numberHeld: 39
+    },
+    {
+      name: 'Cure All + Heal All',
+      description: 'Restores 100% HP and cures all status ailments.',
+      category: 'restorative',
+      numberHeld: 2
+    }
+  ])
+
+  const currentItem = ref<GameItem | null>(availableItems.value[0])
+
+  return { currentItem, availableItems }
+})
--- a/src/stores/datas/statusStore.ts
+++ b/src/stores/datas/statusStore.ts
@@ -0,0 +1,22 @@
+import type { AndroidData } from '@/models/YrhAndroidData'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useStatusStore = defineStore('statusStore', () => {
+  const androidData = ref<AndroidData>({
+    designation: '9S',
+    funds: 5375,
+    exp: 74158,
+    hp: 2643,
+    maxHp: 2643,
+    attackLightBonus: 2338,
+    attackLightRaw: 234,
+    attackHeavyBonus: 1878,
+    attackHeavyRaw: 188,
+    attackRangedBonus: 150,
+    attackRangedRaw: 15,
+    defenseRaw: 734
+  })
+
+  return { androidData }
+})
--- a/src/views/Config.vue
+++ b/src/views/Config.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import YrhBanner from '@/components/YrhBanner.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhNav from '@/components/YrhNav.vue'
+import YrhAudioMenu from '@/components/config/YrhAudioMenu.vue'
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+import { ref, onMounted } from 'vue'
+
+const { bannerText } = storeToRefs(useBannerStore())
+
+const availableRoutes: MenuItem[] = [
+  {
+    id: 'language',
+    label: 'Language',
+    bannerText: 'Change terminal language'
+  },
+  {
+    id: 'audio',
+    label: 'Audio',
+    bannerText: 'Change audio settings'
+  }
+]
+
+const activeRoute = ref<string | null>('')
+function switchActiveRoute(key: string | null) {
+  activeRoute.value = key
+}
+
+onMounted(() => {
+  bannerText.value = null
+})
+</script>
+
+<template>
+  <main class="container grid grid-rows-[auto_1fr_5vh]">
+    <YrhHeading> SYSTEM CONFIGURATION </YrhHeading>
+    <div class="grid grid-cols-4 items-center">
+      <div>
+        <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
+      </div>
+      <Transition name="fade" mode="out-in">
+        <YrhAudioMenu v-if="activeRoute === 'language'">test 1</YrhAudioMenu>
+        <div v-else-if="activeRoute === 'audio'">test 2</div>
+      </Transition>
+    </div>
+    <div>
+      <YrhBanner>
+        <Transition name="fade">
+          <span v-if="bannerText">{{ bannerText }}</span>
+          <span v-else>&#8203;</span>
+        </Transition>
+      </YrhBanner>
+    </div>
+  </main>
+</template>
--- a/src/views/Data.vue
+++ b/src/views/Data.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import YrhBanner from '@/components/YrhBanner.vue'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+
+const { bannerText } = storeToRefs(useBannerStore())
+</script>
+
+<template>
+  <main class="container max-h-screen grid grid-rows-[auto_1fr_auto] overflow-auto">
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+
+    <YrhBanner>
+      <Transition name="fade">
+        <span v-if="bannerText">{{ bannerText }}</span>
+        <span v-else>&#8203;</span>
+      </Transition>
+    </YrhBanner>
+  </main>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import YrhBanner from '@/components/YrhBanner.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhNav from '@/components/YrhNav.vue'
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+import { ref, onMounted } from 'vue'
+
+const { bannerText } = storeToRefs(useBannerStore())
+
+const availableRoutes: MenuItem[] = [
+  {
+    id: 'current-data',
+    label: 'Current Data',
+    bannerText: 'Search through android data',
+    href: '/data/items'
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    bannerText: 'Modify android configuration',
+    href: '/config'
+  },
+  {
+    id: 'credits',
+    label: 'Credits',
+    bannerText: "Search through personnel's archive"
+  }
+]
+
+const settingsOptions: MenuItem[] = [
+  {
+    id: 'dark-mode',
+    label: 'Dark Mode',
+    bannerText: 'Alter the terminal appearance'
+  },
+  {
+    id: 'language',
+    label: 'Language',
+    bannerText: 'Change terminal language'
+  },
+  {
+    id: 'audio',
+    label: 'Audio',
+    bannerText: 'Change audio settings'
+  },
+  {
+    id: 'video',
+    label: 'Video',
+    bannerText: 'Change video settings'
+  },
+  {
+    id: 'controls',
+    label: 'Controls',
+    bannerText: 'Change keyboard or gamepad controls'
+  }
+]
+
+const activeRoute = ref<string | null>('')
+function switchActiveRoute(key: string | null) {
+  activeRoute.value = key
+}
+
+onMounted(() => {
+  bannerText.value = null
+})
+</script>
+
+<template>
+  <main class="container grid grid-rows-[auto_1fr_5vh]">
+    <YrhHeading> YORHA SYSTEM </YrhHeading>
+    <div class="grid grid-cols-4 items-center">
+      <div>
+        <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
+      </div>
+      <Transition name="fade" mode="out-in">
+        <YrhNav v-if="activeRoute === 'credits'" :items="settingsOptions" />
+      </Transition>
+    </div>
+    <div>
+      <YrhBanner>
+        <Transition name="fade">
+          <span v-if="bannerText">{{ bannerText }}</span>
+          <span v-else>&#8203;</span>
+        </Transition>
+      </YrhBanner>
+    </div>
+  </main>
+</template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +0,0 @@
-<template>
-  <main>
-    <h1 class="text-3xl font-bold underline">Hello world!</h1>
-  </main>
-</template>
--- a/src/views/datas/Items.vue
+++ b/src/views/datas/Items.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import YrhCard from '@/components/YrhCard.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
+import ItemSelection from '@/components/datas/items/ItemSelection.vue'
+import { useBannerStore } from '@/stores/banner'
+import { useItemStore } from '@/stores/datas/itemStore'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted } from 'vue'
+
+const { currentItem, availableItems } = storeToRefs(useItemStore())
+const { bannerText } = storeToRefs(useBannerStore())
+
+const currentItemImage = computed(() => {
+  switch (currentItem.value?.category) {
+    case 'enhancement':
+      return '/images/item-enhancement-md.png'
+
+    case 'restorative':
+      return '/images/item-restorative-md.png'
+
+    default:
+      return null
+  }
+})
+
+onMounted(() => {
+  bannerText.value = 'Select item'
+})
+</script>
+
+<template>
+  <YrhHeading>
+    ITEMS
+    <template #subtitle> All items </template>
+  </YrhHeading>
+  <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
+    <div class="items-container max-h-full overflow-hidden">
+      <ItemSelection :items="availableItems" />
+    </div>
+    <div class="max-h-full">
+      <Transition name="fade" mode="out-in">
+        <YrhCard v-if="currentItem" breathe-bottom>
+          <template #title> {{ currentItem.name }} </template>
+          <template #image>
+            <img v-if="currentItemImage" :src="currentItemImage" height="100" width="100" alt="" />
+          </template>
+          <template #content> {{ currentItem.description }} </template>
+          <template #footer>
+            <div class="text-right">
+              Number held :
+              <span>{{ currentItem.numberHeld }}&nbsp;/&nbsp;99</span>
+            </div>
+          </template>
+        </YrhCard>
+      </Transition>
+    </div>
+    <div class="max-h-full overflow-hidden">
+      <div class="h-full max-h-full y-scrollbar overflow-y-auto">
+        <YrhStatusCard />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.items-container {
+  @apply relative overflow-x-hidden;
+
+  &::before,
+  &::after {
+    content: '';
+    height: 0.1rem;
+    @apply block sticky ml-11 w-full h-2 left-14 -right-14 z-10 bg-y-beige-300;
+    border-color: rgba(45, 44, 33, 0.33);
+  }
+
+  &::before {
+    @apply top-0 border-b-2;
+  }
+  &::after {
+    @apply bottom-0 border-t-2;
+  }
+}
+</style>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,53 @@ module.exports = {
    container: {
      padding: '2rem',
      center: true
+    },
+    fontFamily: {
+      sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
+      serif: ['ui-serif', 'Georgia'],
+      mono: ['ui-monospace', 'SFMono-Regular'],
+      display: ['Oswald'],
+      body: ['Noto Sans']
+    },
+    extend: {
+      colors: {
+        'y-beige': {
+          DEFAULT: '#B0AB97',
+          50: '#FFFFFF',
+          100: '#F6F6F4',
+          200: '#E5E3DD',
+          300: '#D8D2B8',
+          400: '#cbc5af',
+          500: '#b0ab97',
+          600: '#767563',
+          700: '#4c4940',
+          800: '#3A382C',
+          900: '#2d2c21'
+        }
+      },
+      boxShadow: {
+        sharpest: '2px 2px #2d2c2150'
+      }
    }
  },
-  plugins: []
+  plugins: [
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey]
+
+          const newVars =
+            typeof value === 'string'
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`)
+
+          return { ...vars, ...newVars }
+        }, {})
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors'))
+      })
+    }
+  ]
 }