diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index 0844706..42b2a9e 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -2,6 +2,8 @@
 // TODO: Refactor to use bootstrap sass variable for theming.
 @import 'bootstrap/scss/bootstrap';
 
+@import 'include-media/dist/_include-media';
+
 // The Mulish font, we use font-weight 300 - 700
 @import '@fontsource/mulish/300';
 @import '@fontsource/mulish/index'; // 400
@@ -9,6 +11,8 @@
 @import '@fontsource/mulish/600';
 @import '@fontsource/mulish/700';
 
+@import './variables';
+
 // layouts
 @import './layouts/main';
 @import './layouts/list';
@@ -34,6 +38,11 @@
 @import './sections/publications';
 
 
+// components
+@import './components/cards';
+@import './components/buttons';
+
+
 // override
 @import './override';
 
@@ -61,4 +70,4 @@
       {{ end }}
     {{ end }}
   {{ end }}
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
new file mode 100644
index 0000000..ff723ca
--- /dev/null
+++ b/assets/styles/components/buttons.scss
@@ -0,0 +1,15 @@
+.tags {
+  text-align: left;
+
+  li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+  a {
+    color: #f9fafc;
+  }
+}
diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
new file mode 100644
index 0000000..b493a1f
--- /dev/null
+++ b/assets/styles/components/cards.scss
@@ -0,0 +1,66 @@
+.post-card {
+  width: calc(100% / 3);
+  display: inline-flex;
+
+  .post-card-link {
+    text-decoration: none;
+  }
+
+  .card {
+    margin: 5px;
+    position: relative;
+    box-shadow: none;
+    transition: all 0.3s ease-out;
+    overflow: hidden;
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+      border: 1px solid #fff;
+      transition: all 0.3s ease-out;
+
+      .card-img-top {
+        transform: scale(1.2);
+        transition: all 0.3s ease-out;
+      }
+    }
+
+    .card-head {
+      height: 172px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+
+      .card-img-top {
+        transition: all 0.3s ease-out !important;
+      }
+    }
+    .card-body {
+      text-align: justify;
+      padding: 1.25rem !important;
+      padding-bottom: 0 !important;
+
+      .post-summary {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        max-height: 144px;
+        /* fallback */
+        -webkit-line-clamp: 5;
+        /* number of lines to show */
+        -webkit-box-orient: vertical;
+      }
+    }
+    .card-footer {
+      background: #fff;
+      margin-top: auto;
+
+      span {
+        font-size: 10pt;
+        color: #6c757d !important;
+        padding-top: 5px;
+      }
+    }
+  }
+}
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index d79b7eb..da1758e 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -1,14 +1,16 @@
 // in Hugo, Page kind can be either "section" or "page".
 // if it is section, then it's a page with a list of items, for example /posts
 // if it is page, then it is a single page.
