diff --git a/assets/stylesheets/course/card.css b/assets/stylesheets/course/card.css
index 76283bc..9ad8dda 100644
--- a/assets/stylesheets/course/card.css
+++ b/assets/stylesheets/course/card.css
@@ -1,39 +1,56 @@
 @block course-card {
   display: flex;
   flex-direction: column;
-  min-height: 30vh;
   padding: var(--grid-gutter);
 
   border-radius: var(--border-radius);
   box-shadow: var(--card-box-shadow);
 
-  & > * + * {
-    margin-top: var(--grid-gutter);
-  }
-
-  @element categories{
+  @element categories {
     flex: 0 0 var(--line-height);
+    margin-bottom: var(--grid-gutter);
+    height: var(--line-height);
   }
 
-  @element category{
+  @element category {
     display: inline-block;
-    margin-right: var(--grid-gutter);
     color: var(--color-text-grey);
     font-size: 0.75em;
     letter-spacing: 2px;
+
+    &:after {
+      content: '/';
+      display: inline-block;
+      padding: 0 0.3em;
+    }
+
+    &:last-child:after {
+      display: none;
+    }
   }
 
   @element title {
-    flex: 1 1 auto;
-    margin-bottom: 0;
+    flex: 0 1 12vh;
+    margin: 0;
+    overflow: hidden;
+
+    padding-bottom: var(--grid-gutter);
+    margin-bottom: var(--grid-gutter);
+    border-bottom: 1px solid var(--color-bg-separator);
+
+    font-family: var(--font-medium);
+    font-weight: normal;
+    font-size: 1.625em;
+    line-height: 1.38;
   }
 
-  @element description-wrapper {
-    flex: 1 1 auto;
+  @element description {
+    flex: 0 1 20vh;
+    overflow: hidden;
+    margin: 0 0 var(--grid-gutter);
 
-    & p {
-      margin: 0;
-    }
+    line-height: 1.63;
+    color: var(--color-course-card-description);
   }
 
   @element link-wrapper {
diff --git a/assets/stylesheets/global/header.css b/assets/stylesheets/global/header.css
index 979cc21..4f7132f 100644
--- a/assets/stylesheets/global/header.css
+++ b/assets/stylesheets/global/header.css
@@ -109,7 +109,7 @@
 
           color: inherit;
           font-weight: normal;
-          font-family: var(--font-light);
+          font-family: var(--font-medium);
           font-size: 0.8em;
 
           background: transparent;
diff --git a/assets/stylesheets/global/sidebar-menu.css b/assets/stylesheets/global/sidebar-menu.css
index 36dffd5..0b470e1 100644
--- a/assets/stylesheets/global/sidebar-menu.css
+++ b/assets/stylesheets/global/sidebar-menu.css
@@ -1,20 +1,24 @@
-.sidebar-menu {
-  & ul {
+@block sidebar-menu {
+  @element list {
     list-style: none;
-    margin: var(--grid-gutter) 0;
+    margin: 0;
     padding: 0;
+  }
 
-    & li {
-      margin: 0 0 var(--grid-gutter);
-      padding: 0;
-    }
+  @element item {
+    margin: 0 0 calc(var(--grid-gutter) / 4);
+    padding: 0;
+    font-size: 0.9em;
+    line-height: 1.8;
+  }
 
-    & a {
-      display: block;
+  @element link {
+    display: block;
+    color: var(--color-text-grey);
 
-      &.active {
-        font-weight: bold;
-      }
+    &.active {
+      font-family: var(--font-medium);
+      color: var(--color-text-default);
     }
   }
 }
diff --git a/assets/stylesheets/layout/grid-list.css b/assets/stylesheets/layout/grid-list.css
new file mode 100644
index 0000000..9356de4
--- /dev/null
+++ b/assets/stylesheets/layout/grid-list.css
@@ -0,0 +1,12 @@
+@block grid-list {
+display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 calc(var(--grid-gutter) / 2 * -1);
+
+  @element item {
+    box-sizing: border-box;
+    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
+    flex: 0 0 calc(50% - var(--grid-gutter));
+  }
+}
diff --git a/assets/stylesheets/layout/grid-lists.css b/assets/stylesheets/layout/grid-lists.css
deleted file mode 100644
index 0f04eeb..0000000
--- a/assets/stylesheets/layout/grid-lists.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.grid-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 0 calc(var(--grid-gutter) / 2 * -1);
-
-  & > * {
-    box-sizing: border-box;
-    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
-    flex: 0 0 calc(50% - var(--grid-gutter));
-
-    @media (--breakpoint-desktop) {
-      flex: 0 0 calc(33% - var(--grid-gutter));
-    }
-  }
-}
-
-.grid-list-small {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 0 calc(var(--grid-gutter) / 2 * -1);
-
-  & > * {
-    box-sizing: border-box;
-    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
-    flex: 0 0 calc(50% - var(--grid-gutter));
-  }
-}
diff --git a/assets/stylesheets/layout/index.css b/assets/stylesheets/layout/index.css
index 4fdac98..79b0b8a 100644
--- a/assets/stylesheets/layout/index.css
+++ b/assets/stylesheets/layout/index.css
@@ -1,3 +1,3 @@
 @import 'layout-centered';
 @import 'layout-sidebar';
-@import 'grid-lists';
+@import 'grid-list';
diff --git a/assets/stylesheets/layout/layout-sidebar.css b/assets/stylesheets/layout/layout-sidebar.css
index a0362c7..4781d98 100644
--- a/assets/stylesheets/layout/layout-sidebar.css
+++ b/assets/stylesheets/layout/layout-sidebar.css
@@ -10,19 +10,22 @@
 
   @element sidebar {
     @media (--breakpoint-desktop) {
-      flex: 0 0 220px;
-      border-radius: 7px;
+      flex: 0 0 auto;
+      width: var(--layout-sidebar-sidebar-width);
+      border-radius: var(--border-radius);
       box-shadow: var(--card-box-shadow);
     }
   }
 
   @element sidebar-header {
-    padding: var(--grid-gutter);
+    padding: 1em var(--grid-gutter);
     border-bottom: 1px solid var(--color-sidebar-seperator);
   }
 
   @element sidebar-title {
+    font-family: var(--font-medium);
     font-size: 1.25em;
+    font-weight: normal;
     margin: 0;
   }
 
@@ -35,9 +38,9 @@
     padding: var(--grid-gutter) 0;
 
     @media (--breakpoint-desktop) {
-      flex: 1 1 auto;
+      flex: 0 1 auto;
+      width: var(--layout-sidebar-content-width);
       margin-left: var(--grid-gutter);
-      overflow: hidden;
     }
   }
 }
diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css
index cd5bb8c..790ce0a 100644
--- a/assets/stylesheets/variables.css
+++ b/assets/stylesheets/variables.css
@@ -3,12 +3,12 @@
 :root {
   --content-max-width: 980px;
   --grid-gutter: 22px;
-  --border-radius: 3px;
+  --border-radius: 4px;
 
   --line-height: 1.5em;
 
   --font-regular: 'roboto', Helvetica, sans-serif;
-  --font-light: 'robotomedium', Helvetica, sans-serif;
+  --font-medium: 'robotomedium', Helvetica, sans-serif;
 
   --color-palette-blue: #5c9fef;
   --color-palette-blue-medium: #3c80cf;
@@ -29,8 +29,12 @@
   --color-sidebar-seperator: #eeeeee;
 
   --color-course-active: #536171;
+  --color-course-card-description: #536171;
 
-  --card-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
+  --layout-sidebar-sidebar-width: 228px;
+  --layout-sidebar-content-width: 732px;
+
+  --card-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
 
   --cta-color: #fff;
   --cta-bg: var(--color-palette-blue);
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index fa87a38..6b20ae8 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -783,21 +783,24 @@ input[type="reset"]:focus,
 
   .layout-sidebar__sidebar {
     -webkit-box-flex: 0;
-        -ms-flex: 0 0 220px;
-            flex: 0 0 220px;
-    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);
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    width: 228px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
+            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
   }
 }
 
 .layout-sidebar__sidebar-header {
-    padding: 22px;
+    padding: 1em 22px;
     border-bottom: 1px solid #eeeeee;
 }
 
 .layout-sidebar__sidebar-title {
+    font-family: 'robotomedium', Helvetica, sans-serif;
     font-size: 1.25em;
+    font-weight: normal;
     margin: 0;
 }
 
@@ -813,63 +816,33 @@ input[type="reset"]:focus,
 @media (min-width: 700px) {
 
   .layout-sidebar__content {
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    width: 732px;
     margin-left: 22px;
-    overflow: hidden;
   }
 }
 
 .grid-list {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+display: -webkit-box;
+display: -ms-flexbox;
+display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin: 0 -11px
+  margin: 0 -11px;
 }
 
-.grid-list > * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  margin: 0 11px 22px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 calc(50% - 22px);
-          flex: 0 0 calc(50% - 22px);
-}
-
-@media (min-width: 700px) {
-
-  .grid-list > * {
+.grid-list__item {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    margin: 0 11px 22px;
     -webkit-box-flex: 0;
-        -ms-flex: 0 0 calc(33% - 22px);
-            flex: 0 0 calc(33% - 22px);
-  }
-}
-
-.grid-list-small {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  margin: 0 -11px
-}
-
-.grid-list-small > * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  margin: 0 11px 22px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 calc(50% - 22px);
-          flex: 0 0 calc(50% - 22px);
+        -ms-flex: 0 0 calc(50% - 22px);
+            flex: 0 0 calc(50% - 22px);
 }
 
 .header {
@@ -1031,7 +1004,7 @@ input[type="reset"]:focus,
   margin: 0;
   border: none;
   background: #3c80cf;
-  border-radius: 3px;
+  border-radius: 4px;
   color: inherit;
 }
 
@@ -1205,23 +1178,29 @@ input[type="reset"]:focus,
   left: -44px;
 }
 
-.sidebar-menu ul {
-  list-style: none;
-  margin: 22px 0;
-  padding: 0;
+.sidebar-menu {}
+
+.sidebar-menu__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
-.sidebar-menu ul li {
-  margin: 0 0 22px;
-  padding: 0;
+.sidebar-menu__item {
+    margin: 0 0 5.5px;
+    padding: 0;
+    font-size: 0.9em;
+    line-height: 1.8;
 }
 
-.sidebar-menu ul a {
-  display: block;
+.sidebar-menu__link {
+    display: block;
+    color: #8091a5;
 }
 
-.sidebar-menu ul a.active {
-  font-weight: bold;
+.sidebar-menu__link.active {
+  font-family: 'robotomedium', Helvetica, sans-serif;
+  color: #2a3039;
 }
 
 .main-navigation ul {
@@ -1261,7 +1240,7 @@ input[type="reset"]:focus,
   font-weight: bold;
   padding: 0.7em 1em;
   color: #8091a5;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .main-navigation ul li a.active,
@@ -1419,47 +1398,64 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  min-height: 30vh;
   padding: 22px;
 
-  border-radius: 3px;
-  -webkit-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: 22px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
 }
 
 .course-card__categories {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 1.5em;
             flex: 0 0 1.5em;
+    margin-bottom: 22px;
+    height: 1.5em;
 }
 
 .course-card__category {
     display: inline-block;
-    margin-right: 22px;
     color: #8091a5;
     font-size: 0.75em;
     letter-spacing: 2px;
 }
 
+.course-card__category:after {
+  content: '/';
+  display: inline-block;
+  padding: 0 0.3em;
+}
+
+.course-card__category:last-child:after {
+  display: none;
+}
+
 .course-card__title {
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
-    margin-bottom: 0;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 1 12vh;
+            flex: 0 1 12vh;
+    margin: 0;
+    overflow: hidden;
+
+    padding-bottom: 22px;
+    margin-bottom: 22px;
+    border-bottom: 1px solid #e5ebed;
+
+    font-family: 'robotomedium', Helvetica, sans-serif;
+    font-weight: normal;
+    font-size: 1.625em;
+    line-height: 1.38;
 }
 
-.course-card__description-wrapper {
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
-}
+.course-card__description {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 1 20vh;
+            flex: 0 1 20vh;
+    overflow: hidden;
+    margin: 0 0 22px;
 
-.course-card__description-wrapper p {
-  margin: 0;
+    line-height: 1.63;
+    color: #536171;
 }
 
 .course-card__link-wrapper {
@@ -1485,7 +1481,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
     position: relative;
     overflow: hidden;
     max-height: 60vh;
-    border-radius: 3px;
+    border-radius: 4px;
 }
 
 .module-hero-image__image {
@@ -1519,7 +1515,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
     position: relative;
     overflow: hidden;
     max-height: 60vh;
-    border-radius: 3px;
+    border-radius: 4px;
 }
 
 .module-higlighted-course__image {
diff --git a/views/courses.pug b/views/courses.pug
index 12e98b2..09e964f 100644
--- a/views/courses.pug
+++ b/views/courses.pug
@@ -9,15 +9,15 @@ block content
         h2.layout-sidebar__sidebar-title Categories
       .layout-sidebar__sidebar-content
         .sidebar-menu
-          ul
-            li
-              a.active(href=`/courses`) All courses
+          ul.sidebar-menu__list
+            li.sidebar-menu__item
+              a.sidebar-menu__link.active(href=`/courses`) All courses
             each category in categories
-              li
-                a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
+              li.sidebar-menu__item
+                a.sidebar-menu__link(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
     section.layout-sidebar__content
       h1= title
-      .courses.grid-list-small
+      .courses.grid-list
         each course in courses
-          .grid-list-small__item
+          .grid-list__item
             +courseCard(course)
diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug
index aa42e79..8ea4e85 100644
--- a/views/mixins/_courseCard.pug
+++ b/views/mixins/_courseCard.pug
@@ -5,8 +5,7 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
         each category in course.fields.categories
           a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
     h2.course-card__title= course.fields.title
-    .course-card__description-wrapper
-      p !{helpers.markdown(course.fields.shortDescription)}
+    p.course-card__description= course.fields.shortDescription
     .course-card__link-wrapper
       a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) view course