diff --git a/assets/images/quiz/congrats.gif b/assets/images/quiz/congrats.gif
new file mode 100644
index 00000000000..c2f6166f58d
Binary files /dev/null and b/assets/images/quiz/congrats.gif differ
diff --git a/assets/images/quiz/oh-no.gif b/assets/images/quiz/oh-no.gif
new file mode 100644
index 00000000000..26fe877bcb0
Binary files /dev/null and b/assets/images/quiz/oh-no.gif differ
diff --git a/assets/images/quiz/well-done.gif b/assets/images/quiz/well-done.gif
new file mode 100644
index 00000000000..9e75f13963d
Binary files /dev/null and b/assets/images/quiz/well-done.gif differ
diff --git a/assets/scss/components/_btn.scss b/assets/scss/components/_btn.scss
index 19c790aac46..ebc1ce5ca9d 100644
--- a/assets/scss/components/_btn.scss
+++ b/assets/scss/components/_btn.scss
@@ -55,6 +55,11 @@
   }
 }
 
+.btn--light {
+  color: $color-dark;
+  background: $color-light;
+}
+
 .btn--animated {
   .icon {
     width: 40px;
@@ -117,6 +122,13 @@
       stroke: $color-primary;
     }
   }
+
+  &.btn--light {
+    .icon .base,
+    .icon .tip {
+      stroke: $color-info;
+    }
+  }
 }
 
 @media (max-width: $screen-xs) {
diff --git a/assets/scss/components/checkbox.scss b/assets/scss/components/checkbox.scss
index 5681e169f57..3ec6574f31c 100644
--- a/assets/scss/components/checkbox.scss
+++ b/assets/scss/components/checkbox.scss
@@ -1,18 +1,22 @@
 .checkbox {
-  margin-bottom: .2em;
-  padding-left: 1.8em;
+  margin-bottom: .6em;
+  padding-left: 30px;
   color: #fff;
 
   code {
-    background-color: transparent;
-    color: $color-light;
-    font-family: Courier, monospace;
-    white-space: unset;
+    font-size: 15px;
+    background-color: #fff;
+    color: $color-dark;
+    padding: .2em;
+    border-radius: 5px;
   }
 
   pre {
-    background-color: transparent !important;
-    padding: 5px;
+    margin: 0;
+    width: 100%;
+    background-color: #fff !important;
+    padding: .5em;
+    border-radius: 5px;
   }
 }
 
@@ -22,7 +26,7 @@
 
 .checkbox__label {
   position: relative;
-  font-size: .8em;
+  display: flex;
   line-height: 1.3;
 
   &::before {
@@ -32,7 +36,7 @@
     background-color: #fff;
     position: absolute;
     top: 0;
-    left: -35px;
+    left: -30px;
     cursor: pointer;
   }
 }
@@ -42,9 +46,8 @@
     font-family: 'icomoon';
     content: '\e918';
     position: absolute;
-    left: -32px;
-    font-size: 16px;
-    top: 2px;
+    left: -33px;
+    top: 1px;
     color: $color-dark;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/components/question.scss b/assets/scss/components/question.scss
index 7c1e1655f01..748709d3797 100644
--- a/assets/scss/components/question.scss
+++ b/assets/scss/components/question.scss
@@ -1,31 +1,31 @@
 .question {
-  margin-bottom: 2em;
+  margin-bottom: 40px;
 
   p {
-    margin-bottom: 1em; 
+    margin-bottom: 20px;
   }
 }
 
 .question__info {
+  margin-top: 30px;
+  padding: 15px 10px;
   display: flex;
   flex-direction: column;
-  background-color: #fff;
-  color: $color-dark;
   font-family: 'faktum regular';
-  padding: 1em 2em;
-  margin-top: 2em;
-  font-size: 18px;
+  font-size: 1.1em;
+  color: $color-dark;
+  background-color: #fff;
 
   .title {
-    color: $color-danger;
+    margin: 0 0 7px;
     font-family: 'faktum bold';
+    color: $color-danger;
   }
-  
+
   code {
-    font-size: 15px;
-    padding: .2em;
     margin: 0 0 .3em;
-    border-radius: 8px;
+    padding: 2px 4px;
+    border-radius: 5px;
   }
 }
 
@@ -38,11 +38,18 @@
 .question--success {
   .question__content {
     border-left: solid 4px $color-success;
-  }  
+  }
 }
 
 .question--error {
   .question__content {
     border-left: solid 4px $color-danger;
-  }  
-}
\ No newline at end of file
+  }
+}
+
+@media (max-width: $screen-sm) {
+  .question__info {
+    padding: 10px 10px 15px;
+    font-size: 1em;
+  }
+}
diff --git a/assets/scss/components/quiz.scss b/assets/scss/components/quiz.scss
index b0032a787db..94d9aec5984 100644
--- a/assets/scss/components/quiz.scss
+++ b/assets/scss/components/quiz.scss
@@ -1,60 +1,127 @@
-.quiz {   
-  display: flex; 
+.quiz {
+  padding: 140px 100px 100px;
+  display: flex;
   flex-direction: column;
-  background-color: $color-dark;
-  padding: 7em 5em 5em; 
   color: #fff;
+  background-color: $color-dark;
 }
 
 .quiz__title  {
+  margin: 0 0 70px;
   display: flex;
   flex-direction: column;
-  font-size: 2.3em;
   font-family: 'faktum bold';
+  font-size: 2.3em;
   color: $color-light;
   line-height: 1.2;
-  margin-bottom: 0.8em;
+
+  span:last-of-type {
+    &:after {
+      content: '_';
+    }
+  }
 }
-  
+
 .quiz__submit {
+  margin: 60px 0 0;
   display: flex;
   justify-content: flex-end;
-  margin-top: 2em;
+}
 
-  button {
-    color: #fff;
-    font-size: .95em; 
-    font-family: 'antikor bold';
-    padding: 1em 2.5em;
-    background-color: $color-light;
+.quiz__score {
+  margin: 60px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .title {
+    margin: 0 0 20px;
+    font-family: 'faktum bold';
+    font-size: 2.5em;
+    text-transform: uppercase;
+
+    span {
+      margin-right: 17px;
+    }
+  }
+
+  .detail {
+    margin-left: 69px;
+    padding-left: 25px;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.5em;
+    border-left: solid 4px;
+
+    strong {
+      font-family: 'faktum bold';
+    }
+  }
+
+  img {
+    margin: 0;
+    width: 380px;
   }
 }
 
-.quiz__answer {
-  margin-top: .8em;
-  color: #fff;
-  padding: 0 .3em;
+.quiz__score--excellent {
+  .title {
+    color: $color-light;
+  }
+
+  .detail {
+    border-color: $color-light;
+
+    strong {
+      color: $color-light;
+    }
+  }
 }
 
-.quiz__score {
-  display: flex;
-  align-self: center;
-  align-items: center;
-  flex-direction: column;
-  font-family: 'faktum bold';
-  color: $color-light;
+.quiz__score--improvable {
+  .title {
+    color: $color-danger;
+  }
+
+  .detail {
+    border-color: $color-danger;
 
-  strong {
-    line-height: 1;
-    font-size: .7em;
+    strong {
+      color: $color-danger;
+    }
   }
-  
-  .emoji {
-    font-size: 2.7em; 
-    margin: .3em; 
+}
+
+@media (max-width: $screen-md) {
+  .quiz__score {
+    img {
+      width: 320px;
+    }
+  }
+}
+
+@media (max-width: $screen-sm) {
+  .quiz {
+    padding: 80px 25px 100px;
+    font-size: 1em;
   }
 
-  .percentage {
-    font-size: 3em;
+  .quiz__score {
+    flex-direction: column;
+    text-align: center;
+
+    .detail {
+      margin: 0 0 35px;
+      padding: 0;
+      font-size: 1.25em;
+      border: none;
+    }
   }
-}
\ No newline at end of file
+}
+
+@media (max-width: $screen-xxs) {
+  .quiz__title {
+    margin: 0 0 30px;
+    font-size: 1.6em;
+  }
+}
diff --git a/assets/scss/components/radio.scss b/assets/scss/components/radio.scss
index 6f4ac3a2848..b8a941cfad8 100644
--- a/assets/scss/components/radio.scss
+++ b/assets/scss/components/radio.scss
@@ -1,22 +1,22 @@
 .radio {
-  margin-bottom: .2em;
-  padding-left: 1.9em;
+  margin-bottom: .6em;
+  padding-left: 30px;
   color: #fff;
 
   code {
     font-size: 15px;
-    background-color: #fff; 
+    background-color: #fff;
     color: $color-dark;
     padding: .2em;
-    border-radius: 8px; 
+    border-radius: 5px;
   }
 
   pre {
     margin: 0;
     width: 100%;
     background-color: #fff !important;
-    padding: .5em; 
-    border-radius: 10px; 
+    padding: .5em;
+    border-radius: 5px;
   }
 }
 
@@ -26,7 +26,7 @@
 
 .radio__label {
   position: relative;
-  font-size: .8em;
+  display: flex;
   line-height: 1.3;
 
   &::before {
@@ -36,7 +36,7 @@
     border-radius: 50%;
     position: absolute;
     top: 1px;
-    left: -37px;
+    left: -30px;
     cursor: pointer;
     background-color: #fff;
   }
@@ -53,4 +53,4 @@
     left: -35px;
     top: 3px;
   }
-}
\ No newline at end of file
+}
diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig
index ea646569cf2..11572f0f995 100644
--- a/templates/blog/article.html.twig
+++ b/templates/blog/article.html.twig
@@ -249,4 +249,4 @@
 	});
 </script>
 {% endif %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}