diff --git a/src/index.html b/src/index.html
index 1b5ae30374..ad1fd75f05 100644
--- a/src/index.html
+++ b/src/index.html
@@ -33,68 +33,75 @@ <h1>Moyo header</h1>
         />
       </a>
       <nav>
-        <ul class="nav_list">
-          <li class="nav_item">
+        <ul class="nav__list">
+          <li class="nav__item">
             <a
-              href="/apple"
-              class="nav_link is-active"
+              href="apple"
+              class="nav__link is-active"
             >
               APPLE
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/samsung"
-              class="nav_link"
+              href="samsung"
+              class="nav__link"
             >
               SAMSUNG
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/smartphones"
-              class="nav_link"
+              href="smartphones"
+              class="nav__link"
             >
               SMARTPHONES
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/laptops"
-              class="nav_link"
+              href="laptops"
+              class="nav__link"
               data-qa="hover"
             >
               LAPTOPS & COMPUTERS
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/gadgets"
-              class="nav_link hover"
+              href="gadgets"
+              class="nav__link hover"
             >
               GADGETS
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/tablets"
-              class="nav_link"
+              href="tablets"
+              class="nav__link"
             >
               TABLETS
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/photo"
-              class="nav_link"
+              href="photo"
+              class="nav__link"
             >
               PHOTO
             </a>
           </li>
-          <li class="nav_item">
+
+          <li class="nav__item">
             <a
-              href="/video"
-              class="nav_link"
+              href="video"
+              class="nav__link"
             >
               VIDEO
             </a>
diff --git a/src/style.css b/src/style.css
index a97b6c2a7c..fb94303201 100644
--- a/src/style.css
+++ b/src/style.css
@@ -20,14 +20,14 @@ body {
   justify-content: center;
 }
 
-.nav_list {
+.nav__list {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.nav_item {
+.nav__item {
   font-size: 12px;
   line-height: 14px;
   font-weight: 500;
@@ -35,11 +35,11 @@ body {
   margin-left: 20px;
 }
 
-.nav_item:first-child {
+.nav__item:first-child {
   margin-left: 0;
 }
 
-.nav_link {
+.nav__link {
   display: block;
   line-height: 60px;
   color: black;
@@ -62,6 +62,6 @@ body {
   background-color: #00acdc;
 }
 
-.nav_link:hover {
+.nav__link:hover {
   color: #00acdc;
 }