diff --git a/app/assets/javascripts/components/option-select.js b/app/assets/javascripts/components/option-select.js
index 36f6a3ce0e..77974602ab 100644
--- a/app/assets/javascripts/components/option-select.js
+++ b/app/assets/javascripts/components/option-select.js
@@ -140,7 +140,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   OptionSelect.prototype.attachCheckedCounter = function attachCheckedCounter (checkedString) {
     this.$optionSelect.find('.js-container-head')
-      .after('<div class="govuk-!-font-size-14 app-c-option-select__selected-counter js-selected-counter">' + checkedString + '</div>')
+      .after('<div class="app-c-option-select__selected-counter js-selected-counter">' + checkedString + '</div>')
   }
 
   OptionSelect.prototype.updateCheckedCount = function updateCheckedCount () {
diff --git a/app/assets/stylesheets/components/_option-select.scss b/app/assets/stylesheets/components/_option-select.scss
index 1003236f4d..d14123b1e3 100644
--- a/app/assets/stylesheets/components/_option-select.scss
+++ b/app/assets/stylesheets/components/_option-select.scss
@@ -1,7 +1,7 @@
 .app-c-option-select {
   position: relative;
   padding: 0 0 1px;
-  background-color: govuk-colour("grey-3");
+  background-color: govuk-colour("light-grey", $legacy: "grey-3");
   margin-bottom: govuk-spacing(6);
 
   @include media(desktop) {
@@ -45,7 +45,8 @@
 }
 
 .app-c-option-select__button {
-  z-index: 100;
+  position: relative;
+  z-index: 1;
   padding-right: 40px;
   width: 100%;
   background: none;
@@ -55,13 +56,13 @@
 
   &:hover,
   &:hover + .app-c-option-select__selected-counter {
-    background-color: govuk-colour("grey-2");
+    background-color: govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
   &:hover ~ .app-c-option-select__container,
   &:hover ~ .app-c-option-select__selected-counter,
   &:hover ~ .app-c-option-select__filter {
-    border-color: govuk-colour("grey-2");
+    border-color: govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
   &::-moz-focus-inner {
@@ -70,6 +71,13 @@
 
   &:focus {
     outline: none;
+    @include govuk-focused-text;
+
+    & ~ .app-c-option-select__selected-counter {
+      position: relative;
+      z-index: 2;
+      @include govuk-focused-text;
+    }
 
     &:after {
       content: "";
@@ -78,7 +86,6 @@
       left: 0;
       width: 100%;
       height: 100%;
-      outline: solid 3px govuk-colour('yellow');
     }
   }
 
@@ -103,7 +110,7 @@
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
-  border: govuk-spacing(1) solid govuk-colour("grey-3");
+  border: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
   background-color: govuk-colour("white");
 
   &:focus {
@@ -118,8 +125,8 @@
 .app-c-option-select__filter {
   position: relative;
   background: govuk-colour('white');
-  border-left: govuk-spacing(1) solid govuk-colour("grey-3");
-  border-right: govuk-spacing(1) solid govuk-colour("grey-3");
+  border-left: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
+  border-right: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
   padding: 13px 13px govuk-spacing(2) 13px;
 }
 
@@ -135,7 +142,7 @@
 
 .js-enabled {
   .app-c-option-select__container {
-    border: govuk-spacing(1) solid govuk-colour("grey-3");
+    border: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3");
     border-top: 0;
   }
 
@@ -149,6 +156,7 @@
 }
 
 .app-c-option-select__selected-counter {
+  @include govuk-font($size: 14);
   margin-top: -3px;
   padding: 0 8px 3px 18px;
 }
@@ -156,7 +164,7 @@
 .app-c-option-select--expander {
   padding: 0;
   margin: 0;
-  background: none;
+  background-color: transparent;
   border-bottom: solid 1px govuk-colour("black");
 
   .app-c-option-select__container {
@@ -176,14 +184,6 @@
 
   .app-c-option-select__button {
     position: relative;
-
-    &:hover {
-      background: none;
-
-      & + .app-c-option-select__selected-counter {
-        background: none;
-      }
-    }
   }
 
   .app-c-option-select__selected-counter {