diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e3db14c..3901e0a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -74,6 +74,7 @@ module.exports = {
     'no-unused-vars': 'off',
     'no-trailing-spaces' : 'off',
     'vue/multi-word-component-names' : 'off',
+    'vue/no-v-text-v-html-on-component' : 'off',
 
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
diff --git a/README.md b/README.md
index bc1bfbf..c3858d4 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ HFSPlay stock management
 - [ ] editable categories
 - [x] qrcode generation
 - [x] fix search to be persistent
-- [ ] fix comments to be more legible
+- [x] fix comments to be more legible
 - [ ] fix comments to allow resolution
 - [ ] batch print QR codes
 - [x] fix tables pagination
diff --git a/src/css/app.scss b/src/css/app.scss
index 973ee37..0e33eec 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,7 +1,7 @@
 // app global css in SCSS form
 @font-face {
   font-family: geist;
-  src: url(../font/Geist-var.ttf) format('truetype');
+  src: url(font/Geist-var.ttf) format('truetype');
 }
 
 // declare a class which applies it
diff --git a/src/pages/StockItem.vue b/src/pages/StockItem.vue
index d022428..52d6668 100644
--- a/src/pages/StockItem.vue
+++ b/src/pages/StockItem.vue
@@ -1,10 +1,12 @@
 <template>
   <q-page class="q-pa-md">
     <q-btn @click="generateQRCode" class="float-right" icon="qr_code"></q-btn>
-    <q-chip class="float-right text-white" color="secondary">{{item.ref}}</q-chip>
-    <q-chip v-if="item.deleted" class="float-right q-mr-md" color="red">Supprimé</q-chip>
-    <h2 class="q-ma-none text-weight-medium" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2>
-    <h4 class="q-ma-none q-pb-md text-grey">{{item.type}}</h4>
+    <div class="q-ma-none text-h3 text-weight-bolder row" :class="{'text-faded': !item.name}">
+      <span class="q-mr-md">{{ item.name || '---- -- ----' }}</span>
+      <q-chip square size="lg" class="text-white q-mr-md" color="secondary">{{item.ref}}</q-chip>
+      <q-chip square size="lg" v-if="item.deleted" color="red">Supprimé</q-chip>
+    </div>
+    <h5 class="q-ma-none q-pb-md text-grey">{{item.type}}</h5>
 
     <q-dialog v-model="showQr">
       <q-card style="width: 500px">
@@ -23,29 +25,36 @@
       </q-card>
     </q-dialog>
 
-    <div class="q-py-md">
-        <q-input v-model="item.name"
-                 :disable="item.deleted"
-                 type="text"
-                 label="Nom"
-                 outlined color="secondary"
-                 class="q-mb-md"
-                 @update:model-value="changed = true">
-        </q-input>
-        <q-input v-model="item.owner"
-                 :disable="item.deleted"
-                 outlined color="secondary" stack-label label="Propriétaire" class="q-mb-md"
-                 @input="changed = true"/>
-      <q-field borderless stack-label label="Etat cosmétique" class="q-mb-md">
-      <q-btn-toggle
-        class="q-mt-sm"
-          no-caps
-          :disable="item.deleted"
-          v-model="item.state"
-          @update:model-value="changed = true"
-          toggle-color="secondary"
-          text-color="black"
-          :options="[
+    <div class="row q-col-gutter-xl">
+      <div class="col-12 col-lg-6">
+        <div class="row">
+          <div class="col">
+            <h4 class="q-ma-none q-pb-md text-light">Informations</h4>
+          </div>
+        </div>
+        <div>
+          <q-input v-model="item.name"
+                   :disable="item.deleted"
+                   type="text"
+                   label="Nom"
+                   outlined color="secondary"
+                   class="q-mb-md"
+                   @update:model-value="changed = true">
+          </q-input>
+          <q-input v-model="item.owner"
+                   :disable="item.deleted"
+                   outlined color="secondary" stack-label label="Propriétaire" class="q-mb-md"
+                   @input="changed = true"/>
+          <q-field borderless stack-label label="Etat cosmétique" class="q-mb-md">
+            <q-btn-toggle
+              class="q-mt-sm"
+              no-caps
+              :disable="item.deleted"
+              v-model="item.state"
+              @update:model-value="changed = true"
+              toggle-color="secondary"
+              text-color="black"
+              :options="[
             {label: 'Neuf', value: 'Neuf'},
             {label: 'Excellent', value: 'Excellent'},
             {label: 'Bon', value: 'Bon'},
@@ -53,153 +62,165 @@
             {label: 'Abimé', value: 'Abimé'},
             {label: 'Inutilisable', value: 'Inutilisable'}
           ]"
