diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 2bd4787..ebb9ff3 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,119 +1,127 @@
 <template>
-    <nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar>
-            <div class="uk-navbar-left">
-        
-                <a class="uk-navbar-item uk-logo" href="#">GetBible</a>
-        
-               <a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span>Search</a>
+    <div class="uk-margin uk-container">
+        <div class="uk-margin uk-align-right">
 
-                    <div id="offcanvas-slide" uk-offcanvas>
-                        <div class="uk-offcanvas-bar">
-
-                            <div class="uk-nav uk-nav-default"> 
-                                    <div class="uk-margin">
-                                        <form class="uk-search uk-search-default" action="javascript:void(0)">
-                                                <!-- <span uk-search-icon></span> -->
-                                                <input class="uk-search-input" v-model="search" type="search" placeholder="Search Words...">
-                                                <div class="uk-margin">
-                                                    <button class="uk-button uk-button-default uk-button-small">Search</button>
-                                                </div>
-                                        </form>
-
-                                    </div>
-                                    
-                                    <div class="uk-margin">
-
-                                        <div class="uk-margin">
-                                            <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">ALL WORDS</button>
-                                                <button class="uk-button uk-button-default uk-button-small">ANY WORDS</button>
-                                                <button class="uk-button uk-button-default uk-button-small">PHRASE</button>
-                                            </div>
-                                        </div>
-                                         <div class="uk-margin">
-                                            <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">BIBLE</button>
-                                                <button class="uk-button uk-button-default uk-button-small">OT</button>
-                                                <button class="uk-button uk-button-default uk-button-small">NT</button>
-                                                <button class="uk-button uk-button-default uk-button-small">CHAPTER</button>
-                                            </div>
-                                        </div>
-                                         <div class="uk-margin">
-                                            <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">EXACT MATCH</button>
-                                                <button class="uk-button uk-button-default uk-button-small">PARTIAL MATCH</button>
-                                            </div>
-                                        </div>
-                                         <div class="uk-margin">
-                                            <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">CASE INSENSITIVE</button>
-                                                <button class="uk-button uk-button-default uk-button-small">CASE SENSITIVE</button>
-                                                <!-- <button class="uk-button uk-button-default">Button</button> -->
-                                            </div>
-                                        </div>
-                                    </div>
-                            </div>
-
-                        </div>
-                    </div>
-                    
-                <!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> -->
-                <a class="uk-navbar-item" href="#" uk-toggle><span  uk-icon="icon: history; ratio:2"></span>History</a>
-        
-            </div>
-            <a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span  uk-icon="icon: cog; ratio:2"></span></a>
-
-            <div id="modal-sections" uk-modal>
-                <div class="uk-modal-dialog">
-                    <button class="uk-modal-close-default" type="button" uk-close></button>
-                    <div class="uk-modal-header">
-                        <h2 class="uk-modal-title">Settings</h2>
-                    </div>
-                    <div class="uk-modal-body">
-                         <div class="uk-margin">
-                             <h3>Saved Translations</h3>
-                              <div>
-                                    <ul class="uk-list uk-list-large uk-list-divider">
-                                        <li
-                                        v-for="(tr,i) in savedTranslations" 
-                                        :key="i"
-                                        ><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> 
-                                        {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
-                                        </div> </li> 
-                                        <li v-if="!savedTranslations.length">No saved translation</li>
-                                        
-                                        <li>Add
-                                            <div uk-form-custom="target: > * > span:first-child">
-                                <select v-model="translation">
-                                    <option selected value="Add Translation...">Add Translation...</option>
-                                    <option 
-                                    v-for="(tr,i) in Object.keys(translations)" 
-                                    :key="i"
-                                    :value="tr"
-                                    >{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}}
-                                    </option>
-                                </select>
-                                <button class="uk-button uk-button-default" type="button" tabindex="-1">
-                                    <span></span>
-                                    <span uk-icon="icon: chevron-down"></span>
-                                </button>
-                            </div>
-                            <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
-                                        </li>
-                                    </ul>
-                                    
-                                </div>
-                            
-                        </div>
-                    </div>
-                    <div class="uk-modal-footer uk-text-right">
-                        <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
-                        <button class="uk-button uk-button-primary" type="button">Save</button>
-                    </div>  
-                </div>
-            </div>
+                <a href="https://github.com/getbible" class="uk-icon-button uk-margin-small-left" uk-icon="github"></a>
+                <a href="https://www.facebook.com/TheHolyScriptures" class="uk-icon-button  uk-margin-small-left" uk-icon="facebook"></a>
+                <a href="https://truechristian.church/whybible" class="uk-icon-button uk-margin-small-left" uk-icon="world"></a>
+        </div>
+    
+        <nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar>
+                <div class="uk-navbar-left">
             
