diff --git a/.eslintignore b/.eslintignore
index f78c8ac..03b6ea0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,3 +5,4 @@
 /node_modules
 .eslintrc.js
 /quasar.config.*.temporary.compiled*
+/src/stores/store-flag.d.ts
diff --git a/README.md b/README.md
index e3b02d5..0e14fd1 100644
--- a/README.md
+++ b/README.md
@@ -6,9 +6,13 @@ A simple odoo mobile app
 ```bash
 npm install
 ```
+## Install Quasar CLI
+```bash
+npm install -g @quasar/cli
+```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
+## Start the app in development mode (hot-code reloading, error reporting, etc.)
 ```bash
-npm run dev
+quasar dev
 ```
 
diff --git a/package-lock.json b/package-lock.json
index 1e8dea5..6ad6a9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2401,6 +2401,21 @@
         }
       }
     },
+    "node_modules/@quasar/app-vite/node_modules/sass": {
+      "version": "1.32.12",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz",
+      "integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/@quasar/extras": {
       "version": "1.16.6",
       "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.6.tgz",
@@ -6323,6 +6338,13 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9466,18 +9488,21 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.32.12",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz",
-      "integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==",
-      "devOptional": true,
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "optional": true,
+      "peer": true,
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "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": ">=8.9.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sax": {
diff --git a/package.json b/package.json
index 992e5ae..9204785 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
-    "format": "prettier --write \"**/*.{js,vue,css,html,md,json}\" --ignore-path .gitignore",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build"
diff --git a/public/images/odoo.png b/public/images/odoo.png
new file mode 100644
index 0000000..a5ff1e5
Binary files /dev/null and b/public/images/odoo.png differ
diff --git a/quasar.config.js b/quasar.config.js
index 10b6f53..141fad3 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -30,7 +30,7 @@ module.exports = configure(function (/* ctx */) {
     boot: ["pinia"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
-    css: ["app.css"],
+    css: ["app.scss"],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
@@ -56,6 +56,16 @@ module.exports = configure(function (/* ctx */) {
       },
 
       vueRouterMode: "hash", // available values: 'hash', 'history'
+
+      viteOption: { // Vite configuration for CSS and Sass
+        css : {
+          preprocessorOptions: { // Configure the Sass preprocessor
+            sass: { 
+              additionalData: `@import 'src/css/app.sass';` // Include custom Sass data, e.g., variables and mixins
+            }
+          }
+        }
+      }
       // vueRouterBase,
       // vueDevtools,
       // vueOptionsAPI: false,
@@ -89,7 +99,19 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {},
+      config: {
+        dark: "false", 
+        brand: {
+          primary: "#006783",
+          secondary: "#6d48b4",
+          accent: "#5d5b7d",
+          dark: "#191c1e",
+          positive: "#21BA45",
+          negative: "#ba1a1a",
+          info: "#31CCEC",
+          warning: "#F2C037",
+        }
+      },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -105,6 +127,8 @@ module.exports = configure(function (/* ctx */) {
       plugins: [
         "Notify",
         "Dark",
+        "LocalStorage",
+        "SessionStorage",
       ],
     },
 
diff --git a/src/App.vue b/src/App.vue
index 38442ee..662d29a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,16 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue' ; 
+import {  useQuasar } from 'quasar' ;
+
 
 export default defineComponent({
-  name: 'App'
-})
+  name: 'App', 
+  setup() {
+    const $q = useQuasar() ;
+    
+    $q.dark.set(false);
+  },
+}) ;
 </script>
diff --git a/src/components/Class/Contacts.vue b/src/components/Class/Contacts.vue
new file mode 100644
index 0000000..af8fdee
--- /dev/null
+++ b/src/components/Class/Contacts.vue
@@ -0,0 +1,176 @@
+<!-- <template>
+  <q-card 
+   v-ripple
+   @click="getOneClickedContact(contact)"
+   v-for="contact in Contacts.contactsList" :key="contact.id"
+  >
+
+    <q-card-section class="text">{{ contact.name }}</q-card-section>
+    <q-card-section class="text">{{ contact.email }}</q-card-section>
+
+  </q-card>
+</template> -->
+
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import axios from 'axios';
+// import ContactCard from '../ContactCard.vue';  
+
+export default defineComponent({
+  name: 'ContactsComponent',
+  data() {
+    return {
+      Contacts: {
+        contactsList: [],
+      },
+    };
+  },
+  methods: {
+
+    cleanContactProperties(contact){
+      return {
+        name: contact.name || '',
+        email: contact.email_normalized || '',
+        phone: contact.phone || '',
+        mobile: contact.mobile || '',
+        image_1920: contact.image_1920 || '',
+        street: contact.street || '',
+        street2: contact.street2 || '',
+        zip: contact.zip || '',
+        city: contact.city || '',
+        write_date: contact.write_date || '',
+        func: contact.function || '',
+        is_company: contact.is_company || '',
+        commercial_company_name: contact.commercial_company_name || '',
+      }
+    },
+
+    async fetchContactList() {
+      try {
+        const options = {
+          method: 'POST',
+          url: 'https://apps.alusage.fr/jsonrpc',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          data: {
+            jsonrpc: '2.0',
+            params: {
+              service: 'object',
+              method: 'execute_kw',
+              args: [
+                'odoo',
+                '2',
+                'admin',
+                'res.partner',
+                'search_read',
+                [[]],
+                {
+                  fields: [
+                    'name',
+                    'email_normalized',
+                    'phone',
+                    'mobile',
+                    'image_1920',
+                    'street',
+                    'street2',
+                    'zip',
+                    'city',
+                    'write_date',
+                    'function',
+                    'is_company',
+                  ],
+                },
+              ],
+            },
+          },
+        };
+
+        const response = await axios.request(options);
+        const contactData = response.data.result;
+
+        let listeClean = [] ; 
+  
+
+        contactData.forEach( (contact) => {
+          listeClean.push(this.cleanContactProperties(contact)) ; 
+          
+        });
+        
+        // console.log(contactData);
+
+        this.Contacts.contactsList = listeClean;
+        // console.log(this.Contacts.contactsList);
+        // Emit the contacts list to the parent component
+        this.$emit('fetchedContactList', this.Contacts.contactsList);
+        
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    
+
+    getOneClickedContact(contact){
+      this.$emit('clickedContact', contact); 
+    },
+    
+  },
+  mounted() {
+    this.fetchContactList();
+    
+    // this.getOneContact();
+    // this.assignContactsData();
+    // this.getContactProperties(); 
+    // this.testClick();
+  },
+});
+</script>
+
+<!-- ['name', 'email_normalized', 'phone', 'mobile', 'image_1920', 'street', 'street2', 'zip', 'city', 'write_date', 'function', 'is_company', 'commercial_company_name'] -->
+
+<!-- const fetchContactList = async () => {
+    try {
+      const options = {
+        method: 'POST',
+        url: 'https://apps.alusage.fr/jsonrpc',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: {
+          jsonrpc: '2.0',
+          params: {
+            service: 'object',
+            method: 'execute_kw',
+            args: [
+              state.db,
+              state.myId,
+              state.apikey,
+              'res.partner',
+              'search_read',
+              [[]],
+              {
+                fields: ['name', 'email_normalized', 'phone', 'mobile', 'image_1920', 'street', 'street2', 'zip', 'city','write_date','function', 'is_company'],
+              }
+            ]
+          }
+        }
+      };
+
+
+      const response = await axios.request(options);
+      state.rows = response.data.result;
+      isContactListFetched.value = true;
+
+      console.log(state.rows)
+      console.log(state.rows[10].name)
+    } catch (error) {
+      console.error(error);
+    }
+
+  } -->
\ No newline at end of file
diff --git a/src/components/ContactCard.vue b/src/components/ContactCard.vue
index d88185f..15eb339 100644
--- a/src/components/ContactCard.vue
+++ b/src/components/ContactCard.vue
@@ -1,13 +1,59 @@
 <template>
   <div>
-    <h2>{{ contact.name }}</h2>
+    <!-- <h2>{{ contact.name }}</h2>
     <p> {{ contact.street }}</p>
     <p> {{ contact.street2 }}</p>
     <p> {{ contact.zip }}</p>
     <p> {{ contact.city }}</p>
     <p> {{ contact.phone }}</p>
-    <p> {{ contact.email }}</p>
+    <p> {{ contact.email }}</p> -->
 
+    <q-card class="my-card" flat bordered rounded>
+      <q-item clickable v-ripple>
+        <q-item-section avatar>
+          <q-avatar>
+            <img v-if="getBase64Image(contact)" :src="getBase64Image(contact)" alt="contact picture">
+            <q-avatar v-else>
+              {{ getInitials(contact.name) }}  
+            </q-avatar>
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>{{ contact.name || "Name not specified" }}</q-item-label>
+          <q-item-label caption>{{ contact.function || "job not specified" }}</q-item-label>
+          <q-item-label caption>
+             {{ contact.email || "Email not specified" }}, {{ contact.phone || "Phone not specified" }}
+          </q-item-label>
+          
+        </q-item-section>
+      </q-item>
+
+      <q-separator />
+
+      <q-card-section horizontal>
+        <q-card-section>
+          {{ contact.city || "City not specified" }}, {{ contact.zip || "ZIP code not specified" }}
+        </q-card-section>
+
+        <q-separator vertical />
+
+        <q-card-section class="col-4">
+          {{ contact.street || "Street not specified" }} {{ contact.street2 || "" }}
+        </q-card-section>
+      </q-card-section>
+
+      <q-separator />
+      <q-item>
+        <q-btn-toggle :options ="[
+          {label: 'Udpate', value: 'info', icon: 'update'},
+          {label: 'Archive', value: 'archiveContact', icon: 'archive'},
+          {label: 'Add Task', value: 'addTask', icon: 'add_task'},
+        ]" 
+        rounded
+        label-class="q-btn-toggle-label-custom"/>
+        </q-item>
+    </q-card>
   </div>
 </template>
 
@@ -18,6 +64,23 @@ export default {
       type: Object,
       required: true
     }
+  }, 
+  methods: {
+    getBase64Image(contact) {
+      return contact.image_1920 ? `data:image/png;base64,${contact.image_1920}` : null;
+    },
+    getAvatarColor(name) {
+      const hash = [...name].reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);
+
+      return colors[Math.abs(hash % colors.length)];
+    },
+    getInitials(name) {
+      return name.charAt(0).toUpperCase();
+    }
+
   }
 }
 </script>
+
+
+
diff --git a/src/components/ContactPreview.vue b/src/components/ContactPreview.vue
new file mode 100644
index 0000000..5d6c324
--- /dev/null
+++ b/src/components/ContactPreview.vue
@@ -0,0 +1,25 @@
+<template>
+    <q-item>
+        <q-item-section avatar>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>{{ contact.name }}</q-item-label>
+          <q-item-label caption>{{ contact.email }}, {{ contact.phone }}</q-item-label>
+        </q-item-section>
+    </q-item>
+</template>
+
+<script>
+export default {
+  props: {
+    contact: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
new file mode 100644
index 0000000..87440e8
--- /dev/null
+++ b/src/components/SearchBar.vue
@@ -0,0 +1,166 @@
+<template>
+  <!-- Search input using Quasar's q-select -->
+  <q-select
+    ref="search"
+    dark dense standout use-input hide-selected clearable
+    class="GL__toolbar-select"
+    color="black"
+    :stack-label="false"
+    :label="inputLabel"
+    v-model="useSearchBarLogic"
+    :options="filteredOptions"
+    option-label="name"
+    @filter="filter"
+    style="width: 31.25rem"
+  >
+    <!-- Append an icon to the search input -->
+    <template v-slot:append>
+      <!-- GitHub search icon -->
+      <img src="https://cdn.quasar.dev/img/layout-gallery/img-github-search-key-slash.svg">
+    </template>
+
+    <!-- Display a spinner when no options are available -->
+    <template v-slot:no-option>
+      <q-item>
+        <q-item-section>
+          <div class="text-center">
+            <!-- Loading spinner -->
+            <q-spinner-pie color="grey-5" size="24px" />
+          </div>
+        </q-item-section>
+      </q-item>
+    </template>
+
+    <!-- Display each option with icon and additional information -->
+    <template v-slot:option="contacts">
+      <q-item 
+        v-bind="contacts.itemProps" 
+        class="GL__select-GL__menu-link"
+        @click="console.log(contacts.opt.label)"
+      >
+        <q-item-section side>
+           <!-- Icon for each option -->
+          <q-icon name="collections_bookmark" />
+        </q-item-section>
+        <q-item-section>
+          <!-- Displaying the label and ID of the option -->
+          {{ contacts.opt.label }} {{ contacts.opt.id }} 
+          <q-item-section v-if="contacts.opt.isCompany">
+            Entreprise, {{ contacts.opt.fromDb }}
+          </q-item-section>
+          <q-item-section v-else>
+            Particulier, {{ contacts.opt.fromDb }}
+          </q-item-section>
+          
+        </q-item-section>
+        <q-item-section side :class="{ 'default-type': !contacts.opt.type }">
+          <!-- Button for additional action related to the option -->
+          <q-btn outline dense no-caps text-color="blue-grey-5" size="12px" class="bg-grey-1 q-px-sm"
+          @click.stop="console.log('bouton cliqué')"
+          >
+            {{ contacts.opt.type || 'Jump to' }} 
+            <!-- Arrow icon indicating the action -->
+            <q-icon name="subdirectory_arrow_left" size="0.875rem" />
+          </q-btn> 
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+
+
+</template>
+
+<script>
+import { defineComponent, ref, watchEffect, inject, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+
+
+export default defineComponent({
+  
+  name: 'SearchBar',
+  
+  setup() {
+    
+    const route = useRoute();
+
+    const authStore = inject('authStore')
+    const contactStore = inject('contactsStore')
+    const tasksStore = inject('tasksStore')
+
+    const { text, inputLabel, options, filteredOptions, search, filter } = useSearchBarLogic();
+    
+    onMounted(() => {
+      contactStore.ReadContactsFromLocalStorage
+      tasksStore.ReadContactsFromLocalStorage
+      
+    })
+
+    // Watch for changes in the route and update the input label accordingly
+    watchEffect(() => {
+      inputLabel.value = "Search in" + " " + `${route.name || 'Unknown Page'}`;
+    });
+
+    function useSearchBarLogic() {
+  // Reactive references for the search bar state
+  const text = ref('');
+  const inputLabel = ref(`Search in`);
+  const options = ref(null);
+  const filteredOptions = ref([]);
+  const search = ref(null);
+
+  
+  function filter(val, update) {
+    // Handle empty input
+    if (val === '') {
+      update(() => {
+        filteredOptions.value = [];
+      });
+      return;
+    }
+
+    // Filter options based on user input
+    update(() => {
+      
+      const filteredContacts = contactStore.contactsList.filter(contact => contact.name.includes(val) || (typeof contact.email === 'string' && contact.email.includes(val)))
+
+      filteredOptions.value = filteredContacts.map(contact => ({
+        label : contact.name,
+        value : contact.id,
+        isCompany: contact.is_company,
+        fromDb: contact.fromDatabase,
+      }))
+
+      // fetchOptions(['|', ['name', 'ilike', val], ['email_normalized', 'ilike', val]]);
+    });
+  }
+
+  // Return the state and methods for external use
+  return {
+    text,
+    inputLabel,
+    options,
+    filteredOptions,
+    search,
+    filter,
+  };
+}
+
+    return {
+      text,
+      inputLabel,
+      options,
+      filteredOptions,
+      search,
+      filter,
+      useSearchBarLogic,
+      authStore,
+      contactStore,
+      tasksStore,
+    };
+  },
+    
+});
+
+
+</script>
\ No newline at end of file
diff --git a/src/components/UserModal.vue b/src/components/UserModal.vue
new file mode 100644
index 0000000..5a22e5c
--- /dev/null
+++ b/src/components/UserModal.vue
@@ -0,0 +1,67 @@
+<script>
+import { defineComponent, inject, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+export default defineComponent ({
+  setup() {
+    const authStore = inject('authStore')
+    const router = useRouter()
+
+    onMounted(() => {
+      authStore.readLoginInfosFromLocalStorage();
+    }),
+    
+    // Watch loginInfos and update local storage whenever it changes
+    watch(() => authStore.loginInfos, () => {
+    localStorage.setItem('loginInfos', JSON.stringify(authStore.loginInfos));
+    
+    }, 
+    { deep: true }),  // Use deep watcher to watch changes in object properties
+
+    
+    watch(() => authStore.logoutEvent, () => {
+      router.push({ name: 'Login' })
+    })
+    
+
+    return {
+      authStore
+    }
+  }
+})
+</script>
+
+<template>
+<q-btn flat icon="o_account_circle" class="on-left" size="md">
+    <q-menu>
+      <div class="q-pa-md">
+      
+        <div class="row items-center justify-center q-gutter-md">
+          <q-avatar size="4.5rem">
+              <img src="https://cdn.quasar.dev/img/avatar4.jpg" />
+          </q-avatar> 
+          <div class="column">
+            <div class="text-subtitle1 q-mt-md q-mb-xs">Administrator</div>
+            <div class="text-subtitle1 q-mb-xs">app.alusage.fr</div>
+            <div class="text-subtitle1 q-mb-xs">Id : {{ authStore.user }} </div>
+          </div>
+
+        </div>
+          
+
+        <div>
+            <q-btn color="red" label="Logout" icon="o_exit_to_app" @click="authStore.logout()" />
+
+            <q-btn
+            background-color="red"
+              flat
+              class="q-pa-md"
+              round
+              @click="$q.dark.toggle()"
+              :icon="$q.dark.isActive ? 'o_nights_stay' : 'o_wb_sunny'"
+            >
+            </q-btn>
+        </div>
+    </div>
+    </q-menu>
+</q-btn>
+</template>
diff --git a/src/css/app.css b/src/css/app.css
deleted file mode 100644
index 0fc2c34..0000000
--- a/src/css/app.css
+++ /dev/null
@@ -1 +0,0 @@
-/* app global css */
diff --git a/src/css/app.scss b/src/css/app.scss
new file mode 100644
index 0000000..fbd0324
--- /dev/null
+++ b/src/css/app.scss
@@ -0,0 +1,28 @@
+@import "quasar.variables.scss"; 
+@import "tokens.scss" ; 
+@import "colors.module.scss";
+
+.body.body--dark {
+    background: $color-background-dark;
+} 
+
+.small-screen-only {
+    @media (max-width: $breakpoint-xs-max) {
+        display: block 
+    }
+    @media (max-width: $breakpoint-sm-min) {
+        display: none
+    }
+        
+}
+.large-screen-only {
+    @media (max-width: $breakpoint-xs-max) {
+        display: block
+    }
+    @media (max-width: $breakpoint-sm-min) {
+        display: none 
+    }
+}
+    
+        
+    
diff --git a/src/css/colors.module.css b/src/css/colors.module.css
new file mode 100644
index 0000000..fa072a6
--- /dev/null
+++ b/src/css/colors.module.css
@@ -0,0 +1,180 @@
+.primary {
+  background-color: var(--md-sys-color-primary);
+}
+.primary-text {
+  color: var(--md-sys-color-primary);
+}
+.on-primary {
+  background-color: var(--md-sys-color-on-primary);
+}
+.on-primary-text {
+  color: var(--md-sys-color-on-primary);
+}
+.primary-container {
+  background-color: var(--md-sys-color-primary-container);
+}
+.primary-container-text {
+  color: var(--md-sys-color-primary-container);
+}
+.on-primary-container {
+  background-color: var(--md-sys-color-on-primary-container);
+}
+.on-primary-container-text {
+  color: var(--md-sys-color-on-primary-container);
+}
+.secondary {
+  background-color: var(--md-sys-color-secondary);
+}
+.secondary-text {
+  color: var(--md-sys-color-secondary);
+}
+.on-secondary {
+  background-color: var(--md-sys-color-on-secondary);
+}
+.on-secondary-text {
+  color: var(--md-sys-color-on-secondary);
+}
+.secondary-container {
+  background-color: var(--md-sys-color-secondary-container);
+}
+.secondary-container-text {
+  color: var(--md-sys-color-secondary-container);
+}
+.on-secondary-container {
+  background-color: var(--md-sys-color-on-secondary-container);
+}
+.on-secondary-container-text {
+  color: var(--md-sys-color-on-secondary-container);
+}
+.tertiary {
+  background-color: var(--md-sys-color-tertiary);
+}
+.tertiary-text {
+  color: var(--md-sys-color-tertiary);
+}
+.on-tertiary {
+  background-color: var(--md-sys-color-on-tertiary);
+}
+.on-tertiary-text {
+  color: var(--md-sys-color-on-tertiary);
+}
+.tertiary-container {
+  background-color: var(--md-sys-color-tertiary-container);
+}
+.tertiary-container-text {
+  color: var(--md-sys-color-tertiary-container);
+}
+.on-tertiary-container {
+  background-color: var(--md-sys-color-on-tertiary-container);
+}
+.on-tertiary-container-text {
+  color: var(--md-sys-color-on-tertiary-container);
+}
+.error {
+  background-color: var(--md-sys-color-error);
+}
+.error-text {
+  color: var(--md-sys-color-error);
+}
+.error-container {
+  background-color: var(--md-sys-color-error-container);
+}
+.error-container-text {
+  color: var(--md-sys-color-error-container);
+}
+.on-error {
+  background-color: var(--md-sys-color-on-error);
+}
+.on-error-text {
+  color: var(--md-sys-color-on-error);
+}
+.on-error-container {
+  background-color: var(--md-sys-color-on-error-container);
+}
+.on-error-container-text {
+  color: var(--md-sys-color-on-error-container);
+}
+.background {
+  background-color: var(--md-sys-color-background);
+}
+.background-text {
+  color: var(--md-sys-color-background);
+}
+.on-background {
+  background-color: var(--md-sys-color-on-background);
+}
+.on-background-text {
+  color: var(--md-sys-color-on-background);
+}
+.surface {
+  background-color: var(--md-sys-color-surface);
+}
+.surface-text {
+  color: var(--md-sys-color-surface);
+}
+.on-surface {
+  background-color: var(--md-sys-color-on-surface);
+}
+.on-surface-text {
+  color: var(--md-sys-color-on-surface);
+}
+.surface-variant {
+  background-color: var(--md-sys-color-surface-variant);
+}
+.surface-variant-text {
+  color: var(--md-sys-color-surface-variant);
+}
+.on-surface-variant {
+  background-color: var(--md-sys-color-on-surface-variant);
+}
+.on-surface-variant-text {
+  color: var(--md-sys-color-on-surface-variant);
+}
+.outline {
+  background-color: var(--md-sys-color-outline);
+}
+.outline-text {
+  color: var(--md-sys-color-outline);
+}
+.inverse-on-surface {
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+.inverse-on-surface-text {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.inverse-surface {
+  background-color: var(--md-sys-color-inverse-surface);
+}
+.inverse-surface-text {
+  color: var(--md-sys-color-inverse-surface);
+}
+.inverse-primary {
+  background-color: var(--md-sys-color-inverse-primary);
+}
+.inverse-primary-text {
+  color: var(--md-sys-color-inverse-primary);
+}
+.shadow {
+  background-color: var(--md-sys-color-shadow);
+}
+.shadow-text {
+  color: var(--md-sys-color-shadow);
+}
+.surface-tint {
+  background-color: var(--md-sys-color-surface-tint);
+}
+.surface-tint-text {
+  color: var(--md-sys-color-surface-tint);
+}
+.outline-variant {
+  background-color: var(--md-sys-color-outline-variant);
+}
+.outline-variant-text {
+  color: var(--md-sys-color-outline-variant);
+}
+.scrim {
+  background-color: var(--md-sys-color-scrim);
+}
+.scrim-text {
+  color: var(--md-sys-color-scrim);
+}
diff --git a/src/css/colors.module.scss b/src/css/colors.module.scss
new file mode 100644
index 0000000..34ea55b
--- /dev/null
+++ b/src/css/colors.module.scss
@@ -0,0 +1,182 @@
+// @import "quasar.variables.scss";
+
+.primary {
+  background-color: $q-primary;
+}
+.primary-text {
+  color: $q-primary;
+}
+.on-primary {
+  background-color: $q-primary;
+}
+.on-primary-text {
+  color: $q-primary;
+}
+.primary-container {
+  background-color: $color-primary-container-light;
+}
+.primary-container-text {
+  color: $color-primary-container-light;
+}
+.on-primary-container {
+  background-color: $color-on-primary-container-light;
+}
+.on-primary-container-text {
+  color: $color-on-primary-container-light;
+}
+.secondary {
+  background-color: $q-secondary;
+}
+.secondary-text {
+  color: $q-secondary;
+}
+.on-secondary {
+  background-color: $color-on-secondary-light;
+}
+.on-secondary-text {
+  color: $color-on-secondary-light;
+}
+.secondary-container {
+  background-color: $color-secondary-container-light;
+}
+.secondary-container-text {
+  color: $color-secondary-container-light;
+}
+.on-secondary-container {
+  background-color: $color-on-secondary-container-light;
+}
+.on-secondary-container-text {
+  color: $color-on-secondary-container-light;
+}
+.tertiary {
+  background-color: $color-tertiary-light;
+}
+.tertiary-text {
+  color: $color-tertiary-light;
+}
+.on-tertiary {
+  background-color: $color-on-tertiary-light;
+}
+.on-tertiary-text {
+  color: $color-on-tertiary-light;
+}
+.tertiary-container {
+  background-color: $color-tertiary-container-light;
+}
+.tertiary-container-text {
+  color: $color-tertiary-container-light;
+}
+.on-tertiary-container {
+  background-color: $color-on-tertiary-container-light;
+}
+.on-tertiary-container-text {
+  color: $color-on-tertiary-container-light;
+}
+.error {
+  background-color: $q-negative;
+}
+.error-text {
+  color: $q-negative;
+}
+.error-container {
+  background-color: $color-error-container-light;
+}
+.error-container-text {
+  color: $color-error-container-light;
+}
+.on-error {
+  background-color: $color-on-error-light;
+}
+.on-error-text {
+  color: $color-on-error-light;
+}
+.on-error-container {
+  background-color: $color-on-error-container-light;
+}
+.on-error-container-text {
+  color: $color-on-error-container-light;
+}
+.background {
+  background-color: $color-background-light;
+}
+.background-text {
+  color: $color-background-light;
+}
+.on-background {
+  background-color: $color-on-background-light;
+}
+.on-background-text {
+  color: $color-on-background-light;
+}
+.surface {
+  background-color: $color-surface-light;
+}
+.surface-text {
+  color: $color-surface-light;
+}
+.on-surface {
+  background-color: $color-on-surface-light;
+}
+.on-surface-text {
+  color: $color-on-surface-light;
+}
+.surface-variant {
+  background-color: $color-surface-variant-light;
+}
+.surface-variant-text {
+  color: $color-surface-variant-light;
+}
+.on-surface-variant {
+  background-color: $color-on-surface-variant-light;
+}
+.on-surface-variant-text {
+  color: $color-on-surface-variant-light;
+}
+.outline {
+  background-color: $color-outline-light;
+}
+.outline-text {
+  color: $color-outline-light;
+}
+.inverse-on-surface {
+  background-color: $color-inverse-on-surface-light;
+}
+.inverse-on-surface-text {
+  color: $color-inverse-on-surface-light;
+}
+.inverse-surface {
+  background-color: $color-inverse-surface-light;
+}
+.inverse-surface-text {
+  color: $color-inverse-surface-light;
+}
+.inverse-primary {
+  background-color: $color-inverse-primary-light;
+}
+.inverse-primary-text {
+  color: $color-inverse-primary-light;
+}
+.shadow {
+  background-color: $color-shadow-light;
+}
+.shadow-text {
+  color: $color-shadow-light;
+}
+.surface-tint {
+  background-color: $color-surface-tint-light;
+}
+.surface-tint-text {
+  color: $color-surface-tint-light;
+}
+.outline-variant {
+  background-color: $color-outline-variant-light;
+}
+.outline-variant-text {
+  color: $color-outline-variant-light;
+}
+.scrim {
+  background-color: $color-scrim-light;
+}
+.scrim-text {
+  color: $color-scrim-light;
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
new file mode 100644
index 0000000..e191d52
--- /dev/null
+++ b/src/css/quasar.variables.scss
@@ -0,0 +1,192 @@
+
+
+$q-accent: #5d5b7d;
+$q-dark: #191c1e;
+$q-positive: #21BA45;
+
+$q-info: #31CCEC;
+$q-warning: #F2C037;
+
+
+$q-primary: #006783;
+$color-on-primary-light: #ffffff;
+$color-primary-container-light: #fdd6ff;
+$color-on-primary-container-light: #bde9ff;
+
+$q-secondary: #6d48b4;
+$color-on-secondary-light: #ffffff;
+$color-secondary-container-light: #6ff6fe;
+$color-on-secondary-container-light: #002022;
+
+$color-tertiary-light: #8d437f;
+$color-on-tertiary-light: #ffffff;
+$color-tertiary-container-light: #ffd7f1;
+$color-on-tertiary-container-light: #390033;
+
+$q-negative: #ba1a1a;
+$color-error-container-light: #ffdad6;
+$color-on-error-light: #ffffff;
+$color-on-error-container-light: #410002;
+
+$color-background-light: #fbfcfe;
+$color-on-background-light: #191c1e;
+
+$color-surface-light: #f8fdff;
+$color-on-surface-light: #001f25;
+
+$color-surface-variant-light: #dce4e9;
+$color-on-surface-variant-light: #40484c;
+
+$color-outline-light: #70787d;
+
+$color-inverse-on-surface-light: #eff1f3;
+$color-inverse-surface-light: #2e3132;
+$color-inverse-primary-light: #64d3ff;
+
+$color-shadow-light: #000000;
+$color-surface-tint-light: #006783;
+$color-outline-variant-light: #c0c8cd;
+$color-scrim-light: #000000;
+
+
+// dark colors
+
+$color-primary-dark: #64d3ff;
+$color-on-primary-dark: #003546;
+$color-primary-container-dark: #004d64;
+$color-on-primary-container-dark: #bde9ff;
+
+$color-secondary-dark: #d3bbff;
+$color-on-secondary-dark: #3e0f83;
+$color-secondary-container-dark: #552e9b;
+$color-on-secondary-container-dark: #ebddff;
+
+$color-tertiary-dark: #c6c2ea;
+$color-on-tertiary-dark: #2e2d4d;
+$color-tertiary-container-dark: #454364;
+$color-on-tertiary-container-dark: #e3dfff;
+
+$color-error-dark: #ffb4ab;
+$color-error-container-dark: #93000a;
+$color-on-error-dark: #690005;
+$color-on-error-container-dark: #ffdad6;
+
+$color-background-dark: #001f25;
+$color-on-background-dark: #e1e2e4;
+
+$color-surface-dark: #001f25;
+$color-on-surface-dark: #e1e2e4;
+
+$color-surface-variant-dark: #4d444c;
+$color-on-surface-variant-dark: #e1e2e4;
+
+$color-outline-dark: #988e97;
+
+$color-inverse-on-surface-dark: #001f25;
+$color-inverse-surface-dark: #e1e2e4;
+$color-inverse-primary-dark: #006783;
+
+$color-shadow-dark: #000000;
+$color-surface-tint-dark: #64d3ff;
+$color-outline-variant-dark: #40484c;
+$color-scrim-dark: #000000;
+
+$display-large-font-family-name: 'Roboto';
+$display-large-font-family-style: 'Regular';
+$display-large-font-weight: 400;
+$display-large-font-size: 3.563rem;
+$display-large-line-height: 4rem;
+$display-large-letter-spacing: -0.25px;
+
+$display-medium-font-family-name: 'Roboto';
+$display-medium-font-family-style: 'Regular';
+$display-medium-font-weight: 400;
+$display-medium-font-size: 2.813rem;
+$display-medium-line-height: 3.25rem;
+$display-medium-letter-spacing: 0;
+
+$display-small-font-family-name: 'Roboto';
+$display-small-font-family-style: 'Regular';
+$display-small-font-weight: 400;
+$display-small-font-size: 2.25rem;
+$display-small-line-height: 2.75rem;
+$display-small-letter-spacing: 0;
+
+$headline-medium-font-family-name: 'Roboto';
+$headline-medium-font-family-style: 'Regular';
+$headline-medium-font-weight: 400;
+$headline-medium-font-size: 1.75rem;
+$headline-medium-line-height: 2.25rem;
+$headline-medium-letter-spacing: 0;
+
+$headline-small-font-family-name: 'Roboto';
+$headline-small-font-family-style: 'Regular';
+$headline-small-font-weight: 400;
+$headline-small-font-size: 1.5rem;
+$headline-small-line-height: 2rem;
+$headline-small-letter-spacing: 0;
+
+$body-large-font-family-name: 'Roboto';
+$body-large-font-family-style: 'Regular';
+$body-large-font-weight: 400;
+$body-large-font-size: 1rem;
+$body-large-line-height: 1.5rem;
+$body-large-letter-spacing: 0.05rem;
+
+$body-medium-font-family-name: 'Roboto';
+$body-medium-font-family-style: 'Regular';
+$body-medium-font-weight: 400;
+$body-medium-font-size: 0.875rem;
+$body-medium-line-height: 1.25rem;
+$body-medium-letter-spacing: 0.025rem;
+
+$body-small-font-family-name: 'Roboto';
+$body-small-font-family-style: 'Regular';
+$body-small-font-weight: 400;
+$body-small-font-size: 0.75rem;
+$body-small-line-height: 1rem;
+$body-small-letter-spacing: 0.04rem;
+
+$label-large-font-family-name: 'Roboto';
+$label-large-font-family-style: 'Medium';
+$label-large-font-weight: 500;
+$label-large-font-size: 0.875rem;
+$label-large-line-height: 1.25rem;
+$label-large-letter-spacing: 0.01rem;
+
+$label-medium-font-family-name: 'Roboto';
+$label-medium-font-family-style: 'Medium';
+$label-medium-font-weight: 500;
+$label-medium-font-size: 0.75rem;
+$label-medium-line-height: 1rem;
+$label-medium-letter-spacing: 0.025rem;
+
+$label-small-font-family-name: 'Roboto';
+$label-small-font-family-style: 'Medium';
+$label-small-font-weight: 500;
+$label-small-font-size: 0.6875rem;
+$label-small-line-height: 1rem;
+$label-small-letter-spacing: 0.025rem;
+
+$title-large-font-family-name: 'Roboto';
+$title-large-font-family-style: 'Regular';
+$title-large-font-weight: 400;
+$title-large-font-size: 1.375rem;
+$title-large-line-height: 1.75rem;
+$title-large-letter-spacing: 0;
+
+$title-medium-font-family-name: 'Roboto';
+$title-medium-font-family-style: 'Medium';
+$title-medium-font-weight: 500;
+$title-medium-font-size: 1rem;
+$title-medium-line-height: 1.5rem;
+$title-medium-letter-spacing: 0.015rem;
+
+$title-small-font-family-name: 'Roboto';
+$title-small-font-family-style: 'Medium';
+$title-small-font-weight: 500;
+$title-small-font-size: 0.875rem;
+$title-small-line-height: 1.25rem;
+$title-small-letter-spacing: 0.01rem;
+
+
diff --git a/src/css/theme.dark.css b/src/css/theme.dark.css
new file mode 100644
index 0000000..2cdd786
--- /dev/null
+++ b/src/css/theme.dark.css
@@ -0,0 +1,32 @@
+:root {
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+ --md-sys-color-error: var(--md-sys-color-error-dark);
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+ --md-sys-color-background: var(--md-sys-color-background-dark);
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+}
diff --git a/src/css/theme.light.css b/src/css/theme.light.css
new file mode 100644
index 0000000..6186269
--- /dev/null
+++ b/src/css/theme.light.css
@@ -0,0 +1,32 @@
+:root {
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+ --md-sys-color-error: var(--md-sys-color-error-light);
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+ --md-sys-color-background: var(--md-sys-color-background-light);
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
diff --git a/src/css/tokens.css b/src/css/tokens.css
new file mode 100644
index 0000000..51dddb1
--- /dev/null
+++ b/src/css/tokens.css
@@ -0,0 +1,272 @@
+:root {
+  --md-source: #572B61;
+  /* primary */
+  --md-ref-palette-primary0: #000000;
+  --md-ref-palette-primary10: #340042;
+  --md-ref-palette-primary20: #4f155e;
+  --md-ref-palette-primary25: #5b226a;
+  --md-ref-palette-primary30: #682e76;
+  --md-ref-palette-primary35: #753a83;
+  --md-ref-palette-primary40: #824790;
+  --md-ref-palette-primary50: #9e5faa;
+  --md-ref-palette-primary60: #ba79c6;
+  --md-ref-palette-primary70: #d693e2;
+  --md-ref-palette-primary80: #f4aeff;
+  --md-ref-palette-primary90: #fdd6ff;
+  --md-ref-palette-primary95: #ffebfd;
+  --md-ref-palette-primary98: #fff7fa;
+  --md-ref-palette-primary99: #fffbff;
+  --md-ref-palette-primary100: #ffffff;
+  /* secondary */
+  --md-ref-palette-secondary0: #000000;
+  --md-ref-palette-secondary10: #002022;
+  --md-ref-palette-secondary20: #003739;
+  --md-ref-palette-secondary25: #004346;
+  --md-ref-palette-secondary30: #004f53;
+  --md-ref-palette-secondary35: #005c60;
+  --md-ref-palette-secondary40: #00696e;
+  --md-ref-palette-secondary50: #00848a;
+  --md-ref-palette-secondary60: #00a0a8;
+  --md-ref-palette-secondary70: #1dbdc5;
+  --md-ref-palette-secondary80: #4cd9e1;
+  --md-ref-palette-secondary90: #6ff6fe;
+  --md-ref-palette-secondary95: #c1fbff;
+  --md-ref-palette-secondary98: #e7feff;
+  --md-ref-palette-secondary99: #f2ffff;
+  --md-ref-palette-secondary100: #ffffff;
+  /* tertiary */
+  --md-ref-palette-tertiary0: #000000;
+  --md-ref-palette-tertiary10: #390033;
+  --md-ref-palette-tertiary20: #57124e;
+  --md-ref-palette-tertiary25: #641f5a;
+  --md-ref-palette-tertiary30: #722b66;
+  --md-ref-palette-tertiary35: #7f3772;
+  --md-ref-palette-tertiary40: #8d437f;
+  --md-ref-palette-tertiary50: #aa5c99;
+  --md-ref-palette-tertiary60: #c775b4;
+  --md-ref-palette-tertiary70: #e58fd0;
+  --md-ref-palette-tertiary80: #ffacea;
+  --md-ref-palette-tertiary90: #ffd7f1;
+  --md-ref-palette-tertiary95: #ffecf6;
+  --md-ref-palette-tertiary98: #fff7f9;
+  --md-ref-palette-tertiary99: #fffbff;
+  --md-ref-palette-tertiary100: #ffffff;
+  /* neutral */
+  --md-ref-palette-neutral0: #000000;
+  --md-ref-palette-neutral10: #001f25;
+  --md-ref-palette-neutral20: #00363f;
+  --md-ref-palette-neutral25: #00424d;
+  --md-ref-palette-neutral30: #004e5b;
+  --md-ref-palette-neutral35: #005b69;
+  --md-ref-palette-neutral40: #006878;
+  --md-ref-palette-neutral50: #008396;
+  --md-ref-palette-neutral60: #009fb6;
+  --md-ref-palette-neutral70: #29bbd5;
+  --md-ref-palette-neutral80: #53d7f1;
+  --md-ref-palette-neutral90: #a6eeff;
+  --md-ref-palette-neutral95: #d6f6ff;
+  --md-ref-palette-neutral98: #effbff;
+  --md-ref-palette-neutral99: #f8fdff;
+  --md-ref-palette-neutral100: #ffffff;
+  /* neutral-variant */
+  --md-ref-palette-neutral-variant0: #000000;
+  --md-ref-palette-neutral-variant10: #201920;
+  --md-ref-palette-neutral-variant20: #362e36;
+  --md-ref-palette-neutral-variant25: #413941;
+  --md-ref-palette-neutral-variant30: #4d444c;
+  --md-ref-palette-neutral-variant35: #585058;
+  --md-ref-palette-neutral-variant40: #655c64;
+  --md-ref-palette-neutral-variant50: #7e747d;
+  --md-ref-palette-neutral-variant60: #988e97;
+  --md-ref-palette-neutral-variant70: #b3a8b1;
+  --md-ref-palette-neutral-variant80: #cfc3cd;
+  --md-ref-palette-neutral-variant90: #ecdfe9;
+  --md-ref-palette-neutral-variant95: #faedf7;
+  --md-ref-palette-neutral-variant98: #fff7fa;
+  --md-ref-palette-neutral-variant99: #fffbff;
+  --md-ref-palette-neutral-variant100: #ffffff;
+  /* error */
+  --md-ref-palette-error0: #000000;
+  --md-ref-palette-error10: #410002;
+  --md-ref-palette-error20: #690005;
+  --md-ref-palette-error25: #7e0007;
+  --md-ref-palette-error30: #93000a;
+  --md-ref-palette-error35: #a80710;
+  --md-ref-palette-error40: #ba1a1a;
+  --md-ref-palette-error50: #de3730;
+  --md-ref-palette-error60: #ff5449;
+  --md-ref-palette-error70: #ff897d;
+  --md-ref-palette-error80: #ffb4ab;
+  --md-ref-palette-error90: #ffdad6;
+  --md-ref-palette-error95: #ffedea;
+  --md-ref-palette-error98: #fff8f7;
+  --md-ref-palette-error99: #fffbff;
+  --md-ref-palette-error100: #ffffff;
+  /* light */
+  --md-sys-color-primary-light: #824790;
+  --md-sys-color-on-primary-light: #ffffff;
+  --md-sys-color-primary-container-light: #fdd6ff;
+  --md-sys-color-on-primary-container-light: #340042;
+  --md-sys-color-secondary-light: #00696e;
+  --md-sys-color-on-secondary-light: #ffffff;
+  --md-sys-color-secondary-container-light: #6ff6fe;
+  --md-sys-color-on-secondary-container-light: #002022;
+  --md-sys-color-tertiary-light: #8d437f;
+  --md-sys-color-on-tertiary-light: #ffffff;
+  --md-sys-color-tertiary-container-light: #ffd7f1;
+  --md-sys-color-on-tertiary-container-light: #390033;
+  --md-sys-color-error-light: #ba1a1a;
+  --md-sys-color-error-container-light: #ffdad6;
+  --md-sys-color-on-error-light: #ffffff;
+  --md-sys-color-on-error-container-light: #410002;
+  --md-sys-color-background-light: #f8fdff;
+  --md-sys-color-on-background-light: #001f25;
+  --md-sys-color-surface-light: #f8fdff;
+  --md-sys-color-on-surface-light: #001f25;
+  --md-sys-color-surface-variant-light: #ecdfe9;
+  --md-sys-color-on-surface-variant-light: #4d444c;
+  --md-sys-color-outline-light: #7e747d;
+  --md-sys-color-inverse-on-surface-light: #d6f6ff;
+  --md-sys-color-inverse-surface-light: #00363f;
+  --md-sys-color-inverse-primary-light: #f4aeff;
+  --md-sys-color-shadow-light: #000000;
+  --md-sys-color-surface-tint-light: #824790;
+  --md-sys-color-outline-variant-light: #cfc3cd;
+  --md-sys-color-scrim-light: #000000;
+  /* dark */
+  --md-sys-color-primary-dark: #f4aeff;
+  --md-sys-color-on-primary-dark: #4f155e;
+  --md-sys-color-primary-container-dark: #682e76;
+  --md-sys-color-on-primary-container-dark: #fdd6ff;
+  --md-sys-color-secondary-dark: #4cd9e1;
+  --md-sys-color-on-secondary-dark: #003739;
+  --md-sys-color-secondary-container-dark: #004f53;
+  --md-sys-color-on-secondary-container-dark: #6ff6fe;
+  --md-sys-color-tertiary-dark: #ffacea;
+  --md-sys-color-on-tertiary-dark: #57124e;
+  --md-sys-color-tertiary-container-dark: #722b66;
+  --md-sys-color-on-tertiary-container-dark: #ffd7f1;
+  --md-sys-color-error-dark: #ffb4ab;
+  --md-sys-color-error-container-dark: #93000a;
+  --md-sys-color-on-error-dark: #690005;
+  --md-sys-color-on-error-container-dark: #ffdad6;
+  --md-sys-color-background-dark: #001f25;
+  --md-sys-color-on-background-dark: #a6eeff;
+  --md-sys-color-surface-dark: #001f25;
+  --md-sys-color-on-surface-dark: #a6eeff;
+  --md-sys-color-surface-variant-dark: #4d444c;
+  --md-sys-color-on-surface-variant-dark: #cfc3cd;
+  --md-sys-color-outline-dark: #988e97;
+  --md-sys-color-inverse-on-surface-dark: #001f25;
+  --md-sys-color-inverse-surface-dark: #a6eeff;
+  --md-sys-color-inverse-primary-dark: #824790;
+  --md-sys-color-shadow-dark: #000000;
+  --md-sys-color-surface-tint-dark: #f4aeff;
+  --md-sys-color-outline-variant-dark: #4d444c;
+  --md-sys-color-scrim-dark: #000000;
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-weight: 400px;
+  --md-sys-typescale-display-large-font-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-weight: 400px;
+  --md-sys-typescale-display-medium-font-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-weight: 400px;
+  --md-sys-typescale-display-small-font-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-weight: 400px;
+  --md-sys-typescale-headline-large-font-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --md-sys-typescale-headline-medium-font-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-weight: 400px;
+  --md-sys-typescale-headline-small-font-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-weight: 400px;
+  --md-sys-typescale-body-large-font-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-letter-spacing: 0.50px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-weight: 400px;
+  --md-sys-typescale-body-medium-font-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-weight: 400px;
+  --md-sys-typescale-body-small-font-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-letter-spacing: 0.40px;
+  /* label - large */
+  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-style: Medium;
+  --md-sys-typescale-label-large-font-weight: 500px;
+  --md-sys-typescale-label-large-font-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  /* label - medium */
+  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-style: Medium;
+  --md-sys-typescale-label-medium-font-weight: 500px;
+  --md-sys-typescale-label-medium-font-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  /* label - small */
+  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-style: Medium;
+  --md-sys-typescale-label-small-font-weight: 500px;
+  --md-sys-typescale-label-small-font-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-weight: 400px;
+  --md-sys-typescale-title-large-font-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Medium;
+  --md-sys-typescale-title-medium-font-weight: 500px;
+  --md-sys-typescale-title-medium-font-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Medium;
+  --md-sys-typescale-title-small-font-weight: 500px;
+  --md-sys-typescale-title-small-font-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+}
diff --git a/src/css/tokens.scss b/src/css/tokens.scss
new file mode 100644
index 0000000..affaf87
--- /dev/null
+++ b/src/css/tokens.scss
@@ -0,0 +1,286 @@
+$source: #572B61;
+
+/* primary */
+$palette-primary0: #000000;
+$palette-primary10: #340042;
+$palette-primary20: #4f155e;
+$palette-primary25: #5b226a;
+$palette-primary30: #682e76;
+$palette-primary35: #753a83;
+$palette-primary40: #824790;
+$palette-primary50: #9e5faa;
+$palette-primary60: #ba79c6;
+$palette-primary70: #d693e2;
+$palette-primary80: #f4aeff;
+$palette-primary90: #fdd6ff;
+$palette-primary95: #ffebfd;
+$palette-primary98: #fff7fa;
+$palette-primary99: #fffbff;
+$palette-primary100: #ffffff;
+
+/* secondary */
+$palette-secondary0: #000000;
+$palette-secondary10: #002022;
+$palette-secondary20: #003739;
+$palette-secondary25: #004346;
+$palette-secondary30: #004f53;
+$palette-secondary35: #005c60;
+$palette-secondary40: #00696e;
+$palette-secondary50: #00848a;
+$palette-secondary60: #00a0a8;
+$palette-secondary70: #1dbdc5;
+$palette-secondary80: #4cd9e1;
+$palette-secondary90: #6ff6fe;
+$palette-secondary95: #c1fbff;
+$palette-secondary98: #e7feff;
+$palette-secondary99: #f2ffff;
+$palette-secondary100: #ffffff;
+
+/* tertiary */
+$palette-tertiary0: #000000;
+$palette-tertiary10: #390033;
+$palette-tertiary20: #57124e;
+$palette-tertiary25: #641f5a;
+$palette-tertiary30: #722b66;
+$palette-tertiary35: #7f3772;
+$palette-tertiary40: #8d437f;
+$palette-tertiary50: #aa5c99;
+$palette-tertiary60: #c775b4;
+$palette-tertiary70: #e58fd0;
+$palette-tertiary80: #ffacea;
+$palette-tertiary90: #ffd7f1;
+$palette-tertiary95: #ffecf6;
+$palette-tertiary98: #fff7f9;
+$palette-tertiary99: #fffbff;
+$palette-tertiary100: #ffffff;
+
+/* neutral */
+$palette-neutral0: #000000;
+$palette-neutral10: #001f25;
+$palette-neutral20: #00363f;
+$palette-neutral25: #00424d;
+$palette-neutral30: #004e5b;
+$palette-neutral35: #005b69;
+$palette-neutral40: #006878;
+$palette-neutral50: #008396;
+$palette-neutral60: #009fb6;
+$palette-neutral70: #29bbd5;
+$palette-neutral80: #53d7f1;
+$palette-neutral90: #a6eeff;
+$palette-neutral95: #d6f6ff;
+$palette-neutral98: #effbff;
+$palette-neutral99: #f8fdff;
+$palette-neutral100: #ffffff;
+
+/* neutral-variant */
+$palette-neutral-variant0: #000000;
+$palette-neutral-variant10: #201920;
+$palette-neutral-variant20: #362e36;
+$palette-neutral-variant25: #413941;
+$palette-neutral-variant30: #4d444c;
+$palette-neutral-variant35: #585058;
+$palette-neutral-variant40: #655c64;
+$palette-neutral-variant50: #7e747d;
+$palette-neutral-variant60: #988e97;
+$palette-neutral-variant70: #b3a8b1;
+$palette-neutral-variant80: #cfc3cd;
+$palette-neutral-variant90: #ecdfe9;
+$palette-neutral-variant95: #faedf7;
+$palette-neutral-variant98: #fff7fa;
+$palette-neutral-variant99: #fffbff;
+$palette-neutral-variant100: #ffffff;
+
+/* error */
+$palette-error0: #000000;
+$palette-error10: #410002;
+$palette-error20: #690005;
+$palette-error25: #7e0007;
+$palette-error30: #93000a;
+$palette-error35: #a80710;
+$palette-error40: #ba1a1a;
+$palette-error50: #de3730;
+$palette-error60: #ff5449;
+$palette-error70: #ff897d;
+$palette-error80: #ffb4ab;
+$palette-error90: #ffdad6;
+$palette-error95: #ffedea;
+$palette-error98: #fff8f7;
+$palette-error99: #fffbff;
+$palette-error100: #ffffff;
+
+/* light */
+$color-primary-light: #824790;
+$color-on-primary-light: #ffffff;
+$color-primary-container-light: #fdd6ff;
+$color-on-primary-container-light: #340042;
+$color-secondary-light: #00696e;
+$color-on-secondary-light: #ffffff;
+$color-secondary-container-light: #6ff6fe;
+$color-on-secondary-container-light: #002022;
+$color-tertiary-light: #8d437f;
+$color-on-tertiary-light: #ffffff;
+$color-tertiary-container-light: #ffd7f1;
+$color-on-tertiary-container-light: #390033;
+$color-error-light: #ba1a1a;
+$color-error-container-light: #ffdad6;
+$color-on-error-light: #ffffff;
+$color-on-error-container-light: #410002;
+$color-background-light: #f8fdff;
+$color-on-background-light: #001f25;
+$color-surface-light: #f8fdff;
+$color-on-surface-light: #001f25;
+$color-surface-variant-light: #ecdfe9;
+$color-on-surface-variant-light: #4d444c;
+$color-outline-light: #7e747d;
+$color-inverse-on-surface-light: #d6f6ff;
+$color-inverse-surface-light: #00363f;
+$color-inverse-primary-light: #f4aeff;
+$color-shadow-light: #000000;
+$color-surface-tint-light: #824790;
+$color-outline-variant-light: #cfc3cd;
+$color-scrim-light: #000000;
+
+/* dark */
+$color-primary-dark: #f4aeff;
+$color-on-primary-dark: #4f155e;
+$color-primary-container-dark: #682e76;
+$color-on-primary-container-dark: #fdd6ff;
+$color-secondary-dark: #4cd9e1;
+$color-on-secondary-dark: #003739;
+$color-secondary-container-dark: #004f53;
+$color-on-secondary-container-dark: #4cd9e1 ;
+$color-on-error-container-dark: #ffdad6;
+$color-background-dark: #001f25;
+$color-on-background-dark: #a6eeff;
+$color-surface-dark: #001f25;
+$color-on-surface-dark: #a6eeff;
+$color-surface-variant-dark: #4d444c;
+$color-on-surface-variant-dark: #cfc3cd;
+$color-outline-dark: #988e97;
+$color-inverse-on-surface-dark: #001f25;
+$color-inverse-surface-dark: #a6eeff;
+$color-inverse-primary-dark: #824790;
+$color-shadow-dark: #000000;
+$color-surface-tint-dark: #f4aeff;
+$color-outline-variant-dark: #4d444c;
+$color-scrim-dark: #000000;
+
+/* display - large */
+$typescale-display-large-font-family-name: 'Roboto';
+$typescale-display-large-font-family-style: 'Regular';
+$typescale-display-large-font-weight: 400;
+$typescale-display-large-font-size: 3.5625rem; /* 57px / 16px = 3.5625rem */
+$typescale-display-large-line-height: 4rem; /* 64px / 16px = 4rem */
+$typescale-display-large-letter-spacing: -0.25px;
+
+/* display - medium */
+$typescale-display-medium-font-family-name: 'Roboto';
+$typescale-display-medium-font-family-style: 'Regular';
+$typescale-display-medium-font-weight: 400;
+$typescale-display-medium-font-size: 2.8125rem; /* 45px / 16px = 2.8125rem */
+$typescale-display-medium-line-height: 3.25rem; /* 52px / 16px = 3.25rem */
+$typescale-display-medium-letter-spacing: 0;
+
+/* display - small */
+$typescale-display-small-font-family-name: 'Roboto';
+$typescale-display-small-font-family-style: 'Regular';
+$typescale-display-small-font-weight: 400;
+$typescale-display-small-font-size: 2.25rem; /* 36px / 16px = 2.25rem */
+$typescale-display-small-line-height: 2.75rem; /* 44px / 16px = 2.75rem */
+$typescale-display-small-letter-spacing: 0;
+
+/* headline - large */
+$typescale-headline-large-font-family-name: 'Roboto';
+$typescale-headline-large-font-family-style: 'Regular';
+$typescale-headline-large-font-weight: 400;
+$typescale-headline-large-font-size: 2rem; /* 32px / 16px = 2rem */
+$typescale-headline-large-line-height: 2.5rem; /* 40px / 16px = 2.5rem */
+$typescale-headline-large-letter-spacing: 0;
+
+/* headline - medium */
+$typescale-headline-medium-font-family-name: 'Roboto';
+$typescale-headline-medium-font-family-style: 'Regular';
+$typescale-headline-medium-font-weight: 400;
+$typescale-headline-medium-font-size: 1.75rem; /* 28px / 16px = 1.75rem */
+$typescale-headline-medium-line-height: 2.25rem; /* 36px / 16px = 2.25rem */
+$typescale-headline-medium-letter-spacing: 0;
+
+/* headline - small */
+$typescale-headline-small-font-family-name: 'Roboto';
+$typescale-headline-small-font-family-style: 'Regular';
+$typescale-headline-small-font-weight: 400;
+$typescale-headline-small-font-size: 1.5rem; /* 24px / 16px = 1.5rem */
+$typescale-headline-small-line-height: 2rem; /* 32px / 16px = 2rem */
+$typescale-headline-small-letter-spacing: 0;
+
+/* body - large */
+$typescale-body-large-font-family-name: 'Roboto';
+$typescale-body-large-font-family-style: 'Regular';
+$typescale-body-large-font-weight: 400;
+$typescale-body-large-font-size: 1rem; /* 16px / 16px = 1rem */
+$typescale-body-large-line-height: 1.5rem; /* 24px / 16px = 1.5rem */
+$typescale-body-large-letter-spacing: 0.03125rem; /* 0.5px / 16px = 0.03125rem */
+
+/* body - medium */
+$typescale-body-medium-font-family-name: 'Roboto';
+$typescale-body-medium-font-family-style: 'Regular';
+$typescale-body-medium-font-weight: 400;
+$typescale-body-medium-font-size: 0.875rem; /* 14px / 16px = 0.875rem */
+$typescale-body-medium-line-height: 1.25rem; /* 20px / 16px = 1.25rem */
+$typescale-body-medium-letter-spacing: 0.015625rem; /* 0.25px / 16px = 0.015625rem */
+
+/* body - small */
+$typescale-body-small-font-family-name: 'Roboto';
+$typescale-body-small-font-family-style: 'Regular';
+$typescale-body-small-font-weight: 400;
+$typescale-body-small-font-size: 0.75rem; /* 12px / 16px = 0.75rem */
+$typescale-body-small-line-height: 1rem; /* 16px / 16px = 1rem */
+$typescale-body-small-letter-spacing: 0.025rem; /* 0.4px / 16px = 0.025rem */
+
+/* label - large */
+$typescale-label-large-font-family-name: 'Roboto';
+$typescale-label-large-font-family-style: 'Medium';
+$typescale-label-large-font-weight: 500;
+$typescale-label-large-font-size: 1.375rem; /* 22px / 16px = 1.375rem */
+$typescale-label-large-line-height: 1.75rem; /* 28px / 16px = 1.75rem */
+$typescale-label-large-letter-spacing: 0;
+
+/* label - medium */
+$typescale-label-medium-font-family-name: 'Roboto';
+$typescale-label-medium-font-family-style: 'Medium';
+$typescale-label-medium-font-weight: 500;
+$typescale-label-medium-font-size: 0.75rem; /* 12px / 16px = 0.75rem */
+$typescale-label-medium-line-height: 1rem; /* 16px / 16px = 1rem */
+$typescale-label-medium-letter-spacing: 0.03125rem; /* 0.5px / 16px = 0.03125rem */
+
+/* label - small */
+$typescale-label-small-font-family-name: 'Roboto';
+$typescale-label-small-font-family-style: 'Medium';
+$typescale-label-small-font-weight: 500;
+$typescale-label-small-font-size: 0.6875rem; /* 11px / 16px = 0.6875rem */
+$typescale-label-small-line-height: 1rem; /* 16px / 16px = 1rem */
+$typescale-label-small-letter-spacing: 0.03125rem; /* 0.5px / 16px = 0.03125rem */
+
+/* title - large */
+$typescale-title-large-font-family-name: 'Roboto';
+$typescale-title-large-font-family-style: 'Regular';
+$typescale-title-large-font-weight: 400;
+$typescale-title-large-font-size: 1.375rem; /* 22px / 16px = 1.375rem */
+$typescale-title-large-line-height: 1.75rem; /* 28px / 16px = 1.75rem */
+$typescale-title-large-letter-spacing: 0;
+
+/* title - medium */
+$typescale-title-medium-font-family-name: 'Roboto';
+$typescale-title-medium-font-family-style: 'Medium';
+$typescale-title-medium-font-weight: 500;
+$typescale-title-medium-font-size: 1rem; /* 16px / 16px = 1rem */
+$typescale-title-medium-line-height: 1.5rem; /* 24px / 16px = 1.5rem */
+$typescale-title-medium-letter-spacing: 0.09375rem; /* 1.5px / 16px = 0.09375rem */
+
+/* title - small */
+$typescale-title-small-font-family-name: 'Roboto';
+$typescale-title-small-font-family-style: 'Medium';
+$typescale-title-small-font-weight: 500;
+$typescale-title-small-font-size: 0.875rem; /* 14px / 16px = 0.875rem */
+$typescale-title-small-line-height: 1.25rem; /* 20px / 16px = 1.25rem */
+$typescale-title-small-letter-spacing: 0.03125rem; /* 0.5px / 16px = 0.03125rem */
\ No newline at end of file
diff --git a/src/css/typography.module.css b/src/css/typography.module.css
new file mode 100644
index 0000000..5e2c82f
--- /dev/null
+++ b/src/css/typography.module.css
@@ -0,0 +1,150 @@
+.display-large{
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  line-height: var(--md-sys-typescale-display-large-height);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+}
+.display-medium{
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  line-height: var(--md-sys-typescale-display-medium-height);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+}
+.display-small{
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  line-height: var(--md-sys-typescale-display-small-height);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+}
+.headline-large{
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  line-height: var(--md-sys-typescale-headline-large-height);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+}
+.headline-medium{
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  line-height: var(--md-sys-typescale-headline-medium-height);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+}
+.headline-small{
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  line-height: var(--md-sys-typescale-headline-small-height);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+}
+.body-large{
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  line-height: var(--md-sys-typescale-body-large-height);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+}
+.body-medium{
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+.body-small{
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  line-height: var(--md-sys-typescale-body-small-height);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+}
+.label-large{
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--md-sys-typescale-label-large-height);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+}
+.label-medium{
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  line-height: var(--md-sys-typescale-label-medium-height);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+}
+.label-small{
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  line-height: var(--md-sys-typescale-label-small-height);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+}
+.title-large{
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  line-height: var(--md-sys-typescale-title-large-height);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+}
+.title-medium{
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  line-height: var(--md-sys-typescale-title-medium-height);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+}
+.title-small{
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--md-sys-typescale-title-small-height);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+}
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index 17373c2..ec79f8b 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <q-layout view="lHh Lpr lFf">
-    <q-header >
+    <q-header>
       <q-toolbar>
 
 
@@ -13,6 +13,16 @@
 
     <q-page-container>
       <router-view />
+
     </q-page-container>
   </q-layout>
 </template>
+
+<style lang="scss">
+
+.q-toolbar {
+  background-color: $q-primary ;
+  color: $color-on-primary-light ; 
+}
+
+</style>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 9b460ed..1155923 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,105 +1,89 @@
+"
 <template>
-  <q-layout view="hHh Lpr lff">
-
-    <q-header elevated class="bg-primary text-white">
+  <q-layout view="hHh lpR fFf">
+    <q-header elevated class="bg-grey-3 text-white justify-around">
       <q-toolbar>
-        <q-btn flat icon="o_menu" size='md' @click="leftDrawer = !leftDrawer" />
-
-        <q-toolbar-title>
-
-          {{ pageTitle }}
-        </q-toolbar-title>
-
-        <q-btn flat icon="o_settings" class="on-left" size='md' @click="toggleSettingsDrawer" />
-        <q-btn flat icon="o_account_circle" class="on-left" size='md'><q-menu>
-            <div class="row no-wrap q-pa-md">
-              <div class="column items-center">
-                <q-avatar size="72px">
-                  <img src="https://cdn.quasar.dev/img/avatar4.jpg">
-                </q-avatar>
-
-                <div class="text-subtitle1 q-mt-md q-mb-xs">Administrator</div>
-                <div class="text-subtitle1  q-mb-xs">app.alusage.fr</div>
-
-                <q-separator vertical inset class="q-mx-lg" />
-                <q-btn color="primary" label="Logout" push size="sm" v-close-popup />
-              </div>
-            </div>
-          </q-menu></q-btn>
-      </q-toolbar>
-    </q-header>
+        
 
-    <q-drawer v-model="leftDrawer" side="left" show-if-above :mini="miniState" @mouseover="miniState = false"
-      @mouseout="miniState = true" :width="200" :breakpoint="500" bordered>
+        <SearchBar>
+        </SearchBar>
 
+        
 
-      <q-scroll-area class="fit">
-        <q-list padding>
-          <q-item clickable v-ripple :active="isActive('/dashboard')" @click="navigateToPage('/dashboard')">
-            <q-item-section avatar>
-              <q-avatar color="primary" text-color="white" icon="o_home" />
-            </q-item-section>
-
-            <q-item-section>
-              Dashboard
-            </q-item-section>
-          </q-item>
-          <q-item clickable v-ripple :active="isActive('/notification')" @click="navigateToPage('/notification')">
-            <q-item-section avatar>
-              <q-avatar color="orange" text-color="white" icon="o_notifications"><q-badge color="red"
-                  floating>12</q-badge></q-avatar>
+        <q-btn flat rounded @click="fetchContactsStore"> Get Contacts </q-btn>
+        <q-btn flat rounded @click="fetchTaskStore"> Get Tasks </q-btn>
 
-            </q-item-section>
-
-            <q-item-section>
-              Notifications
-            </q-item-section>
-          </q-item>
+        <UserModal/>
 
-          <q-separator />
-
-          <q-item clickable v-ripple :active="isActive('/contact')" @click="navigateToPage('/contact')">
-            <q-item-section avatar>
-              <q-avatar color="purple" text-color="white" icon="o_contact_page" />
-            </q-item-section>
-
-            <q-item-section>
-              Contact
-            </q-item-section>
-          </q-item>
-
-
-
-          <q-item clickable v-ripple :active="isActive('/task')" @click="navigateToPage('/task')">
-            <q-item-section avatar>
-              <q-avatar color="green" text-color="white" icon="o_task_alt" />
+        <q-btn
+        rounded
+          flat
+          icon="o_settings"
+          class="on-left"
+          size="md"
+          @click="drawer = !drawer"
+        />
+      </q-toolbar>
+    </q-header>
+    <!-- left drawer -->
+    <q-drawer
+      v-model="leftDrawer"
+      side="left"
+      show-if-above
+
+      :mini= "miniState"
+      @mouseover="miniState = false"
+      @mouseout="miniState = true"
+      
+      :width="300"
+      :breakpoint="500"
+    >
+      <q-scroll-area class="fit q-pa-sm">
+        <q-list v-for="(info, index) in authStore.loginInfos" :key="index" padding>
+
+          <q-item clickable v-ripple  class="q-pa-lg"><!-- icone &|| infos sur base de données visible pendant le ministate-->
+            <q-item-section avatar> 
+              <q-checkbox checked-icon="dns" unchecked-icon="dns" v-model="info.isChecked" :label="info.db"/>
             </q-item-section>
 
-            <q-item-section>
-              Task
+            <q-item-section> <!-- infos de base de données cachée pendant le mini state du tiroir-->
+              login :  {{ info.login }}
+              url : {{ info.url }}
             </q-item-section>
           </q-item>
         </q-list>
       </q-scroll-area>
     </q-drawer>
-    <q-drawer v-model="settingsDrawerOpen" side="right" behavior="mobile" elevated>
-
+          
+          
+       
+    <!-- right drawer -->
+    <q-drawer
+      v-model="settingsDrawerOpen"
+      side="right"
+      behavior="mobile"
+      elevated
+    >
       <q-list bordered separator>
         <q-item-label header>Settings</q-item-label>
 
         <q-separator></q-separator>
 
-
-       
         <q-item-label header>Servers</q-item-label>
-        <q-item v-for="(server,id) in state.servers" :key="id">
+        <q-item v-for="(server, id) in state.servers" :key="id">
           <q-item-section>{{ server.x_url }}</q-item-section>
         </q-item>
       </q-list>
-
     </q-drawer>
 
-
+    <q-footer elevated>
+      <q-toolbar> 
+        <q-toolbar-title>
+          <q-btn flat icon="o_menu" size="md" @click="leftDrawer = !leftDrawer" />
+          <q-btn falt icon="o_home" size="md" @click="navigateToPage('/dashboard')"/>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-footer>
 
     <q-page-container>
       <router-view />
@@ -108,105 +92,192 @@
 </template>
 
 <script>
-import { ref , onMounted, reactive, watch } from 'vue'
+import { ref , onMounted, reactive, watch, provide } from 'vue'
 import { useRoute, useRouter, } from 'vue-router'
-import axios from 'axios'
-import { useQuasar, Dark } from 'quasar'
+import { useContactsStore } from 'src/stores/ContactsStore'
+import { useTasksStore } from 'src/stores/TasksStore'
+import { useAuthStore } from 'src/stores/AuthStore'
+// import axios from 'axios'
+// import { useQuasar } from 'quasar'
+import  UserModal  from 'src/components/UserModal.vue'
+import SearchBar from 'src/components/SearchBar.vue'
 
 export default {
+  name: 'MainLayout',
+  components: {
+    UserModal,
+    SearchBar,
+  },
   setup() {
     const state = reactive({
-      Uapikey: 'admin',
-      Udb: 'odoo',
-      UmyId: '2',
+      // Uapikey: "admin",
+      // Udb: "odoo",
+      // UmyId: "2",
       servers: [],
       rowsApi: ref([]),
+      contactsList: []
+    });
+
+    const contactsStore = useContactsStore();
+    const tasksStore = useTasksStore();
+    const authStore = useAuthStore();
+
+    
+
+    const userId = authStore.user 
+  
 
+    const leftDrawer = ref(false);
+    const settingsDrawerOpen = ref(false);
+    const miniState = ref(true);
 
-    })
-    const $q = useQuasar();
-    const leftDrawer = ref(false)
-    const settingsDrawerOpen = ref(false)
-    const miniState = ref(true)
+    
+
+
+    const pageTitle = ref("");
 
     const router = useRouter();
     const route = useRoute();
-   const pageTitle = ref(''); // initialize pageTitle as a ref
-
-   watch(route, (newRoute) => {
-     pageTitle.value = newRoute.name; // update pageTitle with the new route's name
-   });
 
+    onMounted(() => {
+      authStore.readUserFromLocalStorage();
+      console.log(authStore.user);
+      contactsStore.ReadContactsFromLocalStorage();
+      tasksStore.ReadTasksFromLocalStorage();
+    });
+
+    // Watch loginInfos and update local storage whenever it changes
+    watch(() => authStore.loginInfos, () => {
+    localStorage.setItem('loginInfos', JSON.stringify(authStore.loginInfos));
+    
+    }, 
+    { deep: true })  // Use deep watcher to watch changes in object properties
+
+
+    provide("contactsStore", contactsStore);
+    provide("tasksStore", tasksStore);
+    provide("authStore", authStore);
+
+    const fetchTaskStore = tasksStore.fetchTasksList;
+    const fetchContactsStore = contactsStore.fetchContactsList;
+
+    watch(route, (newRoute) => {
+      pageTitle.value = newRoute.name; // update pageTitle with the new route's name
+    });
     const navigateToPage = (path) => {
       router.push(path);
-    }
-    const isActive = (path) => {
+    };
+    const isRouteActive = (path) => {
       return route.path === path;
-    }
-    const fetchServerList = async () => {
-      try {
-        const options = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.Udb,
-                state.UmyId,
-                state.Uapikey,
-                'x_server_login',
-                'search_read',
-                [[["x_local_user_id", "=", Number(state.UmyId)]]],
-
-
-
-              ]
-            }
-          }
-        };
-        const responseServer = await axios.request(options);
-        state.servers = responseServer.data.result;
-
-        console.log(state.servers)
-      } catch (error) {
-        console.error(error);
-      }
+    };
 
+    const redirectToLogin = () => {
+      if (authStore.isLoggedIn.valueOf()  == false ) {
+        router.push("/")
+      }
     }
+    // const fetchServerList = async () => {
+    //   try {
+    //     const options = {
+    //       method: "POST",
+    //       url: "https://apps.alusage.fr/jsonrpc",
+    //       headers: {
+    //         "Content-Type": "application/json",
+    //       },
+    //       data: {
+    //         jsonrpc: "2.0",
+    //         params: {
+    //           service: "object",
+    //           method: "execute_kw",
+    //           args: [
+    //             state.Udb,
+    //             state.UmyId,
+    //             state.Uapikey,
+    //             "x_server_login",
+    //             "search_read",
+    //             [[["x_local_user_id", "=", Number(state.UmyId)]]],
+    //           ],
+    //         },
+    //       },
+    //     };
+    //     const responseServer = await axios.request(options);
+    //     state.servers = responseServer.data.result;
+
+    //     console.log(responseServer.data.result);
+        
+    //     console.log(state.servers);
+    //   } catch (error) {
+    //     console.error(error);
+    //   }
+    // };
+
+    onMounted(async () => {
+      // await fetchServerList();
+       await contactsStore.fetchContactsList()
+      // isContactsListLoaded.value = true;
+      await tasksStore.fetchTasksList()
+    });
 
-    onMounted(() => {
-      fetchServerList()
-
-    })
     return {
       state,
       leftDrawer,
       settingsDrawerOpen,
       miniState,
+  
       navigateToPage,
-      isActive,
-      fetchServerList,
+      isRouteActive,
+      // fetchServerList,
       pageTitle,
-
-
-
-
       toggleSettingsDrawer() {
-        settingsDrawerOpen.value = !settingsDrawerOpen.value
+        settingsDrawerOpen.value = !settingsDrawerOpen.value;
       },
+      // contactsList,
+      tasksStore,
+      contactsStore,
+      fetchTaskStore,
+      fetchContactsStore,
+      authStore,
+      redirectToLogin,
+      userId,
+      UserModal,
+      SearchBar,
+
+      // tasksStore,
+      // isContactsListLoaded,
+      // localStorage,
+    };
+  },
+};
+</script>
 
+<style lang="scss">
+.q-toolbar{
+  background-color: $q-primary;
+  color: white;
+}
 
+.q-avatar{
+  background-color: $q-primary;
+  color: white;
+}
 
+.q-drawer {
+  color: $q-primary; 
+    .q-item{
+      background-color: $grey-3;
+      border-radius: 0.625rem;
+      .q-checkbox{
+        display: flex;
+        flex-direction: column;
+      }
     }
+}
+  
 
+  // .q-checkbox__label{
+  //   color: $q-secondary;
+  //   border: red solid ;
+  // }
 
 
-  },
-}
-</script>
+</style>
\ No newline at end of file
diff --git a/src/pages/contact/ContactPage.vue b/src/pages/contact/ContactPage.vue
deleted file mode 100644
index e5be8b6..0000000
--- a/src/pages/contact/ContactPage.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
-  <q-page>
-    <div>
-      <q-toolbar > <q-input outlined v-model="state.searchTerm" label="Search contacts" /></q-toolbar>
-
-       <q-virtual-scroll
-         :items="filteredContacts"
-         :items-fn="() => filteredContacts"
-         separator
-         :item-key="item => item.id"
-         virtual-scroll-slice-size="10"
-       >
-
-          <q-intersection
-           v-for="(contact, id) in state.rows"
-           :key="id"
-           transition="jump-right"
-           style="height: 56px;">
-          <q-item clickable v-ripple  @click="showContactCard(contact)">
-          <q-item-section avatar>
-            <!-- #ToDo : Get the color by the companies name -->
-            <!-- #ToDo : Put a colored ring around the avatar from the companie name  -->
-            <q-avatar v-if="getBase64Image(contact)">
-              <img :src="getBase64Image(contact)">
-            </q-avatar>
-            <q-avatar v-else :color="getAvatarColor(contact.name)" text-color="white">
-              {{ getInitials(contact.name) }}
-            </q-avatar>
-          </q-item-section>
-          <q-item-section>
-            {{ contact.name }}
-          </q-item-section>
-        </q-item>
-        </q-intersection>
-        </q-virtual-scroll>
-    </div>
-    <q-page-sticky position="bottom-right" :offset="[18, 18]">
-      <q-btn fab icon="add" color="purple" @click="addNewContactDialog = true"></q-btn>
-    </q-page-sticky>
-    <q-dialog persistent maximized v-model="addNewContactDialog">
-      <q-card>
-        <q-card-section>
-          <div class="text-h6">New Contact</div>
-
-        </q-card-section>
-        <q-card-section>
-          <q-form>
-            <q-input type="text" required v-model="state.newname" label="Name :" autofocus
-              :rules="[(value) => !!value || 'Name is required']" />
-            <q-input type="text" v-model="state.newstreet" label="Street :" />
-            <q-input type="text" v-model="state.newstreet2" label="Street2 :" />
-            <q-input type="text" v-model="state.newzip" label="ZIP :" />
-            <q-input type="text" v-model="state.newcity" label="City :" />
-            <q-input type="text" v-model="state.newphone" label="Phone :" />
-            <q-input type="email" v-model="state.newemail" label="Email :" />
-
-            <q-card-actions align="around" class="text-primary">
-              <q-btn flat v-close-popup @click="clearNewContactForm">Cancel</q-btn>
-              <q-btn color="primary" @click="newContact">Add</q-btn>
-            </q-card-actions>
-          </q-form>
-
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-  </q-page>
-  <q-dialog v-model="dialogVisible">
-    <contact-card :contact="selectedContact" />
-  </q-dialog>
-</template>
-
-
-
-<script>
-import axios from 'axios'
-import { defineComponent, reactive, onMounted, ref, computed } from "vue";
-import { Notify, getCssVar } from 'quasar'
-import ContactCard from '../../components/ContactCard.vue';
-
-
-
-export default defineComponent({
-
-
-  name: 'ContactPage',
-  components: {
-    ContactCard
-  },
-  setup() {
-    const state = reactive({
-      apikey: 'admin',
-      db: 'odoo',
-      myId: '2',
-      rows: [],
-      searchTerm: '',
-
-    })
-    const addNewContactDialog = ref(false);
-    const dialogVisible = ref(false);
-    const selectedContact = ref(null);
-
-    const fetchContactList = async () => {
-      try {
-        const options = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'search_read',
-                [[]],
-                {
-                  fields: ['name', 'email_normalized', 'phone', 'mobile', 'image_1920', 'street', 'street2', 'zip', 'city',],
-                }
-              ]
-            }
-          }
-        };
-
-
-        const response = await axios.request(options);
-        state.rows = response.data.result;
-
-        console.log(state.rows)
-        console.log(state.rows[10].name)
-      } catch (error) {
-        console.error(error);
-      }
-
-    }
-    onMounted(() => {
-      fetchContactList();
-    })
-
-    const getBase64Image = (contact) => {
-      return contact.image_1920 ? `data:image/png;base64,${contact.image_1920}` : null;
-    }
-const getBorderColor = (name) => {
-  const colorName = "dark";
-  let color = getCssVar(`${colorName}`);
-  console.log(colorName + '=' +  color);
-  return color;
-
-}
-
-    const colors = [
-      'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'
-    ]
-    const getAvatarColor = (name) => {
-
-      const hash = [...name].reduce((acc, char) => char.charCodeAt(0) + ((acc << 5) - acc), 0);
-
-      return colors[Math.abs(hash % colors.length)];
-
-    },
-      getInitials = (name) => {
-        return name.charAt(0).toUpperCase();
-      }
-
-
-
-const filteredContacts = computed(() => {
-  if (!state.searchTerm) {
-    return state.rows;
-  }
-  return state.rows.filter(contact =>
-    contact.name.toLowerCase().includes(state.searchTerm.toLowerCase())
-  );
-});
-
-
-    const showContactCard = (contact) => {
-      selectedContact.value = contact;
-      dialogVisible.value = true;
-    }
-    const newContact = async () => {
-      try {
-        const options = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'create',
-                [{
-                  name: state.newname,
-                  street: state.newstreet,
-                  street2: state.newstreet2,
-                  zip: state.newzip,
-                  city: state.newcity,
-                  phone: state.newphone,
-                }]
-              ]
-            }
-          }
-        };
-
-        await axios.request(options);
-        fetchContactList();
-        clearNewContactForm();
-        addNewContactDialog.value = false;
-        Notify.create({
-          message: 'Contact added successfully',
-          color: 'green',
-        })
-
-      } catch (error) {
-        console.error(error);
-        Notify.create({
-          message: 'Error adding contact',
-          color: 'red',
-        });
-      }
-    };
-    const clearNewContactForm = () => {
-      state.newname = '';
-      state.newstreet = '';
-      state.newstreet2 = '';
-      state.newzip = '';
-      state.newcity = '';
-      state.newphone = '';
-      state.newemail = '';
-    }
-    return {
-      state,
-      fetchContactList,
-      newContact,
-      getAvatarColor,
-      getInitials,
-      getBase64Image,
-      clearNewContactForm,
-      addNewContactDialog,
-      dialogVisible,
-      selectedContact,
-      showContactCard,
-      ContactCard,
-      getBorderColor,
-      filteredContacts
-
-
-    }
-  }
-})
-</script>
diff --git a/src/pages/contacts/ContactsPage.vue b/src/pages/contacts/ContactsPage.vue
new file mode 100644
index 0000000..7c33045
--- /dev/null
+++ b/src/pages/contacts/ContactsPage.vue
@@ -0,0 +1,622 @@
+<template>
+  <q-page>
+    <!-- to do add slider and get full width -->
+
+    <q-list bordered class="q-mt-md">
+      <q-item-label header>
+        <!-- <q-btn-dropdown></q-btn-dropdown> -->
+        Companies
+      </q-item-label>
+      <q-separator />
+
+      <q-slide-item
+        @right="onRight"
+        @left="onLeft"
+        v-for="contact in contactsStore.getCompanies"
+        :key="contact.id"
+      >
+        <template v-slot:left>
+          {{ contact.name }}
+
+          <div justify-end>
+            <q-btn flat icon="phone" />
+            <q-btn flat icon="mail" />
+            <q-btn flat icon="link" />
+          </div>
+        </template>
+
+        <template v-slot:right> att stp </template>
+
+        <q-item class="q-m-sm" clickable v-ripple>
+          <q-item-section avatar>
+            <q-avatar v-if="getBase64Image(contact)">
+              <img :src="getBase64Image(contact)" draggable="false" />
+            </q-avatar>
+            <q-avatar
+              v-else
+              :color="getAvatarColor(contact.name)"
+              text-color="white"
+              draggable="false"
+            >
+              {{ getInitials(contact.name) }}
+            </q-avatar>
+          </q-item-section>
+
+          <q-item-section>
+            <!-- <q-item-section side v-if="contact.is_company">
+            <q-icon name="o_business" color="blue"/>
+
+            </q-item-section>
+            <q-item-section side v-else>
+            <q-icon name="person" color="green"/>
+          </q-item-section> -->
+            <q-item-label>
+              <q-icon name="o_business" color="blue" />
+              {{ contact.name }}
+            </q-item-label>
+            <q-item-label caption lines="1">{{ contact.email }}</q-item-label>
+            <q-item-label caption lines="2">{{
+              contact.phone || "Phone is not provided"
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-slide-item>
+
+      <q-separator />
+
+      <q-item-label header>Individual</q-item-label>
+
+      <q-separator />
+
+      <q-slide-item
+      v-for="contact in contactsStore.getIndividuals"
+        :key="contact.id"
+        @right="onRight"
+        @left="onLeft"
+      >
+
+      <template v-slot:left>
+        {{ contact.name }}
+
+          <div justify-end>
+            <q-btn flat icon="phone" />
+            <q-btn flat icon="mail" />
+            <q-btn flat icon="link" />
+          </div>
+      </template>
+
+      <template v-slot:right> att stp </template>
+
+      <q-item
+        class="q-m-sm"
+        clickable
+        v-ripple
+      >
+        <q-item-section avatar>
+          <q-avatar v-if="getBase64Image(contact)">
+            <img :src="getBase64Image(contact)" />
+          </q-avatar>
+          <q-avatar
+            v-else
+            :color="getAvatarColor(contact.name)"
+            text-color="white"
+          >
+            {{ getInitials(contact.name) }}
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>
+            <q-icon name="person" color="green" />
+            {{ contact.name }}
+          </q-item-label>
+          <q-item-label caption lines="1">{{ contact.email }}</q-item-label>
+          <q-item-label caption lines="2">{{
+            contact.phone || "Phone is not provided"
+          }}</q-item-label>
+        </q-item-section>
+      </q-item>
+
+      </q-slide-item>
+    </q-list>
+
+    <!-- <div class="q-pa-md">
+      <h2>Contacts List </h2>
+      <q-list bordered separator>
+     
+        
+        <template v-for="contact in contactsStore.contactsList" :key="contact.id">
+          <q-item class="q-my-md" clickable v-ripple style="max-height: 1.875rem;">
+            <q-item-section avatar>
+              avatar image 
+              <q-avatar  v-if="getBase64Image(contact)">
+                <img :src="getBase64Image(contact)">
+              </q-avatar>
+              <q-avatar
+              
+                v-else
+                :color="getAvatarColor(contact.name)"
+                text-color="white"
+              >
+                {{ getInitials(contact.name) }}
+
+                
+              </q-avatar>
+              <q-item-section class="q-pa-md">
+              {{ contact.name }} 
+              <q-item-section>
+                  {{ contact.email || "pas d'email" }}
+              </q-item-section>
+              
+                <q-item-label caption lines="1"  v-if="contact.is_company">
+                  <q-icon name="o_business" color="blue"/>
+                  Company 
+                </q-item-label >
+                <q-item-label caption lines="1"  v-else >
+                  <q-icon name="o_person" color="green"/>
+                   Individual 
+                </q-item-label >
+                
+                <q-item-label caption>
+                  (From database :  {{ contact.FromDatabase }})
+                </q-item-label>
+                
+            </q-item-section>
+            
+          </q-item-section>
+          </q-item>
+          <q-separator/>
+        </template>
+      
+      </q-list> -->
+
+    <!-- <p v-for="contact in contactsStore.contactsList" :key="contact.id">
+          {{ contact.name }}
+        </p> 
+      
+    </div>-->
+    <!-- 
+    <div v-if="isContactListFetched">
+      <q-virtual-scroll
+        ref="virtualScrollRef"
+        :items="filteredContacts"
+        :items-fn="() => filteredContacts"
+        separator
+        :item-key="(item) => item.id"
+        virtual-scroll-slice-size="10"
+      >
+        <q-intersection
+          v-for="(contact, id) in state.rows"
+          :key="id"
+          transition="jump-right"
+          style="height: 3.5rem"
+        >
+          <q-item clickable v-ripple @click="showContactCard(contact)">
+            <q-item-section avatar>
+               #ToDo : Get the color by the companies name 
+              #ToDo : Put a colored ring around the avatar from the companie name  
+              <q-avatar v-if="getBase64Image(contact)">
+                <img :src="getBase64Image(contact)" />
+              </q-avatar>
+              <q-avatar
+                v-else
+                :color="getAvatarColor(contact.name)"
+                text-color="white"
+              >
+                {{ getInitials(contact.name) }}
+              </q-avatar>
+            </q-item-section>
+
+            <q-item-section>
+              {{ contact.name }}
+              <q-item-section v-if="contact.is_company" caption>
+                Company
+              </q-item-section>
+              <q-item-section v-else caption> Individual </q-item-section>
+            </q-item-section>
+          </q-item>
+        </q-intersection>
+      </q-virtual-scroll>
+    </div>-->
+
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-btn
+        fab
+        icon="add"
+        color="purple"
+        @click="addNewContactDialog = true"
+      ></q-btn>
+    </q-page-sticky>
+    <q-dialog persistent maximized v-model="addNewContactDialog">
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">New Contact</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-form>
+            <q-input
+              type="text"
+              required
+              v-model="state.newname"
+              label="Name :"
+              autofocus
+              :rules="[(value) => !!value || 'Name is required']"
+            />
+
+            <q-input type="text" v-model="state.newstreet" label="Street :" />
+
+            <q-input type="text" v-model="state.newstreet2" label="Street2 :" />
+
+            <q-input type="text" v-model="state.newzip" label="ZIP :" />
+
+            <q-input type="text" v-model="state.newcity" label="City :" />
+
+            <q-input type="text" v-model="state.newphone" label="Phone :" />
+
+            <q-input type="email" v-model="state.newemail" label="Email :" />
+
+            <q-card-actions align="around" class="text-primary">
+              <q-btn flat v-close-popup @click="clearNewContactForm"
+                >Cancel</q-btn
+              >
+
+              <q-btn color="primary" @click="newContact">Add</q-btn>
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <!-- 
+      bar sticky
+        probleme de z-index
+       le laisser en fin de page sinon c'est moche parceque ça passe en dessous de la liste
+    -->
+    <q-page-sticky expand position="top">
+      <q-toolbar
+        class="bg-primary text-white shadow-2"
+        style="min-height: 0.9375rem"
+      >
+        <text-overline> Contacts </text-overline>
+      </q-toolbar>
+    </q-page-sticky>
+  </q-page>
+
+  <q-dialog v-model="dialogVisible">
+    <contact-card :contact="selectedContact" />
+  </q-dialog>
+</template>
+
+<script>
+import axios from "axios";
+import {
+  defineComponent,
+  reactive,
+  onMounted,
+  ref,
+  computed,
+  inject,
+  onBeforeMount,
+} from "vue";
+import { Notify, getCssVar } from "quasar";
+// import ContactPreview from '../../components/ContactPreview.vue';
+import ContactCard from "../../components/ContactCard.vue";
+import { watch } from "vue";
+// import { useContactsStore } from "src/stores/ContactsStore";
+
+export default defineComponent({
+  name: "ContactsPage",
+  components: {
+    ContactCard,
+
+    // ContactPreview,
+  },
+
+  /**
+   * Generates a new contact by making a POST request to the specified URL.
+   *
+   * @param {Object} state - The state object containing various properties.
+   * @param {string} state.db - The name of the database.
+   * @param {string} state.myId - The ID of the user.
+   * @param {string} state.apikey - The API key.
+   * @param {string} state.newname - The name of the new contact.
+   * @param {string} state.newstreet - The street of the new contact.
+   * @param {string} state.newstreet2 - The second street of the new contact.
+   * @param {string} state.newzip - The ZIP code of the new contact.
+   * @param {string} state.newcity - The city of the new contact.
+   * @param {string} state.newphone - The phone number of the new contact.
+   * @return {Promise<void>} - A promise that resolves when the new contact is added successfully.
+   */
+  setup() {
+    console.log("Setup function called!");
+    const state = reactive({
+      apikey: "admin",
+      db: "odoo",
+      myId: "2",
+      rows: [],
+      searchTerm: "",
+    });
+    const addNewContactDialog = ref(false);
+    const dialogVisible = ref(false);
+    const selectedContact = ref(null);
+    const virtualScrollRef = ref(null);
+    const isContactListFetched = ref(false); // Define isContactListFetched as a ref
+    const contactsStore = inject("contactsStore");
+    const authStore = inject("authStore");
+    /**
+     * Fetches the contact list from the server.
+     *
+     * @return {Promise} A promise that resolves with the contact list.
+     */
+    const fetchContactList = async () => {
+      try {
+        const options = {
+          method: "POST",
+          url: "https://apps.alusage.fr/jsonrpc",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          data: {
+            jsonrpc: "2.0",
+            params: {
+              service: "object",
+              method: "execute_kw",
+              args: [
+                state.db,
+                state.myId,
+                state.apikey,
+                "res.partner",
+                "search_read",
+                [[]],
+                {
+                  fields: [
+                    "name",
+                    "email_normalized",
+                    "phone",
+                    "mobile",
+                    "image_1920",
+                    "street",
+                    "street2",
+                    "zip",
+                    "city",
+                    "write_date",
+                    "function",
+                    "is_company",
+                  ],
+                },
+              ],
+            },
+          },
+        };
+
+        const response = await axios.request(options);
+        state.rows = response.data.result;
+        isContactListFetched.value = true;
+
+        console.log(state.rows);
+        console.log(state.rows[10].name);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    watch(
+      () => authStore.loginInfos,
+      () => {
+        contactsStore.fetchContactsList();
+      },
+      { deep: true }
+    );
+
+    onMounted(() => {
+      // Fetch the contact list when the component is mounted
+      fetchContactList();
+    });
+
+    const getBase64Image = (contact) => {
+      return contact.image_1920
+        ? `data:image/png;base64,${contact.image_1920}`
+        : null;
+    };
+    const getBorderColor = (name) => {
+      const colorName = "dark";
+      let color = getCssVar(`${colorName}`);
+      console.log(colorName + "=" + color);
+      return color;
+    };
+
+    const colors = [
+      "red",
+      "pink",
+      "purple",
+      "deep-purple",
+      "indigo",
+      "blue",
+      "light-blue",
+      "cyan",
+      "teal",
+      "green",
+      "light-green",
+      "lime",
+      "yellow",
+      "amber",
+      "orange",
+      "deep-orange",
+      "brown",
+      "grey",
+      "blue-grey",
+    ];
+    const getAvatarColor = (name) => {
+        const hash = [...name].reduce(
+          (acc, char) => char.charCodeAt(0) + ((acc << 5) - acc),
+          0
+        );
+
+        return colors[Math.abs(hash % colors.length)];
+      },
+      getInitials = (name) => {
+        return name.charAt(0).toUpperCase();
+      };
+
+    const filteredContacts = computed(() => {
+      // Check if the search term is empty
+      if (!state.searchTerm.trim()) {
+        return state.rows;
+      }
+
+      // Convert the search term to lowercase for case-insensitive comparison
+      const searchTermLowerCase = state.searchTerm.toLowerCase();
+
+      // Use the filter method to create a new array containing only the contacts
+      // whose names include the lowercase search term
+      return state.rows.filter((contact) =>
+        contact.name.toLowerCase().includes(searchTermLowerCase)
+      );
+    });
+
+    /**
+     * Displays the contact card for the specified contact.
+     *
+     * @param {object} contact - The contact object to display.
+     */
+    const showContactCard = (contact) => {
+      if (contact) {
+        selectedContact.value = contact;
+        dialogVisible.value = true;
+      }
+    };
+
+    /**
+     * Generates a new contact by making a POST request to the specified URL.
+     *
+     * @param {Object} state - The state object containing various properties.
+     * @param {string} state.db - The name of the database.
+     * @param {string} state.myId - The ID of the user.
+     * @param {string} state.apikey - The API key.
+     * @param {string} state.newname - The name of the new contact.
+     * @param {string} state.newstreet - The street of the new contact.
+     * @param {string} state.newstreet2 - The second street of the new contact.
+     * @param {string} state.newzip - The ZIP code of the new contact.
+     * @param {string} state.newcity - The city of the new contact.
+     * @param {string} state.newphone - The phone number of the new contact.
+     * @return {Promise<void>} - A promise that resolves when the new contact is added successfully.
+     */
+    const newContact = async () => {
+      // const contactsStore = useContactsStore();
+      try {
+        const options = {
+          method: "POST",
+          url: "https://apps.alusage.fr/jsonrpc",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          data: {
+            jsonrpc: "2.0",
+            params: {
+              service: "object",
+              method: "execute_kw",
+              args: [
+                state.db,
+                state.myId,
+                state.apikey,
+                "res.partner",
+                "create",
+                [
+                  {
+                    name: state.newname,
+                    street: state.newstreet,
+                    street2: state.newstreet2,
+                    zip: state.newzip,
+                    city: state.newcity,
+                    phone: state.newphone,
+                  },
+                ],
+              ],
+            },
+          },
+        };
+
+        await axios.request(options);
+        await contactsStore.fetchContactsList(), fetchContactList();
+        clearNewContactForm();
+        addNewContactDialog.value = false;
+        Notify.create({
+          message: "Contact added successfully",
+          color: "green",
+        });
+      } catch (error) {
+        console.error(error);
+        Notify.create({
+          message: "Error adding contact",
+          color: "red",
+        });
+      }
+    };
+
+    /**
+     * Clears the new contact form by resetting all its fields.
+     */
+    const clearNewContactForm = () => {
+      state.newname = "";
+      state.newstreet = "";
+      state.newstreet2 = "";
+      state.newzip = "";
+      state.newcity = "";
+      state.newphone = "";
+      state.newemail = "";
+    };
+
+    /**
+     * Updates the filtered contacts based on the current search term.
+     *
+     * @param {string} state.searchTerm - The current search term.
+     * @return {void} This function does not return anything.
+     */
+
+    // function and const for sliders
+    let timer
+    function finalize (reset){
+      timer= setTimeout(()=>{
+        reset()
+      }, 3000)
+    }
+
+    onBeforeMount(() => {
+      clearTimeout(timer)
+    });
+
+    return {
+      state,
+      fetchContactList,
+      isContactListFetched, // Add isContactListFetched to the returned object
+      newContact,
+      getAvatarColor,
+      getInitials,
+      getBase64Image,
+      clearNewContactForm,
+      addNewContactDialog,
+      dialogVisible,
+      selectedContact,
+      showContactCard,
+      ContactCard,
+      // ContactPeview,
+      getBorderColor,
+      filteredContacts,
+      virtualScrollRef,
+      contactsStore,
+
+      // function for slider one for each slide direction
+      onLeft ({ reset }) {
+        finalize(reset)
+      },
+
+      onRight ({ reset }) {
+        finalize(reset)
+      },
+
+      watch,
+    };
+  },
+});
+</script>
diff --git a/src/pages/core/Dashboard-copy.vue b/src/pages/core/Dashboard-copy.vue
deleted file mode 100644
index 0a7fc6d..0000000
--- a/src/pages/core/Dashboard-copy.vue
+++ /dev/null
@@ -1,331 +0,0 @@
-<template>
-  <q-page class="flex column items-center justify-center">
-    <q-input type="text" v-model="state.db" label="Database:"
-      :rules="[(value) => !!value || 'Database is required']"></q-input>
-    <q-input type="text" v-model="state.myId" label="My ID:"
-      :rules="[(value) => !!value || 'My ID is required']"></q-input>
-    <q-input type="text" v-model="state.apikey" label="API Key:"
-      :rules="[(value) => !!value || 'API Key is required']"></q-input>
-    <q-card>
-
-      <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="justify"
-        narrow-indicator>
-        <q-tab name="list" label="Contact list" />
-        <q-tab name="new" label="New Contact" />
-        <q-tab name="update" label="Update Contact" />
-
-      </q-tabs>
-      <q-separator />
-      <q-tab-panels v-model="tab" animated>
-        <q-tab-panel name="list">
-          <div class="text-h6">Contact list</div>
-          <q-form class="q-gutter-md flex column" @submit.prevent="fetchContactList">
-
-
-            <q-btn type="submit" rounded color="primary" text-color="white" primary class="q-mt-xl "
-              label="Get contact list" />
-          </q-form>
-          <q-table class="q-mt-xl" :rows="state.rows" :columns="columns" row-key="name" />
-        </q-tab-panel>
-
-        <q-tab-panel name="new">
-          <div class="text-h6">New Contact</div>
-          <q-form class="q-gutter-md flex column items-center" @submit.prevent="newContact">
-            <q-input type="text" v-model="state.newname" label="Name :" autofocus
-              :rules="[(value) => !!value || 'Name is required']"></q-input>
-            <q-input type="text" v-model="state.newstreet" label="Street :"
-              :rules="[(value) => !!value || 'Street is required']"> </q-input>
-            <q-input type="text" v-model="state.newstreet2" label="Street2 :"> </q-input>
-            <q-input type="text" v-model="state.newzip" label="ZIP :" :rules="[(value) => !!value || 'ZIP is required']">
-            </q-input>
-            <q-input type="text" v-model="state.newcity" label="City :"
-              :rules="[(value) => !!value || 'City is required']">
-            </q-input>
-            <q-input type="text" v-model="state.newphone" label="Phone :"> </q-input>
-
-
-            <q-btn type="submit" rounded color="primary" text-color="white" primary class="q-mt-xl " label="Send" />
-
-          </q-form>
-        </q-tab-panel>
-        <q-tab-panel name="update">
-          <div class="text-h6">Update Contact</div>
-          <q-form class="q-gutter-md flex column items-center" @submit.prevent="searchContactID">
-            <q-input type="text" v-model="state.id" label="ID :" autofocus> </q-input>
-            <q-btn type="submit" rounded color="primary" text-color="white" primary class="q-mt-l " label="Search" />
-          </q-form>
-          <q-form class="q-gutter-md flex column items-center" @submit.prevent="updateContact">
-
-            <q-input type="text" v-model="state.updatename" label="Name :"
-              :rules="[(value) => !!value || 'Name is required']"></q-input>
-            <q-input type="text" v-model="state.updatestreet" label="Street :"
-              :rules="[(value) => !!value || 'Street is required']"> </q-input>
-            <q-input type="text" v-model="state.updatestreet2" label="Street2 :"> </q-input>
-            <q-input type="text" v-model="state.updatezip" label="ZIP :"
-              :rules="[(value) => !!value || 'ZIP is required']">
-            </q-input>
-            <q-input type="text" v-model="state.updatecity" label="City :"
-              :rules="[(value) => !!value || 'City is required']">
-            </q-input>
-            <q-input type="text" v-model="state.updatephone" label="Phone :"> </q-input>
-
-            <q-btn type="submit" rounded color="primary" text-color="white" primary class="q-mt-xl " label="Send" />
-
-          </q-form>
-        </q-tab-panel>
-
-      </q-tab-panels>
-    </q-card>
-  </q-page>
-</template>
-
-<script>
-import axios from 'axios'
-import { defineComponent, reactive, ref } from 'vue'
-
-export default defineComponent({
-  name: 'DashboardPage',
-  setup() {
-    const state = reactive({
-      apikey: '42584093f5ac1d2b71ff0978bc62a5e62b3f76fb',
-      db: 'odoo',
-      myId: '2',
-      name: '',
-      rows: [],
-      id: '',
-      updatename: '',
-      updatestreet: '',
-      updatestreet2: '',
-      updatezip: '',
-      updatecity: '',
-      updatephone: '',
-      newname: '',
-      newstreet: '',
-      newstreet2: '',
-      newzip: '',
-      newcity: '',
-      newphone: '',
-      updateid: '',
-
-    })
-    const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id' },
-      { name: 'name', label: 'Name', align: 'left', field: 'name' },
-      { name: 'street', label: 'Street', align: 'left', field: 'street' },
-      { name: 'street2', label: 'Street 2', align: 'left', field: 'street2' },
-      { name: 'zip', label: 'ZIP', align: 'left', field: 'zip' },
-      { name: 'city', label: 'City', align: 'left', field: 'city' },
-      { name: 'phone', label: 'Phone', align: 'left', field: 'phone' },
-      { name: 'is_company', label: 'Is Company', align: 'left', field: 'is_company' },
-
-    ]
-
-    /**
-     * Fetches the contact list from the API and updates the state with the response data.
-     */
-    const fetchContactList = async () => {
-      try {
-        const optionsSearch = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'search',
-                [[]]
-              ]
-            }
-          }
-        };
-
-
-        const responseSearch = await axios.request(optionsSearch);
-        const result = responseSearch.data.result;
-
-        const optionsRead = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'read',
-                [result]
-              ]
-            }
-          }
-        };
-
-
-        const responseRead = await axios.request(optionsRead);
-        state.rows = responseRead.data.result;
-      } catch (error) {
-        console.error(error);
-      }
-
-    }
-    /**
-     * Creates a new contact by sending a POST request to the server.
-     */
-    const newContact = async () => {
-      try {
-        const options = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'create',
-                [{
-                  name: state.newname,
-                  street: state.newstreet,
-                  street2: state.newstreet2,
-                  zip: state.newzip,
-                  city: state.newcity,
-                  phone: state.newphone,
-                }]
-              ]
-            }
-          }
-        };
-
-        await axios.request(options);
-
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    /**
-     * Retrieves the contact ID from the API.
-
-     */
-    const searchContactID = async () => {
-      try {
-
-        const optionsReadId = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'read',
-                [[Number(state.id)]]
-              ]
-            }
-          }
-        };
-        const responseReadId = await axios.request(optionsReadId);
-
-        const contact = responseReadId.data.result[0];
-        state.updateid = contact.id;
-        state.updatename = contact.name;
-        state.updatestreet = contact.street;
-        state.updatestreet2 = contact.street2;
-        state.updatezip = contact.zip;
-        state.updatecity = contact.city;
-        state.updatephone = contact.phone;
-        console.log(contact);
-        console.log(state.updateid);
-        console.log(state.updatename);
-
-
-
-      } catch (error) {
-        console.error(error);
-
-      }
-    };
-
-    /**
-     * Updates a contact in the database.
-     */
-    const updateContact = async () => {
-      try {
-        const options = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'write',
-                [[Number(state.updateid)], {
-                  name: state.updatename,
-                  street: state.updatestreet,
-                  street2: state.updatestreet2,
-                  zip: state.updatezip,
-                  city: state.updatecity,
-                  phone: state.updatephone,
-                }]
-              ]
-            }
-          }
-        };
-
-        await axios.request(options);
-
-      } catch (error) {
-        console.error(error);
-      }
-    };
-
-    return {
-      state,
-      fetchContactList,
-      newContact,
-      columns,
-      searchContactID,
-      updateContact,
-      tab: ref('list')
-    }
-  },
-})
-</script>
diff --git a/src/pages/core/DashboardPage.vue b/src/pages/core/DashboardPage.vue
index 42b8357..c535183 100644
--- a/src/pages/core/DashboardPage.vue
+++ b/src/pages/core/DashboardPage.vue
@@ -1,18 +1,18 @@
 <template>
   <q-page padding>
     <q-btn flat rounded @click="navigateToPage('/notification')">
