diff --git a/public/font/Geist-Black.otf b/public/font/Geist-Black.otf
new file mode 100644
index 0000000..216a699
Binary files /dev/null and b/public/font/Geist-Black.otf differ
diff --git a/public/font/Geist-Bold.otf b/public/font/Geist-Bold.otf
new file mode 100644
index 0000000..8ff22cf
Binary files /dev/null and b/public/font/Geist-Bold.otf differ
diff --git a/public/font/Geist-ExtraBold.otf b/public/font/Geist-ExtraBold.otf
new file mode 100644
index 0000000..1b96c1e
Binary files /dev/null and b/public/font/Geist-ExtraBold.otf differ
diff --git a/public/font/Geist-ExtraLight.otf b/public/font/Geist-ExtraLight.otf
new file mode 100644
index 0000000..e954b71
Binary files /dev/null and b/public/font/Geist-ExtraLight.otf differ
diff --git a/public/font/Geist-Light.otf b/public/font/Geist-Light.otf
new file mode 100644
index 0000000..8a60fe5
Binary files /dev/null and b/public/font/Geist-Light.otf differ
diff --git a/public/font/Geist-Medium.otf b/public/font/Geist-Medium.otf
new file mode 100644
index 0000000..4762646
Binary files /dev/null and b/public/font/Geist-Medium.otf differ
diff --git a/public/font/Geist-Regular.otf b/public/font/Geist-Regular.otf
new file mode 100644
index 0000000..ca601fc
Binary files /dev/null and b/public/font/Geist-Regular.otf differ
diff --git a/public/font/Geist-SemiBold.otf b/public/font/Geist-SemiBold.otf
new file mode 100644
index 0000000..7304b88
Binary files /dev/null and b/public/font/Geist-SemiBold.otf differ
diff --git a/public/font/Geist-Thin.otf b/public/font/Geist-Thin.otf
new file mode 100644
index 0000000..24c4a41
Binary files /dev/null and b/public/font/Geist-Thin.otf differ
diff --git a/public/font/Geist-var.ttf b/public/font/Geist-var.ttf
new file mode 100644
index 0000000..40d1d13
Binary files /dev/null and b/public/font/Geist-var.ttf differ
diff --git a/src/css/app.scss b/src/css/app.scss
index ecac98f..700a248 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1 +1,10 @@
 // app global css in SCSS form
+@font-face {
+  font-family: geist;
+  src: url(../public/font/Geist-var.ttf) format('truetype');
+}
+
+// declare a class which applies it
+html, body {
+  font-family: 'geist';
+}
diff --git a/src/pages/StockItem.vue b/src/pages/StockItem.vue
index d10b3e3..d022428 100644
--- a/src/pages/StockItem.vue
+++ b/src/pages/StockItem.vue
@@ -3,7 +3,7 @@
     <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" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2>
+    <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>
 
     <q-dialog v-model="showQr">
@@ -27,15 +27,18 @@
         <q-input v-model="item.name"
                  :disable="item.deleted"
                  type="text"
+                 label="Nom"
                  outlined color="secondary"
-                 stack-label label="Nom" class="q-mb-md"
-                 @update:model-value="changed = true"/>
+                 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"
@@ -54,6 +57,7 @@
       </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"
@@ -69,6 +73,7 @@
       </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"
@@ -92,6 +97,7 @@
             {label: 'Non', value: false}
           ]"
           @input="changed = true"
+          class="q-mt-sm"
         />
       </q-field>
         <q-input
@@ -100,7 +106,7 @@
           @update:model-value="changed = true"
           type="textarea"
           :max-height="100"
-          rows="4"
+          rows="5"
           outlined color="secondary" stack-label label="Commentaire" class="q-mb-md"
           inverted
         />
@@ -367,5 +373,8 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.q-field__label{
+  padding-bottom:16px !important;
+}
 </style>