diff --git a/android/.idea/deploymentTargetSelector.xml b/android/.idea/deploymentTargetSelector.xml
index bd1abb9..ef8e150 100644
--- a/android/.idea/deploymentTargetSelector.xml
+++ b/android/.idea/deploymentTargetSelector.xml
@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-06-06T20:24:50.545472Z">
+        <DropdownSelection timestamp="2024-07-10T16:45:28.007239Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="LocalEmulator" identifier="path=/Users/kimtrinh/.android/avd/Pixel_8_API_33.avd" />
diff --git a/android/.idea/migrations.xml b/android/.idea/migrations.xml
new file mode 100644
index 0000000..f8051a6
--- /dev/null
+++ b/android/.idea/migrations.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectMigrations">
+    <option name="MigrateToGradleLocalJavaHome">
+      <set>
+        <option value="$PROJECT_DIR$" />
+      </set>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/android/app/src/main/AndroidManifest.xml.orig b/android/app/src/main/AndroidManifest.xml.orig
deleted file mode 100644
index 3e6ee0a..0000000
--- a/android/app/src/main/AndroidManifest.xml.orig
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
-        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name="io.ionic.starter.MainActivity" android:screenOrientation="portrait" android:theme="@style/AppTheme.NoActionBarLaunch">
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
-        </activity>
-        <provider android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
-            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
-        </provider>
-    </application>
-    <uses-permission-sdk-23 android:name="android.permission.READ_MEDIA_IMAGES" />
-    <uses-permission-sdk-23 android:name="android.permission.VIBRATE" />
-    <uses-permission-sdk-23 android:name="android.permission.INTERNET" />
-    <uses-permission-sdk-23 android:name="android.permission.READ_EXTERNAL_STORAGE" />
-    <uses-permission-sdk-23 android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-    <uses-permission-sdk-23 android:name="android.permission.ACCESS_FINE_LOCATION" />
-    <uses-permission-sdk-23 android:name="android.permission.ACCESS_COARSE_LOCATION" />
-</manifest>
diff --git a/android/app/src/main/java/com/mona/starter/MainActivity.java b/android/app/src/main/java/com/mona/starter/MainActivity.java
new file mode 100644
index 0000000..03c6e77
--- /dev/null
+++ b/android/app/src/main/java/com/mona/starter/MainActivity.java
@@ -0,0 +1,5 @@
+package com.mona.starter;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}
diff --git a/src/assets/drawable/badges/borough/locked/11.svg b/public/assets/drawable/badges/borough/locked/11.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/11.svg
rename to public/assets/drawable/badges/borough/locked/11.svg
diff --git a/src/assets/drawable/badges/borough/locked/12.svg b/public/assets/drawable/badges/borough/locked/12.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/12.svg
rename to public/assets/drawable/badges/borough/locked/12.svg
diff --git a/src/assets/drawable/badges/borough/locked/13.svg b/public/assets/drawable/badges/borough/locked/13.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/13.svg
rename to public/assets/drawable/badges/borough/locked/13.svg
diff --git a/src/assets/drawable/badges/borough/locked/14.svg b/public/assets/drawable/badges/borough/locked/14.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/14.svg
rename to public/assets/drawable/badges/borough/locked/14.svg
diff --git a/src/assets/drawable/badges/borough/locked/15.svg b/public/assets/drawable/badges/borough/locked/15.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/15.svg
rename to public/assets/drawable/badges/borough/locked/15.svg
diff --git a/src/assets/drawable/badges/borough/locked/16.svg b/public/assets/drawable/badges/borough/locked/16.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/16.svg
rename to public/assets/drawable/badges/borough/locked/16.svg
diff --git a/src/assets/drawable/badges/borough/locked/17.svg b/public/assets/drawable/badges/borough/locked/17.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/17.svg
rename to public/assets/drawable/badges/borough/locked/17.svg
diff --git a/src/assets/drawable/badges/borough/locked/18.svg b/public/assets/drawable/badges/borough/locked/18.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/18.svg
rename to public/assets/drawable/badges/borough/locked/18.svg
diff --git a/src/assets/drawable/badges/borough/locked/19.svg b/public/assets/drawable/badges/borough/locked/19.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/19.svg
rename to public/assets/drawable/badges/borough/locked/19.svg
diff --git a/src/assets/drawable/badges/borough/locked/20.svg b/public/assets/drawable/badges/borough/locked/20.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/20.svg
rename to public/assets/drawable/badges/borough/locked/20.svg
diff --git a/src/assets/drawable/badges/borough/locked/21.svg b/public/assets/drawable/badges/borough/locked/21.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/21.svg
rename to public/assets/drawable/badges/borough/locked/21.svg
diff --git a/src/assets/drawable/badges/borough/locked/22.svg b/public/assets/drawable/badges/borough/locked/22.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/22.svg
rename to public/assets/drawable/badges/borough/locked/22.svg
diff --git a/src/assets/drawable/badges/borough/locked/23.svg b/public/assets/drawable/badges/borough/locked/23.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/locked/23.svg
rename to public/assets/drawable/badges/borough/locked/23.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/11.svg b/public/assets/drawable/badges/borough/unlocked/11.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/11.svg
rename to public/assets/drawable/badges/borough/unlocked/11.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/12.svg b/public/assets/drawable/badges/borough/unlocked/12.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/12.svg
rename to public/assets/drawable/badges/borough/unlocked/12.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/13.svg b/public/assets/drawable/badges/borough/unlocked/13.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/13.svg
rename to public/assets/drawable/badges/borough/unlocked/13.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/14.svg b/public/assets/drawable/badges/borough/unlocked/14.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/14.svg
rename to public/assets/drawable/badges/borough/unlocked/14.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/15.svg b/public/assets/drawable/badges/borough/unlocked/15.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/15.svg
rename to public/assets/drawable/badges/borough/unlocked/15.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/16.svg b/public/assets/drawable/badges/borough/unlocked/16.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/16.svg
rename to public/assets/drawable/badges/borough/unlocked/16.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/17.svg b/public/assets/drawable/badges/borough/unlocked/17.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/17.svg
rename to public/assets/drawable/badges/borough/unlocked/17.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/18.svg b/public/assets/drawable/badges/borough/unlocked/18.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/18.svg
rename to public/assets/drawable/badges/borough/unlocked/18.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/19.svg b/public/assets/drawable/badges/borough/unlocked/19.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/19.svg
rename to public/assets/drawable/badges/borough/unlocked/19.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/20.svg b/public/assets/drawable/badges/borough/unlocked/20.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/20.svg
rename to public/assets/drawable/badges/borough/unlocked/20.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/21.svg b/public/assets/drawable/badges/borough/unlocked/21.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/21.svg
rename to public/assets/drawable/badges/borough/unlocked/21.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/22.svg b/public/assets/drawable/badges/borough/unlocked/22.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/22.svg
rename to public/assets/drawable/badges/borough/unlocked/22.svg
diff --git a/src/assets/drawable/badges/borough/unlocked/23.svg b/public/assets/drawable/badges/borough/unlocked/23.svg
similarity index 100%
rename from src/assets/drawable/badges/borough/unlocked/23.svg
rename to public/assets/drawable/badges/borough/unlocked/23.svg
diff --git a/src/assets/drawable/badges/category/locked/24.svg b/public/assets/drawable/badges/category/locked/24.svg
similarity index 100%
rename from src/assets/drawable/badges/category/locked/24.svg
rename to public/assets/drawable/badges/category/locked/24.svg
diff --git a/src/assets/drawable/badges/category/locked/25.svg b/public/assets/drawable/badges/category/locked/25.svg
similarity index 100%
rename from src/assets/drawable/badges/category/locked/25.svg
rename to public/assets/drawable/badges/category/locked/25.svg
diff --git a/src/assets/drawable/badges/category/locked/26.svg b/public/assets/drawable/badges/category/locked/26.svg
similarity index 100%
rename from src/assets/drawable/badges/category/locked/26.svg
rename to public/assets/drawable/badges/category/locked/26.svg
diff --git a/src/assets/drawable/badges/category/locked/28.svg b/public/assets/drawable/badges/category/locked/28.svg
similarity index 100%
rename from src/assets/drawable/badges/category/locked/28.svg
rename to public/assets/drawable/badges/category/locked/28.svg
diff --git a/src/assets/drawable/badges/category/unlocked/24.svg b/public/assets/drawable/badges/category/unlocked/24.svg
similarity index 100%
rename from src/assets/drawable/badges/category/unlocked/24.svg
rename to public/assets/drawable/badges/category/unlocked/24.svg
diff --git a/src/assets/drawable/badges/category/unlocked/25.svg b/public/assets/drawable/badges/category/unlocked/25.svg
similarity index 100%
rename from src/assets/drawable/badges/category/unlocked/25.svg
rename to public/assets/drawable/badges/category/unlocked/25.svg
diff --git a/src/assets/drawable/badges/category/unlocked/26.svg b/public/assets/drawable/badges/category/unlocked/26.svg
similarity index 100%
rename from src/assets/drawable/badges/category/unlocked/26.svg
rename to public/assets/drawable/badges/category/unlocked/26.svg
diff --git a/src/assets/drawable/badges/category/unlocked/28.svg b/public/assets/drawable/badges/category/unlocked/28.svg
similarity index 100%
rename from src/assets/drawable/badges/category/unlocked/28.svg
rename to public/assets/drawable/badges/category/unlocked/28.svg
diff --git a/src/assets/drawable/badges/count/locked/1.svg b/public/assets/drawable/badges/count/locked/1.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/1.svg
rename to public/assets/drawable/badges/count/locked/1.svg
diff --git a/src/assets/drawable/badges/count/locked/2.svg b/public/assets/drawable/badges/count/locked/2.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/2.svg
rename to public/assets/drawable/badges/count/locked/2.svg
diff --git a/src/assets/drawable/badges/count/locked/3.svg b/public/assets/drawable/badges/count/locked/3.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/3.svg
rename to public/assets/drawable/badges/count/locked/3.svg
diff --git a/src/assets/drawable/badges/count/locked/4.svg b/public/assets/drawable/badges/count/locked/4.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/4.svg
rename to public/assets/drawable/badges/count/locked/4.svg
diff --git a/src/assets/drawable/badges/count/locked/5.svg b/public/assets/drawable/badges/count/locked/5.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/5.svg
rename to public/assets/drawable/badges/count/locked/5.svg
diff --git a/src/assets/drawable/badges/count/locked/6.svg b/public/assets/drawable/badges/count/locked/6.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/6.svg
rename to public/assets/drawable/badges/count/locked/6.svg
diff --git a/src/assets/drawable/badges/count/locked/7.svg b/public/assets/drawable/badges/count/locked/7.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/7.svg
rename to public/assets/drawable/badges/count/locked/7.svg
diff --git a/src/assets/drawable/badges/count/locked/8.svg b/public/assets/drawable/badges/count/locked/8.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/8.svg
rename to public/assets/drawable/badges/count/locked/8.svg
diff --git a/src/assets/drawable/badges/count/locked/9.svg b/public/assets/drawable/badges/count/locked/9.svg
similarity index 100%
rename from src/assets/drawable/badges/count/locked/9.svg
rename to public/assets/drawable/badges/count/locked/9.svg
diff --git a/src/assets/drawable/badges/count/unlocked/1.svg b/public/assets/drawable/badges/count/unlocked/1.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/1.svg
rename to public/assets/drawable/badges/count/unlocked/1.svg
diff --git a/src/assets/drawable/badges/count/unlocked/2.svg b/public/assets/drawable/badges/count/unlocked/2.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/2.svg
rename to public/assets/drawable/badges/count/unlocked/2.svg
diff --git a/src/assets/drawable/badges/count/unlocked/3.svg b/public/assets/drawable/badges/count/unlocked/3.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/3.svg
rename to public/assets/drawable/badges/count/unlocked/3.svg
diff --git a/src/assets/drawable/badges/count/unlocked/4.svg b/public/assets/drawable/badges/count/unlocked/4.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/4.svg
rename to public/assets/drawable/badges/count/unlocked/4.svg
diff --git a/src/assets/drawable/badges/count/unlocked/5.svg b/public/assets/drawable/badges/count/unlocked/5.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/5.svg
rename to public/assets/drawable/badges/count/unlocked/5.svg
diff --git a/src/assets/drawable/badges/count/unlocked/6.svg b/public/assets/drawable/badges/count/unlocked/6.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/6.svg
rename to public/assets/drawable/badges/count/unlocked/6.svg
diff --git a/src/assets/drawable/badges/count/unlocked/7.svg b/public/assets/drawable/badges/count/unlocked/7.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/7.svg
rename to public/assets/drawable/badges/count/unlocked/7.svg
diff --git a/src/assets/drawable/badges/count/unlocked/8.svg b/public/assets/drawable/badges/count/unlocked/8.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/8.svg
rename to public/assets/drawable/badges/count/unlocked/8.svg
diff --git a/src/assets/drawable/badges/count/unlocked/9.svg b/public/assets/drawable/badges/count/unlocked/9.svg
similarity index 100%
rename from src/assets/drawable/badges/count/unlocked/9.svg
rename to public/assets/drawable/badges/count/unlocked/9.svg
diff --git a/src/assets/drawable/badges/owner/locked/10.svg b/public/assets/drawable/badges/owner/locked/10.svg
similarity index 100%
rename from src/assets/drawable/badges/owner/locked/10.svg
rename to public/assets/drawable/badges/owner/locked/10.svg
diff --git a/src/assets/drawable/badges/owner/locked/27.svg b/public/assets/drawable/badges/owner/locked/27.svg
similarity index 100%
rename from src/assets/drawable/badges/owner/locked/27.svg
rename to public/assets/drawable/badges/owner/locked/27.svg
diff --git a/src/assets/drawable/badges/owner/unlocked/10.svg b/public/assets/drawable/badges/owner/unlocked/10.svg
similarity index 100%
rename from src/assets/drawable/badges/owner/unlocked/10.svg
rename to public/assets/drawable/badges/owner/unlocked/10.svg
diff --git a/src/assets/drawable/badges/owner/unlocked/27.svg b/public/assets/drawable/badges/owner/unlocked/27.svg
similarity index 100%
rename from src/assets/drawable/badges/owner/unlocked/27.svg
rename to public/assets/drawable/badges/owner/unlocked/27.svg
diff --git a/src/assets/drawable/icons/active_collection_tab_icon.svg b/public/assets/drawable/icons/active_collection_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/active_collection_tab_icon.svg
rename to public/assets/drawable/icons/active_collection_tab_icon.svg
diff --git a/src/assets/drawable/icons/active_list_tab_icon.svg b/public/assets/drawable/icons/active_list_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/active_list_tab_icon.svg
rename to public/assets/drawable/icons/active_list_tab_icon.svg
diff --git a/src/assets/drawable/icons/active_map_tab_icon.svg b/public/assets/drawable/icons/active_map_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/active_map_tab_icon.svg
rename to public/assets/drawable/icons/active_map_tab_icon.svg
diff --git a/src/assets/drawable/icons/active_more_tab_icon.svg b/public/assets/drawable/icons/active_more_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/active_more_tab_icon.svg
rename to public/assets/drawable/icons/active_more_tab_icon.svg
diff --git a/src/assets/drawable/icons/calendar.svg b/public/assets/drawable/icons/calendar.svg
similarity index 100%
rename from src/assets/drawable/icons/calendar.svg
rename to public/assets/drawable/icons/calendar.svg
diff --git a/public/assets/drawable/icons/calendar_black.svg b/public/assets/drawable/icons/calendar_black.svg
new file mode 100644
index 0000000..76fa909
--- /dev/null
+++ b/public/assets/drawable/icons/calendar_black.svg
@@ -0,0 +1,12 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1130_2861)">
+<path d="M28.2929 27.6029C30.2766 27.6029 31.8846 25.9948 31.8846 24.0112C31.8846 22.0275 30.2766 20.4194 28.2929 20.4194C26.3092 20.4194 24.7012 22.0275 24.7012 24.0112C24.7012 25.9948 26.3092 27.6029 28.2929 27.6029Z" fill="#FADA00"/>
+<path d="M7.14453 37.1946V43.4387H39.5374V31.7715C39.5374 31.7715 24.932 31.9881 20.2153 33.8686C17.4864 34.9554 9.98624 37.7735 7.14453 37.1946Z" fill="#FADA00"/>
+<path d="M32.7453 4.80894V2H31.0705V4.80894H15.8662V2H14.1914V4.80894H4.8125V46H42.2262V4.80894H32.7453ZM40.6169 44.3907H6.42177V18.5423H40.6169V44.3907ZM40.6169 16.9331H6.42177V6.4182H14.1914V9.17435H15.8662V6.4182H31.0723V9.17435H32.7471V6.4182H40.6187V16.9331H40.6169Z" fill="#1D1D1B"/>
+</g>
+<defs>
+<clipPath id="clip0_1130_2861">
+<rect width="37.4137" height="44" fill="white" transform="translate(4.8125 2)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/drawable/icons/collection.svg b/public/assets/drawable/icons/collection.svg
new file mode 100644
index 0000000..444bf9a
--- /dev/null
+++ b/public/assets/drawable/icons/collection.svg
@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1130_2890)">
+<path d="M6.45544 4V9.55481H4V11.0528H6.45544V16.9025H4V18.4005H6.45544V24.2501H4V25.7482H6.45544V31.5978H4V33.0958H6.45544V38.9455H4V40.4435H6.45544V45.9983H42.4075V4H6.45544ZM40.9095 44.502H7.95344V40.4452H10.658V38.9472H7.95344V33.0975H10.658V31.5995H7.95344V25.7498H10.658V24.2518H7.95344V18.4022H10.658V16.9042H7.95344V11.0528H10.658V9.55481H7.95344V5.498H40.9095V44.502Z" fill="#1D1D1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.3431 15.5654L28.4595 21.6913L35.3208 22.7419L30.3506 27.6427L31.5046 34.4345L25.3431 31.2843L19.1478 34.4345L20.3018 27.6427L15.3672 22.7419L22.2285 21.6913L25.3431 15.5654Z" fill="#FADA00"/>
+</g>
+<defs>
+<clipPath id="clip0_1130_2890">
+<rect width="38.4075" height="42" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/drawable/icons/collection_white.svg b/public/assets/drawable/icons/collection_white.svg
similarity index 100%
rename from src/assets/drawable/icons/collection_white.svg
rename to public/assets/drawable/icons/collection_white.svg
diff --git a/public/assets/drawable/icons/dots_more.svg b/public/assets/drawable/icons/dots_more.svg
new file mode 100644
index 0000000..d57d509
--- /dev/null
+++ b/public/assets/drawable/icons/dots_more.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1130_2894)">
+<path d="M24 4C12.9713 4 4 12.9713 4 24C4 35.0287 12.9713 44 24 44C35.0287 44 44 35.0287 44 24C44 12.9713 35.0287 4 24 4ZM24 42.7806C13.6438 42.7806 5.21941 34.3562 5.21941 24C5.21941 13.6438 13.6438 5.21941 24 5.21941C34.3562 5.21941 42.7806 13.6438 42.7806 24C42.7806 34.3562 34.3562 42.7806 24 42.7806Z" fill="#1D1D1B"/>
+<path d="M17.1196 26.1153C18.2876 25.6315 18.8422 24.2925 18.3584 23.1246C17.8746 21.9566 16.5356 21.402 15.3677 21.8858C14.1997 22.3695 13.6451 23.7085 14.1289 24.8765C14.6127 26.0444 15.9517 26.5991 17.1196 26.1153Z" fill="#1D1D1B"/>
+<path d="M24.8745 26.1158C26.0424 25.632 26.5971 24.293 26.1133 23.125C25.6295 21.9571 24.2905 21.4025 23.1226 21.8862C21.9546 22.37 21.4 23.709 21.8838 24.877C22.3676 26.0449 23.7065 26.5995 24.8745 26.1158Z" fill="#1D1D1B"/>
+<path d="M32.6323 26.1153C33.8003 25.6315 34.3549 24.2925 33.8711 23.1246C33.3873 21.9566 32.0483 21.402 30.8804 21.8858C29.7124 22.3695 29.1578 23.7085 29.6416 24.8765C30.1254 26.0444 31.4644 26.5991 32.6323 26.1153Z" fill="#1D1D1B"/>
+</g>
+<defs>
+<clipPath id="clip0_1130_2894">
+<rect width="40" height="40" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/drawable/icons/inactive_collection_tab_icon.svg b/public/assets/drawable/icons/inactive_collection_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/inactive_collection_tab_icon.svg
rename to public/assets/drawable/icons/inactive_collection_tab_icon.svg
diff --git a/src/assets/drawable/icons/inactive_list_tab_icon.svg b/public/assets/drawable/icons/inactive_list_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/inactive_list_tab_icon.svg
rename to public/assets/drawable/icons/inactive_list_tab_icon.svg
diff --git a/src/assets/drawable/icons/inactive_map_tab_icon.svg b/public/assets/drawable/icons/inactive_map_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/inactive_map_tab_icon.svg
rename to public/assets/drawable/icons/inactive_map_tab_icon.svg
diff --git a/src/assets/drawable/icons/inactive_more_tab_icon.svg b/public/assets/drawable/icons/inactive_more_tab_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/inactive_more_tab_icon.svg
rename to public/assets/drawable/icons/inactive_more_tab_icon.svg
diff --git a/public/assets/drawable/icons/list.svg b/public/assets/drawable/icons/list.svg
new file mode 100644
index 0000000..86c0adc
--- /dev/null
+++ b/public/assets/drawable/icons/list.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.1003 17.5545C34.1003 19.516 32.5102 21.1061 30.5487 21.1061C28.5872 21.1061 26.9971 19.516 26.9971 17.5545C26.9971 15.593 28.5872 14.0029 30.5487 14.0029C32.5102 14.0029 34.1003 15.593 34.1003 17.5545ZM12.2217 42.9143V36.7399H12.2235C15.0334 37.3124 22.4499 34.5258 25.1482 33.4512C29.8123 31.5917 37.6841 31.3774 37.6841 31.3774V42.9143H12.2217Z" fill="#FADA00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5049 4H6.59375V5.65609H43.5049V4ZM43.5049 44.3438H6.59375V45.9998H43.5049V44.3438ZM11.1048 9.76367H6.59375V11.4198H11.1048V9.76367ZM11.1048 15.5264H6.59375V17.1825H11.1048V15.5264ZM6.59375 21.29H11.1048V22.9461H6.59375V21.29ZM11.1048 27.0537H6.59375V28.7098H11.1048V27.0537ZM6.59375 32.8179H11.1048V34.474H6.59375V32.8179ZM11.1048 38.5801H6.59375V40.2362H11.1048V38.5801ZM38.9941 9.76367H43.5052V11.4198H38.9941V9.76367ZM43.5052 15.5264H38.9941V17.1825H43.5052V15.5264ZM38.9941 21.29H43.5052V22.9461H38.9941V21.29ZM43.5052 27.0537H38.9941V28.7098H43.5052V27.0537ZM38.9941 32.8179H43.5052V34.474H38.9941V32.8179ZM43.5052 38.5801H38.9941V40.2362H43.5052V38.5801Z" fill="#1D1D1B"/>
+</svg>
diff --git a/public/assets/drawable/icons/location.svg b/public/assets/drawable/icons/location.svg
new file mode 100644
index 0000000..7c708bd
--- /dev/null
+++ b/public/assets/drawable/icons/location.svg
@@ -0,0 +1,4 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.202945" cx="15.5" cy="15.5" r="15.5" fill="#489DFF"/>
+<circle cx="15.5" cy="15.5" r="8.5" fill="#489DFF"/>
+</svg>
diff --git a/src/assets/drawable/icons/location_icon.svg b/public/assets/drawable/icons/location_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/location_icon.svg
rename to public/assets/drawable/icons/location_icon.svg
diff --git a/src/assets/drawable/icons/map.svg b/public/assets/drawable/icons/map.svg
similarity index 100%
rename from src/assets/drawable/icons/map.svg
rename to public/assets/drawable/icons/map.svg
diff --git a/public/assets/drawable/icons/map_colored.svg b/public/assets/drawable/icons/map_colored.svg
new file mode 100644
index 0000000..b795921
--- /dev/null
+++ b/public/assets/drawable/icons/map_colored.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.8744 6.13983C43.6794 6.00032 43.4307 5.96334 43.2038 6.03898L35.6013 8.6157L28.0006 6.03898C27.8443 5.98687 27.6779 5.99192 27.5249 6.04234V6.03898L19.9293 8.61234L12.8361 6.04402C12.6765 5.98519 12.5033 5.98856 12.3453 6.04234V6.03898L4.50425 8.69638C4.2017 8.79891 4 9.08129 4 9.40065V41.4558C4 41.6945 4.11598 41.9197 4.31095 42.0592C4.4387 42.1517 4.58997 42.1987 4.74461 42.1987C4.82529 42.1987 4.90597 42.1853 4.98329 42.1601L12.5773 39.5867L19.6704 42.155V42.1517C19.7528 42.1803 19.8368 42.2004 19.9225 42.2004C20.0032 42.2004 20.0839 42.187 20.1612 42.1618L27.7636 39.585L35.366 42.1618C35.4433 42.1887 35.524 42.2004 35.6047 42.2004C35.6854 42.2004 35.7661 42.1853 35.8417 42.1601L43.6811 39.5044C43.9837 39.4018 44.1854 39.1195 44.1854 38.8001V6.74325C44.1854 6.50457 44.0694 6.27934 43.8744 6.13983ZM19.1779 40.3969L13.3253 38.2774V25.4829C13.0177 25.5282 12.7034 25.5602 12.3823 25.5602C12.1991 25.5602 12.0176 25.5484 11.8394 25.5333V38.2673L5.48586 40.4204V9.93347L11.8394 7.78032V12.8043C12.0193 12.7892 12.1991 12.7774 12.3823 12.7774C12.7034 12.7774 13.016 12.8094 13.3253 12.8548V7.80217L19.1779 9.92171V40.3969ZM27.0173 38.2656L20.6638 40.4187V9.93347L27.0173 7.78032V38.2656ZM34.8567 40.4187L28.5032 38.2656V7.78032L34.8567 9.93347V40.4187ZM42.6961 38.2656L36.3426 40.4187V9.93347L42.6961 7.78032V38.2656Z" fill="#1D1D1B"/>
+<path d="M12.3842 24.699C15.4392 24.699 17.9158 22.2224 17.9158 19.1674C17.9158 16.1123 15.4392 13.6357 12.3842 13.6357C9.32913 13.6357 6.85254 16.1123 6.85254 19.1674C6.85254 22.2224 9.32913 24.699 12.3842 24.699Z" fill="#FADA00"/>
+</svg>
diff --git a/src/assets/drawable/icons/settings_icon.svg b/public/assets/drawable/icons/settings_icon.svg
similarity index 100%
rename from src/assets/drawable/icons/settings_icon.svg
rename to public/assets/drawable/icons/settings_icon.svg
diff --git a/src/assets/drawable/icons/target.svg b/public/assets/drawable/icons/target.svg
similarity index 100%
rename from src/assets/drawable/icons/target.svg
rename to public/assets/drawable/icons/target.svg
diff --git a/src/assets/drawable/icons/target_black.svg b/public/assets/drawable/icons/target_black.svg
similarity index 100%
rename from src/assets/drawable/icons/target_black.svg
rename to public/assets/drawable/icons/target_black.svg
diff --git a/src/assets/drawable/medals/artwork/collected.svg b/public/assets/drawable/medals/artwork/collected.svg
similarity index 100%
rename from src/assets/drawable/medals/artwork/collected.svg
rename to public/assets/drawable/medals/artwork/collected.svg
diff --git a/src/assets/drawable/medals/artwork/default.svg b/public/assets/drawable/medals/artwork/default.svg
similarity index 100%
rename from src/assets/drawable/medals/artwork/default.svg
rename to public/assets/drawable/medals/artwork/default.svg
diff --git a/src/assets/drawable/medals/artwork/targeted.svg b/public/assets/drawable/medals/artwork/targeted.svg
similarity index 100%
rename from src/assets/drawable/medals/artwork/targeted.svg
rename to public/assets/drawable/medals/artwork/targeted.svg
diff --git a/src/assets/drawable/medals/heritage/collected.svg b/public/assets/drawable/medals/heritage/collected.svg
similarity index 100%
rename from src/assets/drawable/medals/heritage/collected.svg
rename to public/assets/drawable/medals/heritage/collected.svg
diff --git a/src/assets/drawable/medals/heritage/default.svg b/public/assets/drawable/medals/heritage/default.svg
similarity index 100%
rename from src/assets/drawable/medals/heritage/default.svg
rename to public/assets/drawable/medals/heritage/default.svg
diff --git a/src/assets/drawable/medals/heritage/targeted.svg b/public/assets/drawable/medals/heritage/targeted.svg
similarity index 100%
rename from src/assets/drawable/medals/heritage/targeted.svg
rename to public/assets/drawable/medals/heritage/targeted.svg
diff --git a/src/assets/drawable/medals/place/collected.svg b/public/assets/drawable/medals/place/collected.svg
similarity index 100%
rename from src/assets/drawable/medals/place/collected.svg
rename to public/assets/drawable/medals/place/collected.svg
diff --git a/src/assets/drawable/medals/place/default.svg b/public/assets/drawable/medals/place/default.svg
similarity index 100%
rename from src/assets/drawable/medals/place/default.svg
rename to public/assets/drawable/medals/place/default.svg
diff --git a/src/assets/drawable/medals/place/targeted.svg b/public/assets/drawable/medals/place/targeted.svg
similarity index 100%
rename from src/assets/drawable/medals/place/targeted.svg
rename to public/assets/drawable/medals/place/targeted.svg
diff --git a/src/assets/drawable/mona_logo_med.png b/public/assets/drawable/mona_logo_med.png
similarity index 100%
rename from src/assets/drawable/mona_logo_med.png
rename to public/assets/drawable/mona_logo_med.png
diff --git a/src/assets/drawable/photo_placeholder.jpg b/public/assets/drawable/photo_placeholder.jpg
similarity index 100%
rename from src/assets/drawable/photo_placeholder.jpg
rename to public/assets/drawable/photo_placeholder.jpg
diff --git a/src/assets/drawable/pins/artwork/collected.png b/public/assets/drawable/pins/artwork/collected.png
similarity index 100%
rename from src/assets/drawable/pins/artwork/collected.png
rename to public/assets/drawable/pins/artwork/collected.png
diff --git a/src/assets/drawable/pins/artwork/default.png b/public/assets/drawable/pins/artwork/default.png
similarity index 100%
rename from src/assets/drawable/pins/artwork/default.png
rename to public/assets/drawable/pins/artwork/default.png
diff --git a/src/assets/drawable/pins/artwork/targeted.png b/public/assets/drawable/pins/artwork/targeted.png
similarity index 100%
rename from src/assets/drawable/pins/artwork/targeted.png
rename to public/assets/drawable/pins/artwork/targeted.png
diff --git a/src/assets/drawable/pins/heritage/collected.png b/public/assets/drawable/pins/heritage/collected.png
similarity index 100%
rename from src/assets/drawable/pins/heritage/collected.png
rename to public/assets/drawable/pins/heritage/collected.png
diff --git a/src/assets/drawable/pins/heritage/default.png b/public/assets/drawable/pins/heritage/default.png
similarity index 100%
rename from src/assets/drawable/pins/heritage/default.png
rename to public/assets/drawable/pins/heritage/default.png
diff --git a/src/assets/drawable/pins/heritage/targeted.png b/public/assets/drawable/pins/heritage/targeted.png
similarity index 100%
rename from src/assets/drawable/pins/heritage/targeted.png
rename to public/assets/drawable/pins/heritage/targeted.png
diff --git a/src/assets/drawable/pins/location.png b/public/assets/drawable/pins/location.png
similarity index 100%
rename from src/assets/drawable/pins/location.png
rename to public/assets/drawable/pins/location.png
diff --git a/src/assets/drawable/pins/place/collected.png b/public/assets/drawable/pins/place/collected.png
similarity index 100%
rename from src/assets/drawable/pins/place/collected.png
rename to public/assets/drawable/pins/place/collected.png
diff --git a/src/assets/drawable/pins/place/default.png b/public/assets/drawable/pins/place/default.png
similarity index 100%
rename from src/assets/drawable/pins/place/default.png
rename to public/assets/drawable/pins/place/default.png
diff --git a/src/assets/drawable/pins/place/targeted.png b/public/assets/drawable/pins/place/targeted.png
similarity index 100%
rename from src/assets/drawable/pins/place/targeted.png
rename to public/assets/drawable/pins/place/targeted.png
diff --git a/src/assets/drawable/pins/selected_pin.svg b/public/assets/drawable/pins/selected_pin.svg
similarity index 100%
rename from src/assets/drawable/pins/selected_pin.svg
rename to public/assets/drawable/pins/selected_pin.svg
diff --git a/src/assets/drawable/tutorial/page 1.jpg b/public/assets/drawable/tutorial/page 1.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 1.jpg
rename to public/assets/drawable/tutorial/page 1.jpg
diff --git a/src/assets/drawable/tutorial/page 10.jpg b/public/assets/drawable/tutorial/page 10.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 10.jpg
rename to public/assets/drawable/tutorial/page 10.jpg
diff --git a/src/assets/drawable/tutorial/page 11.jpg b/public/assets/drawable/tutorial/page 11.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 11.jpg
rename to public/assets/drawable/tutorial/page 11.jpg
diff --git a/src/assets/drawable/tutorial/page 12.jpg b/public/assets/drawable/tutorial/page 12.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 12.jpg
rename to public/assets/drawable/tutorial/page 12.jpg
diff --git a/src/assets/drawable/tutorial/page 2.jpg b/public/assets/drawable/tutorial/page 2.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 2.jpg
rename to public/assets/drawable/tutorial/page 2.jpg
diff --git a/src/assets/drawable/tutorial/page 3.jpg b/public/assets/drawable/tutorial/page 3.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 3.jpg
rename to public/assets/drawable/tutorial/page 3.jpg
diff --git a/src/assets/drawable/tutorial/page 4.jpg b/public/assets/drawable/tutorial/page 4.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 4.jpg
rename to public/assets/drawable/tutorial/page 4.jpg
diff --git a/src/assets/drawable/tutorial/page 5.jpg b/public/assets/drawable/tutorial/page 5.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 5.jpg
rename to public/assets/drawable/tutorial/page 5.jpg
diff --git a/src/assets/drawable/tutorial/page 6.jpg b/public/assets/drawable/tutorial/page 6.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 6.jpg
rename to public/assets/drawable/tutorial/page 6.jpg
diff --git a/src/assets/drawable/tutorial/page 7.jpg b/public/assets/drawable/tutorial/page 7.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 7.jpg
rename to public/assets/drawable/tutorial/page 7.jpg
diff --git a/src/assets/drawable/tutorial/page 8.jpg b/public/assets/drawable/tutorial/page 8.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 8.jpg
rename to public/assets/drawable/tutorial/page 8.jpg
diff --git a/src/assets/drawable/tutorial/page 9.jpg b/public/assets/drawable/tutorial/page 9.jpg
similarity index 100%
rename from src/assets/drawable/tutorial/page 9.jpg
rename to public/assets/drawable/tutorial/page 9.jpg
diff --git a/src/components/CollectionContainer.vue b/src/components/CollectionContainer.vue
index cd97e1a..1a5111f 100644
--- a/src/components/CollectionContainer.vue
+++ b/src/components/CollectionContainer.vue
@@ -73,7 +73,7 @@ import {
   IonRefresherContent,
 } from "@ionic/vue";
 import Utils from "@/internal/Utils";