-      <q-avatar color="orange" text-color="white" size="10rem" icon="o_notifications">
-        <q-badge color="orange" floating>12</q-badge>
+      <q-avatar color="deep-purple" text-color="white" size="3rem" icon="o_notifications">
+        <q-badge color="red" floating>12</q-badge>
       </q-avatar>
     </q-btn>
-    <q-btn flat rounded @click="navigateToPage('/contact')">
-      <q-avatar color="purple" text-color="white" size="10rem" icon="o_contact_page">
-        <q-badge color="orange" floating>{{state ? state.countContactResult : ''}}</q-badge>
+    <q-btn flat rounded @click="navigateToPage('/contacts')">
+      <q-avatar color="deep-purple" text-color="white" size="3rem" icon="o_contact_page">
+        <q-badge color="red" floating>{{state ? state.countContactResult : ''}}</q-badge>
       </q-avatar>
     </q-btn>
     <q-btn flat rounded @click="navigateToPage('/task')">
-      <q-avatar color="green" text-color="white" size="10rem" icon="o_task_alt">
-        <q-badge color="orange" floating>24</q-badge>
+      <q-avatar color="deep-purple" text-color="white" size="3rem" icon="o_task_alt">
+        <q-badge color="red" floating>24</q-badge>
       </q-avatar>
     </q-btn>
   </q-page>
