diff --git a/client/src/components/icons/Tick.vue b/client/src/components/icons/Tick.vue
index 468b76d4..e89a99ec 100644
--- a/client/src/components/icons/Tick.vue
+++ b/client/src/components/icons/Tick.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>tick</title>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/>
   </svg>
 </template>
diff --git a/client/src/components/inputs/BaseInput.vue b/client/src/components/inputs/BaseInput.vue
index e0c0c59f..6a5b8c7e 100644
--- a/client/src/components/inputs/BaseInput.vue
+++ b/client/src/components/inputs/BaseInput.vue
@@ -34,77 +34,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .base-input-container {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    margin-right: 10px;
-    cursor: pointer;
-    width: auto;
-
-    svg {
-      width: 15px;
-    }
-
-    &__input {
-      display: none;
-    }
-
-    &__input:checked + &__checkbox {
-      border: 0;
-      background-color: $color-brand;
-
-      svg {
-        display: block;
-        fill: $color-white;
-      }
-    }
-
-    &__icon {
-      width: 20px;
-      height: 20px;
-      display: flex;
-      border: 2px solid $color-silver-dark;
-      justify-content: center;
-      align-items: center;
-      box-sizing: border-box;
-      margin-right: 10px;
-      transition: background-color 0.5s;
-    }
-
-    &__checkbox {
-      border-radius: 3px;
-
-      svg {
-        display: none;
-        transition: all 0.7s;
-      }
-    }
-
-    &__radiobutton {
-      border-radius: 20px;
-
-      svg {
-        display: none;
-        fill: $color-brand;
-        width: 12px;
-      }
-    }
-
-    &__input:checked + &__radiobutton {
-      border-color: $color-brand;
-
-      svg {
-        display: block;
-      }
-    }
-
-    &__label {
-      font-family: $sans-serif-font-family;
-    }
-  }
-</style>
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index 994dd2b0..1ee651e9 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -68,6 +68,7 @@
         });
 
         survey.css = css;
+        survey.showProgressBar = 'bottom';
 
         return survey;
       }
@@ -85,13 +86,14 @@
         result({data, loading, networkStatus}) {
           if (!loading) {
             let json = JSON.parse(data.survey.data);
+            json.showTitle = false;
             let answer = {};
             if (data.survey.answer && data.survey.answer.data) {
               answer = JSON.parse(data.survey.answer.data);
             }
 
             this.survey = this.initSurvey(json, answer);
-            this.title = data.survey.title;
+            this.title = json.title;
           }
         },
       }
diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
index ba88e0ad..e94dfa20 100644
--- a/client/src/styles/_forms.scss
+++ b/client/src/styles/_forms.scss
@@ -9,12 +9,15 @@
   background-color: $color-white;
 }
 
+$icon-size: 20px;
+
 .skillbox-input {
   @include inputstyle;
 
   &--error {
     border-color: $color-accent-3-dark;
   }
+
 }
 
 .skillbox-textarea {
@@ -22,9 +25,120 @@
   height: 120px;
 }
 
-
 .skillbox-auto-grow {
   overflow: hidden;
   resize: none;
   outline: 0;
 }
