diff --git a/front/src/BookForm.vue b/front/src/BookForm.vue
index d912649..b5dcb40 100644
--- a/front/src/BookForm.vue
+++ b/front/src/BookForm.vue
@@ -112,7 +112,12 @@ function goToAuthor() {
       <div class="my-5" v-if="data.isbn">ISBN: {{ data.isbn }}</div>
       <div class="my-5" v-if="data.inventaireid">Inventaire ID: {{ data.inventaireid }}</div>
       <div class="my-5" v-if="data.openlibraryid">OLID: {{ data.openlibraryid }}</div>
-      <ReviewWidget :reviewtext="data.review" :rating="data.rating" @on-review-update="onReviewUpdate" @on-rating-update="onRatingUpdate"/>
+      <ReviewWidget
+        :reviewtext="data.review"
+        :rating="data.rating"
+        @on-review-update="onReviewUpdate"
+        @on-rating-update="onRatingUpdate"
+      />
     </div>
     <div class="column">
       <BookFormIcons
diff --git a/front/src/ReviewWidget.vue b/front/src/ReviewWidget.vue
index dfff48f..f794c03 100644
--- a/front/src/ReviewWidget.vue
+++ b/front/src/ReviewWidget.vue
@@ -12,7 +12,8 @@ const isTextareaTransitionEnabled = ref(true)
 defineEmits('onRatingUpdate', 'onReviewUpdate')
 
 function computeTextareaClass() {
-  let classAttr = isTextareaExpanded && isTextareaExpanded.value ? 'textarea-expanded' : 'textarea-normal'
+  let classAttr =
+    isTextareaExpanded && isTextareaExpanded.value ? 'textarea-expanded' : 'textarea-normal'
   if (isTextareaTransitionEnabled && isTextareaTransitionEnabled.value) {
     classAttr += ' transition-height'
   }
@@ -25,29 +26,28 @@ function onTextAreaFocus() {
     isTextareaTransitionEnabled.value = false
   }, 500)
 }
-
 </script>
 
 <template>
   <div class="maincontainer py-5">
     <div class="widget-header mb-5 full-width">
       <div class="widget-title ml-3">
-        <h2>{{$t('review.title')}}</h2>
+        <h2>{{ $t('review.title') }}</h2>
         <span class="ml-3">
-          <b-icon-pen/>
+          <b-icon-pen />
         </span>
       </div>
       <VRating
-          half-increments
-          hover
-          :length="5"
-          size="x-large"
-          density="compact"
-          :model-value="rating / 2"
-          @update:modelValue="(r) => $emit('onRatingUpdate', r)"
-          active-color="bulma-body-color"
-          class="widget-rating centered"
-          />
+        half-increments
+        hover
+        :length="5"
+        size="x-large"
+        density="compact"
+        :model-value="rating / 2"
+        @update:modelValue="(r) => $emit('onRatingUpdate', r)"
+        active-color="bulma-body-color"
+        class="widget-rating centered"
+      />
     </div>
     <div class="full-width centered">
       <textarea
@@ -55,80 +55,80 @@ function onTextAreaFocus() {
         class="widget-textarea mx-4"
         @change="(e) => $emit('onReviewUpdate', e.target.value)"
         @focus="onTextAreaFocus"
-        :class="computeTextareaClass()">{{reviewtext}}</textarea>
+        :class="computeTextareaClass()"
+        >{{ reviewtext }}</textarea
+      >
     </div>
   </div>
 </template>
 
 <style scoped>
-  .maincontainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    border: solid;
-    border-radius: 20px;
-    padding: 10px;
-  }
+.maincontainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  border: solid;
+  border-radius: 20px;
+  padding: 10px;
+}
 
+.widget-header {
+  display: flex;
+}
+
+.widget-title {
+  flex: 2;
+  font-size: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.widget-title h2 {
+  font-weight: bold;
+}
+
+.widget-rating {
+  flex: 2;
+}
+
+.widget-textarea {
+  color: var(--bulma-body-color);
+  background-color: var(--bulma-text-20);
+  width: 95%;
+  border-radius: 30px;
+  border: none;
+  padding: 15px;
+}
+
+.textarea-normal {
+  height: 80px;
+  resize: none;
+}
+
+.textarea-expanded {
+  height: 350px;
+  resize: vertical;
+}
+
+.transition-height {
+  transition: height 0.5s;
+}
+
+.full-width {
+  width: 100%;
+}
+
+@media (max-width: 1024px) {
   .widget-header {
     display: flex;
+    flex-wrap: wrap;
   }
-
   .widget-title {
-    flex: 2;
-    font-size: 2em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .widget-title h2 {
-    font-weight: bold;
-  }
-
-  .widget-rating {
-    flex: 2;
-  }
-
-  .widget-textarea {
-    color: var(--bulma-body-color);
-    background-color: var(--bulma-text-20);
-    width: 95%;
-    border-radius: 30px;
-    border: none;
-    padding: 15px;
-  }
-
-  .textarea-normal {
-    height: 80px;
-    resize: none;
-  }
-
-  .textarea-expanded {
-    height: 350px;
-    resize: vertical;
-  }
-
-  .transition-height {
-    transition: height 0.5s;
-  }
-
-  .full-width {
+    font-size: 1.5em;
     width: 100%;
+    margin-bottom: 10px;
   }
-
-  @media (max-width: 1024px) {
-
-    .widget-header {
-      display: flex;
-      flex-wrap: wrap;
-    }
-    .widget-title {
-      font-size: 1.5em;
-      width: 100%;
-      margin-bottom: 10px;
-    }
-  }
-
+}
 </style>