diff --git a/src/components/HomeFeaturesTableCell.vue b/src/components/HomeFeaturesTableCell.vue
index 346f334..2d6619e 100644
--- a/src/components/HomeFeaturesTableCell.vue
+++ b/src/components/HomeFeaturesTableCell.vue
@@ -1,40 +1,39 @@
 <template>
-  <td v-if="value === 'y'" class="yes" :class="wulkanowy ? 'wulkanowy' : ''" title="Dostępne">
+  <td v-if="value === 'y'" class="features-table__cell features-table__cell--yes" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="Dostępne">
     <check-icon
       title="Dostępne"
       :size="wulkanowy ? 36 : 28"
       fillColor="#4caf50"
     />
   </td>
-  <td v-else-if="value === 'n'" class="no" :class="wulkanowy ? 'wulkanowy' : ''" title="Niedostępne">
+  <td v-else-if="value === 'n'" class="features-table__cell features-table__cell--no" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="Niedostępne">
     <close-icon
       title="Niedostępne"
       :size="28"
       fillColor="#e53935"
     />
   </td>
-  <td v-else-if="value === 'w'" class="work-in-progress" :class="wulkanowy ? 'wulkanowy' : ''" title="W trakcie">
+  <td v-else-if="value === 'w'" class="features-table__cell features-table__cell--work-in-progress" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''" title="W trakcie">
     <clock-icon
       title="W trakcie"
       :size="wulkanowy ? 36 : 28"
       fillColor="#009688"
     />
   </td>
-  <td v-else class="other" :class="wulkanowy ? 'wulkanowy' : ''">
+  <td v-else class="features-table__cell features-table__cell--other" :class="wulkanowy ? 'features-table__cell--wulkanowy' : ''">
     {{ value }}
   </td>
 </template>
 
-<style lang="scss" scoped>
-  td {
-    text-align: center;
+<style lang="scss">
+  .features-table__cell {
     min-width: 95px;
 
-    &.wulkanowy {
-      background-color: #fff !important;
+    &--wulkanowy {
+      background-color: #fff;
     }
 
-    &.other {
+    &--wulkanowy {
       color: #1e88e5;
     }
   }
diff --git a/src/components/HomeFeaturesTableSection.vue b/src/components/HomeFeaturesTableSection.vue
index 3b010ce..a0c8f79 100644
--- a/src/components/HomeFeaturesTableSection.vue
+++ b/src/components/HomeFeaturesTableSection.vue
@@ -1,19 +1,19 @@
 <template>
-  <div id="features-table" class="home-section">
-    <h2 class="title">Porównanie funkcji</h2>
-    <div class="table-wrapper">
-      <table>
+  <div id="features-table-section" class="home-section">
+    <h2 class="features-table-section__title">Porównanie funkcji</h2>
+    <div class="features-table">
+      <table class="features-table__table">
         <thead>
           <tr>
-            <th>Funkcja</th>
-            <th>Strona UONET+</th>
-            <th>Aplikacja Dzienniczek+</th>
-            <th class="wulkanowy">Aplikacja Wulkanowy</th>
+            <th class="features-table__th">Funkcja</th>
+            <th class="features-table__th">Strona UONET+</th>
+            <th class="features-table__th">Aplikacja Dzienniczek+</th>
+            <th class="features-table__th features-table__th--wulkanowy">Aplikacja Wulkanowy</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(row, i) in table" :key="i">
-            <td class="feature-name" v-html="row.feature"></td>
+            <td class="features-table__cell features-table__cell--feature-name" v-html="row.feature"></td>
             <table-cell :value="row.uonet" />
             <table-cell :value="row.dzienniczek" />
             <table-cell :value="row.wulkanowy" wulkanowy />
@@ -40,7 +40,7 @@
 </script>
 
 <style lang="scss">
-  #features-table {
+  #features-table-section {
     min-height: 100vh;
     overflow: hidden;
     box-sizing: border-box;
@@ -58,55 +58,58 @@
     @media screen and (max-width: 450px) {
       padding: 0 0 16px;
     }
+  }
 
-    .title {
-      font-size: 32px;
-      text-align: center;
-      color: #fff;
-      font-family: 'Roboto', sans-serif;
-      font-weight: 400;
-      grid-row: 1;
-      grid-column: 1;
-    }
+  .features-table-section__title {
+    font-size: 32px;
+    text-align: center;
+    color: #fff;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    grid-row: 1;
+    grid-column: 1;
+  }
 
-    .table-wrapper {
-      grid-row: 3;
-      width: fit-content;
-      max-width: 100vw;
-      box-sizing: border-box;
-      overflow-x: auto;
-      justify-self: center;
-    }
+  .features-table {
+    grid-row: 3;
+    width: fit-content;
+    max-width: 100vw;
+    box-sizing: border-box;
+    overflow-x: auto;
+    justify-self: center;
 
-    table {
+    &__table {
       border-spacing: 5px;
       width: fit-content;
       min-width: 75vw;
       padding: 0 16px;
+    }
 
-      th {
-        padding: 8px;
+    &__th, &__cell {
+      text-align: center;
+      background-color: #ffffffcc;
+      border-radius: 3px;
+      box-shadow:
+        0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+        0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+    }
 
-        &.wulkanowy {
-          color: #f44336;
-          background-color: #fff;
-          font-size: 18px;
-        }
-      }
+    &__cell {
+      padding: 8px;
 
-      .feature-name {
+      &__feature-name {
         font-weight: 500;
       }
+    }
 
-      th, td {
-        text-align: center;
-        padding: 4px 8px;
-        background-color: #ffffffcc;
-        border-radius: 3px;
-        box-shadow:
-          0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-          0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-          0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+    &__th {
+      padding: 4px 8px;
+
+      &--wulkanowy {
+        color: #f44336;
+        background-color: #fff;
+        font-size: 18px;
       }
     }
   }