-        />
-      </q-field>
-      <q-field borderless stack-label label="Fonctionnel" class="q-mb-md">
-        <q-btn-toggle
-          class="q-mt-sm"
-            no-caps
-            :disable="item.deleted"
-            v-model="item.working"
-            :toggle-color="item.working ? 'green' : 'red'"
-            text-color="black"
-            :options="[
+            />
+          </q-field>
+          <q-field borderless stack-label label="Fonctionnel" class="q-mb-md">
+            <q-btn-toggle
+              class="q-mt-sm"
+              no-caps
+              :disable="item.deleted"
+              v-model="item.working"
+              :toggle-color="item.working ? 'green' : 'red'"
+              text-color="black"
+              :options="[
             {label: '✔', value: true},
             {label: '?', value: null},
             {label: '✘', value: false}
           ]"
-            @input="changed = true"
-        />
-      </q-field>
-      <q-field borderless stack-label label="En stock" class="q-mb-md">
-        <q-btn-toggle
-          class="q-mt-sm"
-          no-caps
-          :disable="item.deleted"
-          v-model="item.available"
-          :toggle-color="item.available ? 'green' : 'red'"
-          text-color="black"
-          :options="[
+              @input="changed = true"
+            />
+          </q-field>
+          <q-field borderless stack-label label="En stock" class="q-mb-md">
+            <q-btn-toggle
+              class="q-mt-sm"
+              no-caps
+              :disable="item.deleted"
+              v-model="item.available"
+              :toggle-color="item.available ? 'green' : 'red'"
+              text-color="black"
+              :options="[
             {label: '✔', value: true},
             {label: '✘', value: false}
           ]"
-          @input="changed = true"
-        />
-      </q-field>
-      <q-field borderless stack-label label="Supprimé" class="q-mb-md">
-        <q-btn-toggle
-          no-caps
-          v-model="item.deleted"
-          :toggle-color="item.deleted ? 'green' : 'red'"
-          text-color="black"
-          :options="[
+              @input="changed = true"
+            />
+          </q-field>
+          <q-field borderless stack-label label="Supprimé" class="q-mb-md">
+            <q-btn-toggle
+              no-caps
+              v-model="item.deleted"
+              :toggle-color="item.deleted ? 'green' : 'red'"
+              text-color="black"
+              :options="[
             {label: 'Oui', value: true},
             {label: 'Non', value: false}
           ]"
-          @input="changed = true"
-          class="q-mt-sm"
-        />
-      </q-field>
-        <q-input
-          :disable="item.deleted"
-          v-model="item.comment"
-          @update:model-value="changed = true"
-          type="textarea"
-          :max-height="100"
-          rows="5"
-          outlined color="secondary" stack-label label="Commentaire" class="q-mb-md"
-          inverted
-        />
-      <q-btn :disabled="!changed || originalItem.deleted"
-             @click="updateItem()"
-             color="primary"
-             :flat="!changed"
-      >Enregistrer</q-btn>
-    </div>
-
-    <br/>
-    <br/>
-
-    <h4 class="q-ma-none q-pb-md text-light">Historique</h4>
-    <q-timeline color="secondary">
-      <!--<q-timeline-entry heading>-->
-        <!--Historique-->
-      <!--</q-timeline-entry>-->
-      <q-timeline-entry
-        title="Ajouter une entrée"
-        side="left"
-        icon="add"
-        color="primary"
-        @click="openHistoryForm()"
-        style="cursor:pointer"
-      >
-        <q-slide-transition>
-          <div v-show="showHistoryForm">
-            <q-input
-              v-model="pendingHistory"
-              type="textarea"
-              label="Description"
-              :max-height="100"
-              rows="3"
-              invertedd
-              color="secondary"
-            />
-<!--            <q-input    label="Date"-->
-<!--                        v-model="pendingHistoryDate"-->
-<!--                        type="datetime"-->
-<!--                        format24h />-->
-            <br/>
-            <q-uploader
-                        :accept="'.jpg,.png'"
-                        :factory="uploadFile"
-                        label="Uploader une photo"
-                        @added="hasFile = true"
-                        ref="uploader"
-                        no-thumbnails
-                        hide-upload-btn
-                        flat
-                        color="secondary"
+              @input="changed = true"
+              class="q-mt-sm"
             />
-            <br/>
-            <q-btn flat color="faded" @click.stop="showHistoryForm = false">Annuler</q-btn>
-            <q-btn flat color="primary" @click.stop="addHistory()">Ok</q-btn>
+          </q-field>
+          <q-input
+            :disable="item.deleted"
+            v-model="item.comment"
+            @update:model-value="changed = true"
+            type="textarea"
+            :max-height="100"
+            rows="5"
+            outlined color="secondary" stack-label label="Commentaire" class="q-mb-md"
+            inverted
+          />
+          <q-btn :disabled="!changed || originalItem.deleted"
+                 @click="updateItem()"
+                 color="primary"
+                 :flat="!changed"
+          >Enregistrer</q-btn>
+        </div>
+      </div>
+      <div class="col-12 col-lg-6">
+        <div class="row">
+          <div class="col">
+            <h4 class="q-ma-none q-pb-md text-light">Historique</h4>
           </div>