@@ -22,79 +22,71 @@
 import axios from 'axios'
 import { defineComponent, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-export default defineComponent({
-  name: 'DashboardPage',
-  setup() {
-    const state = reactive({
-      apikey: 'admin',
-      db: 'odoo',
-      myId: '2',
-      countContactResult : 0,
-
-
-    })
-
-
 
-    const countContact = async () => {
-
-      try {
-        const optionsCountContact = {
-          method: 'POST',
-          url: 'https://apps.alusage.fr/jsonrpc',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          data: {
-            jsonrpc: '2.0',
-            params: {
-              service: 'object',
-              method: 'execute_kw',
-              args: [
-                state.db,
-                state.myId,
-                state.apikey,
-                'res.partner',
-                'search_count',
-                [[]]
-              ]
+export default defineComponent({
+    name: 'DashboardPage',
+    setup() {
+      const state = reactive({
+        apikey: 'admin',
+        db: 'odoo',
+        myId: '2',
+        countContactResult : 0,
+        
+
+      })
+      
+      const countContact = async () => {
+
+        try {
+          const optionsCountContact = {
+            method: 'POST',
+            url: 'https://apps.alusage.fr/jsonrpc',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            data: {
+              jsonrpc: '2.0',
+              params: {
+                service: 'object',
+                method: 'execute_kw',
+                args: [
+                  state.db,
+                  state.myId,
+                  state.apikey,
+                  'res.partner',
+                  'search_count',
+                  [[]]
+                ]
+              }
             }
-          }
-        };
-
-
-        const responseCountContact = await axios.request(optionsCountContact);
-        state.countContactResult = responseCountContact.data.result;
-      } catch (error) {
-        console.error(error);
-      };
-    }
-
-
-    const router = useRouter();
-
-    const navigateToPage = (path) => {
-      router.push(path);
-    }
-
-
-
+          };
 
+          const responseCountContact = await axios.request(optionsCountContact);
+          state.countContactResult = responseCountContact.data.result;
+        } catch (error) {
+          console.error(error);
+        };
+      }
 
 
-  onMounted(() => {
-    countContact()
-  })
+      const router = useRouter();
 
-    return {
-      state,
-      countContact,
-      navigateToPage,
+      const navigateToPage = (path) => {
+        router.push(path);
+      }
 
 
-    }
-    }
-  })
+      onMounted(() => {
+        countContact()
+      })
 
+      return {
+        state,
+        countContact,
+        navigateToPage,
 
+      }
+    },
+  }
+)
 </script>
diff --git a/src/pages/core/IndexPage.vue b/src/pages/core/IndexPage.vue
index 3df5b06..977009a 100644
--- a/src/pages/core/IndexPage.vue
+++ b/src/pages/core/IndexPage.vue
@@ -1,18 +1,30 @@
 <template>
   <q-page class="flex column items-center justify-center">
-    <img style="margin-bottom: 3rem;" src="/images/odoo-logo.png" alt="oddo's logo" width="200">
+    <img style="margin-bottom: 3rem;" src="/images/odoo.png" alt="oddo's logo" width="200">
+
     <q-form class="q-gutter-md flex column" @submit.prevent="submitForm">
+
+      <q-input type="url" v-model="state.url" hint="https://apps.alusage.fr/jsonrpc" placeholder="http://www.example.com"  label="Url :" :rules="[(value) => !!value || 'Url is required']"></q-input>
+
       <q-input type="text" v-model="state.database" label="Database :" autofocus
         :rules="[(value) => !!value || 'Database is required']"></q-input>
-      <q-input type="text" v-model="state.login" label="Login :" :rules="[(value) => !!value || 'Login is required']" />
+
+      <q-input type="text" v-model="state.login" label="Login :" :rules="[(value) => !!value || 'Login is required']" /> 
+
       <q-input :type="state.isPwd ? 'password' : 'text'" v-model="state.password" label="Password :">
         <template v-slot:append>
+
           <q-icon :name="state.isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
-            @click="state.isPwd = !state.isPwd" />
+          @click="state.isPwd = !state.isPwd" />
+
         </template>
       </q-input>
+
       <div v-if="loginError" class="text-negative">{{ loginError }}</div>
+
+
       <q-btn type="submit" rounded color="primary" text-color="white" primary class="q-mt-xl " label="Sign In" />
+
     </q-form>
   </q-page>
 </template>
@@ -22,12 +34,16 @@ import { defineComponent, ref, reactive, computed } from 'vue'
 import { required } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { useRouter } from 'vue-router';
-import { useAuthStore } from 'src/stores/authStore';
+import { useAuthStore } from 'src/stores/AuthStore';
+
+
+
 
 export default defineComponent({
   name: 'IndexPage',
   setup() {
     const state = reactive({
+      url : '',
       database: '',
       login: '',
       password: '',
@@ -35,6 +51,7 @@ export default defineComponent({
     })
     const rules = computed(() => {
       return {
+        url : { required }, // "https://apps.alusage.fr/jsonrpc"
         database: { required },
         login: { required },
         password: { required },
@@ -46,40 +63,56 @@ export default defineComponent({
     const loginError = ref('');
     const authStore = useAuthStore();
 
+    
 
+    
+  
 
+    /**
+     * Submit the form after validating the input fields.
+     */
+      // #ToDO Use authStore.js
+      const submitForm = async () => {
+      if (v$.value.$error) {
+        loginError.value = 'Please fill out all fields correctly.';
 
-/**
- * Submit the form after validating the input fields.
- */
-   // #ToDO Use authStore.js
-   const submitForm = async () => {
-  if (v$.value.$error) {
-    loginError.value = 'Please fill out all fields correctly.';
-
-  }
-
-  await authStore.login({
-    db: state.database,
-    login: state.login,
-    password: state.password
-  });
-
-
-  if (authStore.loginError) {
-    loginError.value = authStore.loginError;
-  } else {
-    router.push('/Dashboard');
-  }
-};
-
-
-
+      }
 
+      await authStore.login({ // mis en state des infos de connection pour les passer à authStore
+        url : state.url,
+        db: state.database,
+        login: state.login,
+        password: state.password
+      });
+
+
+      if (authStore.loginError) {
+        loginError.value = authStore.loginError;
+      } else {
+
+        await authStore.login(
+          {
+            url : state.url,
+            db : state.database,
+            login : state.login,
+            password : state.password
+          }
+        )
+        console.log( state.url, state.database, state.login, state.password)  
+        router.push('/Dashboard');
+
+        
+      }
+    };
 
     return {
       state, v$, submitForm, loginError
     }
   }
+  
+
 })
-</script>
+
+
+
+</script>
\ No newline at end of file
diff --git a/src/pages/core/js/odoo.js b/src/pages/core/js/odoo.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/task/TaskPage.vue b/src/pages/task/TaskPage.vue
index 959d664..88b0d0d 100644
--- a/src/pages/task/TaskPage.vue
+++ b/src/pages/task/TaskPage.vue
@@ -1,11 +1,94 @@
 <template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
+  <q-page >
+   
+    <q-list bordered separator>
+      <q-slide-item  
+      @right="onRight" right-color="green"
+      @left="onLeft" left-color="blue"
+        v-for="task in tasksStore.tasksList"
+        :key="task.id" >
+
+        <template v-slot:left>
+          <q-btn flat icon="hourglass_top" label="Set Timer, start task"/>
+        </template>
+        <template v-slot:right>
+          <q-btn flat icon="hourglass_bottom" label="Stop Timer, task done"/>
+        </template>
+      <q-item
+        clickable
+        v-ripple
+      >
+        <q-item-section>
+          {{ task.name }}
+          <q-item-label caption>
+            From db : {{ task.FromDatabase }}
+          </q-item-label>
+          <q-separator/>
+            {{ task.description  }}
+        </q-item-section>
+      </q-item>
+      </q-slide-item>
+    </q-list>
+
+    <!-- toDo : Add timer vue for task where Is timerSet=true -->
+
+  </q-page>  
 </template>
 
 <script>
-export default {
-  // name: 'PageName',
-}
+import { useQuasar } from 'quasar';
+import { defineComponent, inject, watch, onBeforeMount, ref } from 'vue';
+
+export default defineComponent({
+  name: 'tasksPage',
+  data() {
+    return {
+      storedData: null,
+      dataRetrievalStatus: 'loading',
+    };
+  },
+  setup() {
+    const $q = useQuasar(); 
+    const tasksStore = inject("tasksStore");
+    const authStore = inject("authStore");
+    const cleanTaskDescriptions = ref([]);
+
+   
+    
+
+    let timer
+    function finalize (reset){
+      timer= setTimeout(()=>{
+        reset()
+      }, 3000)
+    }
+
+    onBeforeMount(() => {
+      clearTimeout(timer)
+    });
+
+    // Watch loginInfos and update local storage whenever it changes
+    watch(() => authStore.loginInfos, () => {
+      tasksStore.ReadTaskFromLocalStorage;
+       cleanTaskDescriptions.value = tasksStore.tasksList.map(task => task.description.replace(/<[^>]*>/g, ""))
+    }, 
+    { deep: true })  // Use deep watcher to watch changes in object properties
+
+    return {
+      tasksStore,
+      cleanTaskDescriptions,
+
+      onLeft ({ reset }) {
+        $q.notify('Timer started, task is in progress')
+        finalize(reset)
+      },
+
+      onRight ({ reset }) {
+        $q.notify('Timer stopped, task is done')
+        finalize(reset)
+      },
+    }
+  },
+ 
+});
 </script>
diff --git a/src/router/contactRoutes.js b/src/router/contactRoutes.js
deleted file mode 100644
index 22988c7..0000000
--- a/src/router/contactRoutes.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const contactRoutes = [
-  {
-    path: "/contact",
-    component: () => import("layouts/MainLayout.vue"),
-    children: [
-      {
-        path: "",
-        name: "Contact",
-        component: () => import("src/pages/contact/ContactPage.vue")
-      }
-    ]
-
-  },
-];
-
-export default contactRoutes;
-
diff --git a/src/router/contactsRoutes.js b/src/router/contactsRoutes.js
new file mode 100644
index 0000000..5cba927
--- /dev/null
+++ b/src/router/contactsRoutes.js
@@ -0,0 +1,20 @@
+const contactsRoutes = [
+  {
+    path: "/contacts",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [
+      {
+        path: "",
+        name: "Contacts",
+        component: () => import("src/pages/contacts/ContactsPage.vue"),
+        meta: {
+          requiresAuth: true,
+        },
+      }
+    ]
+
+  },
+];
+
+export default contactsRoutes;
+
diff --git a/src/router/coreRoutes.js b/src/router/coreRoutes.js
index ddac584..bb08a7d 100644
--- a/src/router/coreRoutes.js
+++ b/src/router/coreRoutes.js
@@ -10,19 +10,29 @@ const coreRoutes = [
   },
   {
     path: "/",
-    component: () => import("layouts/MainLayout.vue"),
+    component: () => import("layouts/MainLayout.vue"), 
+    
+    meta: {
+      requiresAuth: true,
+    },
     children: [
 
 
       {
         path: "dashboard",
-name: "Dashboard",
+        name: "Dashboard",
         component: () => import("pages/core/DashboardPage.vue"),
+        meta: {
+          requiresAuth: true,
+        },
       },
       {
         path: "notification",
-name: "Notification",
+        name: "Notification",
         component: () => import("pages/core/NotificationPage.vue"),
+        meta: {
+          requiresAuth: true,
+        },
       },
     ],
   },
diff --git a/src/router/index.js b/src/router/index.js
index ca3cd61..a8f864c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,8 @@ import { route } from 'quasar/wrappers'
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 
+import { useAuthStore } from 'src/stores/AuthStore'
+
 /*
  * If not building with SSR mode, you can
  * directly export the Router instantiation;
@@ -26,5 +28,27 @@ export default route(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.VUE_ROUTER_BASE)
   })
 
+  Router.beforeEach((to, from, next) => {
+    const auth = useAuthStore() 
+    const userLocalStorage = auth.readUserFromLocalStorage()
+
+    if(to.matched.some(record => record.meta.requiresAuth)){
+      if(userLocalStorage && !userLocalStorage.isLogged){
+        next({ name: 'Login' })
+        console.log("redirection car déconnecté")
+      } else {
+        next()
+      }
+    } else {
+      next()
+    }
+  })
+
+
+
+
+    
+  // })
+
   return Router
 })
diff --git a/src/router/routes.js b/src/router/routes.js
index c765115..ae2baed 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,15 +1,15 @@
-   import coreRoutes from './coreRoutes'
-   import contactRoutes from './contactRoutes'
-   import taskRoutes from './taskRoutes'
+    import coreRoutes from './coreRoutes'
+    import contactsRoutes from './contactsRoutes'
+    import taskRoutes from './taskRoutes'
 
 
-   const routes = [
-     ...coreRoutes,
-     ...contactRoutes,
-     ...taskRoutes,
+    const routes = [
+      ...coreRoutes,
+      ...contactsRoutes,
+      ...taskRoutes,
 
 
 
-   ]
+    ]
 
-   export default routes
+    export default routes
diff --git a/src/router/taskRoutes.js b/src/router/taskRoutes.js
index e810d63..ba2b353 100644
--- a/src/router/taskRoutes.js
+++ b/src/router/taskRoutes.js
@@ -1,4 +1,4 @@
-const contactRoutes = [
+const contactsRoutes = [
   {
     path: "/task",
     component: () => import("layouts/MainLayout.vue"),
@@ -6,12 +6,15 @@ const contactRoutes = [
       {
         path: "",
         name: "Task",
-        component: () => import("src/pages/task/TaskPage.vue")
+        component: () => import("src/pages/task/TaskPage.vue"),
+        meta: {
+          requiresAuth: true,
+        },
       }
     ]
 
   },
 ];
 
-export default contactRoutes;
+export default contactsRoutes;
 
diff --git a/src/stores/DbList.json b/src/stores/DbList.json
new file mode 100644
index 0000000..e9f949a
--- /dev/null
+++ b/src/stores/DbList.json
@@ -0,0 +1,19 @@
+{
+  "databases": [
+    {
+      "id": 1,
+      "name": "Database1",
+      "url": "url1"
+    },
+    {
+      "id": 2,
+      "name": "Database2",
+      "url": "url2"
+    },
+    {
+      "id": 3,
+      "name": "Database3",
+      "url": "url3"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index 2259d09..3597439 100644
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -1,21 +1,39 @@
 import { defineStore } from "pinia";
 import axios from "axios";
+import { ref } from "vue";
 
-export const useAuthStore = defineStore({
+// import { useContactsStore } from "./ContactsStore";
+// import { useTasksStore } from "./TasksStore";
+// import pinia from "src/boot/pinia";
+
+// toDO : stocke id, base de donnée, url et mdp
+
+export const useAuthStore = defineStore({ 
   id: "auth",
   state: () => ({
     user: null,
     loginError: "",
+    isLoggedIn: false,
+    logoutEvent: ref(false),
+    serverList: [],
+    loginInfos: [],
   }),
   getters: {
-    isAuthenticated: (state) => !!state.user,
+    isAuthenticated: (state) => !!state.user && state.user.isLoggedIn,
   },
   actions: {
-    async login({ db, login, password }) {
+
+    async login( { url, db, login, password} ) {
+
+      const storedLoginInfos = localStorage.getItem('loginInfos');
+        if (storedLoginInfos) {
+          this.loginInfos = JSON.parse(storedLoginInfos);
+        }
+
       try {
         const options = {
           method: "POST",
-          url: "https://apps.alusage.fr/jsonrpc",
+          url: url,
           headers: {
             "Content-Type": "application/json",
           },
@@ -30,10 +48,40 @@ export const useAuthStore = defineStore({
         };
 
         const response = await axios.request(options);
+        
 
         if (response.data.result) {
+
           this.user = response.data.result;
+          this.isLoggedIn = true;
           this.loginError = "";
+
+          localStorage.setItem('user', JSON.stringify(this.user)); // user infos
+          
+
+
+          this.user = { id: response.data.result , isLogged : true }
+          localStorage.setItem('user', JSON.stringify(this.user))
+          console.log('User logged in:', this.user);
+
+          
+        // check if loginInfos aren't already existing before storing it in local storage 
+          const newLoginInfo = { url, db, login, password, isChecked: false};
+
+          if (!this.loginInfos.some(info => JSON.stringify(info) === JSON.stringify(newLoginInfo))) {
+            this.loginInfos.push(newLoginInfo);
+            localStorage.setItem('loginInfos', JSON.stringify(this.loginInfos));
+            console.log("je suis dedans")
+          }
+
+
+          console.log(url)
+          // const contactsStore = useContactsStore();
+          // await contactsStore.fetchContactsList();
+
+          // const tasksStore = useTasksStore();
+          // await tasksStore.fetchTasksList();
+
         } else {
           this.loginError = "Invalid login or password";
         }
@@ -44,7 +92,29 @@ export const useAuthStore = defineStore({
     },
 
     logout() {
+
+      this.isLoggedIn = false;
+      this.loginInfos = this.loginInfos.map(info => ({ ...info, isChecked: false})); 
+      this.user = [] ; 
       this.user = null;
+
+      //Logout event emission for the compoenent to use the redirection
+      this.logoutEvent = !this.logoutEvent
+      
     },
+
+    readUserFromLocalStorage() {
+      const storedUser = localStorage.getItem('user');
+      if (storedUser) {
+        this.user = JSON.parse(storedUser);
+      }
+    },
+
+    readLoginInfosFromLocalStorage() {
+      const storedLoginInfos = localStorage.getItem('loginInfos');
+      if (storedLoginInfos) {
+        this.loginInfos = JSON.parse(storedLoginInfos);
+      }
+    }
   },
 });
diff --git a/src/stores/baseStore.js b/src/stores/baseStore.js
new file mode 100644
index 0000000..23209f4
--- /dev/null
+++ b/src/stores/baseStore.js
@@ -0,0 +1,65 @@
+// import { defineStore } from "pinia";
+// import pinia from "src/boot/pinia";
+// import axios from "axios";
+
+// export const baseStore = defineStore({
+//     id: "base",
+//     pinia,
+//     state: () => ({
+//         fields: [],
+//         dataList: [],
+//         loading: false,
+//     }),
+//     actions: {
+//         async fetchData(apiEndpoint, modelName) {
+//         try {
+//             this.loading = true;
+
+//             const options = {
+//             method: "POST",
+//             url: "https://apps.alusage.fr/jsonrpc",
+//             headers: {
+//                 "Content-Type": "application/json",
+//             },
+//             data: {
+//                 jsonrpc: "2.0",
+//                 params: {
+//                 service: "object",
+//                 method: "execute_kw",
+//                 args: [
+//                     'odoo',
+//                     '2',
+//                     'admin',
+//                     modelName,
+//                     'search_read',
+//                     [],
+//                     {
+//                     fields: this.fields,
+//                     }
+//                 ],
+//                 },
+//             },
+//             };
+//             const response = await axios.request(options);
+
+//             if (response.data.result) {
+//             this.dataList = response.data.result;
+//             console.log(`Data from ${modelName}Store has been fetched`);
+
+//             localStorage.setItem(`${modelName}List`, JSON.stringify(this.dataList));
+
+//             console.log(`Data has been retrieved from the server and cached`);
+
+//             this.loadingError = "";
+//             } else {
+//             this.loadingError = `${modelName} weren't found`;
+//             }
+//         } catch (error) {
+//             console.log(error);
+//             this.loadingError = `${modelName} weren't found, fetch wasn't done`;
+//         } finally {
+//             this.loading = false;
+//         }
+//         },
+//     },
+//     });
diff --git a/src/stores/contactsStore.js b/src/stores/contactsStore.js
new file mode 100644
index 0000000..13aa34e
--- /dev/null
+++ b/src/stores/contactsStore.js
@@ -0,0 +1,107 @@
+import { defineStore } from "pinia";
+import pinia from "src/boot/pinia";
+import axios from "axios";
+import { useAuthStore } from "./AuthStore"
+
+
+export const useContactsStore = defineStore({
+    id: "contacts",
+    pinia,
+    state: () => ({
+        fields: ["name",
+        "email",
+        "phone",
+        "mobile",
+        "image_1920",
+        "street",
+        "street2",
+        "zip",
+        "city",
+        "write_date",
+        "function",
+        "is_company",],
+        contactsList: [],
+        loading: false, // État de chargement pour indiquer si les données sont en cours de chargement
+        
+    }),
+    getters: {
+        getContactsById: (state) => (id) => {
+            return state.contactsList.find(contact => contact.id === id)
+        },
+
+        getCompanies: (state) => {
+            return state.contactsList.filter(contact => contact.is_company)
+        },
+
+        getIndividuals: (state) => {
+            return state.contactsList.filter(contact => !contact.is_company)
+        },
+
+
+    }, 
+    actions: { // write
+        async fetchContactsList() {
+            const authStore = useAuthStore(); 
+            const promises = authStore.loginInfos
+            .filter(info => info.isChecked)
+            .map(info => this.fetchContactsForLoginInfo(info));
+            this.contactsList = [];
+            await Promise.all(promises);
+        },
+    
+        async fetchContactsForLoginInfo(info) {
+            console.log("fetchContactsForLoginInfo :", info);
+            try {
+            const options = {
+                method: "POST",
+                url: info.url,
+                headers: {
+                "Content-Type": "application/json",
+                },
+                data: {
+                jsonrpc: "2.0",
+                params: {
+                    service: "object",
+                    method: "execute_kw",
+                    args: [
+                    info.db, // use the db from the loginInfo
+                    2, // use the login from the loginInfo
+                    info.password, // use the password from the loginInfo
+                    'res.partner',
+                    'search_read',
+                    [[]],
+                    {
+                        fields: this.fields,
+                    }
+                    ],
+                },
+                },
+            };
+            const response = await axios.request(options);
+            if (response.data.result) {
+
+                // Add a from database proprity to each contacts
+                const contacts = response.data.result.map(contact => ({ ...contact, FromDatabase: info.db}))
+                this.contactsList = this.contactsList.concat(contacts); 
+                
+                localStorage.setItem("contactsList", JSON.stringify(this.contactsList));
+                console.log("contactsList :", this.contactsList);
+            } else {
+                this.loginError = "Contacts Wasn't found";
+            }
+            } catch (error) {
+            console.error(error);
+            this.loginError = "Contacts Wasn't found fetch was'nt done";
+            } finally {
+            this.loading = false;
+            }
+        },
+
+        ReadContactsFromLocalStorage() {
+            const storedContacts = localStorage.getItem('contactsList');
+            if (storedContacts) {
+                this.contactsList = JSON.parse(storedContacts);
+            }
+        }
+    }
+}) ;
\ No newline at end of file
diff --git a/src/stores/index.js b/src/stores/index.js
new file mode 100644
index 0000000..c361c65
--- /dev/null
+++ b/src/stores/index.js
@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+
+export default pinia 
\ No newline at end of file
diff --git a/src/stores/store-flag.d.ts b/src/stores/store-flag.d.ts
new file mode 100644
index 0000000..7677175
--- /dev/null
+++ b/src/stores/store-flag.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}
diff --git a/src/stores/tasksStore.js b/src/stores/tasksStore.js
new file mode 100644
index 0000000..0826e18
--- /dev/null
+++ b/src/stores/tasksStore.js
@@ -0,0 +1,84 @@
+import { defineStore } from "pinia";
+import pinia from "src/boot/pinia";
+import axios from "axios";
+import { useAuthStore } from "./AuthStore";
+
+export const useTasksStore = defineStore({
+    id: "tasks",
+    pinia,
+    state: () => ({
+        fields: ['name',  'description', 'date_deadline'],
+        tasksList: [],
+        loading: false,
+    }),
+    getters: {},
+    actions: {
+        async fetchTasksList() {
+            const authStore = useAuthStore(); 
+            const promises = authStore.loginInfos
+            .filter(info => info.isChecked)
+            .map(info => this.fetchTasksForLoginInfo(info));
+            this.tasksList = [];
+            await Promise.all(promises);
+        },
+        async fetchTasksForLoginInfo(info) {
+            try {
+                const options = {
+                    method: "POST",
+                    url : info.url,
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: {
+                        jsonrpc: "2.0",
+                        params: {
+                            service: "object",
+                            method: "execute_kw",
+                            args: [
+                            info.db, // use the db from the loginInfo
+                            2, // use the login from the loginInfo
+                            info.password, // use the password from the loginInfo
+                            'project.task',
+                            'search_read',
+                            [[]],
+                            {
+                                fields: this.fields,
+                            }
+                            ],
+                        },
+                    }
+                } 
+                const response = await axios.request(options);
+                if(response.data.result) {
+
+                    // Add a from database proprity to each tasks and clean descriptions 
+                    const tasks = response.data.result.map(task => ({ ...task, 
+                        FromDatabase: info.db, // add the from database
+                        description: task.description.replace(/<[^>]*>/g, "") // apply a regex to clean the description   
+                    }))
+                    this.tasksList = this.tasksList.concat(tasks); 
+                    
+                    localStorage.setItem("tasksList", JSON.stringify(this.tasksList));
+                } else {
+                    this.loginError = "Tasks Wasn't found";
+                }
+            } catch (error) {
+                console.error(error);
+                this.loginError = "Tasks Wasn't found fetch was'nt done";
+            }
+        }, 
+
+        ReadTasksFromLocalStorage() {
+            const storedTasks = localStorage.getItem('tasksList');
+            if (storedTasks) {
+                const tasks = JSON.parse(storedTasks);
+                console.log("lecture reussi")
+
+                this.tasksList = tasks 
+
+            } else {
+                console.log("lecture échouée")
+            }
+        },
+    },
+});