diff --git a/src/components/Verses.vue b/src/components/Verses.vue
index f5bc3a1..e185532 100644
--- a/src/components/Verses.vue
+++ b/src/components/Verses.vue
@@ -2,16 +2,16 @@
     <div v-if="verses.length">
         <!-- {{search.toLowerCase() + fverses.length}} -->
         <br />
-        <div class="uk-card uk-card-default uk-card-body uk-width-1-1">
+        <div class="uk-card uk-card-default primary uk-card-body uk-width-1-1">
     <ul :dir="dir" 
      class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
         <li  v-for="(verse, i) in pverses" :key="i" 
         :class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"
      >
             
-            <h5  class=" uk-primary">
-              <span class="uk-heading-bullet">  {{book_name}}  </span>
-                <span class="uk-badge badge-light">
+            <h5  class=" uk-primary text-secondary">
+              <span class="uk-heading-bullet">  {{book_name+' '}}  </span>
+                <span class="uk-badge secondary badge-light">
                     {{verse.chapter}}:{{verse.verse}}
                 </span>
             </h5>
@@ -20,11 +20,11 @@
         </li>
     </ul>
         </div>
-    <div class="uk-position-small uk-position-center-left uk-overlay uk-overlay-default">
-        <span @click="prevV" class="uk-icon-button" uk-icon="icon:chevron-left; ratio:2"></span>
+    <div class="uk-position-small uk-position-center-left uk-overlay ">
+        <span @click="prevV" class="uk-icon-button primary text-secondary" uk-icon="icon:chevron-left; ratio:2"></span>
 </div>
-    <div class="uk-position-small uk-position-center-right uk-overlay uk-overlay-default">
-        <span @click="nextV" class="uk-icon-button" uk-icon="icon:chevron-right; ratio:2"></span>
+    <div class="uk-position-small uk-position-center-right uk-overlay ">
+        <span @click="nextV" class="uk-icon-button primary text-secondary" uk-icon="icon:chevron-right; ratio:2"></span>
 
     </div>