diff --git a/src/Models/data.js b/src/Models/data.js
index d2ca85a..6797a36 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -38,13 +38,13 @@ export default [
             { name: 'Hero With Pattern' },
         ],
     },
-    // {
-    //     name: 'Navigation', 
-    //     components: [
-    //         { name: 'Navbar With Search' },
-    //         { name: 'Footer With Subscribe Form' },
-    //     ]
-    // },
+    {
+        name: 'Navbars', 
+        components: [
+            { name: 'Navbar' },
+            { name: 'Navbar With Search' },
+        ]
+    },
     // {
     //     name: 'Sections',
     //     components: [
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 7029591..910a385 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -63,11 +63,9 @@
     // Heroes
     import HeroWithImage from "./UI/Heroes/HeroWithImage";
     import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
-
-    // import NavbarWithSearch from "./UI/Navigation/NavbarWithSearch";
-    // import FooterWithSubscribeForm from "./UI/Navigation/FooterWithSubscribeForm";
-    // import SimplePagination from "./UI/Paginations/SimplePagination";
-    // import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
+    // Navbar
+    import Navbar from "./UI/Navbars/Navbar";
+    import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
 
     import Component from "../Models/Component";
     import ViewComponent from "./Utilities/ViewComponent";
@@ -96,6 +94,9 @@
             HeroWithImage,
             HeroWithPattern,
 
+            Navbar,
+            NavbarWithSearch,
+
             ViewComponent,
         },
         data() {
diff --git a/src/components/UI/Navbars/Navbar.vue b/src/components/UI/Navbars/Navbar.vue
new file mode 100644
index 0000000..65eeca7
--- /dev/null
+++ b/src/components/UI/Navbars/Navbar.vue
@@ -0,0 +1,39 @@
+<template>
+    <div :id="name | toId">
+        <nav class="bg-white shadow-md">
+            <div class="container py-3 px-6 mx-auto">
+                <div class="md:flex justify-between items-center">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl" href="#">Brand</a>
+                        </div>
+
+                        <div class="md:hidden">
+                            <button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
+                                <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+                                    <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="flex flex-col mt-3 md:flex-row md:mt-0">
+                        <a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">Home</a>
+                        <a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">Contact</a>
+                        <a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">About Us</a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Navbar'
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/UI/Navbars/NavbarWithSearch.vue b/src/components/UI/Navbars/NavbarWithSearch.vue
new file mode 100644
index 0000000..091376c
--- /dev/null
+++ b/src/components/UI/Navbars/NavbarWithSearch.vue
@@ -0,0 +1,43 @@
+<template>
+    <div :id="name | toId">
+        <nav class="bg-white shadow-md">
+            <div class="container mx-auto px-6 py-3 md:flex">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl" href="#">Brand</a>
+                    </div>
+
+                    <div class="md:hidden">
+                        <button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
+                            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+                                <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="w-full md:flex md:items-center md:justify-between">
+                    <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
+                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                    </div>
+                    
+                    <div>
+                        <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search">
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Navbar With Search'
+            }
+        }
+    }
+</script>
\ No newline at end of file