+
+.base-input-container {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  width: auto;
+
+  svg {
+    width: 15px;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__input:checked + &__checkbox {
+    border: 0;
+    background-color: $color-brand;
+
+    svg {
+      display: block;
+      fill: $color-white;
+    }
+  }
+
+  &__icon {
+    width: $icon-size;
+    height: $icon-size;
+    display: flex;
+    border: 2px solid $color-silver-dark;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    margin-right: 10px;
+    transition: background-color 0.5s;
+  }
+
+  &__checkbox {
+    border-radius: 3px;
+
+    svg {
+      display: none;
+      transition: all 0.7s;
+    }
+  }
+
+  &__radiobutton {
+    border-radius: 20px;
+
+    svg {
+      display: none;
+      fill: $color-brand;
+      width: 12px;
+    }
+  }
+
+  &__input:checked + &__radiobutton {
+    border-color: $color-brand;
+
+    svg {
+      display: block;
+    }
+  }
+
+  &__label {
+    font-family: $sans-serif-font-family;
+  }
+
+  $base: &;
+
+  &--survey {
+    margin-bottom: $small-spacing;
+
+    #{$base}__input:checked + #{$base}__radiobutton {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2317A887" r="25" cx="50" cy="50"></circle></svg>');
+      background-size: 12px 12px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      width: $icon-size;
+      height: $icon-size;
+    }
+
+    #{$base}__input:checked + #{$base}__checkbox {
+      background-image: url('data:image/svg+xml;utf8,<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%23FFFFFF" points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/></svg>');
+      background-size: 12px 12px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      width: $icon-size;
+      height: $icon-size;
+    }
+
+    #{$base}__label-container {
+      display: -ms-grid;
+      display: grid;
+      grid-template-columns: 30px 1fr;
+      align-items: start;
+      justify-content: center;
+    }
+
+    #{$base}__label {
+      grid-row: 1;
+      grid-column: 2;
+      line-height: 1.5;
+    }
+
+    #{$base}__radiobutton {
+      margin-top: 1px;
+    }
+  }
+}
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index c854eb23..962d5d13 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -1,13 +1,15 @@
 .survey {
-  &__panel-title {
+  &__panel-title,
+  &__page-title {
     @include main-title;
     margin-bottom: $large-spacing*2;
     span {
-     @include main-title;
+      @include main-title;
     }
   }
 
-  &__panel-description {
+  &__panel-description,
+  &__page-description {
     @include regular-paragraph;
     line-height: 1.5;
     margin-bottom: $large-spacing;
@@ -25,4 +27,79 @@
     width: 100%;
     margin-bottom: $medium-spacing;
   }
+
+  &__body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    //grid-template-areas: "content content" "navigation progress";
+
+    &--completed {
+      flex-direction: column;
+    }
+  }
+
+  &__page {
+    width: 100%;
+    //grid-area: content;
+    order: 1;
+  }
+
+  &__footer {
+    //grid-area: navigation;
+    order: 2;
+  }
+
+  $progress-margin-right: 120px;
+  &__progress {
+    background-color: $color-silver;
+    height: 0.3em;
+    order: 3;
+    width: 40%;
+    //grid-area: progress;
+    position: relative;
+    margin-right: $progress-margin-right;
+    box-sizing: border-box;
+    display: flex;
+    align-content: center;
+  }
+
+  &__radiogroup-group, &__checkbox-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__progress-bar {
+    background-color: $color-brand;
+
+    height: 100%;
+
+    > span {
+      position: absolute;
+      right: -$progress-margin-right;
+      top: -0.25em;
+      @include regular-text;
+    }
+
+  }
+
+  &__error {
+    margin-bottom: $large-spacing;
+  }
+
+  &__error-item {
+    span {
+      color: $color-error;
+      @include small-text;
+    }
+  }
+}
+
+.question {
+
+  $question: &;
+  &--error #{$question}__input {
+    border-color: $color-error;
+    box-shadow: none;
+  }
 }
