diff --git a/assets/stylesheets/course.css b/assets/stylesheets/course.css
index 779ebf9..90efaf3 100644
--- a/assets/stylesheets/course.css
+++ b/assets/stylesheets/course.css
@@ -1,4 +1,4 @@
-.course-card {
+@block course-card {
   display: flex;
   flex-direction: column;
   min-height: 30vh;
@@ -10,38 +10,35 @@
   & > * + * {
     margin-top: var(--grid-gutter);
   }
-}
 
-.course-card__categories {
-  flex: 0 0 var(--line-height);
-  color: var(--color-text-grey);
+  @element categories{
+    flex: 0 0 var(--line-height);
+  }
 
-  & a {
+  @element category{
     display: inline-block;
     margin-right: var(--grid-gutter);
+    color: var(--color-text-grey);
   }
-}
 
-.course-card__title {
-  flex: 1 1 auto;
-
-  & h2 {
-    margin: 0;
+  @element title {
+    flex: 1 1 auto;
+    margin-bottom: 0;
   }
-}
 
-.course-card__description {
-  flex: 1 1 auto;
+  @element description-wrapper {
+    flex: 1 1 auto;
 
-  & p {
-    margin: 0;
+    & p {
+      margin: 0;
+    }
   }
-}
 
-.course-card__link {
-  flex: 0 0 auto;
+  @element link-wapper {
+    flex: 0 0 auto;
+  }
 
-  & a {
+  @element link {
     display: inline-block;
     padding-bottom: 0.3em;
     border-bottom: 1px solid var(--color-link-content);
diff --git a/assets/stylesheets/footer.css b/assets/stylesheets/footer.css
index a1696b6..0cc2f43 100644
--- a/assets/stylesheets/footer.css
+++ b/assets/stylesheets/footer.css
@@ -1,66 +1,68 @@
-#footer {
+@block footer {
   margin: var(--grid-gutter) 0;
   padding-top: var(--grid-gutter);
 
   border-top: 2px solid var(--color-bg-separator);
 
-  & .upper {
+  @element upper {
     display: flex;
 
     & > * {
       display: flex;
       align-items: center;
     }
+  }
 
-    & .navigation {
-      flex: 1 0 auto;
-      font-size: 0.9em;
+  @element navigation {
+    flex: 1 0 auto;
+    font-size: 0.9em;
 
-      & ul {
-        display: flex;
-        list-style: none;
+    & ul {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      & li {
         margin: 0;
-        padding: 0;
 
-        & li {
-          margin: 0;
-
-          & + li {
-            margin-left: calc(var(--grid-gutter) * 2);
-          }
-        }
-      }
-    }
-
-    & .apps {
-      flex: 0 0 auto;
-
-      & a {
-        display: inline-block;
-        width: 150px;
-
-        & + a {
-          margin-left: var(--grid-gutter);
-        }
-
-        & img {
-          width: 100%;
-          height: auto;
+        & + li {
+          margin-left: calc(var(--grid-gutter) * 2);
         }
       }
     }
   }
-  & .lower {
-    display: flex;
 
-    & .disclaimer {
-      flex: 1 0 auto;
-      font-size: 0.7em;
-      color: var(--color-text-grey);
-    }
-    & .social {
-      flex: 0 0 auto;
+  @element apps {
+    flex: 0 0 auto;
+
+    & a {
+      display: inline-block;
+      width: 150px;
+
+      & + a {
+        margin-left: var(--grid-gutter);
+      }
+
+      & img {
+        width: 100%;
+        height: auto;
+      }
     }
   }
+
+  @element lower {
+    display: flex;
+  }
+
+  @element disclaimer {
+    flex: 1 0 auto;
+    font-size: 0.7em;
+    color: var(--color-text-grey);
+  }
+
+  @element social {
+    flex: 0 0 auto;
+  }
 }
 
diff --git a/assets/stylesheets/global.css b/assets/stylesheets/global.css
index fbae7a5..be944fb 100644
--- a/assets/stylesheets/global.css
+++ b/assets/stylesheets/global.css
@@ -31,31 +31,32 @@ body {
   }
 }
 
-.wrapper-with-sidebar {
+@block wrapper-with-sidebar {
   @media (--breakpoint-desktop) {
     display: flex;
   }
-}
 
-.wrapper__sidebar {
-  @media (--breakpoint-desktop) {
-    flex: 0 0 220px;
-    padding: var(--grid-gutter);
-    border-radius: 7px;
-    box-shadow: var(--card-box-shadow);
+  @element sidebar {
+    @media (--breakpoint-desktop) {
+      flex: 0 0 220px;
+      padding: var(--grid-gutter);
+      border-radius: 7px;
+      box-shadow: var(--card-box-shadow);
 
-    & > h2 {
-      margin-bottom: calc(var(--grid-gutter) * 3);
+      & > h2 {
+        margin-bottom: calc(var(--grid-gutter) * 3);
+      }
     }
   }
-}
-.wrapper__content {
-  padding: var(--grid-gutter) 0;
 
-  @media (--breakpoint-desktop) {
-    flex: 1 1 auto;
-    margin-left: var(--grid-gutter);
-    overflow: hidden;
+  @element content {
+    padding: var(--grid-gutter) 0;
+
+    @media (--breakpoint-desktop) {
+      flex: 1 1 auto;
+      margin-left: var(--grid-gutter);
+      overflow: hidden;
+    }
   }
 }
 
diff --git a/assets/stylesheets/header.css b/assets/stylesheets/header.css
index 5508ec6..1f0c27d 100644
--- a/assets/stylesheets/header.css
+++ b/assets/stylesheets/header.css
@@ -1,4 +1,4 @@
-#header {
+@block header {
   display: flex;
   flex-wrap: wrap;
 
@@ -11,13 +11,9 @@
     flex-wrap: nowrap;
   }
 
-  & .header__logo,
-  & .header__navarea {
+  @element logo {
     display: flex;
     flex: 0 0 100%;
-  }
-
-  & .header__logo {
     align-items: center;
 
     @media (--breakpoint-desktop) {
@@ -25,7 +21,9 @@
     }
   }
 
-  & .header__navarea {
+  @element navarea {
+    display: flex;
+    flex: 0 0 100%;
     flex-direction: column;
     justify-content: space-around;
 
@@ -35,7 +33,7 @@
     }
   }
 
-  & .navigation {
+  @element navigation {
     & ul {
       display: flex;
       list-style: none;
@@ -74,45 +72,44 @@
       }
     }
   }
-}
 
-.header__navarea {
-  & form {
-    display: flex;
-    flex-wrap: wrap;
+  @element navarea {
+    & form {
+      display: flex;
+      flex-wrap: wrap;
 
-    @media (--breakpoint-desktop) {
-      justify-content: flex-end;
-    }
-
-    & > * {
-      flex: 0 0 auto;
-    }
-
-    & fieldset {
-      padding: 0.2em 1em;
-      margin: 0;
-      border: none;
-      background: var(--color-bg-grey);
-      color: var(--color-text-grey);
-      border-radius: var(--border-radius);
-      font-size: 0.8em;
-
-      & + fieldset {
-        margin-left: var(--grid-gutter)
+      @media (--breakpoint-desktop) {
+        justify-content: flex-end;
       }
 
-      & label + select {
-        margin-left: 0.5em;
+      & > * {
+        flex: 0 0 auto;
       }
 
-      & select,
-      & label {
-        display: inline-block;
-        margin-top: 0;
-        margin-bottom: 0;
+      & fieldset {
+        padding: 0.2em 1em;
+        margin: 0;
+        border: none;
+        background: var(--color-bg-grey);
+        color: var(--color-text-grey);
+        border-radius: var(--border-radius);
+        font-size: 0.8em;
+
+        & + fieldset {
+          margin-left: var(--grid-gutter)
+        }
+
+        & label + select {
+          margin-left: 0.5em;
+        }
+
+        & select,
+        & label {
+          display: inline-block;
+          margin-top: 0;
+          margin-bottom: 0;
+        }
       }
     }
   }
 }
-
diff --git a/assets/stylesheets/homepage.css b/assets/stylesheets/homepage.css
deleted file mode 100644
index 5027548..0000000
--- a/assets/stylesheets/homepage.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.hero {
-  display: flex;
-  justify-content: space-between;
-}
-.hero__image {
-  background-color: #20B5B6;
-  width: 65%;
-  height: 600px;
-  border-radius: .375rem;
-  box-shadow: var(--card-box-shadow);
-}
-.featured-cards-list {
-  width: 30%;
-  height: 600px;
-  display:flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.featured-cards__list {
-  background-color: #00AAE0;
-  height: 150px;
-  border-radius: .375rem;
-  box-shadow: var(--card-box-shadow);
-}
diff --git a/assets/stylesheets/module-landing.css b/assets/stylesheets/module-landing.css
index 12074f7..58d45f5 100644
--- a/assets/stylesheets/module-landing.css
+++ b/assets/stylesheets/module-landing.css
@@ -7,7 +7,6 @@
     padding: 0;
   }
 
-
   & img {
     width: 100%;
     height: auto;
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
index 4e4908d..19187a1 100644
--- a/assets/stylesheets/style.css
+++ b/assets/stylesheets/style.css
@@ -11,7 +11,6 @@
 @import './header';
 @import './footer';
 
-@import './homepage';
 @import './course';
 @import './module-landing';
 @import './module-lesson';
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index 0578d2f..980c828 100644
--- a/assets/stylesheets/variables.css
+++ b/assets/stylesheets/variables.css
@@ -1,7 +1,7 @@
 @custom-media --breakpoint-desktop (min-width: 700px);
 
 :root {
-  --grid-gutter: 1rem;
+  --grid-gutter: 22px;
   --border-radius: 3px;
 
   --line-height: 1.5em;
diff --git a/package.json b/package.json
index a9c1a72..56c97ce 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "eslint-plugin-standard": "^2.0.1",
     "nodemon": "^1.12.1",
     "postcss": "^6.0.12",
+    "postcss-atrule-bem": "^3.0.1",
     "postcss-browser-reporter": "^0.5.0",
     "postcss-cli": "^4.1.1",
     "postcss-cssnext": "^3.0.2",
diff --git a/postcss.config.js b/postcss.config.js
index 642475d..84bd277 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,6 +2,7 @@ module.exports = {
   plugins: {
     'postcss-import': {},
     'postcss-url': {},
+    'postcss-atrule-bem': {},
     'postcss-cssnext': {},
     'postcss-browser-reporter': {},
     'postcss-reporter': {}
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index cc77ec9..66b2b33 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -502,8 +502,7 @@ fieldset,
   vertical-align: top;
 
   display: block;
-  margin: 16px 0;
-  margin: 1rem 0;
+  margin: 22px 0;
   text-align: left;
 }
 
@@ -514,15 +513,13 @@ datalist {
 
 label {
   display: block;
-  margin: 16px 0;
-  margin: 1rem 0;
+  margin: 22px 0;
   text-align: left;
   font-weight: bold
 }
 
 label + input {
-  margin-top: -8px;
-  margin-top: -0.5rem;
+  margin-top: -11px;
 }
 
 /* Input & Textarea ------------------ */
@@ -701,15 +698,13 @@ input[type="reset"]:focus,
 }
 
 .form-item + .form-item {
-  margin-top: 16px;
-  margin-top: 1rem;
+  margin-top: 22px;
 }
 
 .form-item .help-text {
   font-size: 0.9em;
   color: #8091a5;
-  margin-top: -16px;
-  margin-top: -1rem;
+  margin-top: -22px;
 }
 
 /*
@@ -874,33 +869,32 @@ body {
 
 @media (min-width: 700px) {
 
-  .wrapper__sidebar {
+  .wrapper-with-sidebar__sidebar {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 220px;
             flex: 0 0 220px;
-    padding: 1rem;
+    padding: 22px;
     border-radius: 7px;
     -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
             box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
   }
 
-  .wrapper__sidebar > h2 {
-    margin-bottom: 3rem;
+  .wrapper-with-sidebar__sidebar > h2 {
+    margin-bottom: 66px;
   }
 }
 
-.wrapper__content {
-  padding: 16px 0;
-  padding: 1rem 0;
+.wrapper-with-sidebar__content {
+    padding: 22px 0;
 }
 
 @media (min-width: 700px) {
 
-  .wrapper__content {
+  .wrapper-with-sidebar__content {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
-    margin-left: 1rem;
+    margin-left: 22px;
     overflow: hidden;
   }
 }
@@ -914,26 +908,24 @@ body {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin: 0 -8px;
-  margin: 0 -0.5rem
+  margin: 0 -11px
 }
 
 .grid-list > * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  margin: 0 8px 16px;
-  margin: 0 0.5rem 1rem;
+  margin: 0 11px 22px;
   -webkit-box-flex: 0;
-      -ms-flex: 0 0 calc(50% - 1rem);
-          flex: 0 0 calc(50% - 1rem);
+      -ms-flex: 0 0 calc(50% - 22px);
+          flex: 0 0 calc(50% - 22px);
 }
 
 @media (min-width: 700px) {
 
   .grid-list > * {
     -webkit-box-flex: 0;
-        -ms-flex: 0 0 calc(33% - 1rem);
-            flex: 0 0 calc(33% - 1rem);
+        -ms-flex: 0 0 calc(33% - 22px);
+            flex: 0 0 calc(33% - 22px);
   }
 }
 
@@ -946,32 +938,27 @@ body {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin: 0 -8px;
-  margin: 0 -0.5rem
+  margin: 0 -11px
 }
 
 .grid-list-small > * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  margin: 0 8px 16px;
-  margin: 0 0.5rem 1rem;
+  margin: 0 11px 22px;
   -webkit-box-flex: 0;
-      -ms-flex: 0 0 calc(50% - 1rem);
-          flex: 0 0 calc(50% - 1rem);
+      -ms-flex: 0 0 calc(50% - 22px);
+          flex: 0 0 calc(50% - 22px);
 }
 
 .table-of-contents ul {
   list-style: none;
-  margin: 16px 0;
-  margin: 1rem 0;
+  margin: 22px 0;
   padding: 0;
-  padding-left: 32px;
-  padding-left: 2rem;
+  padding-left: 44px;
 }
 
 .table-of-contents ul li {
-  margin: 0 0 16px;
-  margin: 0 0 1rem;
+  margin: 0 0 22px;
   padding: 0;
 }
 
@@ -992,8 +979,7 @@ body {
 
 .table-of-contents ul a.active:before {
   content: '';
-  left: -48px;
-  left: -3rem;
+  left: -66px;
   bottom: 0;
   width: 3px;
   background: #536171;
@@ -1001,20 +987,17 @@ body {
 
 .table-of-contents ul a.active:after {
   content: '👁';
-  left: -32px;
-  left: -2rem;
+  left: -44px;
 }
 
 .sidebar-menu ul {
   list-style: none;
-  margin: 16px 0;
-  margin: 1rem 0;
+  margin: 22px 0;
   padding: 0;
 }
 
 .sidebar-menu ul li {
-  margin: 0 0 16px;
-  margin: 0 0 1rem;
+  margin: 0 0 22px;
   padding: 0;
 }
 
@@ -1026,66 +1009,66 @@ body {
   font-weight: bold;
 }
 
-#header {
+.header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 
-  margin: 16px 0;
-  margin: 1rem 0;
-  padding-bottom: 16px;
-  padding-bottom: 1rem;
+  margin: 22px 0;
+  padding-bottom: 22px;
 
   border-bottom: 2px solid #f2f5f7;
 }
 
 @media (min-width: 700px) {
 
-  #header {
+  .header {
     -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
   }
 }
 
-#header .header__logo,
-  #header .header__navarea {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 100%;
-          flex: 0 0 100%;
-}
-
-#header .header__logo {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.header__logo {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 100%;
+            flex: 0 0 100%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
 }
 
 @media (min-width: 700px) {
 
-  #header .header__logo {
+  .header__logo {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 200px;
             flex: 0 0 200px;
   }
 }
 
-#header .header__navarea {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-pack: distribute;
-      justify-content: space-around;
+.header__navarea {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 100%;
+            flex: 0 0 100%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
 }
 
 @media (min-width: 700px) {
 
-  #header .header__navarea {
+  .header__navarea {
     -webkit-box-flex: 1;
         -ms-flex: 1 0 auto;
             flex: 1 0 auto;
@@ -1093,7 +1076,7 @@ body {
   }
 }
 
-#header .navigation ul {
+.header__navigation ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1106,23 +1089,22 @@ body {
 
 @media (min-width: 700px) {
 
-  #header .navigation ul {
+  .header__navigation ul {
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
   }
 }
 
-#header .navigation ul li {
+.header__navigation ul li {
   margin: 0;
 }
 
-#header .navigation ul li + li {
-  margin-left: 4px;
-  margin-left: 0.25rem;
+.header__navigation ul li + li {
+  margin-left: 5.5px;
 }
 
-#header .navigation ul li a {
+.header__navigation ul li a {
   display: block;
   text-transform: uppercase;
   font-weight: bold;
@@ -1131,12 +1113,12 @@ body {
   border-radius: 3px;
 }
 
-#header .navigation ul li a.active,
-          #header .navigation ul li a:hover {
+.header__navigation ul li a.active,
+          .header__navigation ul li a:hover {
   background: #f7f9fa;
 }
 
-#header .navigation ul li a.active {
+.header__navigation ul li a.active {
   color: #2a303a;
 }
 
@@ -1174,8 +1156,7 @@ body {
 }
 
 .header__navarea form fieldset + fieldset {
-  margin-left: 16px;
-  margin-left: 1rem;
+  margin-left: 22px;
 }
 
 .header__navarea form fieldset label + select {
@@ -1183,28 +1164,26 @@ body {
 }
 
 .header__navarea form fieldset select,
-      .header__navarea form fieldset label {
+        .header__navarea form fieldset label {
   display: inline-block;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-#footer {
-  margin: 16px 0;
-  margin: 1rem 0;
-  padding-top: 16px;
-  padding-top: 1rem;
+.footer {
+  margin: 22px 0;
+  padding-top: 22px;
 
-  border-top: 2px solid #f2f5f7
+  border-top: 2px solid #f2f5f7;
 }
 
-#footer .upper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+.footer__upper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
 }
 
-#footer .upper > * {
+.footer__upper > * {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1213,14 +1192,14 @@ body {
           align-items: center;
 }
 
-#footer .upper .navigation {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
-  font-size: 0.9em;
+.footer__navigation {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
+    font-size: 0.9em;
 }
 
-#footer .upper .navigation ul {
+.footer__navigation ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1229,95 +1208,52 @@ body {
   padding: 0;
 }
 
-#footer .upper .navigation ul li {
+.footer__navigation ul li {
   margin: 0;
 }
 
-#footer .upper .navigation ul li + li {
-  margin-left: 32px;
-  margin-left: 2rem;
+.footer__navigation ul li + li {
+  margin-left: 44px;
 }
 
-#footer .upper .apps {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+.footer__apps {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
 }
 
-#footer .upper .apps a {
+.footer__apps a {
   display: inline-block;
   width: 150px;
 }
 
-#footer .upper .apps a + a {
-  margin-left: 16px;
-  margin-left: 1rem;
+.footer__apps a + a {
+  margin-left: 22px;
 }
 
-#footer .upper .apps a img {
+.footer__apps a img {
   width: 100%;
   height: auto;
 }
 
-#footer .lower {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+.footer__lower {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
 }
 
-#footer .lower .disclaimer {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
-  font-size: 0.7em;
-  color: #8091a5;
+.footer__disclaimer {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
+    font-size: 0.7em;
+    color: #8091a5;
 }
 
-#footer .lower .social {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-}
-
-.hero {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-
-.hero__image {
-  background-color: #20B5B6;
-  width: 65%;
-  height: 600px;
-  border-radius: .375rem;
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
-          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
-}
-
-.featured-cards-list {
-  width: 30%;
-  height: 600px;
-  display:-webkit-box;
-  display:-ms-flexbox;
-  display:flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-
-.featured-cards__list {
-  background-color: #00AAE0;
-  height: 150px;
-  border-radius: .375rem;
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
-          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
+.footer__social {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
 }
 
 .course-card {
@@ -1329,64 +1265,58 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
   min-height: 30vh;
-  padding: 16px;
-  padding: 1rem;
+  padding: 22px;
 
   border-radius: 7px;
   -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
-          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45)
+          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
 }
 
 .course-card > * + * {
-  margin-top: 16px;
-  margin-top: 1rem;
+  margin-top: 22px;
 }
 
 .course-card__categories {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 1.5em;
-          flex: 0 0 1.5em;
-  color: #8091a5
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 1.5em;
+            flex: 0 0 1.5em;
 }
 
-.course-card__categories a {
-  display: inline-block;
-  margin-right: 16px;
-  margin-right: 1rem;
+.course-card__category {
+    display: inline-block;
+    margin-right: 22px;
+    color: #8091a5;
 }
 
 .course-card__title {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    margin-bottom: 0;
 }
 
-.course-card__title h2 {
+.course-card__description-wrapper {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+
+.course-card__description-wrapper p {
   margin: 0;
 }
 
-.course-card__description {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto
-}
-
-.course-card__description p {
-  margin: 0;
+.course-card__link-wapper {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
 }
 
 .course-card__link {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto
-}
-
-.course-card__link a {
-  display: inline-block;
-  padding-bottom: 0.3em;
-  border-bottom: 1px solid #5c9fef;
-  text-transform: uppercase;
-  color: #5c9fef;
+    display: inline-block;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid #5c9fef;
+    text-transform: uppercase;
+    color: #5c9fef;
 }
 
 .module {
@@ -1408,13 +1338,11 @@ body {
 }
 
 .module + .module {
-  margin-top: 16px;
-  margin-top: 1rem;
+  margin-top: 22px;
 }
 
 .lesson-module {
-  margin-top: 48px;
-  margin-top: 3rem
+  margin-top: 66px
 }
 
 .lesson-module img {
diff --git a/views/course.pug b/views/course.pug
index 28ccb3e..c97fa28 100644
--- a/views/course.pug
+++ b/views/course.pug
@@ -4,7 +4,7 @@ include mixins/_lesson
 
 block content
   .wrapper.wrapper-with-sidebar
-    section.wrapper__sidebar
+    section.wrapper-with-sidebar__sidebar
       h2 Table of contents
       .table-of-contents
         ul
@@ -13,7 +13,7 @@ block content
           each lesson in course.fields.lessons
             li
               a(href=`/courses/${course.fields.slug}/lessons/${lesson.fields.slug}`) #{lesson.fields.title}
-    section.wrapper__content
+    section.wrapper-with-sidebar__content
       h1= course.fields.title
 
       if lesson
diff --git a/views/courses.pug b/views/courses.pug
index a653b25..177b0d2 100644
--- a/views/courses.pug
+++ b/views/courses.pug
@@ -4,7 +4,7 @@ include mixins/_courseCard
 
 block content
   .wrapper.wrapper-with-sidebar
-    section.wrapper__sidebar
+    section.wrapper-with-sidebar__sidebar
       h2 Categories
       .sidebar-menu
         ul
@@ -13,7 +13,7 @@ block content
           each category in categories
             li
               a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
-    section.wrapper__content
+    section.wrapper-with-sidebar__content
       h1= title
       .courses.grid-list-small
         each course in courses
diff --git a/views/layout.pug b/views/layout.pug
index 360ab88..a1fc96e 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -7,12 +7,12 @@ html
     #main
       #main__header
         .wrapper
-          header#header
+          header.header
             section.header__logo
-              a.logo--link(href='#')
+              a.header__logo-link(href='#')
                 img(src='/images/logo.png' alt='Contentful University')
             section.header__navarea
-              section.controls
+              section.header__controls
                 form(action="." method="get")
                   fieldset
                     label(for='api') API type:
@@ -24,7 +24,7 @@ html
                     select(name='locale' onChange='this.form.submit()')
                       option(value='en-US') English
                       option(value='de-DE') German
-              nav.navigation
+              nav.header__navigation
                 ul
                   li
                     a.active(href='/') Home
@@ -40,9 +40,9 @@ html
 
       #main__footer
         .wrapper
-          footer#footer
-            .upper
-              nav.navigation
+          footer.footer
+            .footer__upper
+              nav.footer__navigation
                 ul
                   li
                     a.active(href='/') Home
@@ -52,15 +52,15 @@ html
                     a(href='/about') About
                   li
                     a(href='/settings') Settings
-              .apps
+              .footer__apps
                 a(href='#')
                   img(src='/images/app-store-badge.png')
                 a(href='#')
                   img(src='/images/google-play-badge.png')
-            .lower
-              .disclaimer
+            .footer__lower
+              .footer__disclaimer
                 p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
-              .social
+              .footer__social
                 p
                   a(href='#') FB
                   a(href='#') TW
diff --git a/views/mixins/_copyModule.pug b/views/mixins/_copyModule.pug
index 8842b08..d4dffee 100644
--- a/views/mixins/_copyModule.pug
+++ b/views/mixins/_copyModule.pug
@@ -1,8 +1,5 @@
 mixin copyModule(module)
-  .module
-    .module__copy
-      h1.module__copy__title #{module.fields.title}
-      h3.module__copy__headline #{module.fields.headline}
-      div.module__copy__copy !{helpers.markdown(module.fields.copy)}
-
-
+  .module.module-copy
+    h1.module-copy__title #{module.fields.title}
+    h3.module-copy__headline #{module.fields.headline}
+    div.module-copy__copy !{helpers.markdown(module.fields.copy)}
diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug
index a4533eb..36bed74 100644
--- a/views/mixins/_courseCard.pug
+++ b/views/mixins/_courseCard.pug
@@ -3,11 +3,10 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
     .course-card__categories
       if(course.fields.categories)
         each category in course.fields.categories
-          a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
-    .course-card__title
-      h2= course.fields.title
-    .course-card__description
+          a.course-card__category(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
+    h2.course-card__title= course.fields.title
+    .course-card__description-wrapper
       p !{helpers.markdown(course.fields.shortDescription)}
-    .course-card__link
-      a(href=`/courses/${course.fields.slug}`) view course
+    .course-card__link-wrapper
+      a.course-card__link(href=`/courses/${course.fields.slug}`) view course
 
diff --git a/views/mixins/_heroImageModule.pug b/views/mixins/_heroImageModule.pug
index 5b29ecf..ad31c11 100644
--- a/views/mixins/_heroImageModule.pug
+++ b/views/mixins/_heroImageModule.pug
@@ -1,6 +1,5 @@
 mixin heroImageModule(module)
-  .module
-    .module__heroImage
-      h2.module__heroImage__title #{module.fields.title}
-      h3.module__heroImage__headline #{module.fields.headline}
-      img.module__heroImage__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
+  .module.module-hero-image
+    h2.module-hero-image__title #{module.fields.title}
+    h3.module-hero-image__headline #{module.fields.headline}
+    img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
diff --git a/views/mixins/_highlightedCourse.pug b/views/mixins/_highlightedCourse.pug
index 56ad15b..7f3480c 100644
--- a/views/mixins/_highlightedCourse.pug
+++ b/views/mixins/_highlightedCourse.pug
@@ -1,7 +1,6 @@
 include ./_courseCard
 
 mixin highlightedCourseModule(module)
-  .module
-    .module__higlightedCourse
-      h2.module__higlightedCourse__title #{module.fields.title}
-      +courseCard(module.fields.course)
+  .module.module-higlighted-course
+    h2.module-higlighted-course__title #{module.fields.title}
+    +courseCard(module.fields.course)
diff --git a/views/mixins/_highlightedLessonsModule.pug b/views/mixins/_highlightedLessonsModule.pug
index d200718..d4acaa4 100644
--- a/views/mixins/_highlightedLessonsModule.pug
+++ b/views/mixins/_highlightedLessonsModule.pug
@@ -1,9 +1,8 @@
 include _lesson
 
 mixin _highlightLessonsModule(module)
-  .module
-    .module__higlightedLessons
-      h2.module__higlightedLessons__title #{module.fields.title}
-      each lesson in module.fields.lessons
-        +lesson(lesson)
+  .module.module-higlighted-lessons
+    h2.module-higlighted-lessons__title #{module.fields.title}
+    each lesson in module.fields.lessons
+      +lesson(lesson)
 
diff --git a/views/mixins/_lesson.pug b/views/mixins/_lesson.pug
index 67f4439..0a60ea2 100644
--- a/views/mixins/_lesson.pug
+++ b/views/mixins/_lesson.pug
@@ -5,7 +5,7 @@ include _lessonModuleImage
 mixin lesson(lesson)
   .lesson
     h2.lesson__tilte #{lesson.fields.title}
-    div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)}
+    div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
     if lesson.fields.image
       img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
     each module in lesson.fields.modules
diff --git a/views/mixins/_lessonModuleCodeSnippet.pug b/views/mixins/_lessonModuleCodeSnippet.pug
index f9256d4..b574751 100644
--- a/views/mixins/_lessonModuleCodeSnippet.pug
+++ b/views/mixins/_lessonModuleCodeSnippet.pug
@@ -1,21 +1,21 @@
 mixin lessonModuleCodeSnippet(module)
-  .lesson-module.lesson-module__code
+  .lesson-module.lesson-module-code
     h1.lesson-module__title #{module.fields.title}
-    pre.lesson-module__code__curl
+    pre.lesson-module-code__curl
       code.shell= module.fields.curl
-    pre.lesson-module__code__dotnet
-      code.csharp= module.fields.dotNet
-    pre.lesson-module__code__javascript
+    pre.lesson-module-code__dotnet
+      code.csharp= module.fields.dot-net
+    pre.lesson-module-code__javascript
       code.javascript= module.fields.javascript
-    pre.lesson-module__code__java
+    pre.lesson-module-code__java
       code.java= module.fields.java
-    pre.lesson-module__code__javaAndroid
+    pre.lesson-module-code__java-android
       code.java= module.fields.javaAndroid
-    pre.lesson-module__code__php
+    pre.lesson-module-code__php
       code.php= module.fields.php
-    pre.lesson-module__code__python
+    pre.lesson-module-code__python
       code.python= module.fields.python
-    pre.lesson-module__code__ruby
+    pre.lesson-module-code__ruby
       code.ruby= module.fields.ruby
-    pre.lesson-module__code__swift
+    pre.lesson-module-code__swift
       code.swift= module.fields.swift
diff --git a/views/mixins/_lessonModuleCopy.pug b/views/mixins/_lessonModuleCopy.pug
index 9fc7779..4b41ab3 100644
--- a/views/mixins/_lessonModuleCopy.pug
+++ b/views/mixins/_lessonModuleCopy.pug
@@ -1,4 +1,4 @@
 mixin lessonModuleCopy(module)
-  .lesson-module.lesson-module__copy
-    h3.lesson-module__copy__title #{module.fields.title}
-    .lesson-module__copy__copy !{helpers.markdown(module.fields.copy)}
+  .lesson-module.lesson-module-copy
+    h3.lesson-module-copy__title #{module.fields.title}
+    .lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}
diff --git a/views/mixins/_lessonModuleImage.pug b/views/mixins/_lessonModuleImage.pug
index 64b61f8..b691ec6 100644
--- a/views/mixins/_lessonModuleImage.pug
+++ b/views/mixins/_lessonModuleImage.pug
@@ -1,4 +1,4 @@
 mixin lessonModuleImage(module)
-  .lesson-module.lesson-module__image
-    img.lesson-module__image__image(src=module.fields.file.url alt=module.fields.title)
-    div.lesson-module__image__title #{module.fields.title}
+  .lesson-module.lesson-module-image
+    img.lesson-module-image__image(src=module.fields.file.url alt=module.fields.title)
+    div.lesson-module-image__title #{module.fields.title}