diff --git a/.linthtmlrc.json b/.linthtmlrc.json
index 477c99b1b9..2c4d9ee7e3 100644
--- a/.linthtmlrc.json
+++ b/.linthtmlrc.json
@@ -10,7 +10,7 @@
   "attr-name-ignore-regex": "viewBox",
   "attr-no-dup": true,
   "attr-quote-style": "double",
-  "attr-req-value": true,
+  "attr-req-value": false,
   "class-no-dup": true,
   "doctype-first": true,
   "doctype-html5": true,
diff --git a/package-lock.json b/package-lock.json
index 7eef7e5ecc..6caf108022 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "backstopjs": "6.3.23",
         "jest": "^29.7.0",
         "parcel": "^2.12.0",
-        "prettier": "^3.3.2",
+        "prettier": "^3.8.1",
         "stylelint": "^16.7.0",
         "stylelint-scss": "^6.4.1"
       }
@@ -5415,87 +5415,6 @@
         "node": ">=12 || >=16"
       }
     },
-    "node_modules/css-select": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.1.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-select/node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/css-select/node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/css-select/node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/css-select/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -5533,45 +5452,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/csso": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
-      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "css-tree": "~2.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/css-tree": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
-      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "mdn-data": "2.0.28",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/mdn-data": {
-      "version": "2.0.28",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
-      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/data-uri-to-buffer": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
@@ -9730,10 +9610,11 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -10654,20 +10535,6 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
-    "node_modules/srcset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/srcset/-/srcset-5.0.1.tgz",
-      "integrity": "sha512-/P1UYbGfJVlxZag7aABNRrulEXAwCSDo7fklafOQrantuPTDmYgijJMks2zusPCVzgW9+4P69mq7w6pYuZpgxw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -11073,33 +10940,6 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
-    "node_modules/svgo": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
-      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^5.1.0",
-        "css-tree": "^2.3.1",
-        "css-what": "^6.1.0",
-        "csso": "^5.0.5",
-        "picocolors": "^1.0.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/svgo"
-      }
-    },
     "node_modules/table": {
       "version": "6.8.2",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
diff --git a/package.json b/package.json
index 45fd6b0d41..d0f0952a6a 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
-  "dependencies": {},
   "devDependencies": {
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/backstop-config": "latest",
@@ -28,7 +27,7 @@
     "backstopjs": "6.3.23",
     "jest": "^29.7.0",
     "parcel": "^2.12.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.8.1",
     "stylelint": "^16.7.0",
     "stylelint-scss": "^6.4.1"
   },
@@ -38,5 +37,15 @@
       "javascript": false,
       "bem": false
     }
-  }
+  },
+  "main": ".eslintrc.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maykonfox/layout_moyo-header-fox.git"
+  },
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/maykonfox/layout_moyo-header-fox/issues"
+  },
+  "homepage": "https://github.com/maykonfox/layout_moyo-header-fox#readme"
 }
diff --git a/readme.md b/readme.md
index fc0db80092..b4e13bd1b3 100644
--- a/readme.md
+++ b/readme.md
@@ -27,8 +27,8 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan
 
 ❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
+- [DEMO LINK](https://github.com/maykonfox/layout_moyo-header-fox)
+- [TEST REPORT LINK](https://https://github.com/mate-academy/layout_moyo-header/pull/7481)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 
@@ -39,5 +39,5 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan
 - [ ] **CSS Variable** is used for a blue color
 - [ ] Pseudo-element is used for a blue line below the active link
 - [ ] Code follows all the [Code Style Rules ❗️](./checklist.md)
-- [ ] The Google Fonts Configuration follows requirements. 
-![alt text](./assets/image.png)
\ No newline at end of file
+- [ ] The Google Fonts Configuration follows requirements.
+![alt text](./assets/image.png)
diff --git a/src/index.html b/src/index.html
index b39fe97123..ff844bd6e0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,19 +4,111 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <meta
-      http-equiv="X-UA-Compatible"
-      content="ie=edge"
+      content="width=device-width, initial-scale=1.0"
     />
     <title>Moyo header</title>
+
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <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="logo"
+      >
+        <img
+          class="logo_image"
+          src="images/logo.png"
+          alt="Logotipo da empresa Moyo"
+        />
+      </a>
+      <nav class="nav">
+        <ul class="nav_list">
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link is-active"
+              aria-current="page"
+              data-qa="hover"
+            >
+              Apple
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Samsung
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Smartphones
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Laptops & computers
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Gadgets
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Tablets
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Photos
+            </a>
+          </li>
+          <li class="nav_item">
+            <a
+              href="#"
+              class="nav_link"
+            >
+              Video
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
index 293d3b1f13..98c2353c96 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,96 @@
+:root {
+  --blue: #00acdc;
+  --nav-height: 56px;
+}
+
 body {
   margin: 0;
+  font-family: Roboto, Arial, sans-serif;
+  background-color: #f5f7f9;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  padding: 0 40px;
+  min-height: var(--nav-height);
+  background-color: #fff;
+}
+
+.logo_image {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+
+.nav_list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav_item + .nav_item {
+  margin-left: 12px;
+}
+
+.nav_link {
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+  height: var(--nav-height);
+  color: #000;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.nav_link:hover {
+  color: var(--blue);
+}
+
+.nav_link.is-active {
+  color: var(--blue);
+}
+
+.nav_link::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  left: 50%;
+  bottom: 2px;
+  height: 4px;
+  background-color: var(--blue);
+  border-radius: 8px;
+  opacity: 0;
+  transform-origin: center;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  transform: translateX(-50%) scaleX(0);
+}
+
+.nav_link:focus-visible {
+  color: var(--blue);
+}
+
+.nav_link:focus-visible::after {
+  transform: translateX(-50%) scaleX(1);
+  opacity: 1;
+}
+
+.nav_link:hover::after {
+  transform: translateX(-50%) scaleX(1);
+  opacity: 1;
+}
+
+.nav_link.is-active::after {
+  transform: translateX(-50%) scaleX(1);
+  opacity: 1;
 }