diff --git a/components/Header.vue b/components/Header.vue
new file mode 100644
index 0000000..ea00e91
--- /dev/null
+++ b/components/Header.vue
@@ -0,0 +1,19 @@
+<template>
+  <header id="header">
+    <router-link to="/">
+      <img
+        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
+        alt="PeopleDoc - Icon"
+      />
+      <h1>Ghibli</h1>
+    </router-link>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "Header"
+};
+</script>
+
+<style></style>
diff --git a/layouts/default.vue b/layouts/default.vue
index a6a0502..6fac89f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,20 @@
 <template>
   <div>
-    <Nuxt />
+    <Header />
+    <main>
+      <Nuxt />
+    </main>
   </div>
 </template>
 
+<script>
+import Header from "@/components/Header";
+
+export default {
+  components: { Header }
+};
+</script>
+
 <style>
 html {
   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
diff --git a/pages/index.vue b/pages/index.vue
index 71c9f9b..353f350 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <main>
+  <section>
     <h1>Ghibli movies</h1>
     {{ films }}
-  </main>
+  </section>
 </template>
 
 <script>