diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css
index e69de29..43f8514 100644
--- a/src/app/components/header/header.component.css
+++ b/src/app/components/header/header.component.css
@@ -0,0 +1,7 @@
+#navigation ul{
+    list-style: none;
+}
+
+#navigation li{
+    display: inline;
+}
\ No newline at end of file
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 4f5a95d..c3810d7 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1 +1,10 @@
-<p>header works!</p>
+<header>
+    <h1><a href="#">{{ title }}</a></h1>
+    <nav id="navigation">
+        <ul>
+            <li> <a href="#"> User Blogs </a> </li>
+            <li> <a href="#"> Create A Post </a> </li>
+            <li> <a href="#"> Search </a> </li>
+        </ul>
+    </nav>
+</header>
\ No newline at end of file
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index a093fe7..ef60175 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./header.component.css']
 })
 export class HeaderComponent implements OnInit {
+title: string = 'Food Blog';
 
   constructor() { }
 
diff --git a/tsconfig.json b/tsconfig.json
index 12fb7bd..d22b443 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2017",
-    "module": "es2020",
+    "module": "es2015",
     "lib": [
       "es2018",
       "dom"