diff --git a/src/index.html b/src/index.html
index b39fe97123..dd4e446c30 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,12 +11,26 @@
       content="ie=edge"
     />
     <title>Moyo header</title>
-    <link
-      rel="stylesheet"
-      href="./style.css"
-    />
-  </head>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
   <body>
-    <h1>Moyo header</h1>
+      <header class="header">
+  <a href="/" class="header__logo">
+    <img src="images/logo.png" alt="Moyo Logo">
+  </a>
+  <nav class="nav">
+    <ul class="nav__list">
+      <li class="nav__item"><a class="nav__link is-active" href="#Apple">Apple</a></li>
+      <li class="nav__item"><a class="nav__link" href="#Samsung">Samsung</a></li>
+      <li class="nav__item"><a class="nav__link" href="#Smartphones">Smartphones</a></li>
+      <li class="nav__item"><a class="nav__link" href="#laptops-and-computers" data-qa="hover">Laptops & Computers</a></li>
+      <li class="nav__item"><a class="nav__link" href="#Gadgets">Gadgets</a></li>
+      <li class="nav__item"><a class="nav__link" href="#Tablets">Tablets</a></li>
+      <li class="nav__item"><a class="nav__link" href="#Photo">Photo</a></li>
+      <li class="nav__item"><a class="nav__link" href="#Video">Video</a></li>
+    </ul>
+  </nav>
+</header>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
index 293d3b1f13..91ffc2895f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,60 @@
+:root {
+  --color-blue: #00acdc;
+}
+
 body {
   margin: 0;
+  font-family: Roboto, Arial, sans-serif;
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0;
+}
+
+.header {
+    display: flex;
+    padding: 0 50px;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav__link {
+    text-transform: uppercase;
+    color: inherit;
+    white-space: nowrap;
+    outline: none;
+    text-decoration: none;
+    font-size: 12px;
+    position: relative;
+    display: block;
+    line-height: 60px;
+}
+
+.nav__link:hover {
+    color: var(--color-blue);
+}
+
+.nav__list {
+    padding: 0;
+    list-style: none;
+    display: flex;
+    margin: 0;
+}
+
+.nav__item:not(:last-child) {
+  margin-right: 20px;
+}
+
+.nav__link.is-active {
+  color: var(--color-blue);
+}
+
+.is-active::after {
+    content: "";
+    background-color: var(--color-blue);
+    border-radius: 2px;
+    width: 100%;
+    height: 4px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
 }
