diff --git a/src/App.vue b/src/App.vue
index 73da89fe..82a6183b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -108,15 +108,14 @@ main {
   color: rgb(var(--v-theme-text-dark-blue)) !important;
 
   nav {
-    background-color: rgb(var(--v-theme-gris-clair));
     width: 100vw;
   }
 
   .nav-bar {
-    height: 100%;
-    width: 100%;
-    max-width: 20vw;
-    border-right: 3px solid rgb(var(--v-theme-text-dark-blue));
+    grid-column-start: 2;
+    background-color: rgb(var(--v-theme-surface));
+    border: solid 1px rgb(var(--v-theme-gris-clair));
+    padding-bottom: 1em;
   }
 
   .mobile-nav-bar {
@@ -124,6 +123,7 @@ main {
     justify-content: space-between;
     align-content: center;
     padding: 0 10px;
+    margin: -10px 0 30px;
   }
 
   .filter-mobile-nav-bar {
@@ -154,7 +154,7 @@ main {
   }
 
   .logo_home {
-    margin-top: -35px;
+    margin-top: -45px;
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       margin-top: -75px;
@@ -162,6 +162,10 @@ main {
     }
   }
 
+  .logo_resultview {
+    margin-top: -100px;
+  }
+
   .logo-menu-wrapper {
     width: 100%;
     display: grid;
@@ -186,7 +190,6 @@ main {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: rgb(var(--v-theme-gris-clair));
     border-bottom: 1px solid #bbb;
     border-top: 1px solid #bbb;
   }
@@ -254,9 +257,9 @@ h4 {
 }
 
 .scroll-to-top-wrapper {
+  z-index: 1000;
   position: sticky;
   top: 90vh;
-  margin-bottom: 3rem;
   margin-left: 10%;
   width: 30px;
   height: 30px;
@@ -270,6 +273,107 @@ h4 {
   }
 }
 
+.search-bar-container {
+  grid-column-start: 2;
+  margin-top: 50px;
+
+  display: grid;
+  grid-template-columns: 20fr 3fr 80fr;
+}
+
+.sub-header {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 10fr 103fr 10fr;
+
+  .sub_header__logo {
+    grid-column-start: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    h1 {
+      text-align: center;
+      width: 80%;
+      font-weight: 300;
+      font-size: 14px;
+    }
+
+    .logo {
+      margin-top: 0;
+      height: 115px;
+    }
+  }
+
+  .sub_header__action {
+    grid-column-start: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 auto;
+
+    .domain-selector,
+    .searchbar {
+      width: 90%;
+    }
+  }
+}
+
+.v-overlay :deep(.v-overlay__content) {
+  padding: 0 0;
+  background-color: rgb(var(--v-theme-background));
+}
+
+.white-containers {
+  background-color: rgb(var(--v-theme-surface));
+  border: solid 1px rgb(var(--v-theme-gris-clair));
+}
+
+.nom-card {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+
+  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+    flex: 1 0 60%;
+    margin-left: 0.5em;
+  }
+
+  .nomprenom {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    text-decoration: none;
+    color: rgb(var(--v-theme-primary));
+    font-size: 23.5px;
+
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+      font-size: 29.5px;
+    }
+
+    .prenom {
+      font-weight: 400;
+    }
+
+    .nom {
+      font-weight: 700;
+    }
+  }
+
+  #logoIdref {
+    margin-left: 1em;
+    height: 1em;
+  }
+}
+
+.result-dividers {
+  border: 1px solid rgb(var(--v-theme-gris-clair));
+  margin:0 1rem;
+}
+
 .grecaptcha-badge { visibility: hidden; }
 </style>
 <style scoped lang="scss">
diff --git a/src/components/common/DomainSelector.vue b/src/components/common/DomainSelector.vue
index 855df1e3..772043e9 100644
--- a/src/components/common/DomainSelector.vue
+++ b/src/components/common/DomainSelector.vue
@@ -66,7 +66,7 @@ async function select(selection) {
   align-items: center;
   width: 100%;
   background-color: transparent;
-  margin-top: 1rem;
+  margin: 1.5rem 0 1rem 0;
 
   .v-btn {
     flex: 0 1 48%;
diff --git a/src/components/common/FooterCustom.vue b/src/components/common/FooterCustom.vue
index a8fd1613..1485b5b4 100644
--- a/src/components/common/FooterCustom.vue
+++ b/src/components/common/FooterCustom.vue
@@ -1,17 +1,12 @@
 <template>
   <v-footer class="pa-0">
-    <div class="footerTop">
-      <div>
-        <h4>Theses.fr</h4>
-        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
-        }}</a>
-      </div>
-      <div>
+    <div class="footer-top">
+      <div class="links-container footer-content">
         <h3>
           <v-icon>mdi-arrow-top-right</v-icon>
           {{ $t("accesDirect") }}
         </h3>
-        <ul>
+        <ul class="list-1">
           <li><span class="orange-link"> > </span><a
               href="https://www.data.gouv.fr/fr/datasets/theses-soutenues-en-france-depuis-1985/" target="_blank">{{
                 $t("footer.opendata") }}</a>
@@ -34,16 +29,21 @@
           </li>
         </ul>
       </div>
-      <div>
-        <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
-          <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' style="height: 60px;" class="pr-4 "></a>
+      <div class="theses-description footer-content">
+        <h4>Theses.fr</h4>
+        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
+        }}</a>
+      </div>
+      <div class="logos-container footer-content">
         <a href="https://abes.fr/" target="_blank" :title='$t("footer.logoAbesAlt")'>
-          <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")' style="height: 80px;"></a>
+          <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")'></a>
+        <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
+          <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' class="pr-4 "></a>
       </div>
     </div>
     <v-divider></v-divider>
     <v-card-text class="footerBottom">
-      <v-row class="px-6">
+      <v-row>
         <v-col cols="12" md="3" class="text-center text-md-left pa-0">
           {{ new Date().getFullYear() }} —
           <strong>Theses.fr</strong>
@@ -83,7 +83,7 @@
 .v-footer {
   flex-direction: column;
   width: 100vw;
-  background-color: rgb(var(--v-theme-gris-clair));
+  background-color: rgb(var(--v-theme-surface));
   color: rgb(var(--v-theme-fond-noir));
   flex-basis: 1%;
 
@@ -91,11 +91,15 @@
     max-height: 300px;
   }
 
-  .footerTop {
-    flex: 1 0 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  .footer-top {
+    display: grid;
+    grid-template-columns: 30fr 0.5fr 30fr 0.5fr 30fr;
+
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      display: flex;
+      flex-direction: column;
+    }
+
     width: 90%;
     padding-top: 1em;
     padding-bottom: 1em;
@@ -108,24 +112,17 @@
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       div:nth-of-type(1) {
-        flex: 1 0 25%;
-        max-width: 30%;
+
       }
     }
 
-    div:nth-of-type(2) {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
+    div {
 
       @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        flex: 1 0 30%;
-        max-width: 30%;
+
       }
 
       ul {
-        margin-left: 1rem;
         list-style: none;
         text-align: left;
 
@@ -144,14 +141,43 @@
         }
       }
     }
+  }
 
-    div:nth-of-type(3) {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
+  .links-container {
+    order: 2;
+    width: 100%;
+    grid-column-start: 3;
+    grid-row-start: 1;
+
+    display: grid;
+    grid-template-rows: 1fr 8fr;
+
+    justify-content: center;
+  }
 
+  .theses-description {
+    grid-column-start: 1;
+    order: 1;
+
+    span {
+      opacity: 0.6;
     }
+  }
+
+  .logos-container {
+    order: 3;
+    grid-column-start: 5;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-around;
+
+    a {
 
+      img {
+        height: 6em;
+      }
+    }
   }
 
   .footerBottom {
@@ -171,7 +197,7 @@
   }
 
   .v-divider {
-    background-color: rgb(var(--v-theme-background));
+    background-color: rgb(var(--v-theme-gris-clair));
   }
 
 }