-        </q-slide-transition>
-      </q-timeline-entry>
-      <q-timeline-entry
-        v-for="event in history.slice().reverse()"
-        :key="event.id"
-        :subtitle="getDate(event.date)"
-        :title="event.user"
-        side="left"
-      >
-        <div>
-          <q-icon name="format_quote"
-                  color="light"
-                  size="2rem"
+          <div class="col text-right">
+            <q-btn outline icon="add" label="ajouter une entrée" color="primary" @click="openHistoryForm()"></q-btn>
+          </div>
+        </div>
+
+        <q-list bordered separator class="rounded-borders">
+          <q-item clickable
+                  v-for="event in history"
+                  :key="event.id"
+                  @click="showHistory = true;selectedHistory = event"
+          >
+            <q-item-section top thumbnail class="q-ml-none" style="margin:-8px 0 -8px -16px">
+              <img
+                :src="getImageUrl(event, event.image_file, true)"
+                alt="photo"
+                v-if="event.image_file"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label lines="3" v-html="event.text.split('\n').join('</br>')"></q-item-label>
+              <q-item-label caption><span class="text-capitalize">{{ event.user }}</span></q-item-label>
+            </q-item-section>
+            <q-item-section side top>
+              <q-item-label caption>{{ getDate(event.created) }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </div>
+
+    <q-dialog v-model="showHistoryForm">
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">Ajouter une entrée</div>
+        </q-card-section>
+        <q-card-section>
+          <q-input
+            v-model="pendingHistory"
+            autofocus
+            type="textarea"
+            label="Description"
+            :max-height="100"
+            rows="3"
+            invertedd
+            color="secondary"
           />
-          {{ event.text }}
-          <q-icon name="format_quote"
-                  color="light"
-                  size="2rem"
+          <br/>
+          <q-uploader
+            :accept="'.jpg,.png'"
+            :factory="uploadFile"
+            label="Uploader une photo"
+            @added="hasFile = true"
+            ref="uploader"
+            no-thumbnails
+            hide-upload-btn
+            flat
+            bordered
+            color="secondary"
           />
-        </div>
-        <q-img :src="getImageUrl(event, event.image_file)"
-             alt="photo"
-             v-if="event.image_file"
-             class="q-py-md"
-             style="max-height:300px;max-width:300px"
-             :fit="'contain'"
-        />
-        <br/>
-        <q-btn flat
-               :disable="item.deleted"
-               icon="delete"
-               label="Supprimer cette entrée"
-               @click="removeHistory(event)"
+          <br/>
+        </q-card-section>
+        <q-separator></q-separator>
+        <q-card-actions align="right">
+          <q-btn flat color="grey" @click.stop="showHistoryForm = false">Annuler</q-btn>
+          <q-btn flat color="primary" @click.stop="addHistory()">Ok</q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <q-dialog v-model="showHistory">
+      <q-card>
+        <img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
+               alt="photo"
+             v-if="selectedHistory.image_file"
         />
-      </q-timeline-entry>
-    </q-timeline>
+        <q-card-section>
+          <div v-html="selectedHistory.text.split('\n').join('</br>')"></div>
+          <div class="text-caption text-grey">
+            <span class="text-capitalize">{{ selectedHistory.user }}</span>
+            <q-separator vertical />
+            <span>{{ getDate(selectedHistory.created) }}</span>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn flat color="red" @click.stop="removeHistory(selectedHistory)">Supprimer</q-btn>
+          <q-btn flat color="grey" @click.stop="showHistory = false;selectedHistory = null">Fermer</q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
   </q-page>
 </template>
 
@@ -220,7 +241,9 @@ export default {
       username: null,
       qrCodeDataUrl: null,
       showQr: false,
-      item: {}
+      item: {},
+      showHistory: false,
+      selectedHistory: null,
     }
   },
   computed: {
@@ -341,8 +364,8 @@ export default {
         console.error('Error compressing image:', error)
       }
     },
-    getImageUrl (history, image) {
-      return this.$pb.files.getURL(history, image, { thumb: '300x300f' })
+    getImageUrl (history, image, thumb = false) {
+      return this.$pb.files.getURL(history, image, { thumb: thumb ? '300x300f' : null })
     },
     loadItem () {
       let item = this.stock.find(item => {