diff --git a/client/src/survey.config.js b/client/src/survey.config.js
index a6b2213b..a6c3c5f8 100644
--- a/client/src/survey.config.js
+++ b/client/src/survey.config.js
@@ -1,26 +1,26 @@
 export const css = {
   'root': 'survey',
-  'header': '',
-  'body': '',
+  'header': 'survey__header',
+  'body': 'survey__body',
   'bodyEmpty': '',
-  'footer': '',
+  'footer': 'survey__footer',
   'navigationButton': 'button button--primary',
-  'completedPage': '',
+  'completedPage': 'survey__body--completed',
   'navigation': {
     'complete': 'button button--primary',
     'prev': 'button button--primary',
     'next': 'button button--primary',
     'start': 'button button--primary'
   },
-  'progress': 'progress center-block mx-auto mb-4',
-  'progressBar': 'progress-bar',
+  'progress': 'survey__progress',
+  'progressBar': 'survey__progress-bar',
   'page': {
-    'root': '',
-    'title': '',
-    'survey__page-description': ''
+    'root': 'survey__page',
+    'title': 'survey__page-title',
+    'description': 'survey__page-description'
   },
-  'pageTitle': '',
-  'pageDescription': 'small',
+  'pageTitle': 'survey__page-title',
+  'pageDescription': 'survey__page-description',
   'row': 'sv_row',
   'question': {
     'mainRoot': 'survey__question question',
@@ -29,10 +29,10 @@ export const css = {
     'title': 'survey__question-title',
     'number': 'sv_q_num',
     'survey__question-description': 'small',
-    'comment': 'survey__question-input skillbox-input',
+    'comment': 'survey__question-input skillbox-input question__input',
     'required': '',
     'titleRequired': '',
-    'hasError': 'has-error',
+    'hasError': 'survey__question--error question--error',
     'indent': 20
   },
   'panel': {
@@ -43,9 +43,9 @@ export const css = {
   'error': {
     'root': 'alert alert-danger',
     'icon': 'glyphicon glyphicon-exclamation-sign',
-    'item': '',
-    'locationTop': 'sv_qstn_error_top',
-    'locationBottom': 'sv_qstn_error_bottom'
+    'item': 'survey__error-item',
+    'locationTop': 'survey__error survey__error--top',
+    'locationBottom': 'survey__error survey__error--bottom'
   },
   'boolean': {
     'root': 'sv_qbln form-inline checkbox',
@@ -54,18 +54,19 @@ export const css = {
     'materialDecorator': 'checkbox-material'
   },
   'checkbox': {
-    'root': 'sv_qcbc sv_qcbx form-inline',
-    'item': 'checkbox',
-    'itemControl': '',
-    'controlLabel': '',
-    'materialDecorator': 'checkbox-material',
+    'root': 'survey__checkbox-group',
+    'item': 'base-input-container base-input-container--survey',
+    'itemControl': 'base-input-container__input',
+    'label': 'base-input-container__label-container',
+    'controlLabel': 'base-input-container__label',
+    'materialDecorator': 'base-input-container__checkbox base-input-container__icon',
     'other': 'sv_q_checkbox_other skillbox-input',
     'column': 'sv_q_select_column'
   },
-  'comment': 'survey__input skillbox-input',
+  'comment': 'survey__input skillbox-input question__input',
   'dropdown': {
     'root': '',
-    'control': 'skillbox-input',
+    'control': 'survey__input skillbox-input',
     'other': 'sv_q_dd_other skillbox-input'
   },
   'html': {
@@ -103,12 +104,12 @@ export const css = {
     'itemValue': 'sv_q_mt_item_value skillbox-input'
   },
   'radiogroup': {
-    'root': 'sv_qcbc form-inline',
-    'item': 'radio',
-    'label': '',
-    'itemControl': '',
-    'controlLabel': '',
-    'materialDecorator': 'circle',
+    'root': 'survey__radiogroup-group',
+    'item': 'base-input-container base-input-container--survey',
+    'label': 'base-input-container__label-container',
+    'itemControl': 'base-input-container__input',
+    'controlLabel': 'base-input-container__label',
+    'materialDecorator': 'base-input-container__radiobutton base-input-container__icon',
     'other': 'sv_q_radiogroup_other skillbox-input',
     'clearButton': 'sv_q_radiogroup_clear button',
     'column': 'sv_q_select_column'
@@ -126,11 +127,11 @@ export const css = {
     'root': 'btn-group',
     'item': 'btn btn-default btn-secondary',
     'selected': 'active',
-    'minText': 'sv_q_rating_min_text',
-    'itemText': 'sv_q_rating_item_text',
-    'maxText': 'sv_q_rating_max_text'
+    'minText': '',
+    'itemText': '',
+    'maxText': ''
   },
-  'text': 'survey__input skillbox-input',
+  'text': 'survey__input skillbox-input question__input',
   'expression': 'survey__input skillbox-input',
   'file': {
     'root': 'sv_q_file',
@@ -141,7 +142,7 @@ export const css = {
     'removeFile': 'sv_q_file_remove'
   },
   'saveData': {
-    'root': '',
+    'root': 'save-data',
     'saving': 'alert alert-info',
     'error': 'alert alert-danger',
     'success': 'alert alert-success',