diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
index ff723ca..689e122 100644
--- a/assets/styles/components/buttons.scss
+++ b/assets/styles/components/buttons.scss
@@ -1,3 +1,56 @@
+.btn-dark {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+
+  &:hover,
+  &:focus {
+    background-color: #248aaa !important;
+    border-color: #248aaa !important;
+    transition: all 0.3s ease-out !important;
+  }
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+
+  &:hover,
+  &:focus {
+    background-color: #2098d1 !important;
+    color: #e5e9f2 !important;
+  }
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+
+  &:hover,
+  &:focus {
+    background-color: #2098d1 !important;
+    color: #e5e9f2 !important;
+  }
+}
+
+.btn-link {
+  color: #248aaa;
+
+  &:hover,
+  &:focus {
+    color: #207089;
+  }
+}
+
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #8392a5;
+}
+
+
 .tags {
   text-align: left;
 
diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
index b493a1f..d1363e2 100644
--- a/assets/styles/components/cards.scss
+++ b/assets/styles/components/cards.scss
@@ -1,5 +1,43 @@
+.card {
+  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-head{
+    height: 172px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .card-body {
+    text-align: justify;
+  }
+
+  .card-img-top {
+    transition: all 0.3s ease-out !important;
+  }
+
+  .card-img-sm {
+    width: 32px;
+    height: 32px;
+  }
+
+  .card-img-xs {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 .post-card {
-  width: calc(100% / 3);
+  width: 24rem;
   display: inline-flex;
 
   .post-card-link {
@@ -9,35 +47,16 @@
   .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;
 
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index da1758e..4e3b18e 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -166,24 +166,24 @@ body.kind-page {
     }
 
   }
-  @include media('<=small') {
+  @include media('<medium') {
     .post-card {
       margin-left: 1%;
       margin-right: 1%;
       width: 98%;
     }
   }
-  @include media('>=medium') {
+  @include media('>=medium','<large') {
     .post-card {
       width: calc(100% / 2);
     }
   }
-  @include media('>=large') {
+  @include media('>=large','<very-large') {
     .post-card {
       width: calc(100% / 3);
     }
   }
-  @include media('>=very-large') {
+  @include media('>=very-large','<extra-large') {
     .post-card {
       width: calc(100% / 4);
     }
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 6dcec43..a3ea86b 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -63,54 +63,7 @@ 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;
@@ -140,50 +93,6 @@ img.right {
   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;
@@ -420,7 +329,17 @@ mark {
 
 /* --- FOOTER END ---- */
 
-/* ============= Device specific fixes ======= */
+/* ============= Media Query Template ======= */
+@include media('<medium') {
+}
+@include media('>=medium','<large') {
+}
+@include media('>=large','<very-large') {
+}
+@include media('>=very-large','<extra-large') {
+}
+@include media('>=extra-large') {
+}
 
 /* Large screens such as TV */
 @media only screen and (min-width: 1824px) {
diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss
index ee29245..201e500 100644
--- a/assets/styles/sections/about.scss
+++ b/assets/styles/sections/about.scss
@@ -1,20 +1,20 @@
-#about {
+.about-section {
   .social-link {
     list-style: none;
     padding: 0.2rem;
+
+    a {
+      font-size: 1.5rem;
+      color: #3c4858;
+      padding: 0.5rem;
+
+      &:hover {
+        color: #248aaa;
+        transition: all 0.3s ease-in;
+      }
+    }
   }
-  
-  .social-link a {
-    font-size: 1.5rem;
-    color: #3c4858;
-    padding: 0.5rem;
-  }
-  
-  .social-link a:hover {
-    color: #248aaa;
-    transition: all 0.3s ease-in;
-  }
-  
+
   .circular-progress {
     width: 150px;
     height: 150px;
@@ -23,365 +23,330 @@
     margin: 0 auto;
     box-shadow: none;
     position: relative;
-  }
-  
-  .circular-progress:after {
-    content: "";
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 12px solid #f9fafc;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
-  .circular-progress > span {
-    width: 50%;
-    height: 100%;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-  }
-  
-  .circular-progress .circular-progress-left {
-    left: 0;
-  }
-  
-  .circular-progress .circular-progress-bar {
-    width: 100%;
-    height: 100%;
-    background: none;
-    border-width: 12px;
-    border-style: solid;
-    position: absolute;
-    top: 0;
-  }
-  
-  .circular-progress .circular-progress-left .circular-progress-bar {
-    left: 100%;
-    border-top-right-radius: 80px;
-    border-bottom-right-radius: 80px;
-    border-left: 0;
-    transform-origin: center left;
-  }
-  
-  .circular-progress .circular-progress-right {
-    right: 0;
-  }
-  
-  .circular-progress .circular-progress-right .circular-progress-bar {
-    left: -100%;
-    border-top-left-radius: 80px;
-    border-bottom-left-radius: 80px;
-    border-right: 0;
-    transform-origin: center right;
-    animation: circular-loading-1 1.8s linear forwards;
-  }
-  
-  .circular-progress .circular-progress-value {
-    width: 90%;
-    height: 90%;
-    padding: 1rem;
-    border-radius: 50%;
-    background: #3c4858;
-    font-size: 1rem;
-    color: #f9fafc;
-    line-height: initial;
-    text-align: center;
-    position: absolute;
-    top: 5%;
-    left: 5%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .circular-progress.blue .circular-progress-bar {
-    border-color: #048dff;
-  }
-  
-  .circular-progress.yellow .circular-progress-bar {
-    border-color: #eebb4d;
-  }
-  
-  .circular-progress.pink .circular-progress-bar {
-    border-color: #ed63d2;
-  }
-  
-  .circular-progress.green .circular-progress-bar {
-    border-color: #2dca73;
-  }
-  
-  .circular-progress.sky .circular-progress-bar {
-    border-color: #00c9e3;
-  }
-  
-  .circular-progress.orange .circular-progress-bar {
-    border-color: #ff7c7c;
-  }
-  
-  .circular-progress-percentage-50 {
-    animation: circular-loading-50 0s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-55 {
-    animation: circular-loading-55 0.18s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-60 {
-    animation: circular-loading-60 0.36s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-65 {
-    animation: circular-loading-65 0.54s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-70 {
-    animation: circular-loading-70 0.72s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-75 {
-    animation: circular-loading-75 0.9s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-80 {
-    animation: circular-loading-80 1.08s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-85 {
-    animation: circular-loading-85 1.26s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-90 {
-    animation: circular-loading-90 1.44s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-95 {
-    animation: circular-loading-95 1.62s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-100 {
-    animation: circular-loading-100 1.8s linear forwards 1.8s;
-  }
-  
-  @keyframes circular-loading-50 {
-    0% {
-      transform: rotate(0deg);
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 12px solid #f9fafc;
+      position: absolute;
+      top: 0;
+      left: 0;
     }
-    100% {
-      transform: rotate(0deg);
+    span {
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      z-index: 1;
+    }
+    .circular-progress-left {
+      left: 0;
+    }
+    .circular-progress-bar {
+      width: 100%;
+      height: 100%;
+      background: none;
+      border-width: 12px;
+      border-style: solid;
+      position: absolute;
+      top: 0;
+    }
+    .circular-progress-left .circular-progress-bar {
+      left: 100%;
+      border-top-right-radius: 80px;
+      border-bottom-right-radius: 80px;
+      border-left: 0;
+      transform-origin: center left;
+    }
+    .circular-progress-right {
+      right: 0;
+    }
+    .circular-progress-right .circular-progress-bar {
+      left: -100%;
+      border-top-left-radius: 80px;
+      border-bottom-left-radius: 80px;
+      border-right: 0;
+      transform-origin: center right;
+      animation: circular-loading-1 1.8s linear forwards;
+    }
+    .circular-progress-value {
+      width: 90%;
+      height: 90%;
+      padding: 1rem;
+      border-radius: 50%;
+      background: #3c4858;
+      font-size: 1rem;
+      color: #f9fafc;
+      line-height: initial;
+      text-align: center;
+      position: absolute;
+      top: 5%;
+      left: 5%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &.blue .circular-progress-bar {
+      border-color: #048dff;
+    }
+    &.yellow .circular-progress-bar {
+      border-color: #eebb4d;
+    }
+    &.pink .circular-progress-bar {
+      border-color: #ed63d2;
+    }
+    &.green .circular-progress-bar {
+      border-color: #2dca73;
+    }
+    &.sky .circular-progress-bar {
+      border-color: #00c9e3;
+    }
+    &.orange .circular-progress-bar {
+      border-color: #ff7c7c;
+    }
+    .circular-progress-percentage-50 {
+      animation: circular-loading-50 0s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-55 {
+      animation: circular-loading-55 0.18s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-60 {
+      animation: circular-loading-60 0.36s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-65 {
+      animation: circular-loading-65 0.54s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-70 {
+      animation: circular-loading-70 0.72s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-75 {
+      animation: circular-loading-75 0.9s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-80 {
+      animation: circular-loading-80 1.08s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-85 {
+      animation: circular-loading-85 1.26s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-90 {
+      animation: circular-loading-90 1.44s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-95 {
+      animation: circular-loading-95 1.62s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-100 {
+      animation: circular-loading-100 1.8s linear forwards 1.8s;
+    }
+
+    @keyframes circular-loading-50 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+
+    @keyframes circular-loading-55 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(18deg);
+      }
+    }
+
+    @keyframes circular-loading-60 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(36deg);
+      }
+    }
+
+    @keyframes circular-loading-65 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(54deg);
+      }
+    }
+
+    @keyframes circular-loading-70 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(72deg);
+      }
+    }
+
+    @keyframes circular-loading-75 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(90deg);
+      }
+    }
+
+    @keyframes circular-loading-80 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(108deg);
+      }
+    }
+
+    @keyframes circular-loading-85 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(126deg);
+      }
+    }
+
+    @keyframes circular-loading-90 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(144deg);
+      }
+    }
+
+    @keyframes circular-loading-95 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(162deg);
+      }
+    }
+
+    @keyframes circular-loading-100 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(180deg);
+      }
+    }
+
+    @keyframes circular-loading-1 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(180deg);
+      }
+    }
+
+    @keyframes circular-loading-2 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(144deg);
+      }
+    }
+
+    @keyframes circular-loading-3 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(90deg);
+      }
+    }
+
+    @keyframes circular-loading-4 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(36deg);
+      }
+    }
+
+    @keyframes circular-loading-5 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(126deg);
+      }
     }
   }
-  
-  @keyframes circular-loading-55 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(18deg);
-    }
-  }
-  
-  @keyframes circular-loading-60 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(36deg);
-    }
-  }
-  
-  @keyframes circular-loading-65 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(54deg);
-    }
-  }
-  
-  @keyframes circular-loading-70 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(72deg);
-    }
-  }
-  
-  @keyframes circular-loading-75 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(90deg);
-    }
-  }
-  
-  @keyframes circular-loading-80 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(108deg);
-    }
-  }
-  
-  @keyframes circular-loading-85 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(126deg);
-    }
-  }
-  
-  @keyframes circular-loading-90 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(144deg);
-    }
-  }
-  
-  @keyframes circular-loading-95 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(162deg);
-    }
-  }
-  
-  @keyframes circular-loading-100 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(180deg);
-    }
-  }
-  
-  @keyframes circular-loading-1 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(180deg);
-    }
-  }
-  
-  @keyframes circular-loading-2 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(144deg);
-    }
-  }
-  
-  @keyframes circular-loading-3 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(90deg);
-    }
-  }
-  
-  @keyframes circular-loading-4 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(36deg);
-    }
-  }
-  
-  @keyframes circular-loading-5 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(126deg);
-    }
-  }
-  
-  @media only screen and (max-width: 990px) {
+
+  @include media('<=large') {
     .circular-progress {
       margin-bottom: 20px;
     }
   }
-  
-  /* ============= 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') {
     .about-section.container {
       max-width: 100%;
     }
-    
+
     .circular-progress {
       width: 135px;
       height: 135px;
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+  @include media('<=small') {
     .circular-progress {
       width: 150px;
       height: 150px;
     }
-  
+
     .circular-progress .circular-progress-value {
       font-size: 1rem;
     }
   }
-  
-  /* 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) {
+  @include media('<=tiny') {
     .col-6 {
       flex: auto;
       max-width: 100%;
     }
-  
+
     .social-link {
       flex-wrap: wrap;
     }
-  }  
-}
\ No newline at end of file
+    .certificate-badge {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    .circular-progress {
+      width: 200px;
+      height: 200px;
+
+      .circular-progress-left .circular-progress-bar {
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+      }
+      .circular-progress-right .circular-progress-bar {
+        border-top-left-radius: 100px;
+        border-bottom-left-radius: 100px;
+      }
+    }
+  }
+}
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
index e8bb92b..dde264a 100644
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@@ -8,14 +8,15 @@
     padding-bottom: 55px;
     display: block;
   }
-  @include media('<=small') {
+
+  @include media('<medium') {
     .post-card {
       margin-left: 1%;
       margin-right: 1%;
       width: 98%;
     }
   }
-  @include media('<=medium') {
+  @include media('>=medium','<large') {
     .container {
       max-width: 100%;
     }
@@ -23,13 +24,9 @@
       width: calc(100% / 2);
     }
   }
-  @include media('<=large') {
+  @include media('>=large') {
     .post-card {
       width: calc(100% / 3);
     }
   }
-  @include media('<=very-large') {
-  }
-  @include media('<=extra-large') {
-  }
 }
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index cd9e12f..6a6dda5 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -1,4 +1,5 @@
 $breakpoints: (
+  tiny: 320px,
   small: 640px,
   medium: 768px,
   large: 1024px,
diff --git a/exampleSite/package-lock.json b/exampleSite/package-lock.json
new file mode 100644
index 0000000..e03e0b1
--- /dev/null
+++ b/exampleSite/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "exampleSite",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "exampleSite",
+      "version": "0.1.0",
+      "devDependencies": {}
+    }
+  }
+}
diff --git a/exampleSite/package.hugo.json b/exampleSite/package.hugo.json
new file mode 100644
index 0000000..a0ab521
--- /dev/null
+++ b/exampleSite/package.hugo.json
@@ -0,0 +1,4 @@
+{
+  "name": "exampleSite",
+  "version": "0.1.0"
+}
\ No newline at end of file
diff --git a/exampleSite/package.json b/exampleSite/package.json
new file mode 100644
index 0000000..37bcf16
--- /dev/null
+++ b/exampleSite/package.json
@@ -0,0 +1,10 @@
+{
+  "comments": {
+    "dependencies": {},
+    "devDependencies": {}
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "name": "exampleSite",
+  "version": "0.1.0"
+}
diff --git a/layouts/partials/misc/badge.html b/layouts/partials/misc/badge.html
index e78b42c..cfd8eeb 100644
--- a/layouts/partials/misc/badge.html
+++ b/layouts/partials/misc/badge.html
@@ -1,7 +1,7 @@
 <div class="col-6 col-lg-4 p-2">
 {{ if eq .type "certification" }}
     {{/* Verifiable certificate badge from https://www.credly.com */}}
-    <div class="">
+    <div class="certificate-badge">
       <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
        <img src="{{ .badge }}" alt="{{ .name }}" />
       </a>