diff --git a/components/footer/Footer.vue b/components/footer/Footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ab70c32e7896403e9aec8196a6021e9537722d0
--- /dev/null
+++ b/components/footer/Footer.vue
@@ -0,0 +1,11 @@
+<template>
+  <v-footer app>
+    <span>&copy; {{ new Date().getFullYear() }}</span>
+  </v-footer>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>
diff --git a/components/nav_bar/MainAppBar.vue b/components/nav_bar/MainAppBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..914f4f37cc6bd8e57607260a02dfcd4ba7d8d2dc
--- /dev/null
+++ b/components/nav_bar/MainAppBar.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="nav-bar">
+    <v-container class="nav-bar-items-container d-flex flex-column justify-end">
+      <div class="logo-and-search">
+        <v-row>
+          <v-col lg="4">
+            <Logo />
+          </v-col>
+          <v-spacer> </v-spacer>
+          <v-col lg="6" align-self="end">
+            <SearchBar />
+          </v-col>
+        </v-row>
+      </div>
+      <div>
+        <v-tabs background-color="secondary">
+          <v-tab> Link 1 </v-tab>
+          <v-tab> Link 2 </v-tab>
+          <v-tab> Link 3 </v-tab>
+        </v-tabs>
+      </div>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import SearchBar from '~/components/nav_bar/SearchBar.vue'
+import Logo from '~/components/Logo.vue'
+export default {
+  components: {
+    Logo,
+    SearchBar,
+  },
+}
+</script>
+
+<style lang="scss">
+.nav-bar {
+  height: 224px;
+  background-color: $eubopen-secondary-color;
+  .logo-and-search {
+    margin-bottom: 20px;
+  }
+  .nav-bar-items-container {
+    height: 100%;
+    padding-bottom: 0;
+  }
+}
+</style>
diff --git a/components/nav_bar/SearchBar.vue b/components/nav_bar/SearchBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..468b0cc73998aae8da590db05193a3cecf9a4022
--- /dev/null
+++ b/components/nav_bar/SearchBar.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="d-flex flex-column align-end">
+    <div class="d-flex">
+      <v-text-field label="Search Term" solo single-line></v-text-field>
+      <v-btn color="primary"> <v-icon>mdi-magnify</v-icon> Search </v-btn>
+    </div>
+    <div>
+      <b>Examples:</b>
+      <a>Example1</a>, <a>Example2</a>, <a>Example3</a>,
+      <a>Example4</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>
diff --git a/static/img/logo.png b/static/img/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..cadfb43ef5275bea34a1c2e11f6b3b191022ba4f
Binary files /dev/null and b/static/img/logo.png differ