diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index bc36abf..dad132f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -14,55 +14,7 @@
             
                 <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>
+                    <search/>
                         
                     <!-- <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>
@@ -125,8 +77,12 @@
 </template>
 <script>
 import UIkit from 'uikit';
+import Search from './Search.vue';
 
 export default {
+    components: {
+        Search
+    },
     data: () => {
         return {
             translation: 'Add Translation...',