diff --git a/topnav/.gitignore b/topnav/.gitignore
index 2ccbe4656..9462e3424 100644
--- a/topnav/.gitignore
+++ b/topnav/.gitignore
@@ -1 +1,2 @@
 /node_modules/
+html-dump.html
diff --git a/topnav/assets/img/ia-hamburger.svg b/topnav/assets/img/ia-hamburger.svg
new file mode 100644
index 000000000..66329ca8c
--- /dev/null
+++ b/topnav/assets/img/ia-hamburger.svg
@@ -0,0 +1,3 @@
+<svg height="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <path fill="#999" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/>
+</svg>
diff --git a/topnav/assets/img/ia-logo.svg b/topnav/assets/img/ia-logo.svg
new file mode 100644
index 000000000..20a3b8d6f
--- /dev/null
+++ b/topnav/assets/img/ia-logo.svg
@@ -0,0 +1,19 @@
+<svg
+  height="40px"
+  width="38px"
+  viewBox="0 0 32 42"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-labelledby="ia-logo-svg"
+  role="img"
+>
+  <g fill="#fff" fillRule="evenodd">
+    <path d="m0 4.4796473 18.707282-4.4796473 18.4263458 4.23309464-.7386684 1.30442147h-35.29099323" />
+    <path d="m.93617021 6.55319149h35.39634429v3.80921841h-35.39634429z" />
+    <path d="m.93617021 38.3829787h35.39634429v2.539209h-35.39634429z" />
+    <path d="m.00040364 41.1914894h37.94212666v1.9048116h-37.9425303z" />
+    <path d="m1.34062144 11.4275601.43997189-.1935175h2.35566603l.42180792.2117357.21110578 3.3857469.21110578 5.5014846v5.2909635l-.21110578 6.5953849-.03511702 4.443211-.59779668.1769187h-2.10984687l-.63291369-.1769187-.24581916-4.443211-.21150943-6.5601631v-5.2905586l.21150943-5.5371113z" />
+    <path d="m32.2342385 11.4275601.4395682-.1935175h2.355666l.4222116.2117357.2107021 3.3857469.2107022 5.5014846v5.2909635l-.2107022 6.5953849-.0347133 4.443211-.5982004.1769187h-2.1094432l-.6329137-.1769187-.2466264-4.443211-.2107022-6.5601631v-5.2905586l.2107022-5.5371113z" />
+    <path d="m11.6384938 11.4275601.4391646-.1935175h2.3560697l.4218079.2117357.2111058 3.3857469.2111057 5.5014846v5.2909635l-.2111057 6.5953849-.0347134 4.443211-.5982003.1769187h-2.1098469l-.6333174-.1769187-.2458191-4.443211-.2107021-6.5601631v-5.2905586l.2107021-5.5371113z" />
+    <path d="m22.8725363 11.4275601.4395683-.1935175h2.355666l.4218079.2117357.2111058 3.3857469.2111058 5.5014846v5.2909635l-.2111058 6.5953849-.0347134 4.443211-.5982003.1769187h-2.1098469l-.6329137-.1769187-.2462228-4.443211-.2107021-6.5601631v-5.2905586l.2107021-5.5371113z" />
+  </g>
+</svg>
diff --git a/topnav/assets/img/ia-search.svg b/topnav/assets/img/ia-search.svg
new file mode 100644
index 000000000..dec392d38
--- /dev/null
+++ b/topnav/assets/img/ia-search.svg
@@ -0,0 +1 @@
+<svg width="40px" height="40px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="#999" d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/></svg>
diff --git a/topnav/assets/img/ia-user.svg b/topnav/assets/img/ia-user.svg
new file mode 100644
index 000000000..3d307d599
--- /dev/null
+++ b/topnav/assets/img/ia-user.svg
@@ -0,0 +1,10 @@
+<svg width="40px" height="40px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-45.000000, -173.000000)" fill="#999999">
+            <g id="Person-Icon" transform="translate(45.000000, 173.000000)">
+                <circle id="Oval-3" cx="14" cy="7.89090909" r="7.89090909"></circle>
+                <path d="M14,27.9305935 C14.1458333,27.9305935 18.9142795,28.0867581 28,27.9305935 C28,22.0644996 21.7319865,17.3090909 14,17.3090909 C6.2680135,17.3090909 2.84217094e-14,22.0644996 2.84217094e-14,27.9305935 C9.95084635,27.9305935 13.8541667,27.9305935 14,27.9305935 Z" id="Oval-3-Copy"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/topnav/index.html b/topnav/index.html
index ca5ae9d03..a4141b44c 100644
--- a/topnav/index.html
+++ b/topnav/index.html
@@ -2,13 +2,16 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script type="module" src="/topnav-element.js"></script>
+    <script type="module" src="topnav-element.js"></script>
     <title>topnav-element</title>
+    <style>
+      body {
+        margin: 0px;
+      }
+    </style>
   </head>
+
   <body>
-    <div class="vertical-section-container centered">
-      <h3>Topnav element</h3>
-      <topnav-element></topnav-element>
-    </div>
+    <topnav-element></topnav-element>
   </body>
 </html>
diff --git a/topnav/package.json b/topnav/package.json
index c819ddbab..52ed045a7 100644
--- a/topnav/package.json
+++ b/topnav/package.json
@@ -9,6 +9,6 @@
   "devDependencies": {
     "@polymer/iron-demo-helpers": "^3.1.0",
     "@polymer/test-fixture": "^4.0.2",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@webcomponents/webcomponentsjs": "^2.0.0"
   }
 }
diff --git a/topnav/styles.css b/topnav/styles.css
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/topnav/styles.css
@@ -0,0 +1 @@
+
diff --git a/topnav/topnav-element.js b/topnav/topnav-element.js
index d04f3e9f3..8c4c3e9b3 100644
--- a/topnav/topnav-element.js
+++ b/topnav/topnav-element.js
@@ -1,12 +1,66 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html, css } from 'lit-element'
 
-// Extend the LitElement base class
 class TopnavElement extends LitElement {
+
   render() {
     return html`
-     <p>Is gonna be built here!</p>
+    <!--https://a11y-style-guide.com/style-guide/section-navigation.html give 8px padding-->
+    <nav class="navbar">
+      <div class="main-menu">
+        <button><img src="assets/img/ia-hamburger.svg" alt="Main menu"></button>
+      </div>
+      <div class="logo">
+        <a href="#"><img src="assets/img/ia-logo.svg" alt="Home"></a>
+      </div>
+      <div class="right">
+        <button><img src="assets/img/ia-search.svg" alt="Search"></button>
+        <button><img src="assets/img/ia-user.svg" alt="User menu"></button>
+      </div>
+    </nav>
    `;
   }
+
+  static get styles() {
+    return css`
+      .navbar {
+        display: flex;
+        flex-direction: row;
+        margin: 0px;
+        height: 50px;
+        padding: 0 10px;
+        background: #000;
+        padding: 0;
+        list-style: none;
+        align-items: center;
+      }
+      .navbar button {
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 10px;
+        font: inherit;
+        cursor: pointer;
+      }
+      .main-menu {
+        display: flex;
+        flex: 1;
+        justify-content: flex-start;
+        align-items: center;
+      }
+      .logo {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+      }
+      .right {
+        display: flex;
+        flex: 1;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    `;
+  }
 }
 
 customElements.define('topnav-element', TopnavElement);