diff --git a/src/index.html b/src/index.html
index 874dd6d57f..7804957baa 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,7 @@
       href="https://fonts.gstatic.com"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -38,8 +38,8 @@
         />
       </a>
       <nav class="navigation">
-        <ul>
-          <li>
+        <ul class="nav__list">
+          <li class="list_item">
             <a
               href="#apple"
               class="nav-link is-active"
@@ -47,7 +47,7 @@
               apple
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#samsung"
               class="nav-link"
@@ -55,7 +55,7 @@
               samsung
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#smartphones"
               class="nav-link"
@@ -63,16 +63,16 @@
               smartphones
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               data-qa="hover"
-              class="nav-link computers-link"
+              class="nav-link"
               href="#computers"
             >
               laptops & computers
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#gadgets"
               class="nav-link"
@@ -80,7 +80,7 @@
               gadgets
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#tablets"
               class="nav-link"
@@ -88,7 +88,7 @@
               tablets
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#photo"
               class="nav-link"
@@ -96,7 +96,7 @@
               photo
             </a>
           </li>
-          <li>
+          <li class="list_item">
             <a
               href="#video"
               class="nav-link"
diff --git a/src/style.css b/src/style.css
index 2940ab4767..a4ef9a6056 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,31 +5,28 @@ html {
   font-style: normal;
   font-weight: 500;
   text-transform: uppercase;
+
+  --link-color: #00acdc;
 }
 
 * {
   margin: 0;
 }
 
-li {
+.list_item {
   list-style: none;
   margin-left: 20px;
 }
 
-li:first-child {
+.list_item:first-child {
   margin-left: 0;
 }
 
-ul {
+.nav__list {
   padding: 0;
   display: flex;
 }
 
-a {
-  text-decoration: none;
-  color: black;
-}
-
 .header {
   position: relative;
   width: 100%;
@@ -51,7 +48,7 @@ a {
 
 .is-active {
   position: relative;
-  color: #00acdc;
+  color: var(--link-color);
 }
 
 .is-active::after {
@@ -60,19 +57,21 @@ a {
   position: absolute;
   height: 4px;
   width: 100%;
-  background-color: #00acdc;
+  background-color: var(--link-color);
   bottom: 0;
   border-radius: 8px;
 }
 
-.computers-link:hover {
-  color: #00acdc;
-}
-
 .nav-link {
   line-height: 60px;
   height: 60px;
   display: inline-block;
+  text-decoration: none;
+  color: black;
+}
+
+.nav-link:hover {
+  color: var(--link-color);
 }
 
 .navigation {