diff --git a/front/src/AppNavBar.vue b/front/src/AppNavBar.vue
index 09539af..edc5e43 100644
--- a/front/src/AppNavBar.vue
+++ b/front/src/AppNavBar.vue
@@ -2,6 +2,7 @@
   import { ref } from 'vue'
   import { useRouter, RouterLink } from 'vue-router'
   import NavBarSearch from './NavBarSearch.vue'
+  import BarcodeModal from './BarcodeModal.vue'
   import { useAuthStore } from './auth.store.js'
 
   const authStore = useAuthStore();
@@ -30,6 +31,7 @@
               <b-icon-search />
             </span>
           </a>
+          <BarcodeModal size-class="is-medium"/>
         </div>
         <a role="button" class="navbar-burger" aria-label="menu"
           :class="isMenuActive ? 'is-active' : '' " :aria-expanded="isMenuActive"
diff --git a/front/src/BarcodeModal.vue b/front/src/BarcodeModal.vue
index 23652c8..fdbcd5f 100644
--- a/front/src/BarcodeModal.vue
+++ b/front/src/BarcodeModal.vue
@@ -3,6 +3,10 @@ import ScanBook from './ScanBook.vue'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+const props = defineProps({
+  sizeClass: String
+});
+
 const open = ref(false);
 const router = useRouter();
 
@@ -14,7 +18,7 @@ function onBarcodeDecode(isbn) {
 
 <template>
   <div class="control">
-    <button @click="open = true" class="button">
+    <button @click="open = true" class="button" :class="sizeClass">
       <span class="icon" title="Barcode">
         <b-icon-upc-scan />
       </span>
diff --git a/front/src/ScanBook.vue b/front/src/ScanBook.vue
index e1870b6..53de486 100644
--- a/front/src/ScanBook.vue
+++ b/front/src/ScanBook.vue
@@ -28,4 +28,7 @@
 </template>
 
 <style scoped>
+  video {
+    max-width: 90%;
+  }
 </style>