-import customCollectionIcon from "@/assets/drawable/icons/collection_white.svg";
+import customCollectionIcon from "/assets/drawable/icons/collection_white.svg";
 import { Directory, Filesystem } from "@capacitor/filesystem";
 import BadgesContainer from "@/components/BadgesContainer.vue";
 
@@ -130,7 +130,7 @@ export default {
       const { filename } = UserData.getCollected(id, dType);
       if (filename == null) {
         // Use default thumbnail
-        return require("@/assets/drawable/photo_placeholder.jpg");
+        return require("./assets/drawable/photo_placeholder.jpg");
       } else {
         Filesystem.readFile({
           path: "thumbnail/" + filename,
@@ -149,7 +149,7 @@ export default {
             console.log(err);
             document.getElementById(
               `user-photo-${id}-${dType}`,
-            ).src = require("@/assets/drawable/photo_placeholder.jpg");
+            ).src = require("./assets/drawable/photo_placeholder.jpg");
           });
       }
     },
diff --git a/src/components/MapContainer.vue b/src/components/MapContainer.vue
index 3c8177c..d9779d7 100644
--- a/src/components/MapContainer.vue
+++ b/src/components/MapContainer.vue
@@ -17,22 +17,31 @@
     <ion-icon :icon="settingsIcon"></ion-icon>
   </ion-button>
 