@@ -191,7 +217,11 @@ h3 {
 
 footer {
   padding-top: 0;
-  background-color: rgb(var(--v-theme-gris-clair));
-  border-top: 2px solid rgb(var(--v-theme-gris-fonce));
+  background-color: rgb(var(--v-theme-surface));
+  border-top: 1px solid rgb(var(--v-theme-gris-clair));
+}
+
+.footer-content {
+  margin-top: 1em;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index b69c6086..e7b281f1 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -1,38 +1,61 @@
 <template>
-  <div v-if="keywordsAreSet">
-    <div class="key-words-title-wrapper">
-      <v-icon color="primary">mdi-list-box</v-icon>
-      <h1>{{ $t('theseView.motcle') }}</h1>
-      <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+  <div>
+    <div v-if="keywordsAreSet && dataReady">
+      <div class="key-words-title-wrapper">
+        <div class="title">
+          <v-icon color="primary">mdi-list-box</v-icon>
+          <h1>{{ $t('theseView.motcle') }}</h1>
+          <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+        </div>
+        <v-btn class="info-button" flat icon="mdi-information-outline">
+        </v-btn>
+        <v-overlay activator=".info-button" location-strategy="connected" scroll-strategy="close">
+          <v-card class="legend-tooltip">
+            <h1>Légende</h1>
+            <v-chip-group>
+              <v-chip label class="rameau-chip"><span class="key-word-label">mot-clé contrôlé</span></v-chip>
+              <v-chip label class="free-chip">mot-clé libre</v-chip>
+            </v-chip-group>
+          </v-card>
+        </v-overlay>
+      </div>
+      <v-chip-group id="first-chip-line">
+        <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
+          :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+          :disabled="keyWord.type === 'sujetsRameau' ? false : true"
+          @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+          <span class="key-word-label">{{ keyWord.keyword }}</span>
+        </v-chip>
+      </v-chip-group>
+      <v-fade-transition>
+        <v-chip-group v-show="readMore" id="second-chip-line">
+          <!--      readmore button effect-->
+          <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
+            :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
+            :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+            :disabled="keyWord.type === 'sujetsRameau' ? false : true"
+            @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+            <span class="key-word-label">{{ keyWord.keyword }}</span>
+          </v-chip>
+        </v-chip-group>
+      </v-fade-transition>
+      <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
+        <v-btn id="read-more-button" variant="outlined" @click="readMore = !readMore" flat>
+          <span></span>
+          <span>{{ readMore ? $t('theseView.showLessKeywords') : $t('theseView.showMoreKeywords') }}</span>
+          <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
     </div>
-    <v-chip-group id="first-chip-line">
-      <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
-        :title="keyWord.keyword" :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-        @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
-        <span class="key-word-label">{{ keyWord.keyword }}</span>
-      </v-chip>
-    </v-chip-group>
-    <v-chip-group id="second-chip-line">
-      <!--      readmore button effect-->
-      <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
-        :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
-        :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-        @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
-        <span class="key-word-label">{{ keyWord.keyword }}</span>
-      </v-chip>
-    </v-chip-group>
-    <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
-      <v-btn id="read-more-button" @click="readMore = !readMore" flat>
-        <span></span>
-        <span>{{ readMore ? $t('theseView.showLessKeywords') : $t('theseView.showMoreKeywords') }}</span>
-        <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
-      </v-btn>
+    <div v-if="!dataReady">
+      <v-skeleton-loader type="table-row" class="px-4"></v-skeleton-loader>
+      <v-skeleton-loader type="button" class="d-flex flex-row-reverse pe-7 w-25"></v-skeleton-loader>
     </div>
   </div>
 </template>
 
 <script setup>
-import {onBeforeUpdate, ref, watch, computed, onBeforeUnmount, onBeforeMount} from "vue";
+import {onBeforeUpdate, ref, watch, computed, onBeforeMount} from "vue";
 import { useDisplay } from "vuetify";
 import LanguageSelector from "./LanguageSelector.vue";
 
@@ -125,10 +148,25 @@ watch(mobile, (newValue) => {
   pointer-events: unset;
 }
 
+.v-chip-group {
+  margin-top: unset !important;
+}
+
+#first-chip-line {
+  flex-wrap: wrap !important;
+}
+
 .key-words-title-wrapper {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0.4em 0 0.8em 0;
+}
+
+.title {
   display: inline-flex;
   align-items: center;
-  margin-left: 5px;
 }
 
 h1 {
@@ -147,7 +185,7 @@ h1 {
 }
 
 .v-chip-group {
-  margin: 0 10px;
+  margin-top: 0.5em;
   padding: 0;
   justify-content: start;
   flex-wrap: nowrap;
@@ -156,6 +194,14 @@ h1 {
     flex-wrap: wrap;
     justify-content: space-between;
   }
+
+  .free-chip {
+    background-color: rgb(var(--v-theme-secondary-darken-2)) !important;
+  }
+
+  .rameau-chip {
+    background-color: rgb(var(--v-theme-orange-abes)) !important;
+  }
 }
 
 #second-chip-line {
@@ -163,9 +209,8 @@ h1 {
 }
 
 .v-chip {
-  background-color: rgb(var(--v-theme-fond-chip-blue));
   justify-content: center;
-  width: 19%;
+  width: 18.5%;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     width: 46%;
@@ -176,7 +221,7 @@ h1 {
   font-family: Roboto Black, sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-surface));
 }
 
 .v-chip--disabled {
@@ -201,9 +246,7 @@ h1 {
 
 #read-more-button {
   margin-top: 7px;
-  background-color: rgb(var(--v-theme-primary));
   text-transform: none;
-  color: white;
   width: 220px;
   display: inline-flex;
   padding: 0 7px;
@@ -222,4 +265,19 @@ h1 {
 .toggle-up-down.rotate {
   transform: rotate(180deg);
 }
+
+:deep(.v-skeleton-loader__button) {
+  max-width: unset !important;
+  justify-self: end;
+}
+
+.legend-tooltip {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+
+  :deep(.v-chip) {
+    width: fit-content;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/results/FacetDrawer.vue b/src/components/common/results/FacetDrawer.vue
index 723f6426..cb5ec4d2 100644
--- a/src/components/common/results/FacetDrawer.vue
+++ b/src/components/common/results/FacetDrawer.vue
@@ -1,6 +1,6 @@
 <template>
   <v-expansion-panels v-if="date || Object.keys(facet.checkboxes).length > 0">
-    <v-expansion-panel class="elevation-0">
+    <v-expansion-panel>
       <v-expansion-panel-title class="facet-title-panel">
         <template v-slot:actions="{ expanded }">
           <v-icon :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="x-large">
@@ -10,7 +10,7 @@
           {{ facet.name }}
         </h3>
         <v-btn @click.stop="" @click="reinitializeCheckboxes" class="reinitialize-button" size="small" depressed
-          elevation="0" color="primary">
+          elevation="0" color="surface">
           <v-icon>mdi-reload</v-icon>
         </v-btn>
       </v-expansion-panel-title>
@@ -21,6 +21,7 @@
             class="facet-search-bar"></v-text-field>
         </div>
         <div class="panel-text" ref="`facet-${facet.name}`">
+<!--          Facette date-->
           <div v-if="date" class="date-container">
             <span class="date-item">
               <p>{{ $t("results.drawer.from") }}</p>
@@ -37,12 +38,15 @@
               </vue-date-picker>
             </span>
           </div>
+<!--          Fin Facette date-->
+<!--          Facettes texte-->
           <div v-else v-for="(facetItem, index) in facetItems" :key="`facet-${facetItem.name}`">
             <facet-checkbox v-if="facetItem.selected" :key="`${facet.name}-value-${index}`" :facets-array="facetsArray"
               :facet-name="facet.name" :facet-item="facetItem" @updateFilterData="updateFilterData"
               :margin-offset="marginOffset" />
           </div>
         </div>
+<!--          Fin Facettes texte-->
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
@@ -224,11 +228,25 @@ watch(() => props.parametersLoaded,
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.v-expansion-panel {
+  border-radius: 0;
+}
+
 .v-expansion-panel-title {
   gap: 10px;
   flex-wrap: nowrap;
   padding: 0 10px;
   overflow: hidden;
+  border-radius: unset;
+}
+
+.v-expansion-panel--active > .v-expansion-panel-title {
+  min-height: 48px;
+}
+
+.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
+  opacity: 1 !important;
+  background-color: rgb(var(--v-theme-surface));
 }
 
 .v-expansion-panel :deep(.v-expansion-panel__shadow) {
@@ -237,7 +255,7 @@ watch(() => props.parametersLoaded,
 
 .v-expansion-panel-title :deep(.v-expansion-panel-title__icon) {
   order: 1;
-  color: rgb(var(--v-theme-orange-abes));
+  color: rgb(var(--v-theme-primary));
 }
 
 .reinitialize-button {
@@ -248,13 +266,16 @@ watch(() => props.parametersLoaded,
 
 .facet-title {
   text-align: start;
-  text-transform: uppercase;
   overflow: hidden;
   flex-grow: 2;
   order: 2;
   background-color: transparent;
   padding-top: 5px;
   padding-bottom: 5px;
+  font-family: Roboto-Medium, sans-serif;
+  font-weight: 600;
+  color: rgba(var(--v-theme-primary));
+  opacity: 0.8;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     font-size: 15px;
@@ -283,10 +304,6 @@ watch(() => props.parametersLoaded,
   padding: 0;
 }
 
-.facet-title-panel {
-  background-color: rgb(var(--v-theme-gris-clair));
-}
-
 .date-container {
   display: flex;
 
diff --git a/src/components/common/results/FacetsChips.vue b/src/components/common/results/FacetsChips.vue
index 3a615e31..07fc1683 100644
--- a/src/components/common/results/FacetsChips.vue
+++ b/src/components/common/results/FacetsChips.vue
@@ -42,6 +42,7 @@ function deleteFilter(facet) {
 
 <style scoped lang="scss">
   .chips-list {
+    margin: 0 0.5em;
     display: flex;
     flex-wrap: wrap;
     padding: 6px 0 18px;
diff --git a/src/components/common/results/FacetsHeader.vue b/src/components/common/results/FacetsHeader.vue
index 97cf9d80..2302195f 100644
--- a/src/components/common/results/FacetsHeader.vue
+++ b/src/components/common/results/FacetsHeader.vue
@@ -5,7 +5,7 @@
       <span class="facet-title-header">{{ $t('results.facetsHeader') }}</span>
     </div>
     <v-btn v-if="!mobile" @click.stop="" @click="searchAndReinitializeAllFacets" size="small" depressed elevation="0"
-      color="primary" class="desktop-reinitialize-button">
+      color="surface" class="desktop-reinitialize-button">
       Réinitialiser
     </v-btn>
     <button v-else @click="closeOverlay" class="close-overlay-button" elevation="0" color="transparent">
@@ -18,7 +18,7 @@
   </div>
   <div v-if="mobile" class="reinitialize-button-mobile">
     <v-btn @click.stop="" @click="searchAndReinitializeAllFacets" class="reinitialize-button-mobile" size="small"
-      depressed elevation="0" color="primary">
+      depressed elevation="0">
       Réinitialiser
     </v-btn>
   </div>
@@ -47,14 +47,15 @@ function closeOverlay() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10%;
+  padding-left: 10%;
+  padding-right: 2%;
   width: 100%;
   min-height: 4rem;
-  background-color: rgb(var(--v-theme-gris-clair));
   font-size: 22px;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
-    padding: 0 7%;
+    padding-left: 7%;
+    padding-right: 2%;
     font-size: 16px;
   }
 }
@@ -88,6 +89,7 @@ function closeOverlay() {
 .v-btn--elevated :deep(.v-btn__content) {
   text-transform: capitalize;
   letter-spacing: 0.5px;
+  color: rgb(var(--v-theme-secondary-darken-2));
 }
 
 .close-overlay-button {
@@ -115,17 +117,17 @@ function closeOverlay() {
 
 .reinitialize-button-mobile {
   margin-top: 5px;
+  margin-right: 0.3em;
   display: grid;
-  grid-template-columns: 7.5% 85% 7.5%;
-}
-
-.reinitialize-button-mobile {
-  grid-column-end: 3;
   justify-self: end;
 }
 
 .desktop-reinitialize-button {
-  padding: 0 12px;
+  height: 2em;
+  align-self: flex-start;
+  margin-top: 12px;
+  font-weight: 400;
+  background-color: transparent !important;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     font-size: 10px;
diff --git a/src/components/common/results/FacetsList.vue b/src/components/common/results/FacetsList.vue
index be395151..bee24150 100644
--- a/src/components/common/results/FacetsList.vue
+++ b/src/components/common/results/FacetsList.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="facets">
     <facet-drawer v-if="domaine === 'theses' && Object.keys(facets).length > 0" date key="facet-date"
-                  :facet="{ 'name': 'Date' }" class="my-2" :facets-array="facetsArray" :parameters-loaded="parametersLoaded"
+                  :facet="{ 'name': 'Date' }" :facets-array="facetsArray" :parameters-loaded="parametersLoaded"
                   :reinitialize-date-fields-trigger="reinitializeDateFieldsTrigger"
                   :reinitialize-date-from-trigger="reinitializeDateFromTrigger"
                   :reinitialize-date-to-trigger="reinitializeDateToTrigger" @updateFilterDateOnly="updateFilterDateOnly($event)"
                   @reinitializeCheckboxes="reinitializeDates">
     </facet-drawer>
-    <facet-drawer v-for="facet in facets" class="my-2" :key="`facet-${facet.name}`" :facet="facet"
+    <facet-drawer v-for="facet in facets" :key="`facet-${facet.name}`" :facet="facet"
                   :facets-array="facetsArray" @updateFilterData="updateFilterData" @reinitializeCheckboxes="reinitializeCheckboxes">
     </facet-drawer>
     <v-btn v-if="mobile" class="filters-btn" @click="update">Appliquer les filtres</v-btn>
@@ -353,11 +353,6 @@ watch(() => props.parametersLoaded, () => {
 .facets {
   display: flex;
   flex-direction: column;
-  padding: 1em 0;
-
-  .v-expansion-panels {
-    width: 85%;
-  }
 
   .skeleton {
     height: 48px !important;
@@ -370,4 +365,8 @@ watch(() => props.parametersLoaded, () => {
     margin-top: 15px;
   }
 }
+
+:deep(.v-expansion-panel-title--active:hover > .v-expansion-panel-title__overlay) {
+  opacity: 0.04;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/results/ResultComponents.vue b/src/components/common/results/ResultComponents.vue
index 4f0cdfb1..9189c777 100644
--- a/src/components/common/results/ResultComponents.vue
+++ b/src/components/common/results/ResultComponents.vue
@@ -12,11 +12,11 @@
     </div>
     <Transition mode="out-in">
       <h2 class="returned-results-statement" v-if="dataReady">
-        <span>{{ $t("results.searched") }}{{ '\xa0' }}</span>
-        <span class="orange-text">"{{ persistentQuery }}"{{ '\xa0' }}</span>
-        <span>{{ $t("results.returned") }}{{ '\xa0' }}</span>
-        <span class="orange-text">{{ nbResult }}{{ '\xa0' }}</span>
-        <span>{{ $t("results.results") }}</span>
+        <span class="lighter-text">{{ $t("results.searched") }}{{ '\xa0' }}</span>
+        <span class="darker-text">"{{ persistentQuery }}"{{ '\xa0' }}</span>
+        <span class="lighter-text">{{ $t("results.returned") }}{{ '\xa0' }}</span>
+        <span class="darker-text">{{ nbResult }}{{ '\xa0' }}</span>
+        <span class="lighter-text">{{ $t("results.results") }}</span>
       </h2>
       <h2 class="returned-results-statement" v-else>{{ $t("results.searching") }}</h2>
     </Transition>
@@ -24,7 +24,6 @@
     <div v-if="mobile || dataReady" class="colonnes-resultats">
       <result-list :result="result" :domain-name-change="domainNameChange">
       </result-list>
-      <ScrollToTopButton v-if="!mobile && moreThanXResults(5)" class="scroll-to-top-wrapper" :nb-result=nbResult />
     </div>
     <div v-else>
       <div v-for="i in currentShowingNumber" :key="i" class="skeleton">
@@ -34,11 +33,11 @@
         </v-card>
       </div>
     </div>
-    <MoreResultsButton v-if="mobile && !allResultsWereLoaded()" :loading=loading :nb-result=nbResult
-      @addTenResultsToList="addTenResultsToList" @search="search" />
-    <ScrollToTopButton v-if="mobile && moreThanXResults(5)" class="scroll-to-top-wrapper" :nb-result=nbResult />
   </div>
 
+  <more-results-button class="more-result-button" v-if="mobile && !allResultsWereLoaded()" :loading=loading :nb-result=nbResult
+      @addTenResultsToList="addTenResultsToList" @search="search" />
+
   <result-pagination v-if="!mobile" :nb-results=nbResult :type="'bottom'" :current-showing-number="currentShowingNumber"
     :current-page-number="currentPageNumber" class="pagination-bottom" @updateShowingNumber="updateShowingNumber"
     @updatePage="updatePage" @search="search">
@@ -48,7 +47,6 @@
 
 <script setup>
 import ResultPagination from "@/components/common/results/ResultPagination.vue";
-import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
 import MoreResultsButton from "@/components/common/results/MoreResultsButton.vue";
 import {useDisplay} from "vuetify";
 import {ref, watch} from "vue";
@@ -157,13 +155,8 @@ watch(() => props.resetShowingNumber, () => {
 @use 'vuetify/settings';
 
 .colonnes-resultats {
-  padding: 0;
-  display: grid;
-  grid-template-columns: 95% auto;
-
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-template-columns: none;
-    margin-right: 1rem;
   }
 }
 
@@ -189,9 +182,7 @@ watch(() => props.resetShowingNumber, () => {
 
 .v-card {
   margin-bottom: 1rem;
-  border: solid 1px rgb(var(--v-theme-gris-fonce));
   min-height: 190px;
-
 }
 
 .skeleton {
@@ -212,24 +203,28 @@ watch(() => props.resetShowingNumber, () => {
 }
 
 .returned-results-statement {
+  margin: 0 1rem;
   display: inline-block;
   font-family: Roboto-Medium, sans-serif;
-  font-weight: 500;
-  font-size: 26.5px;
+  font-weight: 400;
+  font-size: 24.5px;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
-    font-size: 24.5px;
+    font-size: 22.5px;
   }
 }
 
-.orange-text {
-  color: rgb(var(--v-theme-orange-abes));
+.darker-text {
   font-family: Roboto-Bold, sans-serif;
-  font-weight: 700;
+  font-weight: 500;
+}
+
+.lighter-text {
+  opacity: 0.6;
 }
 
 .sort-select-wrapper {
-  margin: -50px 0 20px;
+  margin: -85px 0 20px;
   display: grid;
   grid-template-columns: 5fr 4fr 10px;
   grid-template-rows: 30px 30px;
@@ -257,4 +252,9 @@ watch(() => props.resetShowingNumber, () => {
     font-weight: 500;
   }
 }
+
+.more-result-button {
+  position: relative;
+  top: 80px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/results/ResultList.vue b/src/components/common/results/ResultList.vue
index 2f77924d..830d9d3a 100644
--- a/src/components/common/results/ResultList.vue
+++ b/src/components/common/results/ResultList.vue
@@ -1,18 +1,20 @@
 <template>
   <!--  Personnes-->
   <div v-if="domainNameChange === 'personnes'">
-    <div v-for="item in result" :key="item.id" class="card-wrapper">
+    <div v-for="(item, index) in result" :key="item.id" class="card-wrapper">
       <personnes-card :item="item" />
+      <hr class="result-dividers" v-if="index < result.length - 1" />
     </div>
   </div>
   <!--  Thèses-->
   <div v-else-if="domainNameChange === 'theses'">
-    <div v-for="item in result" :key="item" class="card-wrapper">
+    <div v-for="(item, index) in result" :key="item" class="card-wrapper">
       <result-card :titre="item.titrePrincipal"
         :date="item.status === 'enCours' ? item.datePremiereInscriptionDoctorat : item.dateSoutenance"
         :auteur="item.auteurs" :directeurs="item.directeurs" :discipline="item.discipline" :etab="item.etabSoutenanceN"
         :id="item.id" :status="item.status">
       </result-card>
+      <hr class="result-dividers" v-if="index < result.length - 1" />
     </div>
   </div>
 </template>
diff --git a/src/components/common/results/ResultPagination.vue b/src/components/common/results/ResultPagination.vue
index 71cf4683..210ffa70 100644
--- a/src/components/common/results/ResultPagination.vue
+++ b/src/components/common/results/ResultPagination.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="result-pagination">
       <div v-if="type === 'top'" class="first-bar-element">
-          <span class="show-span no-wrap-text">{{ $t('results.show') }}</span>
           <v-select :items="['10', '25', '50']" v-model="currentShowingNumber" density="compact" variant="solo"
-                     class="left-select" menu-icon="mdi-chevron-down">
+                     class="left-select v-selects" menu-icon="mdi-chevron-down">
             <template v-slot:menu-icon>
               <v-icon>
                 mdi-chevron-down
@@ -21,7 +20,7 @@
       </v-pagination>
     <div v-if="type === 'top'" class="last-bar-element">
       <span class="sort-by-span no-wrap-text">{{ $t('results.sortBy') }}</span>
-      <sorting-select class="right-select" @updatePageNumberFromSortingSelect="updatePageNumberFromSortingSelect" @search="search">
+      <sorting-select class="right-select v-selects" @updatePageNumberFromSortingSelect="updatePageNumberFromSortingSelect" @search="search">
       </sorting-select>
     </div>
   </div>
@@ -129,7 +128,6 @@ watch(() => props.currentShowingNumber, () => {
 @use '../../../../node_modules/vuetify/settings';
 
 .result-pagination {
-  background-color: rgb(var(--v-theme-gris-clair));
   max-height: 4rem;
   display: flex;
   flex-wrap: nowrap;
@@ -151,12 +149,15 @@ watch(() => props.currentShowingNumber, () => {
   padding-top: 22px;
 }
 
-
 .left-select {
   max-width: 50px;
   margin: 10px 8px 0;
   padding-top: 6px;
 
+  :deep(.v-field) {
+    max-width: 50px;
+  }
+
   :deep(.v-field--appended) {
     padding-inline-end: 0 !important;
   }
@@ -164,25 +165,32 @@ watch(() => props.currentShowingNumber, () => {
   :deep(.v-field--variant-solo) {
     box-shadow: unset;
     outline: solid 1px rgb(var(--v-theme-gris-fonce));
-    height: 30px;
-  }
-
-  :deep(.v-field__input) {
-    padding-top: 5px;
-    padding-inline-start: 7px;
   }
-
   :deep(.v-field__append-inner) {
     padding-top: 5px;
 
-    color: rgb(var(--v-theme-orange-abes));
-
     i {
       opacity: 1 !important;
     }
   }
 }
 
+.v-selects {
+  :deep(.v-field) {
+    height: 22px;
+    margin-top: 8px;
+  }
+
+  :deep(.v-field__input) {
+    padding: 0 8px;
+  }
+
+  :deep(.v-field__append-inner) {
+    padding: unset;
+  }
+}
+
+
 .no-wrap-text {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -190,19 +198,29 @@ watch(() => props.currentShowingNumber, () => {
 }
 
 .results-number-span {
-  padding-top: 22px;
+  padding-top: 24px;
   height: 50px;
 }
 
 .middle-bar-element {
   flex: 1;
-  margin-top: 5px;
+  margin-top: 15px;
+
+  :deep(.v-btn) {
+    height: 23px;
+    width: 23px;
+  }
+
+  :deep(.v-btn-content) {
+    height: 10px;
+  }
 }
 
 .last-bar-element {
   margin-top: 17px;
   margin-right: 20px;
   width: 220px;
+  font-size: 15px;
 
   display: inline-flex;
   flex-wrap: nowrap;
@@ -210,7 +228,7 @@ watch(() => props.currentShowingNumber, () => {
 }
 
 .sort-by-span {
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .right-select {
diff --git a/src/components/common/results/SortingSelect.vue b/src/components/common/results/SortingSelect.vue
index 028a7634..23d858ca 100644
--- a/src/components/common/results/SortingSelect.vue
+++ b/src/components/common/results/SortingSelect.vue
@@ -87,7 +87,6 @@ watch(() => currentRoute.query.domaine, () => {
 
   :deep(.v-field__append-inner) {
     padding-top: 5px;
-    color: rgb(var(--v-theme-orange-abes));
 
     i {
       opacity: 1 !important;
diff --git a/src/components/personnes/results/PersonnesCard.vue b/src/components/personnes/results/PersonnesCard.vue
index ec5ab624..58bb4d02 100644
--- a/src/components/personnes/results/PersonnesCard.vue
+++ b/src/components/personnes/results/PersonnesCard.vue
@@ -1,42 +1,36 @@
 <template>
-  <v-card flat>
-    <div class="firstHalf">
+  <v-card flat class="card-container">
+    <div class="first-half">
       <div class="info">
         <v-icon size="40px">$personne</v-icon>
-        <div class="sep">
-          <v-divider vertical v-if="item.has_idref"></v-divider>
-        </div>
-        <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
-          <img alt="logo" id="logoIMG" src="@/assets/idref-icone.png" />
-        </a>
         <div class="nom-card">
           <RouterLink class="nomprenom"
             :to="{ name: 'detail', params: { id: item.id }, query: { 'domaine': currentRoute.query.domaine } }"
             v-if="item.has_idref">
-            <span class="prenom">{{ item.prenom }}</span>
-            <span class="nom">{{ item.nom }}</span>
+            <span class="prenom">{{ item.prenom + "\xa0" }}</span><span class="nom">{{ item.nom }}</span>
           </RouterLink>
           <RouterLink v-else-if="item.these" class="nomprenom" :to="{ name: 'detail', params: { id: item.these } }">
-            <span class="prenom">{{ item.prenom }}</span>
-            <span class="nom">{{ item.nom }}</span>
+            <span class="prenom">{{ item.prenom + "\xa0" }}</span><span class="nom">{{ item.nom }}</span>
           </RouterLink>
           <div v-else class="nomprenom">
-            <span class="prenom">{{ item.prenom }}</span>
-            <span class="nom">{{ item.nom }}</span>
+            <span class="prenom">{{ item.prenom + "\xa0" }}</span><span class="nom">{{ item.nom }}</span>
           </div>
+          <a class="nomprenom" v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
+            <img alt="logo" id="logoIdref" src="@/assets/idref-icone.png" />
+          </a>
         </div>
       </div>
       <div class="action">
-        <v-btn :disabled="!item.roles['auteur'] || !item.these" color="primary" append-icon="mdi-arrow-right-circle"
+        <v-btn :disabled="!item.roles['auteur'] || !item.these" color="secondary-darken-2" append-icon="mdi-arrow-right-circle"
           @click="goToPersonne('#Auteurs')">{{ $t('personnes.resultView.personnesCard.auteur') }}
           ({{ item.roles["auteur"] ? item.roles["auteur"] : 0 }})
         </v-btn>
-        <v-btn :disabled="!item.roles['directeur de thèse'] || !item.these" color="primary"
+        <v-btn :disabled="!item.roles['directeur de thèse'] || !item.these" color="secondary-darken-2"
           append-icon="mdi-arrow-right-circle" @click="goToPersonne('#Directeurs')">{{
             $t('personnes.resultView.personnesCard.directeur') }}
           ({{ item.roles["directeur de thèse"] ? item.roles["directeur de thèse"] : 0 }})
         </v-btn>
-        <v-btn :disabled="!item.roles['rapporteur'] || !item.these" color="primary"
+        <v-btn :disabled="!item.roles['rapporteur'] || !item.these" color="secondary-darken-2"
           append-icon="mdi-arrow-right-circle" @click="goToPersonne('#Rapporteurs')">{{
             $t('personnes.resultView.personnesCard.rapporteur') }}
           ({{ item.roles["rapporteur"] ? item.roles["rapporteur"] : 0 }})
@@ -44,18 +38,14 @@
       </div>
     </div>
     <div class="vertical-spacer"></div>
-    <div class="secondHalf">
-      <div class="disciplines">
-        <template v-for="name in item.disciplines" :key="name">
-          {{ name }}<span class="separator">; </span>
+    <div class="second-half">
+        <template v-for="(name, index) in item.disciplines" :key="name">
+          {{ name }}<span v-if="index !== item.disciplines.length - 1">{{ "\xa0" }};{{ "\xa0" }}</span>
         </template>
-      </div>
-      <v-divider vertical></v-divider>
-      <div class="etablissements">
-        <template v-for="name in item.etablissements " :key="name">
-          {{ name }}<span class="separator">; </span>
+        <span>{{ "\xa0"+ "|" + "\xa0" }}</span>
+        <template v-for="(name, index) in item.etablissements " :key="name">
+          {{ name }}<span v-if="index !== item.etablissements.length - 1">{{ "\xa0" }};{{ "\xa0" }}</span>
         </template>
-      </div>
     </div>
   </v-card>
 </template>
@@ -97,6 +87,16 @@ function goToPersonne(hash) {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.card-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-title-wrapper {
+  display: grid !important;
+  grid-template-columns: 1fr 20fr 3fr;
+}
+
 .line-clamp {
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -104,22 +104,14 @@ function goToPersonne(hash) {
   overflow: hidden;
 }
 
-.v-card {
-  border: solid 1px rgb(var(--v-theme-gris-fonce));
-  max-width: 100vw;
-  display: flex;
-  flex-direction: column;
-}
-
-
-.firstHalf {
-  display: flex;
-  padding: 1rem;
+.first-half {
+  display: grid;
+  grid-template-columns: 4fr 6fr;
+  padding: 0 2rem 0 1rem;
   justify-content: space-between;
   align-items: center;
   height: calc(100% + 180px);
   width: 100%;
-  flex-direction: column;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
     height: 100%;
@@ -132,16 +124,16 @@ function goToPersonne(hash) {
     flex: 0 0 10%;
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       flex: 1 0 30%;
-      max-width: 35%;
     }
 
     .v-icon {
       margin-right: 1rem;
       flex: 0 0 10%;
+      align-self: start;
     }
 
     .sep {
@@ -160,46 +152,14 @@ function goToPersonne(hash) {
         max-height: 45px;
       }
     }
-
-    .nom-card {
-      flex: 1 0 100%;
-      display: flex;
-      align-items: center;
-
-      @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        flex: 1 0 60%;
-        margin-left: 1rem;
-      }
-
-      .nomprenom {
-        display: flex;
-        flex-direction: column;
-        text-decoration: none;
-        color: rgb(var(--v-theme-primary));
-        font-size: 23.5px;
-
-        @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-          font-size: 29.5px;
-        }
-
-        .prenom {
-          font-weight: 400;
-        }
-
-        .nom {
-          font-weight: 700;
-        }
-      }
-    }
   }
 
   .action {
     display: flex;
-    justify-content: flex-start;
+    flex-wrap: wrap;
     align-items: center;
     width: 100%;
     height: 100px;
-    flex-wrap: wrap;
 
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
       justify-content: flex-end;
@@ -226,41 +186,63 @@ function goToPersonne(hash) {
   flex: 1;
 }
 
-.secondHalf {
-
-  justify-content: space-between;
-  align-items: center;
-  background-color: rgb(var(--v-theme-gris-clair)) !important;
+.second-half {
+  display: flex;
+  flex-wrap: wrap;
   height: 100%;
   padding: 0.5rem;
   font-weight: bold;
   color: rgb(var(--v-theme-primary));
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-    display: flex;
-    padding: 0.5rem 5rem 0.5rem 5rem;
+    padding: 0rem 1rem 0.5rem;
 
     hr {
-      height: 40px;
+      height: 20px;
       border-color: rgb(var(--v-theme-primary)) !important;
       opacity: 1;
       border-width: 0 1.5px 0 0;
     }
   }
 
-  .disciplines,
-  .etablissements {
-    flex: 0 0 45%;
-
-    .separator:last-of-type {
-      display: none;
-    }
+  .disciplines {
+    margin-right: 0.5em;
   }
-
 }
 
 .subtitle {
   font-size: 0.9rem;
   font-weight: 400;
 }
+
+.card-title {
+  color: rgb(var(--v-theme-primary));
+}
+
+.card-text .card-text-bold {
+  white-space: unset !important;
+  font-size: 15px;
+}
+
+.card-text {
+  font-family: Roboto-Regular, sans-serif;
+}
+
+.card-text-bold {
+  font-family: Roboto-Bold, sans-serif;
+  font-weight: 700
+}
+
+.card-text-wrapper {
+  display: inline-block;
+}
+
+.clickable {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.lightblue {
+  color: rgb(var(--v-theme-secondary-darken-2)) !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/personnes/search/SearchBar.vue b/src/components/personnes/search/SearchBar.vue
index 0566a868..3f5851ef 100644
--- a/src/components/personnes/search/SearchBar.vue
+++ b/src/components/personnes/search/SearchBar.vue
@@ -1,21 +1,49 @@
 <template>
   <div class="searchbar">
-    <v-combobox class="searchbar__input" :label='$t("rechercher")' v-model="request" v-model:search="requestSearch"
-                :items="suggestions" variant="outlined" append-inner-icon
-                :hide-no-data="!isSuggestionActive || suggestions.length == 0" no-filter hide-details
-                hide-selected
-                :no-data-text="isSuggestionLoading ? $t('personnes.searchBar.loading') : $t('personnes.searchBar.noData')"
-                @keydown.enter="search" :loading="isSuggestionLoading"
-                :menu="isSuggestionActive && suggestions.length != 0" :menu-props="menuProps">
-      <template v-slot:append-inner>
-        <v-btn flat rounded="0" icon="mdi-backspace-outline" @click="clearSearch" :title='$t("clear")' :ripple="false">
+    <v-combobox
+      class="searchbar__input"
+      :items="suggestions"
+      :menu="isSuggestionActive && suggestions.length != 0"
+      :menu-props="menuProps"
+      :active="true"
+      :hide-no-data="!isSuggestionActive || suggestions.length == 0"
+      :no-data-text="isSuggestionLoading ? $t('personnes.searchBar.loading') : $t('personnes.searchBar.noData')"
+      v-model="request"
+      v-model:search="requestSearch"
+      variant="outlined"
+      cache-items
+      hide-details
+      hide-selected
+      no-filter
+      density="compact"
+      return-object
+      type="text"
+      menu-icon=""
+      @keydown.enter="search" :loading="isSuggestionLoading"
+    >
+<!--      Bouton rechercher-->
+      <template v-slot:prepend-inner>
+        <v-btn @click="search" :title='$t("searchButton")' :loading="loading"
+          class="elevation-0 appended-buttons">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="magnifying-glass">
+              mdi-magnify
+            </v-icon>
+          </template>
         </v-btn>
       </template>
-      <template v-slot:append>
-        <v-btn color="primary" icon="mdi-magnify" text @click="search" :title='$t("searchButton")' :loading="loading"
-               class="pa-0 ma-0">
+<!--      Bouton effacer texte-->
+      <template v-slot:append-inner>
+        <v-btn class="appended-buttons" plain flat rounded="0" @click="clearSearch" :title='$t("clear")'
+               :ripple="false">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="clean-button">
+              mdi-close
+            </v-icon>
+          </template>
         </v-btn>
       </template>
+<!-- Liste auto-complétion -->
       <template v-slot:prepend-item v-if="suggestions.length > 0">
         <h3>{{ $t('personnes.searchBar.title-personnes') }}</h3>
         <h3>{{ $t('personnes.searchBar.title-thematiques') }}</h3>
@@ -37,10 +65,16 @@
         </v-list-item>
       </template>
     </v-combobox>
+
     <div class="searchbar__action">
-      <v-checkbox label="Désactiver l'autocomplétion" v-model="isSuggestionDisabledCheckbox"
-                  :title='$t("disableSuggestion")'></v-checkbox>
-      <v-btn color="primary" append-icon="mdi-magnify" @click="search" :title='$t("avancee")'>{{ $t("avancee") }}
+      <v-checkbox
+        label="Désactiver l'autocomplétion"
+        v-model="isSuggestionDisabledCheckbox"
+        :title='$t("disableSuggestion")'></v-checkbox>
+      <v-btn color="primary"
+             density="compact"
+             variant="outlined"
+             :title='$t("avancee")' @click="search">{{ $t("avancee") }}
       </v-btn>
     </div>
   </div>
@@ -192,106 +226,123 @@ defineExpose({
 });
 
 </script>
+
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.searchbar {
 
+.searchbar {
   flex: 0 0 auto;
   margin-top: 1rem;
 
   :deep(.searchbar__input) {
-
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
       padding-bottom: 10px;
     }
+  }
+}
 
-    .v-field__field {
-      background-color: rgb(var(--v-theme-surface));
-    }
+.searchbar__action {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1 0 100%;
+  margin-bottom: 1rem;
 
-    .v-field--variant-outlined {
-      background-color: rgb(var(--v-theme-surface));
+  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+    justify-content: space-between;
+  }
 
-      .v-field__outline__start {
-        border-top-left-radius: 2rem;
-        border-bottom-left-radius: 2rem;
-      }
+  .v-input {
+    display: none;
 
-      .v-field__outline__end {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: 0;
-      }
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+      display: flex;
+      flex: 0 0 auto;
     }
+  }
 
-    .v-input__append {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 100% !important;
+  :deep(.v-label) {
+    color: rgb(var(--v-theme-primary));
+    opacity: 1;
+    font-size: 0.95rem;
+  }
 
-      .v-btn {
-        height: 100%;
-        width: 70px;
-        border-radius: 0 0.7rem 0.7rem 0;
+  :deep(.v-btn) {
+    margin-right: 15px;
+  }
+}
 
-        .v-icon {
-          font-size: 50px;
-        }
-      }
+:deep(.v-field__prepend-inner) {
+  padding: 0;
+  align-self: center;
+}
 
-    }
+:deep(.v-field__append-inner) {
+  padding: 0;
+  align-self: center;
+}
 
-    .v-field__append-inner {
-      padding-top: 0;
-      justify-content: center;
-      align-items: center;
-      background-color: rgb(var(--v-theme-surface));
+:deep(.appended-buttons) {
+  padding: 0;
+  min-width: unset;
+  width: 36px;
+  justify-content: center;
+  background-color: transparent;
 
-      .v-btn {
-        background-color: transparent;
-        height: 100%;
+  .v-btn--density-default {
+    height: unset;
+  }
 
-        .v-icon {
-          font-size: 40px;
-          color: rgb(var(--v-theme-text-dark-blue));
-        }
-      }
-    }
+  .v-btn__append {
+    margin-inline-start: unset;
   }
 
-  .searchbar__action {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex: 1 0 100%;
-    margin-bottom: 1rem;
+  :deep(.v-btn__append) {
+    justify-content: center;
+  }
+}
 
-    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-      justify-content: space-between;
-    }
 
-    :deep(.v-label) {
-      color: rgb(var(--v-theme-primary));
-      opacity: 1;
-      font-size: 0.95rem;
-    }
 
-    .v-input {
-      display: none;
+/* Permet de rendre l'auto-complétion + dense */
+:deep(.v-overlay-container) .v-list-item--density-default.v-list-item--one-line {
+  min-height: 20px !important;
+}
 
-      @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        display: flex;
-        flex: 0 0 auto;
-      }
-    }
+.no-background-hover::before {
+  background-color: transparent !important;
+}
+
+.search-bar-icons {
+  color: rgb(var(--v-theme-primary)) !important;
+  font-size: 25px;
+  font-weight: 200;
+}
+
+#clean-button {
+  left: -3px;
+}
+
+.v-input {
+  :deep(.v-btn--variant-outlined) {
+    color: rgb(var(--v-theme-gris-fonce)) !important;
   }
 }
 
+:deep(.v-field--prepended) {
+  padding-inline-start: 0 !important;
+}
+
+:deep(.v-field--appended) {
+  padding-inline-end: 0 !important;
+}
+
 .no-background-hover::before {
   background-color: transparent !important;
 }
 </style>
+
 <style lang="scss">
 @use 'vuetify/settings';
 
@@ -306,6 +357,15 @@ defineExpose({
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: min-content;
     width: 100%;
+
+    /* Permet de rendre l'autocompletion + dense */
+    .v-list-item {
+      min-height: 40px !important;
+
+      @media only screen and (min-width: 900px) {
+        min-height: 20px !important;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ButtonsList.vue b/src/components/theses/ButtonsList.vue
index d8566460..0134b044 100644
--- a/src/components/theses/ButtonsList.vue
+++ b/src/components/theses/ButtonsList.vue
@@ -1,7 +1,10 @@
 <template>
   <MessageBox ref="messageBox"></MessageBox>
-  <div class="buttons">
+  <div class="buttons" v-if="dataReady">
     <div class="buttons-header">
+      <span>{{ $t("theseView.access") }}</span>
+    </div>
+    <div class="buttons-sub-header">
       <div class="header-container no-wrap-text">
         <v-icon color="primary" class="menu-icon">mdi-certificate</v-icon>
         <span class="buttons-title-header"><span v-if="soutenue">{{ $t("theseView.valide") }}</span></span>
@@ -14,22 +17,27 @@
       </div>
     </div>
     <div v-if="soutenue">
-      <div class="listButtons no-wrap-text" v-for="b in listButtons" :key="b">
-        <v-btn v-if="b.url" color="primary" append-icon="mdi-arrow-right-circle" flat :href="baseURL + b.url"
-          target="_blank" :title="b.libelle" :aria-label="b.libelle">{{
+      <div class="list-buttons no-wrap-text" v-for="b in listButtons" :key="b">
+        <v-btn v-if="b.url" color="secondary-darken-2" append-icon="mdi-arrow-right-circle" flat
+               :href="baseURL + b.url"
+               target="_blank" :title="b.libelle" :aria-label="b.libelle">{{
             b.libelle }}</v-btn>
         <span v-else>
           <span v-if="b.libelle === 'Embargo'">{{ $t("theseView.embargo") }} {{ b.dateFin }}</span>
           <span v-if="b.libelle === 'Confidentialité'">{{ $t("theseView.confidentialite") }} {{ b.dateFin }}</span>
         </span>
       </div>
-      <v-skeleton-loader v-if="loading" :key="i" type="list-item" class="skeleton"></v-skeleton-loader>
+    </div>
+    <div class="skeleton-loader-wrapper" v-else>
+      <v-skeleton-loader type="list-item-two-line"></v-skeleton-loader>
+      <v-skeleton-loader type="button" class="d-flex justify-center w-75 mx-15"></v-skeleton-loader>
+      <v-skeleton-loader type="button" class="d-flex justify-center w-75 mx-15"></v-skeleton-loader>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted, watch } from "vue";
 import { thesesAPIService } from '@/services/ThesesAPI';
 import { useDisplay } from "vuetify";
 
@@ -49,7 +57,10 @@ const props = defineProps({
   },
   soutenue: {
     type: Boolean,
-  }
+  },
+  dataReady: {
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits('closeOverlay');
@@ -59,23 +70,32 @@ const loading = ref(false);
 const listButtons = ref([]);
 const baseURL = import.meta.env.VITE_APP_API;
 
-watch(
-  () => props.soutenue,
+onMounted (
   () => {
-    if (props.soutenue) {
-      getButtons(props.nnt).then((res) => {
-        listButtons.value = res.data.buttons;
-      })
-        .catch((err) => {
-          displayError("Accès en ligne : " + err.message);
-        })
-        .finally(() => {
-          loading.value = false;
-        });
-    }
+    loadButtons();
+  }
+);
+
+watch (
+  () => props.dataReady,
+  () => {
+    loadButtons();
   }
 );
 
+function loadButtons() {
+  if (props.soutenue) {
+    getButtons(props.nnt).then((res) => {
+      listButtons.value = res.data.buttons;
+    })
+      .catch((err) => {
+        displayError("Accès en ligne : " + err.message);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+}
 
 /**
  * Fonctions
@@ -90,10 +110,18 @@ function closeOverlay() {
 
 .buttons-header {
   overflow: hidden;
-  padding: 4px 20px;
-  width: 100%;
-  background-color: rgb(var(--v-theme-gris-clair));
+  padding: 0.4em 0.8em 0;
+
   font-size: 22px;
+  font-weight: 600;
+  font-family: Roboto-Bold, sans-serif;
+}
+
+.buttons-sub-header {
+  overflow: hidden;
+  padding: 0 1.4em;
+  width: 100%;
+  font-size: 18px;
   height: 42px;
 
   display: inline-flex;
@@ -103,14 +131,13 @@ function closeOverlay() {
     padding: unset;
     font-size: 16px;
   }
-
-  margin-bottom: 1em;
+  margin-bottom: 0.6em;
 }
 
 .header-container {
   height: 2rem;
-  display: inline-grid;
-  grid-template-columns: 2fr 1fr 10fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr 100fr;
   grid-template-rows: 20% 60% 20%;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
@@ -153,25 +180,24 @@ function closeOverlay() {
   }
 }
 
-.listButtons {
+.list-buttons {
   display: flex;
   flex-direction: column;
   align-items: center;
 
   .v-btn {
     width: 85%;
-    margin-bottom: 10px;
     display: inline-flex;
     justify-content: space-between;
     text-transform: none;
     margin-bottom: 1em;
-
   }
 }
 
-.buttons {
+.buttons, .skeleton-loader-wrapper {
   display: flex;
   flex-direction: column;
+  border-right: 2px solid rgb(var(--v-theme-gris-clair));
 
   .buttons-list {
     width: 85%;
@@ -194,4 +220,8 @@ function closeOverlay() {
   grid-column-end: 4;
   justify-self: end;
 }
+
+:deep(.v-skeleton-loader__button) {
+  max-width: unset !important;
+}
 </style>
diff --git a/src/components/theses/ThesisComponent.vue b/src/components/theses/ThesisComponent.vue
index ebd27de7..ef647dbb 100644
--- a/src/components/theses/ThesisComponent.vue
+++ b/src/components/theses/ThesisComponent.vue
@@ -1,32 +1,26 @@
 <template>
   <thesis-toolbar :source="these.source" :nnt="props.nnt"
     :etab-ppn="these.etabSoutenance ? these.etabSoutenance.ppn : ''" />
-  <div>
-    <thesis-title :data-ready="dataReady" :status="these.status" :titles="these.titres" id="top-of-thesis-component" />
-    <thesis-table class="thesis-component" :these="these" />
-    <v-divider v-if="keywordsAreSet" :thickness="1" class="divider border-opacity-50" length="90%" />
-    <thesis-keywords class="thesis-component" :keywords-are-set="keywordsAreSet" :data-ready="dataReady" :these="these"
-      :selected-language="selectedLanguage" @changeLanguage="changeLanguage" />
-    <v-divider v-if="resumeIsSet" :thickness="1" class="divider border-opacity-50" length="90%" />
-    <thesis-resume class="thesis-component" :resume-is-set="resumeIsSet" :data-ready="dataReady" :these="these"
-      :selected-language="selectedLanguage" />
+  <div class="thesis-info-access-wrapper">
+    <thesis-title class="thesis-title" :data-ready="dataReady" :status="these.status" :titles="these.titres" />
+    <!-- Bare latérale Desktop -->
+    <div v-if="!mobile && soutenue" class="access-buttons">
+      <!-- Menu boutons-liens desktop-->
+      <buttons-list v-if="!mobile " :nnt="nnt" :soutenue="soutenue" :data-ready="dataReady"></buttons-list>
+    </div>
+    <div class="thesis-info-wrapper">
+      <thesis-table class="thesis-component" :these="these" :data-ready="dataReady" />
+      <v-divider v-if="keywordsAreSet" :thickness="1" class="divider border-opacity-50" length="90%" />
+      <thesis-keywords class="thesis-component" :keywords-are-set="keywordsAreSet" :data-ready="dataReady" :these="these"
+        :selected-language="selectedLanguage" @changeLanguage="changeLanguage" />
+      <v-divider v-if="resumeIsSet" :thickness="1" class="divider border-opacity-50" length="90%" />
+      <thesis-resume class="thesis-component" :resume-is-set="resumeIsSet" :data-ready="dataReady" :these="these"
+        :selected-language="selectedLanguage" />
+    </div>
     <div class="scroll-to-top-container">
       <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1 />
     </div>
   </div>
-  <div v-if="!titleIsSet">
-    <v-skeleton-loader type="heading"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-divider :thickness="1" class="divider border-opacity-50" length="90%" />
-    <v-skeleton-loader type="subtitle"></v-skeleton-loader>
-    <v-skeleton-loader type="chip, chip, chip, chip, chip, chip"></v-skeleton-loader>
-    <v-divider :thickness="1" class="divider border-opacity-50" length="90%" />
-    <v-skeleton-loader type="heading"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-  </div>
 </template>
 
 <script setup>
@@ -39,23 +33,29 @@ import { useI18n } from "vue-i18n";
 import { useMeta } from "vue-meta";
 import ThesisTitle from "@/components/theses/ThesisTitle.vue";
 import ThesisResume from "@/components/theses/ThesisResume.vue";
+import ButtonsList from "@/components/theses/ButtonsList.vue";
+import { useDisplay } from "vuetify";
 
+const { mobile } = useDisplay();
 const { t } = useI18n();
 const { meta } = useMeta({});
 const selectedLanguage = ref('fr');
 
 
 const props = defineProps({
-  dataReady: {
-    type: Boolean,
-    default: false
-  },
   these: {
     type: Object
   },
   nnt: {
     type: String
-  }
+  },
+  soutenue: {
+    type: Boolean
+  },
+  dataReady: {
+    type: Boolean,
+    default: false
+  },
 });
 
 const resumeIsSet = ref(false);
@@ -84,9 +84,38 @@ watchEffect(() => {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.thesis-info-access-wrapper {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 25fr 2fr 75fr;
+
+  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.thesis-title {
+  hyphens: auto;
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+}
+
+.access-buttons {
+  grid-column-start: 1;
+  grid-row-start: 2;
+
+}
+
+.thesis-info-wrapper{
+  grid-column-start: 3;
+  grid-row-start: 2;
+}
+
 .thesis-component {
   width: 92%;
-  margin: 0 auto 20px;
+  margin: 2em auto;
 }
 
 .v-skeleton-loader {
@@ -135,8 +164,4 @@ watchEffect(() => {
     top: 90vh !important;
   }
 }
-
-#top-of-thesis-component {
-  hyphens: auto;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ThesisResume.vue b/src/components/theses/ThesisResume.vue
index 66fc8d66..36caaa1c 100644
--- a/src/components/theses/ThesisResume.vue
+++ b/src/components/theses/ThesisResume.vue
@@ -1,14 +1,19 @@
 <template>
-  <div v-if="resumeIsSet">
-    <div class="resume-title-wrapper">
-      <v-icon color="primary">mdi-file-document-arrow-right</v-icon>
-      <h1>{{ $t('theseView.resume') }}</h1>
-      <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+  <div>
+    <div v-if="resumeIsSet && dataReady">
+      <div class="resume-title-wrapper">
+        <v-icon color="primary">mdi-file-document-arrow-right</v-icon>
+        <h1>{{ $t('theseView.resume') }}</h1>
+        <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+      </div>
+      <div id="resume-text">
+        <p>
+          {{ resume }}
+        </p>
+      </div>
     </div>
-    <div id="resume-text">
-      <p>
-        {{ resume }}
-      </p>
+    <div v-if="!dataReady">
+      <v-skeleton-loader type="article"></v-skeleton-loader>
     </div>
   </div>
 </template>
@@ -23,7 +28,11 @@ const props = defineProps({
   },
   resumeIsSet: {
     type: Boolean
-  }
+  },
+  dataReady: {
+    type: Boolean,
+    default: false
+  },
 });
 
 const resume = ref("");
@@ -49,10 +58,6 @@ function onUpdateLangue(langue) {
   selectedLanguage.value = langue;
   resume.value = props.these.resumes[selectedLanguage.value];
 }
-
-
-
-
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/theses/ThesisTable.vue b/src/components/theses/ThesisTable.vue
index 9a1f1301..ddd84f1d 100644
--- a/src/components/theses/ThesisTable.vue
+++ b/src/components/theses/ThesisTable.vue
@@ -1,12 +1,12 @@
 <template>
-  <table class="table" v-if="these.auteurs">
+  <table class="table" v-if="these.auteurs && dataReady">
     <tbody class="table-body">
       <!-- Auteur -->
       <tr v-if="these.auteurs && these.auteurs.length > 0" class="table-rows">
         <span><strong>{{ $t('theseView.auteur') }}{{ '\xa0' }}</strong></span>
         <span>
           <template v-for="(auteur, index) in these.auteurs" :key="auteur.ppn">
-            <span :class="auteur.ppn ? 'clickable lightblue' : ''" @click="linkTo(auteur.ppn)">
+            <span :class="auteur.ppn ? 'clickable orange' : ''" @click="linkTo(auteur.ppn)">
               {{ auteur.prenom }} {{ auteur.nom }}
             </span>
             <template v-if="index < these.auteurs.length - 1">,{{ '\xa0' }}</template>
@@ -120,6 +120,14 @@
       </tr>
     </tbody>
   </table>
+  <div v-if="!dataReady">
+    <v-skeleton-loader type="table-heading"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+  </div>
 </template>
 
 <script setup>
@@ -129,6 +137,9 @@ defineProps({
   these: {
     type: Object,
     required: true
+  },
+  dataReady: {
+    type: Boolean
   }
 });
 
@@ -142,6 +153,10 @@ function linkTo(id) {
 <style lang="scss" scoped>
 @use 'vuetify/settings';
 
+.orange {
+  color: rgb(var(--v-theme-orange-abes));
+}
+
 .lightblue {
   color: rgb(var(--v-theme-secondary-darken-2));
 }
@@ -149,8 +164,6 @@ function linkTo(id) {
 .table {
   width: 92%;
   margin: auto;
-
-  border-left: 3px solid rgb(var(--v-theme-text-dark-blue));
 }
 
 .table-body {
@@ -162,6 +175,8 @@ function linkTo(id) {
   padding: 0 10px 0;
   display: inline-grid;
   grid-template-columns: 2fr 7fr;
+  border-bottom: 1px solid rgb(var(--v-theme-gris-fonce));
+  color: rgb(var(--v-theme-text-dark-blue));
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     display: block;
@@ -169,10 +184,6 @@ function linkTo(id) {
   }
 }
 
-.table tbody tr:nth-of-type(odd) {
-  background-color: rgb(var(--v-theme-gris-clair));
-}
-
 #president {
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     display: block;
@@ -182,5 +193,6 @@ function linkTo(id) {
 .clickable {
   cursor: pointer;
   font-weight: bold;
+  color: rgb(var(--v-theme-secondary-darken-2));
 }
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ThesisTitle.vue b/src/components/theses/ThesisTitle.vue
index b8f9973c..ab807bbf 100644
--- a/src/components/theses/ThesisTitle.vue
+++ b/src/components/theses/ThesisTitle.vue
@@ -1,14 +1,18 @@
 <template>
-  <div v-if="currentTitle !== ''" class="title-wrapper line-clamp">
+  <div v-if="currentTitle !== '' && dataReady" class="title-wrapper line-clamp">
     <div class="thesis-icon">
       <thesis-icon :status="status"></thesis-icon>
     </div>
     <div class="title-flexbox"> <!-- #TODO v-if anglais/francais -->
       <span>
         {{ currentTitle }}
-      </span><language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+      </span>
+      <language-selector class="language-selector" :languages="langList" @update-langue="onUpdateLangue"></language-selector>
     </div>
   </div>
+  <div v-if="!dataReady" class="title-wrapper line-clamp">
+    <v-skeleton-loader type="list-item-avatar" class="w-100"></v-skeleton-loader>
+  </div>
 </template>
 
 <script setup>
@@ -62,9 +66,12 @@ function onUpdateLangue(langue) {
 @use 'vuetify/settings';
 
 .title-wrapper {
-  padding: 20px 20px 10px 10px;
-  display: grid !important;
-  grid-template-columns: 2fr 20fr;
+  padding: 1.2em 1.2em 1em 1em;
+  grid-column-start: 1;
+  grid-column-end: 4;
+
+  display: flex;
+  align-content: end;
 }
 
 .thesis-icon {
@@ -73,15 +80,23 @@ function onUpdateLangue(langue) {
 }
 
 .title-flexbox {
-  display: flex;
-  flex-flow: row wrap;
+  display: grid;
+  grid-template-columns: 9fr 1fr;
+  grid-column-start: 2;
 
   span {
     font-family: Roboto-Medium, sans-serif;
     font-size: 25.5px;
     font-weight: 600;
+    color: rgb(var(--v-theme-text-dark-blue));
     letter-spacing: -0.5px;
     line-height: 1.2;
+    align-self: end;
   }
 }
+
+.language-selector {
+  justify-content: center;
+  align-self: end;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ThesisToolbar.vue b/src/components/theses/ThesisToolbar.vue
index 07114c6d..17a7e9bd 100644
--- a/src/components/theses/ThesisToolbar.vue
+++ b/src/components/theses/ThesisToolbar.vue
@@ -11,40 +11,40 @@
     </v-btn>
     <span></span>
     <div class="no-wrap-text">
-      <v-btn flat prepend-icon="mdi-arrow-left-circle">
-        <template v-slot:prepend-icon>
-          <v-icon>
+      <v-btn class="arrow-buttons" flat icon="mdi-chevron-left">
+        <template v-slot:icon>
+          <v-icon size="x-large">
             mdi-arrow-left-circle
           </v-icon>
         </template>
-        <p>{{ $t("theseView.thesePrecedente") }}</p>
+<!--        <p>{{ $t("theseView.thesePrecedente") }}</p>-->
       </v-btn>
-      <v-btn flat append-icon="mdi-arrow-right-circle">
-        <template v-slot:append-icon>
-          <v-icon>
+      <v-btn class="arrow-buttons" flat icon="mdi-chevron-right">
+        <template v-slot:icon>
+          <v-icon size="x-large">
             mdi-arrow-right-circle
           </v-icon>
         </template>
-        <p>{{ $t("theseView.theseSuivante") }}</p>
+<!--        <p>{{ $t("theseView.theseSuivante") }}</p>-->
       </v-btn>
     </div>
     <span></span>
     <div class="no-wrap-text">
-      <v-btn flat append-icon="mdi-alert" @click="dialog = true">
+      <v-btn flat append-icon="mdi-file-export-outline">
         <template v-slot:append-icon>
           <v-icon>
-            mdi-alert
+            mdi-file-export-outline
           </v-icon>
         </template>
-        <p>{{ $t("theseView.alert") }}</p>
+        <p>{{ $t("theseView.exporter") }}</p>
       </v-btn>
-      <v-btn flat append-icon="mdi-file-export-outline">
+      <v-btn flat append-icon="mdi-alert" @click="dialog = true">
         <template v-slot:append-icon>
           <v-icon>
-            mdi-file-export-outline
+            mdi-alert
           </v-icon>
         </template>
-        <p>{{ $t("theseView.exporter") }}</p>
+        <p>{{ $t("theseView.alert") }}</p>
       </v-btn>
     </div>
   </div>
@@ -119,7 +119,7 @@ function mailSent() {
   height: 42px;
   width: 100%;
   padding: 0 10px;
-  background-color: rgb(var(--v-theme-gris-clair));
+  margin: 0.6em 0;
 
   display: inline-flex;
   justify-content: space-between;
@@ -133,8 +133,6 @@ function mailSent() {
   }
 
   :deep(.v-icon--size-default) {
-    color: rgb(var(--v-theme-orange-abes));
-
     i {
       opacity: 1 !important;
     }
@@ -148,8 +146,19 @@ function mailSent() {
     text-indent: unset;
 
     margin: 0 8px;
-    border: solid 1px rgb(var(--v-theme-gris-fonce));
+    border: solid 1px rgb(var(--v-theme-primary));
   }
 
+  .arrow-buttons {
+    border: unset;
+    height: 2.4em;
+    width: 2.4em;
+
+      :deep(.v-btn__content ) {
+        i {
+          --v-icon-size-multiplier: 1.4;
+        }
+      }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/theses/results/ResultCard.vue b/src/components/theses/results/ResultCard.vue
index a792b76d..dd04293b 100644
--- a/src/components/theses/results/ResultCard.vue
+++ b/src/components/theses/results/ResultCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card flat class="card-container">
-    <div class="firstHalf" @click="$router.push({ name: 'detail', params: { id: id } })">
+    <div class="first-half" @click="$router.push({ name: 'detail', params: { id: id } })">
       <v-card-title>
         <div class="card-title-wrapper line-clamp">
           <div v-if="!mobile" class="thesis-icon">
@@ -27,7 +27,7 @@
       </v-card-title>
     </div>
     <div class="vertical-spacer"></div>
-    <div class="secondHalf">
+    <div class="second-half">
       <v-card-text class="py-2 card-text-wrapper">
         <span class="card-text">
           {{ $t('resultCard.par') }}{{ '\xa0' }}
@@ -150,10 +150,11 @@ function linkTo(id) {
 
 .card-title {
   grid-column-start: 2;
-  padding: 0 10px 0;
+  padding: 10px 10px 0;
   font-size: 18px;
   font-family: Roboto-Regular, sans-serif;
-  font-weight: 600;
+  font-weight: 500;
+  line-height: 1.4rem !important;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-column-start: 1;
@@ -192,11 +193,6 @@ function linkTo(id) {
   }
 }
 
-.v-card {
-  border: solid 1px rgb(var(--v-theme-gris-fonce)) !important;
-  min-height: 150px !important;
-}
-
 :deep(.v-card-title) {
   white-space: pre-line !important;
   cursor: pointer;
@@ -206,12 +202,6 @@ function linkTo(id) {
   flex: 1;
 }
 
-.secondHalf {
-  background-color: rgb(var(--v-theme-gris-clair)) !important;
-  padding-top: 6px;
-  width: 100%;
-}
-
 .subtitle {
   font-size: 0.9rem;
   font-weight: 400;
diff --git a/src/components/theses/search/SearchBar.vue b/src/components/theses/search/SearchBar.vue
index 12fe7847..d1adf89f 100644
--- a/src/components/theses/search/SearchBar.vue
+++ b/src/components/theses/search/SearchBar.vue
@@ -1,23 +1,56 @@
 <template>
   <div class="searchbar">
-    <v-combobox class="searchbar__input" :label='$t("rechercher")' v-model="request" v-model:search="requestSearch"
-      :items="items" variant="outlined" cache-items hide-details hide-no-data hide-selected no-filter append-inner-icon
-      @keydown.enter="search" :active="true" return-object type="text" :menu="suggestionActive" :menu-props="menuProps">
-      <template v-slot:append-inner>
-        <v-btn plain flat rounded="0" icon="mdi-backspace-outline" @click="clearSearch" :title='$t("clear")'
-          :ripple="false">
+    <v-combobox
+      class="searchbar__input"
+      :items="items"
+      :menu="suggestionActive"
+      :menu-props="menuProps"
+      :active="true"
+      v-model="request"
+      v-model:search="requestSearch"
+      variant="outlined"
+      cache-items
+      hide-details
+      hide-no-data
+      hide-selected
+      no-filter
+      density="compact"
+      return-object
+      type="text"
+      menu-icon=""
+      @keydown.enter="search"
+    >
+<!--      Bouton rechercher-->
+      <template v-slot:prepend-inner>
+        <v-btn @click="search" :title='$t("searchButton")' :loading="loading"
+          class="elevation-0 appended-buttons">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="magnifying-glass">
+              mdi-magnify
+            </v-icon>
+          </template>
         </v-btn>
       </template>
-      <template v-slot:append>
-        <v-btn color="primary" icon="mdi-magnify" text @click="search" :title='$t("searchButton")' :loading="loading"
-          class="pa-0 ma-0">
+<!--      Bouton effacer texte-->
+      <template v-slot:append-inner>
+        <v-btn class="appended-buttons" plain flat rounded="0" @click="clearSearch" :title='$t("clear")'
+          :ripple="false">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="clean-button">
+              mdi-close
+            </v-icon>
+          </template>
         </v-btn>
       </template>
     </v-combobox>
+
     <div class="searchbar__action">
       <v-checkbox label="Désactiver l'autocomplétion" v-model="disableCompletion"
         :title='$t("disableSuggestion")'></v-checkbox>
-      <v-btn color="primary" append-icon="mdi-magnify" :title='$t("avancee")' @click="search">{{ $t("avancee") }}
+      <v-btn color="primary"
+             density="compact"
+             variant="outlined"
+             :title='$t("avancee")' @click="search">{{ $t("avancee") }}
       </v-btn>
     </div>
   </div>
@@ -129,70 +162,16 @@ defineExpose({
 });
 </script>
 
-
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.searchbar {
-  flex: 0 0 auto;
-  margin-top: 1rem;
+  .searchbar {
+    flex: 0 0 auto;
+    margin-top: 1rem;
 
-  :deep(.searchbar__input) {
-
-    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-      padding-bottom: 10px;
-    }
-
-    .v-field__field {
-      background-color: rgb(var(--v-theme-surface));
-    }
-
-    .v-field--variant-outlined {
-      background-color: rgb(var(--v-theme-surface));
-
-      .v-field__outline__start {
-        border-top-left-radius: 2rem;
-        border-bottom-left-radius: 2rem;
-      }
-
-      .v-field__outline__end {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: 0;
-      }
-    }
-
-    .v-input__append {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 100% !important;
-
-      .v-btn {
-        height: 100%;
-        width: 70px;
-        border-radius: 0 0.7rem 0.7rem 0;
-
-        .v-icon {
-          font-size: 50px;
-        }
-      }
-
-    }
-
-    .v-field__append-inner {
-      padding-top: 0;
-      justify-content: center;
-      align-items: center;
-      background-color: rgb(var(--v-theme-surface));
-
-      .v-btn {
-        background-color: transparent;
-        height: 100%;
-
-        .v-icon {
-          font-size: 40px;
-          color: rgb(var(--v-theme-text-dark-blue));
-        }
+    :deep(.searchbar__input) {
+      @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+        padding-bottom: 10px;
       }
     }
   }
@@ -222,10 +201,45 @@ defineExpose({
       opacity: 1;
       font-size: 0.95rem;
     }
+
+    :deep(.v-btn) {
+      margin-right: 15px;
+    }
+  }
+
+  :deep(.v-field__prepend-inner) {
+    padding: 0;
+    align-self: center;
+  }
+
+  :deep(.v-field__append-inner) {
+    padding: 0;
+    align-self: center;
+  }
+
+  :deep(.appended-buttons) {
+    padding: 0;
+    min-width: unset;
+    width: 36px;
+    justify-content: center;
+    background-color: transparent;
+
+    .v-btn--density-default {
+      height: unset;
+    }
+
+    .v-btn__append {
+      margin-inline-start: unset;
+    }
+
+    :deep(.v-btn__append) {
+      justify-content: center;
+    }
   }
-}
 
-/* Permet de rendre l'autocompletion + dense */
+
+
+/* Permet de rendre l'auto-complétion + dense */
 :deep(.v-overlay-container) .v-list-item--density-default.v-list-item--one-line {
   min-height: 20px !important;
 }
@@ -233,6 +247,30 @@ defineExpose({
 .no-background-hover::before {
   background-color: transparent !important;
 }
+
+.search-bar-icons {
+  color: rgb(var(--v-theme-primary)) !important;
+  font-size: 25px;
+  font-weight: 200;
+}
+
+#clean-button {
+  left: -3px;
+}
+
+.v-input {
+  :deep(.v-btn--variant-outlined) {
+    color: rgb(var(--v-theme-gris-fonce)) !important;
+  }
+}
+
+:deep(.v-field--prepended) {
+  padding-inline-start: 0 !important;
+}
+
+:deep(.v-field--appended) {
+  padding-inline-end: 0 !important;
+}
 </style>
 
 <style lang="scss">
@@ -245,7 +283,6 @@ defineExpose({
   }
 
   .v-list {
-
     /* Permet de rendre l'autocompletion + dense */
     .v-list-item {
       min-height: 40px !important;
diff --git a/src/locales/en.json b/src/locales/en.json
index 68726310..38c313d7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,7 +65,8 @@
         "showMoreKeywords": "Show more keywords",
         "showLessKeywords": "Show less keywords",
         "showMoreAbstract": "Afficher la suite du résumé",
-        "showLessAbstract": "Afficher un extrait du résumé"
+        "showLessAbstract": "Afficher un extrait du résumé",
+        "access": "Thesis access"
     },
     "results": {
         "facetsHeader": "Filters",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index e83541f0..a644c30a 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -27,6 +27,7 @@
   "avancee":"Recherche Avancée",
   "disableSuggestion": "Désactiver l'autocomplétion",
   "top": "Haut de la page",
+  "menu": "Menu",
   "resultatsView": {
     "plusDeResultats": "Plus de résultats"
   },
@@ -77,7 +78,8 @@
     "projet": "Projet de thèse",
     "doctorat": "Thèse de doctorat",
     "embargo": "Cette thèse est sous embargo jusqu’au ",
-    "confidentialite": "Cette thèse est confidentielle jusqu’au "
+    "confidentialite": "Cette thèse est confidentielle jusqu’au ",
+    "access": "Accès à la thèse"
   },
   "results": {
     "facetsHeader": "Filtres",
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 02b557b8..74224ae2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -135,7 +135,7 @@ function displayError(message) {
     align-items: center;
     flex-direction: column;
     width: 100%;
-    padding-top: 40px;
+    padding: 40px 0;
 
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
       max-height: 500px;
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 3d0ab7bd..98f2d5ea 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -4,28 +4,30 @@
     <button @click="openMenu = true" class="filter-mobile-nav-bar">
       <v-icon v-bind="props" size="40px">mdi-menu
       </v-icon>
+      <v-tooltip activator="parent">{{ $t('menu') }}</v-tooltip>
     </button>
-    <v-icon @click="showSearchBar = !showSearchBar" size="40px"
-            :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
-    </v-icon>
+    <div>
+      <v-icon @click="showSearchBar = !showSearchBar" size="40px"
+              :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
+      </v-icon>
+      <v-tooltip activator="parent" location="start">{{ $t('rechercher') }}</v-tooltip>
+    </div>
   </nav>
+<!--  Mobile-->
   <div v-if="mobile" class="logo-menu-wrapper">
-    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo">
+    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_resultview">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
     </RouterLink>
-    <!--    Menu recherche/selecteur these/personnes-->
+    <!--    Menu header -->
     <v-dialog v-model="openMenu" eager location-strategy="static" persistent no-click-animation fullscreen
               :close-on-content-click="false" transition="dialog-top-transition" content-class="full-screen">
       <div class="statistique__title">
-        <v-icon size="40px">mdi-account</v-icon>
+        <div></div>
         <v-btn size=40px icon="mdi-close-box" color="red" variant="text" @click="openMenu = !openMenu"></v-btn>
       </div>
-      <div class="statistique__content">
-        <statistique-card-personne :stats="item.roles"></statistique-card-personne>
-      </div>
     </v-dialog>
     <v-expand-transition>
-      <div v-show="showSearchBar" class="expanded-search-bar-container">
+      <div v-show="showSearchBar" class="expanded-search-bar-container white-containers">
         <div class="expanded-search-bar">
           <domain-selector @changeDomain="changeDomain" compact></domain-selector>
           <search-bar @search="search" @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets"
@@ -35,80 +37,93 @@
       </div>
     </v-expand-transition>
   </div>
+
+<!--  Desktop-->
   <div v-else class="sub-header">
-    <div class="left-side sub_header__logo">
-      <RouterLink :to="{ name: 'home' }" title="Accueil du site">
-        <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
-      </RouterLink>
-      <h1>{{ $t("slogan") }}</h1>
-    </div>
-    <div class="sub_header__action">
-      <domain-selector @changeDomain="changeDomain" compact></domain-selector>
-      <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
-                  @onError="displayError"/>
-    </div>
-  </div>
-  <div v-if="!mobile" class="search-filter">
-    <div class="left-side statistique__title">
-      <v-icon size="40px">mdi-account</v-icon>
+    <div class="search-bar-container white-containers">
+      <div class="sub_header__logo">
+        <RouterLink :to="{ name: 'home' }" title="Accueil du site">
+          <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
+        </RouterLink>
+        <h1>{{ $t("slogan") }}</h1>
+      </div>
+      <div class="sub_header__action">
+        <domain-selector @changeDomain="changeDomain" compact></domain-selector>
+        <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
+                    @onError="displayError"/>
+      </div>
     </div>
-    <action-bar-personnes></action-bar-personnes>
   </div>
 
   <div class="main-wrapper">
-    <div class="left-side nav-bar statistique__content" v-if="!mobile">
-      <statistique-card-personne :stats="item.roles"></statistique-card-personne>
-    </div>
-    <div class="result-components">
-      <v-card-text v-if="!dataReady">
-        <v-container fluid fill-height>
-          <v-layout justify-center align-center>
-            <v-progress-circular indeterminate color="rgb(var(--v-theme-primary))">
-            </v-progress-circular>
-          </v-layout>
-        </v-container>
-      </v-card-text>
-      <div v-if="dataReady">
+    <div class="result-components white-containers">
+<!--   Skeletton-->
+      <div v-if="!dataReady"  class="skeleton-wrapper">
+        <v-skeleton-loader type="list-item-avatar-two-line" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader type="divider" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader type="table-row"></v-skeleton-loader>
+        <v-skeleton-loader type="button" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader type="divider" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader v-for="i in 4" :key="i" type="paragraph" class="skeleton-cards"></v-skeleton-loader>
+      </div>
+<!--      End skeletton-->
+      <div class="info-wrapper" v-else>
         <div class="info">
           <v-icon size="45px">$personne</v-icon>
-          <div class="sep">
-            <v-divider vertical v-if="item.has_idref"></v-divider>
-          </div>
-          <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
-            <img alt="logo" id="logoIMG" src="@/assets/idref-icone.png"/>
-          </a>
           <div class="nom-card">
-
             <div class="nomprenom">
-              <span class="prenom">{{ item.prenom }}</span>
+              <span class="prenom">{{ item.prenom + "\xa0"}}</span>
               <span class="nom">{{ item.nom }}</span>
+              <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
+                <img alt="logo" id="logoIdref" src="@/assets/idref-icone.png"/>
+              </a>
             </div>
           </div>
-
         </div>
-        <thesis-keywords class="thesis-component" :data-ready="true" :keywordsAreSet="true" :these="conversionMotClesFormatTheses(item.mots_cles)" />
+
+        <thesis-keywords
+          class="thesis-component"
+          :data-ready="true"
+          :keywordsAreSet="true"
+          :these="conversionMotClesFormatTheses(item.mots_cles)"
+        />
+
+<!--        Tiroirs thèses par rôles-->
         <div class="theses">
-          <template v-for="key in ['auteur','directeur de thèse','rapporteur','président du jury','membre du jury']"
-                    :key="key">
-            <div v-if="item.theses[key] && item.theses[key].length > 0">
-              <hr/>
-              <h2 :id="anchorValueFromKey(key)">
-                {{ $t("personnes.personneView.roles." + i18nValueFromKey(key), [item.theses[key].length]) }}</h2>
-              <div v-for="these in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
-                <result-card :titre="these.titre"
-                             :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
-                             :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
-                             :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
-                </result-card>
+          <v-expansion-panels multiple v-model="panel" class="role-expansion-panel-wrapper">
+            <template v-for="key in ['auteur','directeur de thèse','rapporteur','président du jury','membre du jury']"
+                      :key="key">
+              <div v-if="item.theses[key] && item.theses[key].length > 0" class="role-expansion-panel">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <template v-slot:actions="{ expanded }">
+                      <v-icon :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="x-large">
+                      </v-icon>
+                    </template>
+                    <h2 :id="anchorValueFromKey(key)">
+                      {{ $t("personnes.personneView.roles." + i18nValueFromKey(key), [item.theses[key].length]) }}
+                    </h2>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                      <div v-for="(these, index) in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
+                        <v-lazy :options="{ threshold: 1.0 }">
+                          <result-card :titre="these.titre"
+                                       :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
+                                       :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
+                                       :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
+                          </result-card>
+                        </v-lazy>
+                        <hr class="result-dividers" v-if="index < item.theses[key].length - 1" />
+                      </div>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
               </div>
-            </div>
-          </template>
+            </template>
+          </v-expansion-panels>
         </div>
       </div>
     </div>
-    <div class="scroll-to-top-container">
-      <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1></scroll-to-top-button>
-    </div>
+    <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1></scroll-to-top-button>
   </div>
 </template>
 
@@ -122,8 +137,6 @@ import DomainSelector from '@/components/common/DomainSelector.vue';
 
 import {personnesAPIService} from "@/services/PersonnesAPI";
 import {useDisplay} from "vuetify";
-import ActionBarPersonnes from "@/components/personnes/ActionBar.vue";
-import StatistiqueCardPersonne from "@/components/personnes/StatistiqueCard.vue";
 import ResultCard from "@/components/theses/results/ResultCard.vue";
 import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
 import ThesisKeywords from "@/components/common/Keywords.vue";
@@ -139,6 +152,7 @@ const loading = ref(false);
 const dataReady = ref(false);
 const openMenu = ref(false);
 const item = ref({});
+const panel = ref([]);
 
 const {t} = useI18n();
 const {meta} = useMeta({});
@@ -156,7 +170,10 @@ const props = defineProps({
   }
 });
 
+
 onBeforeMount(() => {
+  panel.value = [0];
+
   dataReady.value = false;
   getPersonne(props.id).then(result => {
     item.value = result;
@@ -273,75 +290,15 @@ function displayError(message, opt) {
   border-right: solid rgb(var(--v-theme-primary)) 3px;
 }
 
-.logo {
-  margin-top: -55px;
-}
-
 .v-menu ::v-deep(.v-overlay__content) {
   border-radius: 0;
   margin: 0;
   background-color: rgb(var(--v-theme-background));
 }
 
-.left-side {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  flex: 1 0 100%;
-  max-width: 20vw;
-  height: 100%;
 
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    max-width: 100%;
-    flex: 0 1 auto;
-    padding: 0;
-  }
-}
-
-.sub-header {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-
-  .sub_header__logo {
-    background-color: rgb(var(--v-theme-surface));
-    z-index: 2;
-
-    h1 {
-      text-align: center;
-      width: 80%;
-      font-weight: 300;
-      font-size: 16px;
-    }
-
-    .logo {
-      margin-top: 0;
-    }
-  }
-
-  .sub_header__action {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 auto;
-
-    .domain-selector,
-    .searchbar {
-      width: 70%;
-    }
-
-    .domain-selector {
-      :deep(.v-btn__content) {
-        flex-direction: row;
-      }
-
-      :deep(.v-icon) {
-        margin-right: 1rem;
-      }
-    }
-  }
+.mobile-nav-bar {
+  margin: 10px 0 30px;
 }
 
 .statistique__title {
@@ -379,28 +336,29 @@ function displayError(message, opt) {
   }
 }
 
-
 .main-wrapper {
-  flex-direction: row;
-  align-items: flex-start;
+  padding: 30px 0;
+  display: grid;
+  grid-template-columns: 10fr 103fr 10fr;
+  align-items: start;
   margin-top: 0;
   width: 100%;
 
+  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+    display: flex;
+  }
+
   .result-components {
-    width: calc(95% - 2rem);
-    margin-right: 1rem;
-    margin-left: 1rem;
-    margin-bottom: 2rem;
+    grid-column-start: 2;
+    padding: 0 2em;
 
-    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-      width: calc(80% - 2rem);
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      width: 100%;
     }
 
     .info {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin: 1rem;
+      align-content: center;
 
       @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
         justify-content: flex-start;
@@ -421,38 +379,19 @@ function displayError(message, opt) {
         }
       }
 
-      a {
-        img {
-          max-height: 30px;
-        }
-      }
 
       .nom-card {
-        display: flex;
-        align-items: center;
-        margin-left: 1rem;
-
-        @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-          margin-left: 2rem;
-        }
-
+        display: inline-flex;
         .nomprenom {
-          display: flex;
-          flex-direction: column;
-          text-decoration: none;
           color: rgb(var(--v-theme-orange-abes));
-          font-size: 23.5px;
 
-          @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-            font-size: 29.5px;
-          }
+          a {
+            display: flex;
+            align-items: center;
 
-          .prenom {
-            font-weight: 400;
-          }
-
-          .nom {
-            font-weight: 700;
+            img {
+              margin-left: 0.5em !important;
+            }
           }
         }
       }
@@ -460,12 +399,36 @@ function displayError(message, opt) {
     }
 
     .theses {
-      h2 {
-        margin-bottom: 1rem;
+      padding: 1em 0;
+
+      .role-expansion-panel-wrapper {
+        display: flex;
+        flex-direction: column;
       }
 
-      hr {
-        margin: 1rem 0 2rem 0;
+      :deep(.v-expansion-panel-title--active) {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background-color: rgb(var(--v-theme-surface));
+        border-bottom: 1px solid rgb(var(--v-theme-orange-abes));
+      }
+
+      .role-expansion-panel {
+        border-top: 2px solid rgb(var(--v-theme-gris-fonce));
+
+        h2 {
+          padding: 0.5em 0 0.5em;
+          font-size: 26px;
+        }
+      }
+
+      .v-expansion-panel :deep(.v-expansion-panel__shadow) {
+        box-shadow: none;
+      }
+
+      .v-expansion-panel-title--active :deep(.v-expansion-panel-title__overlay) {
+        opacity: 0;
       }
 
       .card-wrapper {
@@ -474,48 +437,46 @@ function displayError(message, opt) {
     }
 
     .thesis-component {
-      margin: 0 auto 20px;
+      margin: 2em auto 20px;
     }
 
   }
 }
 
-.colonnes-resultats {
-  padding: 0;
+.info-wrapper {
+  padding-top: 1em;
 }
 
-.result-components-wrapper {
-  display: grid;
+.colonnes-resultats {
+  padding: 0;
 }
 
-.scroll-to-top-container {
-  position: fixed;
-  left: 90vw;
-  bottom:1vh;
-  width: 5%;
-
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
-    left: 95.5vw;
+.domain-selector {
+  :deep(.v-btn__content) {
+    flex-direction: row !important;
   }
 
-  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-    left: 94vw;
+  :deep(.v-icon) {
+    margin-right: 1rem !important;
   }
+}
 
-  @media #{ map-get(settings.$display-breakpoints, 'xl-and-up')} {
-    left: 97vw;
-    bottom:8vh;
-  }
+.skeleton-cards {
+  height: 150px !important;
+  background-color: rgb(var(--v-theme-gris-clair));
+  margin: 1em 0;
 }
 
-.scroll-to-top-wrapper {
-  margin-left: 25px;
-  margin-bottom: 0;
+.skeleton {
+  margin-bottom: 3em;
+}
 
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    margin: 0 0;
-    height: 60px;
-    top: 90vh !important;
-  }
+.skeleton-wrapper {
+  padding: 2em 0;
+}
+
+:deep(.v-skeleton-loader__button) {
+  max-width: unset !important;
+  width: 250px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 8703818b..44566dcc 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -14,7 +14,7 @@
   </nav>
   <!--    Menu filtres-->
   <div v-if="mobile" class="logo-menu-wrapper">
-    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_home">
+    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_home logo_resultview">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
     </RouterLink>
     <!--    Menu recherche/selecteur these/personnes-->
@@ -28,8 +28,9 @@
         :reinitialize-date-to-trigger="reinitializeDateToTrigger" :domaine="domainNameChange"
         :parameters-loaded="parametersLoaded" :filter-to-be-deleted="filterToBeDeleted" class="left-side"></facets-list>
     </v-dialog>
+
     <v-expand-transition>
-      <div v-show="showSearchBar" class="expanded-search-bar-container">
+      <div v-show="showSearchBar" class="expanded-search-bar-container white-containers">
         <div class="expanded-search-bar">
           <domain-selector @changeDomain="changeDomain" compact></domain-selector>
           <search-bar @search="search" @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
@@ -38,17 +39,20 @@
       </div>
     </v-expand-transition>
   </div>
+<!--  Desktop-->
   <div v-else class="sub-header">
-    <div class="left-side sub_header__logo">
-      <RouterLink :to="{ name: 'home' }" title="Accueil du site">
-        <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
-      </RouterLink>
-      <h1>{{ $t("slogan") }}</h1>
-    </div>
-    <div class="sub_header__action">
-      <domain-selector @changeDomain="changeDomain" compact></domain-selector>
-      <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
-        @onError="displayError" />
+    <div class="search-bar-container white-containers">
+      <div class="sub_header__logo">
+        <RouterLink :to="{ name: 'home' }" title="Accueil du site">
+          <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
+        </RouterLink>
+        <h1>{{ $t("slogan") }}</h1>
+      </div>
+      <div class="sub_header__action">
+        <domain-selector @changeDomain="changeDomain" compact></domain-selector>
+        <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
+          @onError="displayError" />
+      </div>
     </div>
   </div>
 
@@ -61,12 +65,13 @@
         :parameters-loaded="parametersLoaded" :filter-to-be-deleted="filterToBeDeleted" :loading="!dataFacetsReady"
         class="left-side"></facets-list>
     </div>
-    <div class="result-components">
+    <div class="result-components white-containers">
       <result-components :data-ready="dataReady" :result="result" :loading="loading" :nb-result="nbResult"
         :persistentQuery="request" :reset-page="resetPage" :reset-showing-number="resetShowingNumber"
         :domain-name-change="domainNameChange" :facets="selectedFacets" @search="search" @deleteFilter="deleteFilter">
       </result-components>
     </div>
+    <scroll-to-top-button  v-if="moreThanXResults(5)"  class="scroll-to-top-wrapper" :nb-result=nbResult />
   </div>
 </template>
 
@@ -80,6 +85,7 @@ import SearchBar from '@/components/generic/GenericSearchBar.vue';
 import DomainSelector from '@/components/common/DomainSelector.vue';
 import ResultComponents from "@/components/common/results/ResultComponents.vue";
 import FacetsHeader from "@/components/common/results/FacetsHeader.vue";
+import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
 
 const { mobile } = useDisplay();
 const {
@@ -200,6 +206,10 @@ function updateFacets(firstLoad) {
   });
 }
 
+function moreThanXResults(x) {
+  return (result.value.length >= x);
+}
+
 // Si on passe de desktop à mobile ou inversement, réinitialisation des variables de pagination
 watch(mobile, () => {
   reinitializeCurrentRequest();
@@ -300,7 +310,6 @@ watch(() => currentRoute.query.domaine, () => {
   align-items: center;
   flex-direction: column;
   flex: 1 0 100%;
-  max-width: 20vw;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     max-width: 100%;
@@ -309,73 +318,38 @@ watch(() => currentRoute.query.domaine, () => {
   }
 }
 
-.sub-header {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-
-  .sub_header__logo {
-    background-color: rgb(var(--v-theme-surface));
-    z-index: 2;
-
-    h1 {
-      text-align: center;
-      width: 80%;
-      font-weight: 300;
-      font-size: 16px;
-    }
-
-    .logo {
-      margin-top: 0;
-    }
-  }
-
-  .sub_header__action {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 auto;
-
-    .domain-selector,
-    .searchbar {
-      width: 70%;
-    }
-
-    .domain-selector {
-      :deep(.v-btn__content) {
-        flex-direction: row;
-      }
-
-      :deep(.v-icon) {
-        margin-right: 1rem;
-      }
-    }
-  }
-}
-
-.v-overlay :deep(.v-overlay__content) {
-  padding: 0 0;
-  background-color: rgb(var(--v-theme-background));
-}
-
 .result-main-wrapper {
+  padding: 30px 0;
   display: grid;
-  grid-template-columns: 20vw auto;
+  grid-template-columns: 10fr 20fr 3fr 80fr 10fr;
   align-items: start;
   margin-top: 0;
   width: 100%;
-  height: 100%;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-template-columns: 100%;
   }
 
   .result-components {
-    height: 100%;
+    grid-column-start: 4;
     width: 100%;
     display: flex;
     flex-direction: column;
+    padding-bottom: 5px;
+
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      grid-column-start: 1;
+    }
   }
 }
+
+  .domain-selector {
+    :deep(.v-btn__content) {
+      flex-direction: row !important;
+    }
+
+    :deep(.v-icon) {
+      margin-right: 1rem !important;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index 7a991146..a3be648a 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -1,28 +1,33 @@
 <template>
   <Message-box ref="messageBox"></Message-box>
   <nav v-if="mobile" class="mobile-nav-bar">
-    <button @click="dialogVisible = true" class="filter-mobile-nav-bar">
-      <v-icon v-bind="props" size="40px">mdi-menu
+    <button v-if="these.status === 'soutenue'" @click="dialogVisible = true" class="filter-mobile-nav-bar">
+      <v-icon v-bind="props" size="40px">mdi-book-arrow-down-outline
       </v-icon>
+      <v-tooltip activator="parent">{{ $t('theseView.access') }}</v-tooltip>
     </button>
+    <div v-else></div>
     <!--      Bouton menu recherche/selecteur these/personnes-->
-    <v-icon @click="showSearchBar = !showSearchBar" size="40px"
-      :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
-    </v-icon>
+    <div>
+      <v-icon @click="showSearchBar = !showSearchBar" size="40px"
+        :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
+      </v-icon>
+      <v-tooltip activator="parent" location="start">{{ $t('rechercher') }}</v-tooltip>
+    </div>
   </nav>
   <!-- Icone retour accueil -->
   <div v-if="mobile" class="logo-menu-wrapper">
-    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo">
+    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_resultview">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
     </RouterLink>
     <!--    Menu boutons-liens-->
     <v-dialog v-model="dialogVisible" eager location-strategy="static" persistent no-click-animation fullscreen
       :close-on-content-click="false" transition="dialog-top-transition" content-class="full-screen">
-      <buttons-list :nnt="route.params.id" @closeOverlay="closeOverlay"></buttons-list>
+      <buttons-list :nnt="route.params.id" :soutenue="these.status === 'soutenue'" :data-ready="dataReady" @closeOverlay="closeOverlay"></buttons-list>
     </v-dialog>
     <!--    Menu recherche/selecteur these/personnes-->
     <v-expand-transition>
-      <div v-show="showSearchBar" class="expanded-search-bar-container">
+      <div v-show="showSearchBar" class="expanded-search-bar-container white-containers">
         <div class="expanded-search-bar">
           <domain-selector @changeDomain="changeDomain" compact></domain-selector>
           <search-bar @search="search" @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
@@ -32,29 +37,27 @@
     </v-expand-transition>
   </div>
 
-  <!-- Bare latérale Desktop -->
+<!--Desktop-->
   <div v-else class="sub-header">
-    <div class="left-side sub_header__logo">
-      <RouterLink :to="{ name: 'home' }" title="Accueil du site">
-        <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
-      </RouterLink>
-      <h1>{{ $t("slogan") }}</h1>
-    </div>
-    <div class="sub_header__action">
-      <domain-selector @changeDomain="changeDomain" compact></domain-selector>
-      <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
-        @onError="displayError" />
+    <div class="search-bar-container white-containers">
+      <div class="sub_header__logo">
+        <RouterLink :to="{ name: 'home' }" title="Accueil du site">
+          <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
+        </RouterLink>
+        <h1>{{ $t("slogan") }}</h1>
+      </div>
+      <div class="sub_header__action">
+        <domain-selector @changeDomain="changeDomain" compact></domain-selector>
+        <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
+          @onError="displayError" />
+      </div>
     </div>
   </div>
 
   <div class="thesis-main-wrapper">
-    <div v-if="!mobile" class="nav-bar">
-      <!-- Futur composant boutons (barre de gauche)-->
-      <buttons-list :nnt="route.params.id"
-        :soutenue="these.status === 'soutenue' && these.source !== 'step'"></buttons-list>
-    </div>
-    <div class="thesis-components">
-      <thesis-component :nnt="route.params.id" :these="these" :data-ready="true"></thesis-component>
+    <!-- Infos these -->
+    <div class="thesis-components white-containers">
+      <thesis-component :nnt="route.params.id" :these="these" :data-ready="dataReady" :soutenue="these.status === 'soutenue'"></thesis-component>
     </div>
   </div>
 </template>
@@ -102,12 +105,6 @@ getThese(route.params.id).then(result => {
   displayError(error.message);
 });
 
-
-
-function select(selection) {
-  selected.value = selection;
-}
-
 const messageBox = ref(null);
 
 /**
@@ -128,59 +125,6 @@ function closeOverlay() {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.sub-header {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-
-  .sub_header__logo {
-    background-color: rgb(var(--v-theme-surface));
-    z-index: 2;
-
-    h1 {
-      text-align: center;
-      width: 80%;
-      font-weight: 300;
-      font-size: 16px;
-    }
-
-    .logo {
-      margin-top: 0;
-    }
-  }
-
-  .sub_header__action {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 auto;
-
-    .domain-selector,
-    .searchbar {
-      width: 70%;
-    }
-
-    .domain-selector {
-      :deep(.v-btn__content) {
-        flex-direction: row;
-      }
-
-      :deep(.v-icon) {
-        margin-right: 1rem;
-      }
-    }
-  }
-}
-
-
-.mobile-nav-bar {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-  padding: 0 10px;
-}
-
 .filter-mobile-nav-bar {
   display: flex;
   align-content: center;
@@ -212,65 +156,36 @@ function closeOverlay() {
   color: rgb(var(--v-theme-orange-abes));
 }
 
-.expanded-search-bar-container {
-  width: 100%;
-  grid-column: 1 / 5;
-  justify-self: center;
-  grid-row-start: 1;
-  align-self: start;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: rgb(var(--v-theme-gris-clair));
-  border-bottom: 1px solid #bbb;
-  border-top: 1px solid #bbb;
-}
-
-
 .expanded-search-bar {
   width: 80%;
 }
 
-.left-side {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  flex: 1 0 100%;
-  max-width: 20vw;
-
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    max-width: 100%;
-    flex: 0 1 auto;
-    padding: 0;
-  }
-}
-
 .thesis-main-wrapper {
+  padding: 30px 0;
   display: grid;
-  grid-template-columns: 20vw auto;
+  grid-template-columns: 10fr 103fr 10fr;
   align-items: start;
   margin-top: 0;
   width: 100%;
-  height: 100%;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-template-columns: 100%;
   }
 
   .thesis-components {
-    height: 100%;
+    grid-column-start: 2;
+
     width: 100%;
     display: flex;
     flex-direction: column;
-  }
-}
+    padding-bottom: 5px;
 
-.nav-bar {
-  height: 100%;
-  width: 100%;
-  max-width: 20vw;
-  border-right: 3px solid rgb(var(--v-theme-text-dark-blue));
+
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      grid-column-start: 1;
+      grid-column-end: 3;
+    }
+  }
 }
 
 .clickable {