diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
index 689e122..f80b3bf 100644
--- a/assets/styles/components/buttons.scss
+++ b/assets/styles/components/buttons.scss
@@ -50,7 +50,6 @@
   color: #8392a5;
 }
 
-
 .tags {
   text-align: left;
 
@@ -66,3 +65,30 @@
     color: #f9fafc;
   }
 }
+
+.icon-button {
+  background-color: #3c4858;
+  color: #e5e9f2 !important;
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  border: none;
+
+  &:hover,
+  &:focus {
+    background-color: #248aaa !important;
+    transition: all 0.3s ease-out !important;
+  }
+}
+
+.filled-button {
+  color: #f9fafc !important;
+  background-color: #248aaa !important;
+  transition: all 0.3s ease-out;
+
+  &:hover,
+  &:active {
+    background-color: #0cafe1 !important;
+    transition: all 0.3 ease-out;
+  }
+}
diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss
index 2ece70b..faa00b9 100644
--- a/assets/styles/layouts/single.scss
+++ b/assets/styles/layouts/single.scss
@@ -2,10 +2,6 @@ body.kind-page {
   background-color: #e5e9f2;
   position: relative;
 
-  .read-area {
-    background-color: #f9fafc;
-  }
-  
   .wrapper {
     display: flex;
     padding: 0;
@@ -13,269 +9,186 @@ body.kind-page {
     width: 100%;
     justify-content: space-between;
     position: relative;
+
+    .content-section {
+      flex: 60%;
+      max-width: 60%;
+      order: 2;
+      padding: 0;
+      position: relative;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      .content {
+        background: #e5e9f2;
+        padding-top: 1.5rem;
+
+        .read-area {
+          background-color: #f9fafc;
+
+          .hero-area {
+            margin-top: 3rem;
+            width: 100%;
+            height: 400px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+
+          .page-content {
+            width: 100%;
+            position: relative;
+            top: -4.5rem;
+            padding: 15px;
+
+            .author-profile {
+              position: relative;
+              align-content: center;
+              text-align: center;
+
+              .author-name {
+                margin-top: 0px;
+              }
+
+              img {
+                height: 120px;
+                width: 120px;
+                -o-object-fit: cover;
+                object-fit: cover;
+                background-color: #f9fafc;
+                padding: 5px;
+              }
+              p {
+                color: #8392a5;
+              }
+            }
+
+            .title {
+              text-align: center;
+            }
+            .tags {
+              text-align: center;
+            }
+
+            .post-content {
+              padding: 15px;
+
+              h1,
+              h2 {
+                margin-top: 1.4rem;
+              }
+
+              h3,
+              h4,
+              h5,
+              h6 {
+                margin-top: 1.3rem;
+              }
+
+              blockquote {
+                border-left: 4px solid #248aaa;
+                background-color: #248baa15;
+                padding: 0.3rem;
+                padding-left: 1rem;
+
+                & > p {
+                  color: #3c4858;
+                  margin-top: 0.5rem;
+                  margin-bottom: 0.5rem;
+                }
+              }
+            }
+
+            .next-prev-navigator {
+              padding-left: 1rem !important;
+              padding-right: 1rem !important;
+
+              .next-article {
+                text-align: right;
+              }
+
+              .next-prev-text {
+                white-space: break-spaces;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .toc-section {
+      flex: 20%;
+      order: 3;
+      max-width: 20%;
+      transition: all ease-out 0.5s;
+
+      .toc-holder {
+        position: sticky;
+        top: 4.5rem;
+        padding-top: 1rem;
+        overflow-x: hidden;
+        overflow-y: auto;
+        background-color: #f9fafc;
+        margin-right: 0.5rem;
+        transition: all ease-out 0.3s;
+
+        .toc {
+          position: relative;
+          padding-top: 0px;
+          transition: all ease-out 0.3s;
+
+          nav {
+            padding-top: 0px;
+            margin-top: 0px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            transition: all ease-out 0.3s;
+
+            ul {
+              list-style: none;
+              padding-left: 0.5rem;
+              margin-bottom: 0rem;
+              width: 100%;
+            }
+
+            .nav-link {
+              padding: 0;
+              padding-left: 0.5rem;
+              transition: all ease-out 0.3s;
+              color: #1c2d41;
+
+              &:hover,
+              &:focus,
+              &.active {
+                padding-left: 1rem;
+                padding-right: 0.5rem;
+                background-color: #248aaa;
+                color: #f9f9f9;
+                transition: all ease-out 0.3s;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .disquss {
+      padding: 10px;
+    }
+
+    .share-buttons {
+      @include brand-background();
+      .btn {
+        border: none !important;
+      }
+    }
   }
-  
-  .content-section {
-    flex: 60%;
-    max-width: 60%;
-    order: 2;
-    /* background-color: lightseagreen; */
-    padding: 0;
-    position: relative;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  .content {
-    background: #e5e9f2;
-  }
-  .toc-section {
-    flex: 20%;
-    order: 3;
-    max-width: 20%;
-    /* background-color: lightpink; */
-    transition: all ease-out 0.5s;
-  }
-  
-  .toc-holder {
-    position: sticky;
-    top: 4.5rem;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: #f9fafc;
-    margin-right: 0.5rem;
-    /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
-    transition: all ease-out 0.3s;
-  }
-  
-  .toc {
-    position: relative;
-    padding-top: 0px;
-    transition: all ease-out 0.3s;
-  }
-  
-  .toc nav {
-    padding-top: 0px;
-    margin-top: 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    transition: all ease-out 0.3s;
-  }
-  
-  .toc ul {
-    list-style: none;
-    padding-left: 0.5rem;
-    margin-bottom: 0rem;
-    width: 100%;
-  }
-  
-  .toc .nav-link {
-    padding: 0;
-    padding-left: 0.5rem;
-    transition: all ease-out 0.3s;
-    color: #1c2d41;
-  }
-  
-  .toc .nav-link:hover,
-  .toc .nav-link:focus,
-  .toc .nav-link.active {
-    padding-left: 1rem;
-    padding-right: 0.5rem;
-    background-color: #248aaa;
-    color: #f9f9f9;
-    transition: all ease-out 0.3s;
-  }
-  
-  .hero-area {
-    margin-top: 3rem;
-    width: 100%;
-    height: 400px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-  
-  .page-content {
-    width: 100%;
-    position: relative;
-    top: -4.5rem;
-    padding: 15px;
-  }
-  
-  .author-profile {
-    position: relative;
-    align-content: center;
-    text-align: center;
-  }
-  
-  .author-name {
-    margin-top: 0px;
-  }
-  
-  .author-profile img {
-    height: 120px;
-    width: 120px;
-    -o-object-fit: cover;
-    object-fit: cover;
-    background-color: #f9fafc;
-    padding: 5px;
-  }
-  .author-profile p {
-    color: #8392a5;
-  }
-  
-  .title {
-    text-align: center;
-  }
-  
-  .post-content {
-    padding: 15px;
-  }
-  
-  .post-content h1,
-  h2 {
-    margin-top: 1.4rem;
-  }
-  
-  .post-content h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 1.3rem;
-  }
-  
-  .post-content blockquote {
-    border-left: 4px solid #248aaa;
-    background-color: #248baa15;
-    padding: 0.3rem;
-    padding-left: 1rem;
-  }
-  
-  .post-content blockquote > p {
-    color: #3c4858;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  .next-prev-navigator {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  
-  .next-prev-navigator a {
-    color: #2098d1;
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator a:hover {
-    color: #3c4858;
-    transition: all 0.3 ease-out;
-  }
-  
-  .next-prev-navigator .next-article {
-    text-align: right;
-  }
-  
-  .next-prev-navigator .next-article a {
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator .previous-article a {
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator .btn-outline-info {
-    color: #f9fafc !important;
-    border-color: #e5e9f2 !important;
-    background-color: #248aaa !important;
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator .next-prev-text {
-    white-space: break-spaces;
-  }
-  
-  .next-prev-navigator .btn-outline-info:hover {
-    color: #3c4858 !important;
-    background-color: #e5e9f2 !important;
-    transition: all 0.3s ease-out;
-  }
-  
-  .disquss {
-    padding: 10px;
-  }
-  
-  .share-buttons .btn {
-    color: #e5e9f2 !important;
-    transition: all 0.3s ease-out !important;
-  }
-  
-  .share-buttons .btn:hover,
-  .share-buttons .btn:focus {
-    background-color: #248aaa !important;
-    border-color: #248aaa !important;
-    transition: all 0.3s ease-out !important;
-  }
-  
-  .share-buttons .facebook-btn {
-    background-color: #4267b2 !important;
-    border-color: #4267b2 !important;
-  }
-  
-  .share-buttons .twitter-btn {
-    background-color: #1da1f2 !important;
-    border-color: #1da1f2 !important;
-  }
-  
-  .share-buttons .reddit-btn {
-    background-color: #ff4500 !important;
-    border-color: #ff4500 !important;
-  }
-  
-  .share-buttons .tumblr-btn {
-    background-color: #34465d !important;
-    border-color: #34465d !important;
-  }
-  
-  .share-buttons .pocket-btn {
-    background-color: #ef4056 !important;
-    border-color: #ef4056 !important;
-  }
-  
-  .share-buttons .linkedin-btn {
-    background-color: #2867b2 !important;
-    border-color: #2867b2 !important;
-  }
-  
-  .share-buttons .diaspora-btn {
-    background-color: #3c4858 !important;
-    border-color: #3c4858 !important;
-  }
-  
-  .share-buttons .mastodon-btn {
-    background-color: #2791da !important;
-    border-color: #2791da !important;
-  }
-  
-  .share-buttons .whatsapp-btn {
-    background-color: #4ac959 !important;
-    border-color: #4ac959 !important;
-  }
-  
-  .share-buttons .email-btn {
-    background-color: #3c4858 !important;
-    border-color: #3c4858 !important;
-    transition: all 0.3s ease-out !important;
-  }
-  
+
   .btn-improve-page {
     text-align: right;
   }
-  
-  .languageSelector {
-    display: none;
-  }
-  
+
   #scroll-to-top {
     position: fixed;
     bottom: 0rem;
@@ -284,29 +197,22 @@ body.kind-page {
     font-size: 24pt;
     z-index: 900000;
     visibility: hidden;
-  }
-  
-  #scroll-to-top i {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    background-color: #f9f9f9;
-    border-radius: 50%;
-  }
-  
-  #scroll-to-top:hover {
-    color: #2098d1;
-  }
-  
-  #scroll-to-top.show {
-    visibility: visible;
-  }
-  .tags {
-    text-align: center;
+
+    &:hover {
+      color: #2098d1;
+    }
+    &.show {
+      visibility: visible;
+    }
+
+    i {
+      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+      background-color: #f9f9f9;
+      border-radius: 50%;
+    }
   }
 
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
+  @include media('<=ultra-large') {
     .content-section {
       flex: 65%;
       max-width: 65%;
@@ -315,191 +221,117 @@ body.kind-page {
       max-width: 100%;
     }
   }
-  
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
-  }
-  
-  @media (max-width: 1200px) {
-  }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
-  
-    .content-section {
-      padding: 0;
-      flex: 60%;
-      max-width: 100%;
-      order: 2;
-      overflow: hidden;
-    }
-    .content {
-      overflow: hidden;
-    }
+
+  @include media('<=large') {
     .container {
       max-width: 100%;
     }
-  
-    .toc-section {
-      order: 3;
-      flex: 0%;
-      max-width: 0%;
-      transition: all ease-out 0.3s;
-    }
-    .toc-section.hide {
-      flex: 40%;
-      max-width: 40%;
-      margin-left: 0.5rem;
-      transition: all ease-out 0.3s;
-    }
-  
-    .toc-holder {
-      top: 3rem;
-      max-height: calc(100vh - 3rem);
-    }
-  
-    .navbar-toggler {
-      display: block;
-    }
-  
-    .navbar-collapse.lang-selector {
-      display: none;
-    }
-  
-    .languageSelector {
-      display: block;
-    }
-  
-    .hero-area {
-      height: 300px;
-      margin-top: 1rem;
-    }
-  
-    .page-content {
-      padding: 0px;
-    }
-  
-    .btn-improve-page {
-      margin-right: 1rem;
-    }
-  
-    #disqus_thread,
-    .dsq-brlink {
-      padding: 5px;
+
+    .wrapper {
+      padding-left: 0px;
+      padding-right: 0px;
+
+      .content-section {
+        padding: 0;
+        flex: 60%;
+        max-width: 100%;
+        order: 2;
+        overflow: hidden;
+
+        .content {
+          overflow: hidden;
+
+          .read-area {
+            .hero-area {
+              height: 300px;
+              margin-top: 1rem;
+            }
+
+            .page-content {
+              padding: 0px;
+            }
+          }
+        }
+      }
+      .toc-section {
+        display: none;
+      }
+
+      .share-buttons {
+        max-width: 48%;
+      }
+
+      .btn-improve-page {
+        margin-right: 1rem;
+        max-width: 48%;
+      }
+
+      #disqus_thread,
+      .dsq-brlink {
+        padding: 5px;
+      }
     }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    #scroll-to-top {
-      right: 8rem;
-    }
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     .wrapper {
       padding: 0px;
       display: flex;
       flex-direction: column;
-    }
-  
-    .content-section {
-      padding: 0;
-      flex: 100%;
-      max-width: 100%;
-      order: 3;
-    }
-  
-    .toc-section {
-      order: 2;
-      width: 100%;
-      height: -moz-fit-content;
-      height: fit-content;
-      max-height: 0;
-      max-width: 100%;
-      transition: all ease-out 0.5s;
-    }
-  
-    .toc-section.hide {
-      margin-top: 2.5rem;
-      position: relative;
-      /* height: fit-content; */
-      flex: 100%;
-      height: -moz-fit-content;
-      height: fit-content;
-      max-height: 200vh;
-      max-width: 100%;
-      margin-left: 0;
-      padding-right: 0;
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-      transition: all ease-out 0.5s;
-    }
-  
-    .toc-holder {
-      max-height: 0;
-      margin-right: 0;
-      overflow: hidden;
-      transition: all ease-out 0.5s;
-    }
-    .toc-section.hide .toc-holder {
-      max-height: 200vh;
-      transition: all ease-out 0.5s;
-    }
-  
-    .navbar-toggler {
-      display: block;
-    }
-  
-    .hero-area {
-      height: 200px;
-      margin-top: 1rem;
-    }
-  
-    .page-content {
-      padding: 0px;
-    }
-  
-    .next-prev-navigator .previous-article {
-      text-align: center;
-      margin: 5px;
-    }
-    .next-prev-navigator .next-article {
-      text-align: center;
-      margin: 5px;
-    }
-    .previous-article a,
-    .next-article a {
-      width: 100%;
-    }
-  
-    #disqus_thread,
-    .dsq-brlink {
-      padding: 5px;
+
+      .content-section {
+        padding: 0;
+        flex: 100%;
+        max-width: 100%;
+        order: 3;
+
+        .content {
+          .read-area {
+            .hero-area {
+              height: 200px;
+              margin-top: 1rem;
+            }
+
+            .page-content {
+              padding: 0px;
+              .next-prev-navigator {
+                .previous-article {
+                  text-align: center;
+                  margin: 5px;
+
+                  a {
+                    width: 100%;
+                  }
+                }
+                .next-article {
+                  text-align: center;
+                  margin: 5px;
+                  a {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .share-buttons {
+        max-width: 100%;
+      }
+
+      .btn-improve-page {
+        text-align: start;
+        max-width: 100%;
+      }
+
+      #scroll-to-top {
+        right: 0.5rem;
+      }
+
+      #disqus_thread,
+      .dsq-brlink {
+        padding: 5px;
+      }
     }
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
-  }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
-  }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index 8316c48..507a6f0 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $breakpoints: (
   tiny: 320px,
   small: 640px,
@@ -8,10 +10,35 @@ $breakpoints: (
   ultra-large: 2560px,
 );
 
-@mixin section-title-adjustment(){
+$brand-colors: (
+  'facebook': #3b5998,
+  'twitter': #1da1f2,
+  'linkedin': #0077b5,
+  'reddit': #ff4500,
+  'tumblr': #35465c,
+  'pocket': #ef4056,
+  'diaspora': #1e1e1e,
+  'whatsapp': #25d366,
+);
+
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin section-title-adjustment() {
   h1 > span {
     margin-top: -55px; /* Size of fixed header */
     padding-bottom: 55px;
     display: block;
   }
 }
+
+@mixin brand-background() {
+  @each $brand, $color in $brand-colors {
+    .bg-#{$brand} {
+      background-color: $color;
+    }
+  }
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c25decc..761f668 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -55,56 +55,56 @@
         <!-- Share or Contribute -->
         <div class="row pl-3 pr-3">
         <!--Social Media Share Buttons-->
-        <div class="col-md-6 share-buttons">
-        {{ if site.Params.features.blog.shareButtons }}
+          <div class="col-md-6 share-buttons">
+          {{ if site.Params.features.blog.shareButtons }}
             <strong>{{ i18n "share_on" }}:</strong>
             {{ if site.Params.features.blog.shareButtons.facebook }}
-            <a class="btn btn-sm facebook-btn" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
+            <a class="btn icon-button bg-facebook" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
               <i class="fab fa-facebook"></i>
             </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.twitter }}
-                <a class="btn btn-sm twitter-btn" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
+                <a class="btn icon-button bg-twitter" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
                   <i class="fab fa-twitter"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.reddit }}
-                <a  class="btn btn-sm reddit-btn" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                <a  class="btn icon-button bg-reddit" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                   <i class="fab fa-reddit"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.tumblr }}
-                <a class="btn btn-sm tumblr-btn" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
+                <a class="btn icon-button bg-tumblr" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
                   <i class="fab fa-tumblr"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.pocket }}
-                <a class="btn btn-sm pocket-btn" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                <a class="btn icon-button bg-pocket" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                   <i class="fab fa-get-pocket"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.linkedin }}
-                <a class="btn btn-sm linkedin-btn" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                <a class="btn icon-button bg-linkedin" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                   <i class="fab fa-linkedin"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.diaspora }}
-                <a class="btn btn-sm diaspora-btn" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
+                <a class="btn icon-button bg-diaspora" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
                   <i class="fab fa-diaspora"></i>
                 </a>
             {{ end }}
              {{ if site.Params.features.blog.shareButtons.mastodon }}
-                <a class="btn btn-sm mastodon-btn" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
+                <a class="btn icon-button bg-mastodon" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
                   <i class="fab fa-mastodon"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.whatsapp }}
-                 <a class="btn btn-sm whatsapp-btn" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
+                 <a class="btn icon-button bg-whatsapp" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
                   <i class="fab fa-whatsapp"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.email }}
-                <a class="btn btn-sm email-btn" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
+                <a class="btn icon-button" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
                   <i class="fas fa-envelope-open-text"></i>
                 </a>
             {{ end }}
diff --git a/layouts/partials/navigators/next-prev-navigator.html b/layouts/partials/navigators/next-prev-navigator.html
index 378c97d..45a8b7d 100644
--- a/layouts/partials/navigators/next-prev-navigator.html
+++ b/layouts/partials/navigators/next-prev-navigator.html
@@ -22,7 +22,7 @@
 <div class="row next-prev-navigator">
   {{ if $prevPage }}
     <div class="col-md-6 previous-article">
-      <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn btn-outline-info">
+      <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn filled-button">
         <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
         <div class="next-prev-text">{{ $prevPage.Title }}</div>
       </a>
@@ -34,7 +34,7 @@
         {{ $columnWidth = "col-md-6" }}
       {{ end}}
       <div class="{{ $columnWidth }} next-article">
-        <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn btn-outline-info">
+        <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn filled-button">
           <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
           <div class="next-prev-text">{{ $nextPage.Title }}</div>
         </a>