-        </nav>
+                    <a class="uk-navbar-item uk-logo" href="#">GetBible</a>
+            
+                <a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span>Search</a>
+
+                        <div id="offcanvas-slide" uk-offcanvas>
+                            <div class="uk-offcanvas-bar">
+
+                                <div class="uk-nav uk-nav-default"> 
+                                        <div class="uk-margin">
+                                            <form class="uk-search uk-search-default" action="javascript:void(0)">
+                                                    <!-- <span uk-search-icon></span> -->
+                                                    <input class="uk-search-input" v-model="search" type="search" placeholder="Search Words...">
+                                                    <div class="uk-margin">
+                                                        <button class="uk-button uk-button-default uk-button-small">Search</button>
+                                                    </div>
+                                            </form>
+
+                                        </div>
+                                        
+                                        <div class="uk-margin">
+
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <button class="uk-button uk-button-default uk-button-small uk-active">ALL WORDS</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">ANY WORDS</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">PHRASE</button>
+                                                </div>
+                                            </div>
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <button class="uk-button uk-button-default uk-button-small uk-active">BIBLE</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">OT</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">NT</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">CHAPTER</button>
+                                                </div>
+                                            </div>
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <button class="uk-button uk-button-default uk-button-small uk-active">EXACT MATCH</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">PARTIAL MATCH</button>
+                                                </div>
+                                            </div>
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <button class="uk-button uk-button-default uk-button-small uk-active">CASE INSENSITIVE</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">CASE SENSITIVE</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        
+                    <!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> -->
+                    <a class="uk-navbar-item" href="#" uk-toggle><span  uk-icon="icon: history; ratio:2"></span></a>
+            
+                </div>
+                <a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span  uk-icon="icon: cog; ratio:2"></span></a>
+
+                <div id="modal-sections" uk-modal>
+                    <div class="uk-modal-dialog">
+                        <button class="uk-modal-close-default" type="button" uk-close></button>
+                        <div class="uk-modal-header">
+                            <h2 class="uk-modal-title">Settings</h2>
+                        </div>
+                        <div class="uk-modal-body">
+                            <div class="uk-margin">
+                                <h3>Saved Translations</h3>
+                                <div>
+                                        <ul class="uk-list uk-list-large uk-list-divider">
+                                            <li
+                                            v-for="(tr,i) in savedTranslations" 
+                                            :key="i"
+                                            ><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> 
+                                            {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
+                                            </div> </li> 
+                                            <li v-if="!savedTranslations.length">No saved translation</li>
+                                            
+                                            <li>Add
+                                                <div uk-form-custom="target: > * > span:first-child">
+                                    <select v-model="translation">
+                                        <option selected value="Add Translation...">Add Translation...</option>
+                                        <option 
+                                        v-for="(tr,i) in Object.keys(translations)" 
+                                        :key="i"
+                                        :value="tr"
+                                        >{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}}
+                                        </option>
+                                    </select>
+                                    <button class="uk-button uk-button-default" type="button" tabindex="-1">
+                                        <span></span>
+                                        <span uk-icon="icon: chevron-down"></span>
+                                    </button>
+                                </div>
+                                <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
+                                            </li>
+                                        </ul>
+                                        
+                                    </div>
+                                
+                            </div>
+                        </div>
+                        <div class="uk-modal-footer uk-text-right">
+                            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
+                            <button class="uk-button uk-button-primary" type="button">Save</button>
+                        </div>  
+                    </div>
+                </div>
+                
+            </nav>
+        </div>
 </template>
 <script>
 export default {
diff --git a/src/components/Options.vue b/src/components/Options.vue
index 08ad746..fc405f3 100644
--- a/src/components/Options.vue
+++ b/src/components/Options.vue
@@ -1,58 +1,65 @@
 <template>
-    <div>
-    <div class="uk-flex     uk-flex-around">
-            <div class="input-group mb-3 cols-3">
-                <div class="input-group-prepend">
-                    <label class="input-group-text" for="inputGroupSelect01"><h3>Translation</h3> </label>
+    <div class="uk-container">
+        <div class="uk-flex uk-flex-around">
+                <div class="input-group mb-3 cols-3">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="inputGroupSelect01"><h4>Translation</h4> </label>
+                    </div>
+                    <select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
+                        <!-- <option selected value="1">Choose...</option> -->
+                        <option 
+                        class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in translations" 
+                        :key="i"
+                        :value="tr.abbreviation"
+                        >{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}
+                        </option>
+                        
+                    </select>
+                </div> 
+                <div class="input-group mb-3 cols-3">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="inputGroupSelect01"><h4>Book</h4> </label>
+                    </div>
+                    <select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
+                        <!-- <option selected value="1">Choose...</option> -->
+                        <option 
+                        v-for="(bk,i) in Object.keys(books)" 
+                        :key="i"
+                        :value="books[bk]['nr']"
+                        >{{books[bk]['name']}}
+                        </option>
+                    </select>
+                </div> 
+                <div class="input-group mb-3 cols-3">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="inputGroupSelect01"><h4>Chapter</h4></label>
+                    </div>
+                    <select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
+                        <!-- <option selected value="1">Choose...</option> -->
+                        <option 
+                        v-for="(ch,i) in Object.keys(chapters)" 
+                        :key="i"
+                        :value="chapters[ch]['chapter']"
+                        >{{chapters[ch]['chapter']}}
+                        </option>
+                        
+                    </select>
                 </div>
-                <select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
-                    <!-- <option selected value="1">Choose...</option> -->
-                    <option 
-                    class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in translations" 
-                    :key="i"
-                    :value="tr.abbreviation"
-                    >{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}
-                    </option>
-                    
-                </select>
-            </div> 
-            <div class="input-group mb-3 cols-3">
-                <div class="input-group-prepend">
-                    <label class="input-group-text" for="inputGroupSelect01"><h3>Book of</h3> </label>
-                </div>
-                <select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
-                    <!-- <option selected value="1">Choose...</option> -->
-                    <option 
-                    v-for="(bk,i) in Object.keys(books)" 
-                    :key="i"
-                    :value="books[bk]['nr']"
-                    >{{books[bk]['name']}}
-                    </option>
-                </select>
-            </div> 
-            <div class="input-group mb-3 cols-3">
-                <div class="input-group-prepend">
-                    <label class="input-group-text" for="inputGroupSelect01"><h3>Chapter</h3></label>
-                </div>
-                <select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
-                    <!-- <option selected value="1">Choose...</option> -->
-                    <option 
-                    v-for="(ch,i) in Object.keys(chapters)" 
-                    :key="i"
-                    :value="chapters[ch]['chapter']"
-                    >{{chapters[ch]['chapter']}}
-                    </option>
-                    
-                </select>
             </div>
-        </div>
-        <verses
-        v-if="translations.length && books[book]"
-        :dir="t(translation).direction.toLowerCase()"
-        :book_name="books[book].name"
-        :chapter="fchapters"
-        />
-        </div>
+            <verses
+            v-if="translations.length && books[book]"
+            :dir="t(translation).direction.toLowerCase()"
+            :book_name="books[book].name"
+            :chapter="fchapters"
+            />
+
+            <div class="uk-margin">
+                <ul class="uk-pagination">
+                    <li><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
+                    <li class="uk-margin-auto-left"><a href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
+                </ul>
+            </div>
+    </div>
 </template>
 <script>
 import _ from 'lodash';