-  <ion-button @click="recenterView" id="recenter-button" :class="{ 'map-button': true, userLocationInViewport: isUserLocationInViewport, userLocationOutsideViewport: isUserLocationOutsideViewport }" :fill="isUserLocationInViewport ? 'outline' : 'solid'">
-  <ion-icon :icon="locationIcon"></ion-icon>Recentrer la carte
+  <ion-button
+    @click="recenterView"
+    id="recenter-button"
+    :class="{
+      'map-button': true,
+      userLocationInViewport: isUserLocationInViewport,
+      userLocationOutsideViewport: isUserLocationOutsideViewport,
+    }"
+    :fill="isUserLocationInViewport ? 'outline' : 'solid'"
+  >
+    <ion-icon :icon="locationIcon"></ion-icon>Recentrer la carte
   </ion-button>
 </template>
 
 <script>
 import "ol/ol.css";
 
-import { arrowForward as arrowRightIcon} from "ionicons/icons";
+import { arrowForward as arrowRightIcon } from "ionicons/icons";
 import { IonButton, IonIcon } from "@ionic/vue";
 
 import Map from "ol/Map";
 import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
 import { Group as layerGroup } from "ol/layer";
-import {useGeographic} from "ol/proj";
+import { useGeographic } from "ol/proj";
 import Point from "ol/geom/Point";
 import Feature from "ol/Feature";
 import { OSM, Stamen } from "ol/source";