-body.kind-section, body.kind-term, body.kind-page{
+body.kind-section,
+body.kind-term,
+body.kind-page {
   .wrapper {
     display: flex;
     padding: 0;
     margin: 0;
     width: 100%;
   }
-  
+
   .content-section {
     flex: 80%;
     order: 2;
@@ -18,14 +20,14 @@ body.kind-section, body.kind-term, body.kind-page{
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
-  
+
   .content {
     padding: 0;
     position: relative;
     padding-top: 2rem;
     min-height: 130vh;
   }
-  
+
   .post-card-holder {
     margin-top: 32px;
     margin-left: auto;
@@ -33,62 +35,26 @@ body.kind-section, body.kind-term, body.kind-page{
     display: flex;
     flex-flow: wrap;
   }
-  
-  .post-card-holder .post-card {
-    width: calc(100% / 3);
-    display: inline-flex;
-  }
-  
-  .post-card-holder .card {
-    margin: 5px;
-    position: relative;
-  }
-  
-  .post-card-holder .card .card-footer span {
-    font-size: 10pt;
-    color: #6c757d !important;
-    padding-top: 5px;
-  }
-  
-  .post-card-holder .card .card-footer {
-    background: #fff;
-    margin-top: auto;
-  }
-  
-  .post-summary {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    max-height: 144px;
-    /* fallback */
-    -webkit-line-clamp: 5;
-    /* number of lines to show */
-    -webkit-box-orient: vertical;
-  }
-  
-  .post-card-holder .post-card-link {
-    text-decoration: none;
-  }
-  
+
   .paginator {
     width: -moz-fit-content;
     width: fit-content;
     margin: auto;
   }
-  
+
   .paginator .page-item > a {
     color: #248aaa;
   }
-  
+
   .paginator .page-item.active > a {
     background-color: #248aaa;
     color: #f9fafc;
   }
-  
+
   .navbar-toggler {
     display: none;
   }
-  
+
   .pagination {
     margin-left: auto;
     margin-right: auto;
@@ -97,25 +63,9 @@ body.kind-section, body.kind-term, body.kind-page{
     width: -moz-fit-content;
     width: fit-content;
   }
-  
-  .taxonomy-terms-card {
-    text-align: left;
-  }
-  .taxonomy-terms-card li {
-    font-size: 0.5em;
-    list-style-type: none;
-    display: inline-block;
-    background: #248aaa;
-    margin-left: 0.1em;
-    margin-right: 0.1em;
-  }
-  
-  .taxonomy-terms-card a {
-    color: #f9fafc;
-  }
 
   /* ============= Device specific fixes ======= */
-  
+
   /* Large screens such as TV */
   @media only screen and (min-width: 1824px) {
     .content-section {
@@ -124,25 +74,19 @@ body.kind-section, body.kind-term, body.kind-page{
       flex: 85%;
       max-width: 85%;
     }
-    .post-card-holder .post-card {
-      width: calc(100% / 5);
-    }
   }
-  
+
   /* Extra large devices (large desktops, 1200px and up) */
-  
+
   @media (max-width: 1400px) {
     .post-card-holder {
       margin-left: 0px;
     }
-    .post-card-holder .post-card {
-      width: calc(100% / 3);
-    }
   }
-  
+
   @media (max-width: 1200px) {
   }
-  
+
   /* IPad Pro */
   @media (max-width: 1024px) {
     .wrapper {
@@ -155,7 +99,7 @@ body.kind-section, body.kind-term, body.kind-page{
       order: 2;
       padding-bottom: 0.5rem;
     }
-  
+
     .content {
       overflow: hidden;
     }
@@ -165,18 +109,18 @@ body.kind-section, body.kind-term, body.kind-page{
     .navbar-toggler {
       display: block;
     }
-  
+
     #toc-toggler {
       visibility: hidden;
     }
-  
+
     .navbar-collapse.lang-selector {
       display: block !important;
       position: absolute;
       right: 0;
       top: 0.5rem;
     }
-  
+
     .post-card-holder {
       margin: 0;
       margin-top: 1.5rem;
@@ -185,35 +129,10 @@ body.kind-section, body.kind-term, body.kind-page{
       position: relative;
       transition: all ease-out 0.3s;
     }
-  
-    .post-card-holder .post-card {
-      width: calc(100% / 3);
-    }
-  
-    .content-section.hide .post-card-holder .post-card {
-      width: 50%;
-    }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-    .post-card-holder .post-card {
-      width: 50%;
-    }
-  
-    .content-section.hide .post-card-holder .post-card {
-      width: 100%;
-    }
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-  }
-  
+
   /* Small devices (landscape phones, 576px and up) */
-  
+
   @media only screen and (max-width: 576px) {
     .wrapper {
       padding-left: 0px;
@@ -227,41 +146,51 @@ body.kind-section, body.kind-term, body.kind-page{
       padding-left: 0;
       width: 100%;
     }
-  
+
     .content {
       width: 100%;
       padding-left: 0;
       padding-right: 0;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide .content {
       margin-top: 0;
       padding-top: 0;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide .post-card-holder {
       margin-top: 0.5rem;
       transition: all ease-out 0.3s;
     }
-  
-    .post-card-holder .post-card {
+
+  }
+  @include media('<=small') {
+    .post-card {
       margin-left: 1%;
       margin-right: 1%;
       width: 98%;
     }
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
+  @include media('>=medium') {
+    .post-card {
+      width: calc(100% / 2);
+    }
   }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
+  @include media('>=large') {
+    .post-card {
+      width: calc(100% / 3);
+    }
+  }
+  @include media('>=very-large') {
+    .post-card {
+      width: calc(100% / 4);
+    }
+  }
+  @include media('>=extra-large') {
+    .post-card {
+      width: calc(100% / 5);
+    }
   }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-  }  
 }
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 9cb69ca..6dcec43 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -18,500 +18,503 @@ Yellow:  #FFC212
   simpler css approach.
   See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
 */
-*, html {
-    scroll-behavior: smooth !important;
-  }
-  
-  /*
+*,
+html {
+  scroll-behavior: smooth !important;
+}
+
+/*
   Fixes anchor overlapping with header.
   See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors 
   */
-  :target::before {
-    content: "";
-    display: block;
-    height: 2em; /* fixed header height*/
-    margin: -2em 0 0; /* negative fixed header height */
-  }
-  
-  body {
+:target::before {
+  content: '';
+  display: block;
+  height: 2em; /* fixed header height*/
+  margin: -2em 0 0; /* negative fixed header height */
+}
+
+body {
+  background-color: #f9fafc;
+  font-family: 'Mulish';
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #1c2d41;
+}
+
+strong {
+  color: #1c2d41 !important;
+}
+
+p {
+  color: #3c4858;
+}
+
+a {
+  color: #248aaa;
+}
+
+a:hover {
+  color: #207089;
+}
+
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #8392a5;
+}
+
+.btn-dark {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.btn-dark:hover,
+.btn-dark:focus {
+  background-color: #248aaa !important;
+  border-color: #248aaa !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+}
+
+.btn-outline-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-link {
+  color: #248aaa;
+}
+
+.btn-link:hover {
+  color: #207089;
+}
+
+.bg-white {
+  background-color: #f9fafc !important;
+}
+
+.bg-dimmed {
+  background-color: #e5e9f2;
+}
+
+.anchor {
+  padding-top: 3.5rem;
+}
+
+img.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.left {
+  display: block;
+  margin-right: auto;
+}
+
+img.right {
+  display: block;
+  margin-left: auto;
+}
+
+// .card {
+//   box-shadow: none;
+//   transition: all 0.3s ease-out;
+//   overflow: hidden;
+// }
+
+.card-img-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.card-img-xs {
+  width: 24px;
+  height: 24px;
+}
+
+// .card:hover,
+// .card:focus {
+//   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+//   border: 1px solid #fff;
+//   transition: all 0.3s ease-out;
+// }
+
+// .card .card-head {
+//   height: 172px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   overflow: hidden;
+// }
+
+// .card-img-top {
+//   transition: all 0.3s ease-out !important;
+// }
+
+// .card:hover .card-head .card-img-top,
+// .card:focus .card-head .card-img-top {
+//   transition: all 0.3s ease-out;
+//   transform: scale(1.2);
+// }
+
+// .card-body {
+//   text-align: justify;
+// }
+
+.sub-title {
+  color: #c0ccda;
+  font-size: 10pt;
+}
+
+.flag-icon {
+  width: 16px !important;
+  margin-top: 3px;
+  margin-right: 3px;
+}
+
+/* ====== table ====== */
+table {
+  border-radius: 0.1rem;
+  background: #e5e9f2;
+  border: 1px solid #c0ccda;
+  padding: 0.1rem;
+}
+
+table tr {
+  height: 40px !important;
+}
+
+table th,
+td {
+  padding: 0.5rem;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+
+table thead tr {
+  background: #248aaa;
+  color: #e5e9f2;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #e5e9f2;
+}
+
+tbody tr:hover {
+  background: #c0ccda;
+}
+
+/* ====== don't apply css to tables inside gist ====== */
+.gist table {
+  border-radius: unset;
+  background: unset;
+  border: unset;
+  padding: unset;
+}
+
+.gist table tr {
+  height: unset !important;
+}
+
+.gist table th,
+td {
+  padding: unset;
+  border-left: unset;
+  border-bottom: unset;
+}
+
+.gist table thead tr {
+  background: unset;
+  color: unset;
+}
+
+.gist tbody tr:nth-child(odd) {
+  background-color: unset;
+}
+
+.gist tbody tr:hover {
+  background: unset;
+}
+
+.gist table td,
+.gist table tc {
+  border-right: 1px solid #eee;
+}
+
+figure {
+  border: 1px solid #c0ccda;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  align-self: center;
+  margin: auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: #8392a5;
+}
+
+pre {
+  margin: 5px;
+}
+
+pre > code {
+  padding: 10px !important;
+}
+
+a.header-anchor {
+  text-decoration: none;
+  color: #1c2d41;
+}
+
+a.header-anchor i,
+a.header-anchor svg {
+  font-size: 10pt;
+  color: #3c4858;
+  display: none;
+  margin-left: 0.5rem;
+}
+a.header-anchor:hover i,
+a.header-anchor:hover svg {
+  display: inline-block;
+}
+a.header-anchor code {
+  color: #e83e8c;
+}
+
+.content ul > ol,
+.content ol > ul,
+.content ul > ul,
+.content ol > ol,
+.content li > ol,
+.content li > ul {
+  -webkit-padding-start: 1rem;
+  padding-inline-start: 1rem;
+}
+
+kbd {
+  background-color: #248aaa !important;
+  color: #f9fafc;
+}
+
+mark {
+  background-color: #ffc21280;
+}
+
+/* ======= Paginator ========= */
+.paginator {
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: auto;
+  vertical-align: bottom;
+}
+
+.paginator .page-item > a {
+  color: #248aaa;
+}
+
+.paginator .page-item.active > a {
+  background-color: #248aaa;
+  color: #f9fafc;
+}
+
+/* --- FOOTER START --- */
+
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+}
+
+.footer h5 {
+  color: #c0ccda;
+}
+.footer a {
+  color: #8392a5;
+  transition: all 0.3s ease-out;
+}
+
+.footer a:hover {
+  margin-left: 5px;
+  transition: all 0.3s ease-out;
+}
+
+.footer ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer li {
+  margin-top: 5px;
+}
+
+.footer hr {
+  background-color: #8392a5;
+}
+
+.footer p:first-child {
+  color: #c0ccda;
+}
+
+.footer input {
+  background-color: #c0ccda;
+}
+
+.footer input:focus {
+  background-color: #e5e9f2;
+}
+
+.footer #disclaimer {
+  color: #8392a5 !important;
+  text-align: justify;
+}
+.footer #disclaimer > strong {
+  color: #c0ccda !important;
+}
+
+.footer #theme {
+  color: #c0ccda;
+}
+
+.footer #theme img {
+  width: 32px;
+}
+
+.footer #hugo:hover {
+  margin-right: 5px;
+  transition: all 0.3s ease-out;
+}
+
+/* --- FOOTER END ---- */
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .content-section .languageSelector {
+    position: fixed;
+    right: 0.5rem;
+    bottom: 1rem;
+    z-index: 10000000;
     background-color: #f9fafc;
-    font-family: "Mulish";
-  }
-  
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    color: #1c2d41;
-  }
-  
-  strong {
-    color: #1c2d41 !important;
-  }
-  
-  p {
-    color: #3c4858;
-  }
-  
-  a {
-    color: #248aaa;
-  }
-  
-  a:hover {
-    color: #207089;
-  }
-  
-  .nav-button {
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    color: #8392a5;
-  }
-  
-  .btn-dark {
-    background-color: #3c4858!important;
-    border-color: #3c4858!important;
-    color: #e5e9f2!important;
-    transition: all 0.3s ease-out!important;
-  }
-  
-  .btn-dark:hover,
-  .btn-dark:focus {
-    background-color: #248aaa!important;
-    border-color: #248aaa!important;
-    transition: all 0.3s ease-out!important;
-  }
-  
-  .btn-outline-info {
-    color: #2098d1 !important;
-    border-color: #2098d1 !important;
-  }
-  
-  .btn-outline-info:hover {
-    background-color: #2098d1 !important;
-    color: #e5e9f2 !important;
-  }
-  
-  .btn-info {
-    background-color: #248aaa !important;
-    color: #e5e9f2 !important;
-  }
-  
-  .btn-info:hover {
-    background-color: #2098d1 !important;
-    color: #e5e9f2 !important;
-  }
-  
-  .btn-link {
-    color: #248aaa;
-  }
-  
-  .btn-link:hover {
-    color: #207089;
-  }
-  
-  .bg-white {
-    background-color: #f9fafc !important;
-  }
-  
-  .bg-dimmed {
-    background-color: #e5e9f2;
-  }
-  
-  .anchor {
-    padding-top: 3.5rem;
-  }
-  
-  img.center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  
-  img.left {
-    display: block;
-    margin-right: auto;
-  }
-  
-  img.right {
-    display: block;
-    margin-left: auto;
-  }
-  
-  .card {
-    box-shadow: none;
-    transition: all 0.3s ease-out;
-    overflow: hidden;
-  }
-  
-  .card-img-sm {
-    width: 32px;
-    height: 32px;
-  }
-  
-  .card-img-xs {
-    width: 24px;
-    height: 24px;
-  }
-  
-  .card:hover,
-  .card:focus {
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    border: 1px solid #fff;
-    transition: all 0.3s ease-out;
   }
-  
-  .card .card-head {
-    height: 172px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-  }
-  
-  .card-img-top {
-    transition: all 0.3s ease-out !important;
-  }
-  
-  .card:hover .card-head .card-img-top,
-  .card:focus .card-head .card-img-top {
-    transition: all 0.3s ease-out;
-    transform: scale(1.2);
-  }
-  
-  .card-body {
-    text-align: justify;
-  }
-  
-  .sub-title {
-    color: #c0ccda;
-    font-size: 10pt;
-  }
-  
-  .flag-icon {
-    width: 16px !important;
-    margin-top: 3px;
-    margin-right: 3px;
-  }
-  
-  /* ====== table ====== */
-  table {
-    border-radius: 0.1rem;
-    background: #e5e9f2;
-    border: 1px solid #c0ccda;
-    padding: 0.1rem;
-  }
-  
-  table tr {
-    height: 40px !important;
-  }
-  
-  table th,
-  td {
-    padding: 0.5rem;
-    border-left: 1px solid #8392a5;
-    border-bottom: 1px solid #8392a5;
-  }
-  
-  table thead tr {
-    background: #248aaa;
-    color: #e5e9f2;
-  }
-  
-  tbody tr:nth-child(odd) {
-    background-color: #e5e9f2;
-  }
-  
-  tbody tr:hover {
-    background: #c0ccda;
-  }
-  
-  /* ====== don't apply css to tables inside gist ====== */
-  .gist table {
-    border-radius: unset;
-    background: unset;
-    border: unset;
-    padding: unset;
-  }
-  
-  .gist table tr {
-    height: unset !important;
-  }
-  
-  .gist table th,
-  td {
-    padding: unset;
-    border-left: unset;
-    border-bottom: unset;
-  }
-  
-  .gist table thead tr {
-    background: unset;
-    color: unset;
-  }
-  
-  .gist tbody tr:nth-child(odd) {
-    background-color: unset;
-  }
-  
-  .gist tbody tr:hover {
-    background: unset;
-  }
-  
-  .gist table td, .gist table tc{
-    border-right: 1px solid #eee;
-  }
-  
-  figure {
-    border: 1px solid #c0ccda;
-    height: -moz-fit-content;
-    height: fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-self: center;
-    margin: auto;
-  }
-  
-  img {
-    max-width: 100%;
-  }
-  
-  caption,
-  figcaption {
-    caption-side: bottom;
-    text-align: center;
-    color: #8392a5;
-  }
-  
   pre {
-    margin: 5px;
+    margin: 0px;
   }
-  
-  pre > code {
-    padding: 10px !important;
+  code {
+    padding: 0px;
   }
-  
-  a.header-anchor {
-    text-decoration: none;
-    color: #1c2d41;
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .skills-section .container,
+  .projects-section .container,
+  .publications-section .container {
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
   }
-  
-  a.header-anchor i, a.header-anchor svg {
-    font-size: 10pt;
-    color: #3c4858;
-    display: none;
-    margin-left: 0.5rem;
+
+  .section-holder {
+    padding-left: 5px;
+    padding-right: 5px;
   }
-  a.header-anchor:hover i, a.header-anchor:hover svg {
-    display: inline-block;
-  }
-  a.header-anchor code {
-    color: #e83e8c;
-  }
-  
-  .content ul > ol,
-  .content ol > ul,
-  .content ul > ul,
-  .content ol > ol,
-  .content li > ol,
-  .content li > ul {
-    -webkit-padding-start: 1rem;
-    padding-inline-start: 1rem;
-  }
-  
-  kbd {
-    background-color: #248aaa !important;
-    color: #f9fafc;
-  }
-  
-  mark {
-    background-color: #ffc21280;
-  }
-  
-  /* ======= Paginator ========= */
-  .paginator {
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: auto;
-    vertical-align: bottom;
-  }
-  
-  .paginator .page-item > a {
-    color: #248aaa;
-  }
-  
-  .paginator .page-item.active > a {
-    background-color: #248aaa;
-    color: #f9fafc;
-  }
-  
-  /* --- FOOTER START --- */
-  
-  .footer {
-    color: #8392a5 !important;
-    background-color: #1c2d41;
-    position: relative;
-    z-index: 9999;
-  }
-  
-  .footer h5 {
-    color: #c0ccda;
-  }
-  .footer a {
-    color: #8392a5;
-    transition: all 0.3s ease-out;
-  }
-  
-  .footer a:hover {
-    margin-left: 5px;
-    transition: all 0.3s ease-out;
-  }
-  
-  .footer ul {
-    list-style: none;
+
+  .skills-section,
+  .projects-section,
+  .recent-posts-section,
+  .achievements-section,
+  .publications-section {
     padding-left: 0;
+    padding-right: 0;
   }
-  
-  .footer li {
-    margin-top: 5px;
+
+  pre {
+    margin: 0px;
   }
-  
-  .footer hr {
-    background-color: #8392a5;
+  code {
+    padding: 0px;
   }
-  
-  .footer p:first-child {
-    color: #c0ccda;
+
+  h1 {
+    font-size: 2.2rem;
   }
-  
-  .footer input {
-    background-color: #c0ccda;
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+  h1 {
+    font-size: 2rem;
   }
-  
-  .footer input:focus {
-    background-color: #e5e9f2;
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+  h1 {
+    font-size: 1.8rem;
   }
-  
-  .footer #disclaimer{
-    color: #8392a5 !important;
-    text-align: justify;
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+  h1 {
+    font-size: 1.5rem;
   }
-  .footer #disclaimer>strong{
-    color: #c0ccda!important;
-  }
-  
-  .footer #theme {
-    color: #c0ccda;
-  }
-  
-  .footer #theme img {
-    width: 32px;
-  }
-  
-  .footer #hugo:hover {
-    margin-right: 5px;
-    transition: all 0.3s ease-out;
-  }
-  
-  /* --- FOOTER END ---- */
-  
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
-  }
-  
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
-  }
-  
-  @media (max-width: 1200px) {
-  }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-    .content-section .languageSelector {
-      position: fixed;
-      right: 0.5rem;
-      bottom: 1rem;
-      z-index: 10000000;
-      background-color: #f9fafc;
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    }
-    pre {
-      margin: 0px;
-    }
-    code {
-      padding: 0px;
-    }
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-    .skills-section .container,
-    .projects-section .container,
-    .publications-section .container {
-      padding-left: 0.3rem;
-      padding-right: 0.3rem;
-    }
-  
-    .section-holder {
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-  
-    .skills-section,
-    .projects-section,
-    .recent-posts-section,
-    .achievements-section,
-    .publications-section {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  
-    pre {
-      margin: 0px;
-    }
-    code {
-      padding: 0px;
-    }
-  
-    h1 {
-      font-size: 2.2rem;
-    }
-  }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
-    h1 {
-      font-size: 2rem;
-    }
-  }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
-    h1 {
-      font-size: 1.8rem;
-    }
-  }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-    h1 {
-      font-size: 1.5rem;
-    }
-  }
-  
+}
diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss
index 5ffda3b..2ece70b 100644
--- a/assets/styles/layouts/single.scss
+++ b/assets/styles/layouts/single.scss
@@ -299,22 +299,10 @@ body.kind-page {
   #scroll-to-top.show {
     visibility: visible;
   }
-  .taxonomy-terms {
+  .tags {
     text-align: center;
   }
-  .taxonomy-terms li {
-    font-size: 0.8em;
-    list-style-type: none;
-    display: inline-block;
-    background: #248aaa;
-    margin-left: 0.2em;
-    margin-right: 0.2em;
-  }
-  
-  .taxonomy-terms a {
-    color: #f9fafc;
-  }
-  
+
   /* ============= Device specific fixes ======= */
   
   /* Large screens such as TV */
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
index 1b30c8b..e8bb92b 100644
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@@ -2,110 +2,34 @@
   .container {
     padding-top: 1rem;
   }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
-  }
-  
-  .card {
-    height: 100%;
-    min-height: 100%;
-  }
-  
-  .card .card-footer span {
-    font-size: 10pt;
-    color: #6c757d !important;
-    padding-top: 5px;
-  }
-  
-  .card .card-footer {
-    background: #fff;
-    margin-top: auto;
-  }
-  
-  .post-card-link {
-    text-decoration: none;
-  }
-  
-  .post-summary {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    /* line-height: 24px;     fallback */
-    max-height: 144px; /* fallback */
-    -webkit-line-clamp: 5; /* number of lines to show */
-    -webkit-box-orient: vertical;
-  }
 
-  .taxonomy-terms {
-    text-align: left;
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
   }
-  .taxonomy-terms li {
-    font-size: 0.5em;
-    list-style-type: none;
-    display: inline-block;
-    background: #248aaa;
-    margin-left: 0.2em;
-    margin-right: 0.2em;
+  @include media('<=small') {
+    .post-card {
+      margin-left: 1%;
+      margin-right: 1%;
+      width: 98%;
+    }
   }
-  
-  .taxonomy-terms a {
-    color: #f9fafc;
-  }
-  
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
-  }
-  
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
-  }
-  
-  @media (max-width: 1200px) {
-  }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+  @include media('<=medium') {
     .container {
       max-width: 100%;
     }
     .post-card {
-      width: 50%;
+      width: calc(100% / 2);
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+  @include media('<=large') {
     .post-card {
-      width: 100%;
+      width: calc(100% / 3);
     }
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
+  @include media('<=very-large') {
   }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
+  @include media('<=extra-large') {
   }
-  
-  /* 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
new file mode 100644
index 0000000..cd9e12f
--- /dev/null
+++ b/assets/styles/variables.scss
@@ -0,0 +1,8 @@
+$breakpoints: (
+  small: 640px,
+  medium: 768px,
+  large: 1024px,
+  very-large: 1280px,
+  extra-large: 1536px,
+  ultra-large: 2560px,
+);
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a5ce0ca..17ebd64 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -46,14 +46,7 @@
           <h1>{{ .Page.Title }}</h1>
         </div>
         {{ if site.Params.features.tags.enable }}
-        <div class="taxonomy-terms">
-          <ul style="padding-left: 0;">
-            {{ range .Params.tags }}
-            {{ $url:= printf "tags/%s/" . }}
-            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
-            {{ end }}
-          </ul>
-        </div>
+          {{partial "misc/tags.html" .Params.tags }}
         {{ end }}
         <div class="post-content" id="post-content">
           {{ .Page.Content }}
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index e313d02..4d2e9f8 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -7,18 +7,11 @@
       <div class="card-body">
         <h5 class="card-title">{{ .Title }}</h5>
         <p class="card-text post-summary">{{ .Summary }}</p>
+        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
+          {{ partial "misc/tags.html" .Params.tags }}
+        {{ end }}
       </div>
       <div class="card-footer">
-        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
-        <div class="taxonomy-terms-card">
-          <ul style="padding-left: 0;">
-            {{ range .Params.tags }}
-            {{ $url:= printf "tags/%s/" . }}
-            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
-            {{ end }}
-          </ul>
-        </div>
-        {{ end }}
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
         <a
         href="{{ .RelPermalink | relLangURL }}"
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html
deleted file mode 100644
index 753fedf..0000000
--- a/layouts/partials/cards/recent-post.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="col-lg-4 col-md-6 pt-2 post-card">
-  <a href="{{ .RelPermalink }}" title="{{ .Title }}" class="post-card-link">
-    <div class="card">
-      <div class="card-head">
-        <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
-          alt="Card image cap"
-        />
-      </div>
-      <div class="card-body">
-        <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summary"> {{ .Summary }}</p>
-      </div>
-      <div class="card-footer">
-        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
-        <div class="taxonomy-terms">
-          <ul style="padding-left: 0;">
-            {{ range .Params.tags }}
-            {{ $url:= printf "tags/%s/" . }}
-            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
-            {{ end }}
-          </ul>
-        </div>
-        {{ end }}
-        <span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
-        <a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
-      </div>
-    </div>
-  </a>
-</div>
diff --git a/layouts/partials/misc/tags.html b/layouts/partials/misc/tags.html
new file mode 100644
index 0000000..166fde5
--- /dev/null
+++ b/layouts/partials/misc/tags.html
@@ -0,0 +1,8 @@
+<div class="tags">
+    <ul style="padding-left: 0;">
+      {{ range . }}
+      {{ $url:= printf "tags/%s/" . }}
+      <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+      {{ end }}
+    </ul>
+</div>
diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html
index bb1bc40..87792b4 100644
--- a/layouts/partials/sections/recent-posts.html
+++ b/layouts/partials/sections/recent-posts.html
@@ -20,7 +20,7 @@
   <div class="container">
     <div class="row" id="recent-post-cards">
       {{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }}
-        {{ partial "cards/recent-post.html" . }}
+        {{ partial "cards/post.html" . }}
       {{ end }}
     </div>
   </div>
diff --git a/package.hugo.json b/package.hugo.json
index c000e52..3ae562b 100644
--- a/package.hugo.json
+++ b/package.hugo.json
@@ -43,6 +43,7 @@
     "mark.js": "^8.11.1",
     "mermaid": "^9.2.1",
     "plyr": "^3.7.2",
-    "popper.js": "^1.16.1"
+    "popper.js": "^1.16.1",
+    "include-media": "^1.4.10"
   }
 }