diff --git a/src/App.vue b/src/App.vue
index 52b45e1..048a0e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,43 +1,108 @@
 <script setup>
 import TicketList from '@/components/TicketList.vue'
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {Tab} from 'bootstrap'
+import TicketApi from "@/services/TicketApi.js";
+
+const tickets = ref({});
+
+const newTickets = computed(() => {
+  return tickets.value.hasOwnProperty('new_tickets') ? mapListOfTickets(tickets.value.new_tickets.list) : []
+})
+
+const pendingTickets = computed(() => {
+  return tickets.value.hasOwnProperty('pending_tickets') ? mapListOfTickets(tickets.value.pending_tickets.list) : []
+})
+
+const myTickets = computed(() => {
+  return tickets.value.hasOwnProperty('my_tickets') ? mapListOfTickets(tickets.value.my_tickets.list) : []
+})
+
+const mapListOfTickets = (tickets) => {
+  return tickets.map(ticket =>
+      [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
+}
+
+onMounted(async () => {
+
+  tickets.value = await TicketApi.getTickets()
+
+  const myInterval = setInterval(async function () {
+    tickets.value = await TicketApi.getTickets()
+  }, 180000);
+
+})
+
+
 </script>
 
 <template>
-<div class="container-fluid">
-  <div class="card">
-    <div class="card-body">
-      <ul class="nav nav-tabs nav-tabs-bordered" id="ticketsList" role="tablist" ref="tab">
-        <li class="nav-item" role="presentation">
-          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#new" type="button">Nouvelles Fiches</button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending" type="button">Fiches en cours</button>
-        </li>
-        <li class="nav-item" role="presentation">
-          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#my" type="button">Mes fiches</button>
-        </li>
-      </ul>
-      <div class="tab-content" id="ticketsListContent">
-        <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
-          <ticket-list></ticket-list>
-        </div>
-        <div class="tab-pane" id="pending" role="tabpanel" tabindex="0">
-         TO DO 2
-        </div>
-        <div class="tab-pane" id="my" role="tabpanel" tabindex="0">
-          TO DO 3
+  <div class="container-fluid">
+    <div class="pagetitle">
+      <h1>Messagerie & Ordonnances</h1>
+    </div>
+
+    <div class="card">
+      <div class="card-body">
+
+    <ul class="nav">
+      <li class="nav-item">
+        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-plus-circle"></i> Ajouter une fiche</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i> Recherche de fiches</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#"> <i class="fa-solid fa-file-medical"></i> Livraisons ordonnances</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link"><i class="fa-solid fa-bell-concierge"></i> Accueil Comptoir</a>
+      </li>
+    </ul>
+        Archiver les fiches en cours ? <br/>
+        Filtrer les fiches par origine : Toute
+
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-body">
+        <ul class="nav nav-tabs nav-tabs-bordered" id="ticketsList" role="tablist" ref="tab">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#new" type="button">Nouvelles Fiches
+              <span class="badge text-bg-secondary">{{ newTickets.length }}</span></button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending" type="button">Fiches en cours <span
+                class="badge text-bg-secondary">{{ pendingTickets.length }}</span></button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#my" type="button">Mes fiches <span
+                class="badge text-bg-secondary">{{ myTickets.length }}</span></button>
+          </li>
+        </ul>
+        <div class="tab-content" id="ticketsListContent">
+          <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
+
+            <ticket-list :rows="newTickets" v-if="newTickets.length >0"></ticket-list>
+            <div class="alert alert-success" v-else>Aucune fiche</div>
+          </div>
+          <div class="tab-pane" id="pending" role="tabpanel" tabindex="0">
+            <ticket-list :rows="pendingTickets" v-if="pendingTickets.length >0"></ticket-list>
+            <div class="alert alert-success" v-else>Aucune fiche</div>
+          </div>
+          <div class="tab-pane" id="my" role="tabpanel" tabindex="0">
+            <ticket-list :rows="myTickets" v-if="myTickets.length >0"></ticket-list>
+            <div class="alert alert-success" v-else>Aucune fiche</div>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 </template>
 
 <style>
 
-#ticketsListContent{
+#ticketsListContent {
   padding-top: 20px;
 }
 </style>
diff --git a/src/components/TicketList.vue b/src/components/TicketList.vue
index c3db619..7734bb9 100644
--- a/src/components/TicketList.vue
+++ b/src/components/TicketList.vue
@@ -6,6 +6,10 @@ import {fr} from 'date-fns/locale';
 
 import {Grid, html} from "gridjs";
 
+const props = defineProps({
+  rows: Array,
+})
+
 const gridWrapper = ref(null)
 
 const grid = new Grid({
@@ -19,30 +23,31 @@ const grid = new Grid({
       formatter: (cell) => format(new Date(cell), 'dd/MM/yyyy HH:mm:ss')
     }, {
       name: 'Origine',
-      formatter: (cell, row) => html(`<span class=" fw-bold text-${row.cells[4].data.filter1Color}">${cell}</span>` + ((row.cells[3].data !== null) ?  `<br/> ${row.cells[3].data}` : ''))
+      formatter: (cell, row) => html(`<span class=" fw-bold text-${row.cells[4].data.filter1Color}">${cell}</span>` + ((row.cells[3].data !== null) ? `<br/> ${row.cells[3].data}` : ''))
 
     },
     {name: 'Origine 2', hidden: true},
     {
       name: 'Voir',
-      formatter: (cell, row) => html('<a href="#" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\' });window.location=\'#\';Affaire(\'11\',\'0\',\'' + cell.id_last_event + '\',\'' + cell.id + '\',\'4\',\'see\')"><i class="fa-solid fa-eye"></i></a>')
+      formatter: (cell, row) => html('<a href="#" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\' });window.location=\'#\';Affaire(\'11\',\'0\',\'' + cell.id_last_event + '\',\'' + cell.id + '\',\'4\',\'see\')"><i class="fa-solid fa-eye"></i></a>'),
+      width: '100px'
     },
     {
       name: 'Attribuer à',
       formatter: (cell, row) => {
-        return html('<a href="#" style="text-decoration: none" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\'});window.location=\'#\';Affaire(\'11\',\'0\',\'' + row.cells[4].data.id_last_event + '\',\'' + row.cells[4].data.id + '\',\'4\',\'see\')"<i class="fa-solid fa-hand-point-down"></i></a>')
+
+        if (cell !== '0') {
+          return row.cells[4].data.advisor_name
+        } else {
+          return html('<a href="#" style="text-decoration: none" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\'});window.location=\'#\';Affaire(\'11\',\'0\',\'' + row.cells[4].data.id_last_event + '\',\'' + row.cells[4].data.id + '\',\'4\',\'see\')"<i class="fa-solid fa-hand-point-down"></i></a>')
+        }
       }
     },
     {
       name: 'Depuis',
       formatter: (cell) => formatDistance(new Date(cell), new Date(), {addSuffix: true, locale: fr})
-    }, 'Interlocuteur'],
-  server: {
-    url: '/App/api.php?prj=pharmamp',
-    then: data => data.list.map(ticket =>
-        [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name]
-    )
-  },
+    }, 'Interlocuteur', {name: 'Client', width: '120px'}],
+  data: props.rows,
   sort: true,
   pagination: {
     limit: 10,
diff --git a/src/main.js b/src/main.js
index 7dbec47..1aa15d6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,8 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 
-
-import './style.css'
 import './assets/style.scss'
-
+import './style.css'
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import '@fortawesome/fontawesome-free/css/solid.css'
diff --git a/src/services/TicketApi.js b/src/services/TicketApi.js
new file mode 100644
index 0000000..1166963
--- /dev/null
+++ b/src/services/TicketApi.js
@@ -0,0 +1,17 @@
+export default {
+    async getTickets() {
+        const apiUrl = '/App/api.php?prj=pharmamp'
+
+        if (import.meta.env.DEV) {
+            console.log(apiUrl)
+        }
+
+        const response = await fetch(apiUrl)
+
+        if (import.meta.env.DEV) {
+            console.log(response.clone().text())
+        }
+
+        return response.json();
+    }
+}
diff --git a/src/style.css b/src/style.css
index acb31f6..154bd6a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,8 +5,7 @@ body{
 #app {
   color: rgba(255, 255, 255, 0.87);
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  padding: 1rem;
   font-size: 1rem;
   font-family: "Open Sans", sans-serif;
   color: #444444;