@@ -44,18 +53,16 @@ import { easeOut } from "ol/easing";
 import { UserData } from "@/internal/databases/UserData";
 import Utils from "@/internal/Utils";
 import { useRoute } from "vue-router";
-import {Fill, Icon, Stroke, Style} from "ol/style";
+import { Fill, Icon, Stroke, Style } from "ol/style";
 import CircleStyle from "ol/style/Circle.js";
-import {circular} from "ol/geom/Polygon.js";
-import customLocationIcon from "@/assets/drawable/icons/location_icon.svg";
-import customSettingsIcon from "@/assets/drawable/icons/settings_icon.svg";
-import {containsCoordinate} from "ol/extent.js";
+import { circular } from "ol/geom/Polygon.js";
+import customLocationIcon from "/assets/drawable/icons/location_icon.svg";
+import customSettingsIcon from "/assets/drawable/icons/settings_icon.svg";
+import { containsCoordinate } from "ol/extent.js";
 
-//TODO: find out why images are not displayed
 // This variable is here to know if the user focuses (previous click is) on a discovery or not
 let hasFocus = false;
 
-
 function insertAllPins(destinationLayer, discoveryList) {
   for (const discovery of discoveryList) {
     const feature = new Feature({
@@ -168,26 +175,28 @@ export default {
       const viewCenterY = this.mainMap.getView().getCenter()[1].toFixed(7);
 
       // (Extent of viewport on map represented by [smallest viewport x, smallest viewport y, biggest viewport x, biggest viewport y])
-      const viewportExtent = this.mainMap.getView().calculateExtent(this.mainMap.getSize());
+      const viewportExtent = this.mainMap
+        .getView()
+        .calculateExtent(this.mainMap.getSize());
 
       // userLocationOutsideViewport button
-        // User location out of viewport
-        if (!containsCoordinate(viewportExtent, UserData.getLocation())) {
-          this.isUserLocationInViewport = false;
-          this.isUserLocationOutsideViewport = true;
-        }
+      // User location out of viewport
+      if (!containsCoordinate(viewportExtent, UserData.getLocation())) {
+        this.isUserLocationInViewport = false;
+        this.isUserLocationOutsideViewport = true;
+      }
       //Default button
-        // View centered (view center = user location coordinates)
-        else if (userLocationX === viewCenterX && userLocationY === viewCenterY) {
-          this.isUserLocationInViewport = false;
-          this.isUserLocationOutsideViewport = false;
-        }
+      // View centered (view center = user location coordinates)
+      else if (userLocationX === viewCenterX && userLocationY === viewCenterY) {
+        this.isUserLocationInViewport = false;
+        this.isUserLocationOutsideViewport = false;
+      }
       //userLocationInViewport button
-        // Not centered, but in viewport (view center != user coordinates && user location coordinates in viewport)
-        else {
-          this.isUserLocationInViewport = true;
-          this.isUserLocationOutsideViewport = false;
-        }
+      // Not centered, but in viewport (view center != user coordinates && user location coordinates in viewport)
+      else {
+        this.isUserLocationInViewport = true;
+        this.isUserLocationOutsideViewport = false;
+      }
     },
 
     renderMap() {
@@ -223,11 +232,15 @@ export default {
       // if there's selected pin, highlights it
       if (this.$route.query.type && this.$route.query.id) {
         const discovery = Utils.getDiscovery(
-            parseInt(this.$route.query.id),
-            this.$route.query.type,
+          parseInt(this.$route.query.id),
+          this.$route.query.type,
         );
-        this.highlightSelectedDiscoveryPin(pinsLayer.getStyle(), pinsLayer, discovery);
-      // if not, if there's a formerly selected pin, returns it back to its original style
+        this.highlightSelectedDiscoveryPin(
+          pinsLayer.getStyle(),
+          pinsLayer,
+          discovery,
+        );
+        // if not, if there's a formerly selected pin, returns it back to its original style
       } else {
         if (this.formerSelectedPinFeature) {
           this.formerSelectedPinFeature.setStyle(pinsLayer.getStyle());
@@ -238,7 +251,11 @@ export default {
     },
 
     // Makes selected discovery pin bigger and re-establishes former selected pin's size
-    highlightSelectedDiscoveryPin(unselectedPinStyle, destinationLayer, selectedPinDiscovery) {
+    highlightSelectedDiscoveryPin(
+      unselectedPinStyle,
+      destinationLayer,
+      selectedPinDiscovery,
+    ) {
       // if there was a selected pin before, make former selected pin back to normal scale
       if (this.formerSelectedPinFeature) {
         this.formerSelectedPinFeature.setStyle(unselectedPinStyle);
@@ -246,20 +263,23 @@ export default {
 
       // Setting new style for selected pin
       // Get feature on the map that corresponds to selected pin
-      const selectedFeature = destinationLayer.getSource().getClosestFeatureToCoordinate(
-          [selectedPinDiscovery.location.lng, selectedPinDiscovery.location.lat]);
+      const selectedFeature = destinationLayer
+        .getSource()
+        .getClosestFeatureToCoordinate([
+          selectedPinDiscovery.location.lng,
+          selectedPinDiscovery.location.lat,
+        ]);
 
       const selectedPinStyle = new Style({
         image: new Icon({
           anchor: [0.5, 1],
-          src: `src/assets/drawable/pins/selected_pin.svg`,
+          src: `./assets/drawable/pins/selected_pin.svg`,
           scale: 0.83, // Augment selected pin size
         }),
       });
       selectedFeature.setStyle(selectedPinStyle);
 
       this.formerSelectedPinFeature = selectedFeature; // assign currently selected pin as former selected pin
-
     },
 
     showLocation() {
@@ -272,12 +292,13 @@ export default {
               color: "rgba(72, 157, 255, 0.202945)",
             }),
           }),
-        ]
+        ],
       });
       locationAccuracyLayer.getSource().addFeature(
         new Feature({
           geometry: circular(UserData.getLocation(), UserData.getAccuracy()),
-        }));
+        }),
+      );
       this.mainMap.addLayer(locationAccuracyLayer);
 
       //User location icon (blue opaque circle with white outline)
@@ -294,18 +315,18 @@ export default {
             }),
           }),
           new Style({
-          image: new CircleStyle({
-            stroke: new Stroke({
-              color: 'white',
-              width: 3,
-            }),
-            fill: new Fill({
-              color: "#489DFF",
+            image: new CircleStyle({
+              stroke: new Stroke({
+                color: "white",
+                width: 3,
+              }),
+              fill: new Fill({
+                color: "#489DFF",
+              }),
+              radius: 7,
             }),
-            radius: 7,
           }),
-        }),
-        ]
+        ],
       });
       const userPointFeature = new Feature({
         geometry: new Point(UserData.getLocation()),
@@ -314,14 +335,16 @@ export default {
       this.mainMap.addLayer(userLocationLayer);
 
       // Update location and accuracy radius every 5 seconds
-      setInterval(
-        () => {
-          userPointFeature.getGeometry().setCoordinates(UserData.getLocation());
-          // TODO Update location accuracy layer -- how? Not sure if this works:
-          locationAccuracyLayer.getSource().getFeatures()[0].setGeometry(circular(UserData.getLocation(), UserData.getAccuracy()));
-          },
-        5000,
-      );
+      setInterval(() => {
+        userPointFeature.getGeometry().setCoordinates(UserData.getLocation());
+        // TODO Update location accuracy layer -- how? Not sure if this works:
+        locationAccuracyLayer
+          .getSource()
+          .getFeatures()[0]
+          .setGeometry(
+            circular(UserData.getLocation(), UserData.getAccuracy()),
+          );
+      }, 5000);
     },
 
     changeTileLayer() {
@@ -344,7 +367,7 @@ export default {
         this.mainMap.setLayerGroup(stamenLayer);
         UserData.setMapStyle("stamen");
 
-      // Switch to OSM map layer
+        // Switch to OSM map layer
       } /* if (UserData.getMapStyle() === "stamen") */ else {
         const osmLayer = new layerGroup({
           layers: [
@@ -382,7 +405,6 @@ export default {
 
         this.focusDiscovery(discovery);
         hasFocus = true;
-
       } else {
         // Close pop-up
         if (hasFocus) {
diff --git a/src/internal/CollectedBadges.ts b/src/internal/CollectedBadges.ts
index 6c3dfb4..6f09e3e 100644
--- a/src/internal/CollectedBadges.ts
+++ b/src/internal/CollectedBadges.ts
@@ -12,23 +12,20 @@ export class CollectedBadge {
   private static boroughCollection = [] as any;
   private static categoryCollection = [] as any;
   private static ownerCollection = [] as any;
-  private static countPathLocked = "src/assets/drawable/badges/count/locked/";
-  private static countPathUnlocked =
-    "src/assets/drawable/badges/count/unlocked/";
+  private static countPathLocked = "/assets/drawable/badges/count/locked/";
+  private static countPathUnlocked = "/assets/drawable/badges/count/unlocked/";
 
   private static boroughPathUnlocked =
-    "src/assets/drawable/badges/borough/unlocked/";
-  private static boroughPathLocked =
-    "src/assets/drawable/badges/borough/locked/";
+    "/assets/drawable/badges/borough/unlocked/";
+  private static boroughPathLocked = "/assets/drawable/badges/borough/locked/";
 
-  private static ownerPathUnlocked =
-    "src/assets/drawable/badges/owner/unlocked/";
-  private static ownerPathLocked = "src/assets/drawable/badges/owner/locked/";
+  private static ownerPathUnlocked = "/assets/drawable/badges/owner/unlocked/";
+  private static ownerPathLocked = "/assets/drawable/badges/owner/locked/";
 
   private static categoryPathUnlocked =
-    "src/assets/drawable/badges/category/unlocked/";
+    "/assets/drawable/badges/category/unlocked/";
   private static categoryPathLocked =
-    "src/assets/drawable/badges/category/locked/";
+    "/assets/drawable/badges/category/locked/";
 
   public static collecteBadges() {
     const tmpBoroughContainer = new Map<string, number>();
diff --git a/src/internal/Utils.ts b/src/internal/Utils.ts
index 2723df7..bbb4d61 100644
--- a/src/internal/Utils.ts
+++ b/src/internal/Utils.ts
@@ -307,7 +307,7 @@ export default {
     const style = new Style({
       image: new Icon({
         anchor: [0.5, 1],
-        src: `src/assets/drawable/pins/${type}/${status}.png`,
+        src: `./assets/drawable/pins/${type}/${status}.png`,
         scale: 0.5,
       }),
     });
diff --git a/src/stores/BadgesCollections.ts b/src/stores/BadgesCollections.ts
index 84f5620..16f51b8 100644
--- a/src/stores/BadgesCollections.ts
+++ b/src/stores/BadgesCollections.ts
@@ -5,17 +5,17 @@ import { UserData } from "@/internal/databases/UserData";
 import { BadgeDatabase } from "@/internal/databases/BadgeDatabase";
 import { Artwork, Heritage, Place } from "@/internal/Types";
 
-const countPathLocked = "src/assets/drawable/badges/count/locked/";
-const countPathUnlocked = "src/assets/drawable/badges/count/unlocked/";
+const countPathLocked = "/assets/drawable/badges/count/locked/";
+const countPathUnlocked = "/assets/drawable/badges/count/unlocked/";
 
-const boroughPathUnlocked = "src/assets/drawable/badges/borough/unlocked/";
-const boroughPathLocked = "src/assets/drawable/badges/borough/locked/";
+const boroughPathUnlocked = "/assets/drawable/badges/borough/unlocked/";
+const boroughPathLocked = "/assets/drawable/badges/borough/locked/";
 
-const ownerPathUnlocked = "src/assets/drawable/badges/owner/unlocked/";
-const ownerPathLocked = "src/assets/drawable/badges/owner/locked/";
+const ownerPathUnlocked = "/assets/drawable/badges/owner/unlocked/";
+const ownerPathLocked = "/assets/drawable/badges/owner/locked/";
 
-const categoryPathUnlocked = "src/assets/drawable/badges/category/unlocked/";
-const categoryPathLocked = "src/assets/drawable/badges/category/locked/";
+const categoryPathUnlocked = "/assets/drawable/badges/category/unlocked/";
+const categoryPathLocked = "/assets/drawable/badges/category/locked/";
 
 export const useBadgesCollections = defineStore("badgesCollectionStore", {
   state: () => {
diff --git a/src/views/DiscoveryDetailsPage.vue b/src/views/DiscoveryDetailsPage.vue
index 8b937d0..7a707d0 100644
--- a/src/views/DiscoveryDetailsPage.vue
+++ b/src/views/DiscoveryDetailsPage.vue
@@ -14,7 +14,7 @@
         <div class="photoContainer">
           <ion-img
             id="defaultPhoto"
-            :src="'src/assets/drawable/mona_logo_med.png'"
+            :src="'./assets/drawable/mona_logo_med.png'"
           ></ion-img>
           <ion-img id="userPhoto"></ion-img>
         </div>
@@ -115,9 +115,9 @@ import { DiscoveryEnum } from "@/internal/Types";
 import { UserData } from "@/internal/databases/UserData";
 import Utils from "@/internal/Utils";
 import { Directory, Filesystem } from "@capacitor/filesystem";
-import targetIconWhite from "@/assets/drawable/icons/target.svg";
-import targetIconBlack from "@/assets/drawable/icons/target_black.svg";
-import customMapIcon from "@/assets/drawable/icons/map.svg";
+import targetIconWhite from "/assets/drawable/icons/target.svg";
+import targetIconBlack from "/assets/drawable/icons/target_black.svg";
+import customMapIcon from "/assets/drawable/icons/map.svg";
 
 export default {
   name: "discovery-details",
diff --git a/src/views/ListPage.vue b/src/views/ListPage.vue
index 478441d..a5f0cbe 100644
--- a/src/views/ListPage.vue
+++ b/src/views/ListPage.vue
@@ -11,18 +11,18 @@
         <p id="tab-title">Liste des découvertes à faire</p>
         <!-- triggerTextFilter function triggered each 500 ms when search bar value changes-->
         <ion-searchbar
-            show-clear-button="always"
-            placeholder="Chercher"
-            :debounce="500"
-            @ion-clear="triggerTextFilter('')"
-            @change="triggerTextFilter($event.target.value)"
-            @keydown.enter="triggerTextFilter($event.target.value)"
+          show-clear-button="always"
+          placeholder="Chercher"
+          :debounce="500"
+          @ion-clear="triggerTextFilter('')"
+          @change="triggerTextFilter($event.target.value)"
+          @keydown.enter="triggerTextFilter($event.target.value)"
         ></ion-searchbar>
         <ion-button
-            id="open-modal"
-            class="filters-button"
-            shape="round"
-            fill="outline"
+          id="open-modal"
+          class="filters-button"
+          shape="round"
+          fill="outline"
         >
           <ion-icon :icon="filterOutline"></ion-icon>
           Filtrer
@@ -31,20 +31,20 @@
         <!-- Results list -->
         <ion-list :inset="true" lines="none" :key="componentKey">
           <ion-item
-              id="list"
-              v-for="discovery of getDiscoveries()"
-              :key="discovery"
-              @click="openDetails(discovery)"
+            id="list"
+            v-for="discovery of getDiscoveries()"
+            :key="discovery"
+            @click="openDetails(discovery)"
           >
             <!-- Discovery icon -->
             <ion-avatar slot="start">
-              <img :src="getDiscoveryMedalIcon(discovery)" alt=""/>
+              <img :src="getDiscoveryMedalIcon(discovery)" alt="" />
             </ion-avatar>
             <!-- Discovery to user distance  -->
             <ion-label id="distance" position="fixed" class="ion-text-wrap"
-            >{{
+              >{{
                 Distance.distance2string(
-                    Distance.calculateDistance(discovery, lat2, lng2),
+                  Distance.calculateDistance(discovery, lat2, lng2),
                 )
               }}
             </ion-label>
@@ -60,27 +60,27 @@
 
       <!-- Filtres modal window opened when clicking Filtrer button -->
       <ion-modal
-          ref="modal"
-          trigger="open-modal"
-          :initial-breakpoint="0.4"
-          :breakpoints="[0, 0.2, 0.4]"
+        ref="modal"
+        trigger="open-modal"
+        :initial-breakpoint="0.4"
+        :breakpoints="[0, 0.2, 0.4]"
       >
         <!-- Filtres modal window content -->
         <ion-content>
           <ion-toolbar id="modal-header">
             <ion-icon
-                class="modal-icon"
-                size="medium"
-                slot="start"
-                :src="optionsOutline"
+              class="modal-icon"
+              size="medium"
+              slot="start"
+              :src="optionsOutline"
             ></ion-icon>
             <ion-text id="modal-heading"><p>Filtres</p></ion-text>
             <ion-icon
-                class="modal-icon"
-                size="medium"
-                slot="end"
-                :src="close"
-                @click="dismiss()"
+              class="modal-icon"
+              size="medium"
+              slot="end"
+              :src="close"
+              @click="dismiss()"
             ></ion-icon>
           </ion-toolbar>
 
@@ -107,55 +107,51 @@
           <ion-row class="ion-justify-content-between">
             <!-- Oeuvres select button -->
             <ion-col
-                class="filtre"
-                size="3"
-                @click="selectedDiscovery(artwork)"
-                :style="{
+              class="filtre"
+              size="3"
+              @click="selectedDiscovery(artwork)"
+              :style="{
                 color: artwork.color,
                 backgroundColor: artwork.backgroundColor,
               }"
             >
               <div class="filter-category">
                 <ion-avatar>
-                  <img
-                      :src="'src/assets/drawable/medals/artwork/default.svg'"
-                  />
+                  <img :src="'./assets/drawable/medals/artwork/default.svg'" />
                 </ion-avatar>
                 <ion-text>Œuvres</ion-text>
               </div>
             </ion-col>
             <!-- Patrimoines select button -->
             <ion-col
-                class="filtre"
-                size="4"
-                @click="selectedDiscovery(heritage)"
-                :style="{
+              class="filtre"
+              size="4"
+              @click="selectedDiscovery(heritage)"
+              :style="{
                 color: heritage.color,
                 backgroundColor: heritage.backgroundColor,
               }"
             >
               <div class="filter-category">
                 <ion-avatar>
-                  <img
-                      :src="'src/assets/drawable/medals/heritage/default.svg'"
-                  />
+                  <img :src="'./assets/drawable/medals/heritage/default.svg'" />
                 </ion-avatar>
                 <ion-text>Patrimoines</ion-text>
               </div>
             </ion-col>
             <!-- Lieux select button -->
             <ion-col
-                class="filtre"
-                size="3"
-                @click="selectedDiscovery(place)"
-                :style="{
+              class="filtre"
+              size="3"
+              @click="selectedDiscovery(place)"
+              :style="{
                 color: place.color,
                 backgroundColor: place.backgroundColor,
               }"
             >
               <div class="filter-category">
                 <ion-avatar>
-                  <img :src="'src/assets/drawable/medals/place/default.svg'"/>
+                  <img :src="'./assets/drawable/medals/place/default.svg'" />
                 </ion-avatar>
                 <ion-text>Lieux</ion-text>
               </div>
@@ -196,9 +192,9 @@ import {
   IonRadio,
   IonRadioGroup,
 } from "@ionic/vue";
-import {filterOutline, close, optionsOutline, reload} from "ionicons/icons";
-import {UserData} from "@/internal/databases/UserData";
-import {Distance} from "../internal/Distance";
+import { filterOutline, close, optionsOutline, reload } from "ionicons/icons";
+import { UserData } from "@/internal/databases/UserData";
+import { Distance } from "../internal/Distance";
 //TODO: find out why images are not displayed
 export default {
   name: "ListPage",
@@ -341,41 +337,41 @@ export default {
       let subset;
       const type = typeDiscovery ? typeDiscovery.type : "";
       const completeDiscoveries = sortByAZ
-          ? "completeDiscoveriesAZ"
-          : "completeDiscoveriesDistance";
+        ? "completeDiscoveriesAZ"
+        : "completeDiscoveriesDistance";
       const sortBy = sortByAZ ? "sortByAZ" : "sortByDistance";
       const discoverySort = sortByAZ
-          ? "discoveriesSortByAZ"
-          : "discoveriesSortByDistance";
+        ? "discoveriesSortByAZ"
+        : "discoveriesSortByDistance";
       if (typeDiscovery) {
         subset = this[completeDiscoveries]
-            .filter((elm) => {
-              return elm
-                  .getTitle()
-                  .toLowerCase()
-                  .normalize("NFD")
-                  .replace(/\p{Diacritic}/gu, "")
-                  .includes(this.currentFilter.toLowerCase());
-            })
-            .filter((discovery) => discovery.dType === type)
-            .slice(this.offset, this.offset + 50);
+          .filter((elm) => {
+            return elm
+              .getTitle()
+              .toLowerCase()
+              .normalize("NFD")
+              .replace(/\p{Diacritic}/gu, "")
+              .includes(this.currentFilter.toLowerCase());
+          })
+          .filter((discovery) => discovery.dType === type)
+          .slice(this.offset, this.offset + 50);
         typeDiscovery[sortBy] = typeDiscovery[sortBy].concat(subset);
       } else {
         subset = this[completeDiscoveries]
-            .filter((elm) => {
-              return elm
-                  .getTitle()
-                  .toLowerCase()
-                  .normalize("NFD")
-                  .replace(/\p{Diacritic}/gu, "")
-                  .includes(this.currentFilter.toLowerCase());
-            })
-            .slice(this.offset, this.offset + 50);
+          .filter((elm) => {
+            return elm
+              .getTitle()
+              .toLowerCase()
+              .normalize("NFD")
+              .replace(/\p{Diacritic}/gu, "")
+              .includes(this.currentFilter.toLowerCase());
+          })
+          .slice(this.offset, this.offset + 50);
         this[discoverySort] = this[discoverySort].concat(subset);
       }
 
       if (event && event.target && event.target.complete)
-          // Send a signal when the user reaches the bottom
+        // Send a signal when the user reaches the bottom
         event.target.complete();
 
       this.offset += 50;
@@ -392,9 +388,9 @@ export default {
     triggerTextFilter(searchText) {
       // Removing whitespace and "diacritical" marks from the search input
       this.currentFilter = searchText
-          .trim()
-          .normalize("NFD")
-          .replace(/\p{Diacritic}/gu, "");
+        .trim()
+        .normalize("NFD")
+        .replace(/\p{Diacritic}/gu, "");
 
       this.offset = 0;
 
@@ -430,10 +426,10 @@ export default {
 
     getDiscoveryMedalIcon(discovery) {
       if (UserData.isCollected(discovery.id, discovery.dType))
-        return `src/assets/drawable/medals/${discovery.dType}/collected.svg`;
+        return `./assets/drawable/medals/${discovery.dType}/collected.svg`;
       else if (UserData.isTargeted(discovery.id, discovery.dType))
-        return `src/assets/drawable/medals/${discovery.dType}/targeted.svg`;
-      else return `src/assets/drawable/medals/${discovery.dType}/default.svg`;
+        return `./assets/drawable/medals/${discovery.dType}/targeted.svg`;
+      else return `./assets/drawable/medals/${discovery.dType}/default.svg`;
     },
 
     dismiss() {
@@ -451,21 +447,21 @@ export default {
         this.discoveriesSortByDistance = [];
         UserData.sortByDistance();
         this.completeDiscoveriesDistance =
-            UserData.getSortedDiscoveriesDistance().filter((elm) => {
-              return elm
-                  .getTitle()
-                  .toLowerCase()
-                  .normalize("NFD")
-                  .replace(/\p{Diacritic}/gu, "")
-                  .includes(this.currentFilter.toLowerCase());
-            });
+          UserData.getSortedDiscoveriesDistance().filter((elm) => {
+            return elm
+              .getTitle()
+              .toLowerCase()
+              .normalize("NFD")
+              .replace(/\p{Diacritic}/gu, "")
+              .includes(this.currentFilter.toLowerCase());
+          });
         this.pullDiscoveriesTrier(event, false, null);
       }
 
       this.forceRerender();
 
       if (event && event.target && event.target.complete)
-          // Signal
+        // Signal
         event.target.complete();
     },
     selectedDiscovery(discovery) {
@@ -661,7 +657,7 @@ ion-modal ion-toolbar {
 ion-modal {
   --border-radius: 16px;
   --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-  0 4px 6px -4px rgb(0 0 0 / 0.1);
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
 #modal-heading p {
diff --git a/src/views/TabsPage.vue b/src/views/TabsPage.vue
index bd49965..14dfe2e 100644
--- a/src/views/TabsPage.vue
+++ b/src/views/TabsPage.vue
@@ -1,67 +1,106 @@
 <template>
-    <ion-page>
-        <ion-tabs @ionTabsWillChange="checkRoute">
-
-            <ion-router-outlet></ion-router-outlet>
-            <ion-tab-bar slot="bottom">
-
-                <ion-tab-button id="map" tab="map" href="/tabs/map" :class="{ 'active-tab': activeTab === 'map' }">
-                    <ion-icon :icon="activeTab === 'map' ? activeMap : inactiveMap"/>
-                    <ion-label v-show="activeTab === 'map'">Carte</ion-label>
-                </ion-tab-button>
-
-                <ion-tab-button id="artworks-list" tab="artworks-list" href="/tabs/list" :class="{ 'active-tab': activeTab === 'artworks-list' }">
-                    <ion-icon :icon="activeTab === 'artworks-list' ? activeList : inactiveList"/>
-                    <ion-label v-show="activeTab === 'artworks-list'">Annuaire</ion-label>
-                </ion-tab-button>
-
-                <ion-tab-button id="collection" tab="collection" href="/tabs/collection" :class="{ 'active-tab': activeTab === 'collection' }">
-                    <ion-icon :icon="activeTab === 'collection' ? activeCollection : inactiveCollection"/>
-                    <ion-label v-show="activeTab === 'collection'">Collection</ion-label>
-                </ion-tab-button>
-
-                <ion-tab-button id="more" tab="more" href="/tabs/more" :class="{ 'active-tab': activeTab === 'more' }">
-                    <ion-icon :icon="activeTab === 'more' ? activeMore : inactiveMore"/>
-                    <ion-label v-show="activeTab === 'more'">Compte</ion-label>
-                </ion-tab-button>
-
-            </ion-tab-bar>
-        </ion-tabs>
-    </ion-page>
+  <ion-page>
+    <ion-tabs @ionTabsWillChange="checkRoute">
+      <ion-router-outlet></ion-router-outlet>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button
+          id="map"
+          tab="map"
+          href="/tabs/map"
+          :class="{ 'active-tab': activeTab === 'map' }"
+        >
+          <ion-icon :icon="activeTab === 'map' ? activeMap : inactiveMap" />
+          <ion-label v-show="activeTab === 'map'">Carte</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button
+          id="artworks-list"
+          tab="artworks-list"
+          href="/tabs/list"
+          :class="{ 'active-tab': activeTab === 'artworks-list' }"
+        >
+          <ion-icon
+            :icon="activeTab === 'artworks-list' ? activeList : inactiveList"
+          />
+          <ion-label v-show="activeTab === 'artworks-list'">Annuaire</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button
+          id="collection"
+          tab="collection"
+          href="/tabs/collection"
+          :class="{ 'active-tab': activeTab === 'collection' }"
+        >
+          <ion-icon
+            :icon="
+              activeTab === 'collection' ? activeCollection : inactiveCollection
+            "
+          />
+          <ion-label v-show="activeTab === 'collection'">Collection</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button
+          id="more"
+          tab="more"
+          href="/tabs/more"
+          :class="{ 'active-tab': activeTab === 'more' }"
+        >
+          <ion-icon :icon="activeTab === 'more' ? activeMore : inactiveMore" />
+          <ion-label v-show="activeTab === 'more'">Compte</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  </ion-page>
 </template>
 
 <script lang="js">
-import { IonTabBar, IonTabButton, IonTabs, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-import inactiveMap from "@/assets/drawable/icons/inactive_map_tab_icon.svg"
-import inactiveList from "@/assets/drawable/icons/inactive_list_tab_icon.svg"
-import inactiveCollection from "@/assets/drawable/icons/inactive_collection_tab_icon.svg"
-import inactiveMore from "@/assets/drawable/icons/inactive_more_tab_icon.svg"
-import activeMap from "@/assets/drawable/icons/active_map_tab_icon.svg"
-import activeList from "@/assets/drawable/icons/active_list_tab_icon.svg"
-import activeCollection from "@/assets/drawable/icons/active_collection_tab_icon.svg"
-import activeMore from "@/assets/drawable/icons/active_more_tab_icon.svg"
-
+import {
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+  IonIcon,
+  IonPage,
+  IonRouterOutlet,
+} from "@ionic/vue";
+import inactiveMap from "/assets/drawable/icons/inactive_map_tab_icon.svg";
+import inactiveList from "/assets/drawable/icons/inactive_list_tab_icon.svg";
+import inactiveCollection from "/assets/drawable/icons/inactive_collection_tab_icon.svg";
+import inactiveMore from "/assets/drawable/icons/inactive_more_tab_icon.svg";
+import activeMap from "/assets/drawable/icons/active_map_tab_icon.svg";
+import activeList from "/assets/drawable/icons/active_list_tab_icon.svg";
+import activeCollection from "/assets/drawable/icons/active_collection_tab_icon.svg";
+import activeMore from "/assets/drawable/icons/active_more_tab_icon.svg";
 
 export default {
-    components: {
-        IonTabBar, IonTabButton, IonTabs, IonIcon, IonPage, IonRouterOutlet
-    },
-
-    data() {
-        return {
-            inactiveMap, inactiveList, inactiveCollection, inactiveMore,
-            activeMap, activeList, activeCollection, activeMore,
-            activeTab: "map",
-            console
-        }
+  components: {
+    IonTabBar,
+    IonTabButton,
+    IonTabs,
+    IonIcon,
+    IonPage,
+    IonRouterOutlet,
+  },
+  data() {
+    return {
+      inactiveMap,
+      inactiveList,
+      inactiveCollection,
+      inactiveMore,
+      activeMap,
+      activeList,
+      activeCollection,
+      activeMore,
+      activeTab: "map",
+      console,
+    };
+  },
+
+  methods: {
+    checkRoute(event) {
+      this.activeTab = event.tab;
     },
-
-    methods: {
-        checkRoute(event) {
-          this.activeTab = event.tab;
-        }
-    }
-}
+  },
+};
 </script>
 
 <style scoped>
@@ -72,12 +111,12 @@ export default {
 
 /*TODO Use align-items: start and margin-bottom */
 ion-tab-bar {
-    padding: 0 4% 0 5%;
-    border-top: 1px solid #D9D9D9;
-    border-bottom: 6px solid #FFFFFF;
-    height: 10%;
-    margin: -1px 0 0 0;
-    --background: #FFFFFF;
+  padding: 0 4% 0 5%;
+  border-top: 1px solid #d9d9d9;
+  border-bottom: 6px solid #ffffff;
+  height: 10%;
+  margin: -1px 0 0 0;
+  --background: #ffffff;
 }
 
 ion-tab-button {
@@ -91,7 +130,7 @@ ion-tab-button {
 }
 
 ion-icon {
-    font-size: 6vw;
+  font-size: 6vw;
 }
 
 ion-label {
@@ -102,7 +141,6 @@ ion-label {
 }
 
 ion-tab-button.active-tab {
-  --background: #FADA00;
+  --background: #fada00;
 }
-
 </style>
diff --git a/src/views/TutorialPage.vue b/src/views/TutorialPage.vue
index 7ad5b99..b5f86da 100644
--- a/src/views/TutorialPage.vue
+++ b/src/views/TutorialPage.vue
@@ -3,10 +3,10 @@
     <ion-content>
       <div class="page">
         <ion-button @click="nextSlide">Continuer</ion-button>
-        <img :src="`src/assets/drawable/tutorial/page ${pageNumber}.jpg`" />
+        <img :src="`./assets/drawable/tutorial/page ${pageNumber}.jpg`" />
         <img
           class="background-blurred"
-          :src="`src/assets/drawable/tutorial/page ${pageNumber}.jpg`"
+          :src="`./assets/drawable/tutorial/page ${pageNumber}.jpg`"
         />
       </div>
     </ion-content>
@@ -19,7 +19,7 @@ import { Filesystem } from "@capacitor/filesystem";
 import { Camera } from "@capacitor/camera";
 import { Geolocation } from "@capacitor/geolocation";
 import { UserData } from "@/internal/databases/UserData";
-//TODO: find out why images are not displayed with @
+
 export default {
   name: "TutorialPage",
   components: {
@@ -31,7 +31,6 @@ export default {
   data() {
     return {
       pageNumber: 1,
-      image: "@/assets/drawable/tutorial/page 1.jpg",
     };
   },
 
diff --git a/tsconfig.json b/tsconfig.json
index 817a72a..2e58c12 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,11 +12,7 @@
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true,
-    "paths": {
-          "@/*": [
-            "src/*"
-          ]
-    },
+    "baseUrl": "./",
     "types": []
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],