diff --git a/src/jelu-ui/package-lock.json b/src/jelu-ui/package-lock.json
index a0a440d3..e2ab788d 100644
--- a/src/jelu-ui/package-lock.json
+++ b/src/jelu-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "jelu-ui",
-  "version": "0.1.1",
+  "version": "0.1.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "jelu-ui",
-      "version": "0.1.1",
+      "version": "0.1.7",
       "dependencies": {
         "@creativebulma/bulma-divider": "^1.1.0",
         "@mdi/font": "^6.4.95",
@@ -21,6 +21,7 @@
         "v-tooltip": "^4.0.0-beta.8",
         "vue": "^3.2.16",
         "vue-router": "^4.0.12",
+        "vue-snip": "^1.3.0",
         "vue3-carousel": "^0.1.35",
         "vuex": "^4.0.2"
       },
@@ -3081,6 +3082,11 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-snip": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-snip/-/vue-snip-1.3.0.tgz",
+      "integrity": "sha512-4OILdKYPWG5/FYvpFGR066Ql5nPUwAz/PLBfKHVL5cem5VUyrafuYzW/0NjMZj4ZRPLtVPTVhp55XAtJ199eXA=="
+    },
     "node_modules/vue-tsc": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.3.0.tgz",
@@ -5456,6 +5462,11 @@
         "@vue/devtools-api": "^6.0.0-beta.18"
       }
     },
+    "vue-snip": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-snip/-/vue-snip-1.3.0.tgz",
+      "integrity": "sha512-4OILdKYPWG5/FYvpFGR066Ql5nPUwAz/PLBfKHVL5cem5VUyrafuYzW/0NjMZj4ZRPLtVPTVhp55XAtJ199eXA=="
+    },
     "vue-tsc": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.3.0.tgz",
diff --git a/src/jelu-ui/package.json b/src/jelu-ui/package.json
index aa2a07c1..444054d8 100644
--- a/src/jelu-ui/package.json
+++ b/src/jelu-ui/package.json
@@ -22,6 +22,7 @@
     "v-tooltip": "^4.0.0-beta.8",
     "vue": "^3.2.16",
     "vue-router": "^4.0.12",
+    "vue-snip": "^1.3.0",
     "vue3-carousel": "^0.1.35",
     "vuex": "^4.0.2"
   },
diff --git a/src/jelu-ui/src/components/BookCard.vue b/src/jelu-ui/src/components/BookCard.vue
index 7af41d46..2c9265b7 100644
--- a/src/jelu-ui/src/components/BookCard.vue
+++ b/src/jelu-ui/src/components/BookCard.vue
@@ -76,16 +76,22 @@ const showProgressBar = (book: UserBook) => {
       />
     </div>
     <header class="card-header">
-      <p class="p-3 card-header-title is-capitalized is-family-sans-serif is-ellipsis">
+      <p
+        v-snip:js="4" 
+        class="p-3 card-header-title is-capitalized is-family-sans-serif"
+      >
         {{ book.book.title }}
       </p>
     </header>
     <div class="card-content has-text-dark py-2">
       <div class="content has-text-left m-0">
-        <span
+        <p
           v-if="book.book.authors != null && book.book.authors.length > 0"
+          v-snip:js="3"
           class="is-inline-block"
-        >{{ authorsText }}</span>
+        >
+          {{ authorsText }}
+        </p>
       </div>
       <footer class="card-footer">
         <div>
diff --git a/src/jelu-ui/src/main.ts b/src/jelu-ui/src/main.ts
index 2aeb6a20..e5a4e535 100644
--- a/src/jelu-ui/src/main.ts
+++ b/src/jelu-ui/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import VTooltipPlugin from 'v-tooltip'
+import VueSnip from 'vue-snip'
 import Oruga from '@oruga-ui/oruga-next'
 // import '@oruga-ui/oruga-next/dist/oruga.css'
 
@@ -19,6 +20,7 @@ createApp(App)
     .use(router)
     .use(store, key)
     .use(VTooltipPlugin)
+    .use(VueSnip)
     .use(Oruga, {
         iconPack: 'mdi',
         ...bulmaConfig