diff --git a/source/_patterns/01-molecules/09-switch/binary-switch.mustache b/source/_patterns/01-molecules/09-switch/binary-switch.mustache
index e4123c57f25899757fd239ac2428a4ffc3ec8928..7800c606da3c639aeea7b53fa638d914626377d6 100644
--- a/source/_patterns/01-molecules/09-switch/binary-switch.mustache
+++ b/source/_patterns/01-molecules/09-switch/binary-switch.mustache
@@ -1,4 +1,4 @@
 <div class="switch">
-  <a {{# viewProvider1 }}@click="toggleView('{{ viewProvider1 }}')"{{/ viewProvider1 }} class="switch__item {{^ secondActive }}switch__item--active{{/ secondActive }}">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
-  <a {{# viewProvider2 }}@click="toggleView('{{ viewProvider2 }}')"{{/ viewProvider2 }} class="switch__item {{# secondActive }}switch__item--active{{/ secondActive }}">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
+  <a {{# viewProvider1 }}@click="toggleView('{{ viewProvider1 }}')"{{/ viewProvider1 }} class="switch__item {{ classes }} {{^ secondActive }}switch__item--active {{ activeClasses }}{{/ secondActive }}">{{ cta1 }}{{^ cta1 }}{{ cta }}{{/ cta1 }}</a>
+  <a {{# viewProvider2 }}@click="toggleView('{{ viewProvider2 }}')"{{/ viewProvider2 }} class="switch__item {{ classes }} {{# secondActive }}switch__item--active {{ activeClasses }}{{/ secondActive }}">{{ cta2 }}{{^ cta2 }}{{ cta }}{{/ cta2 }}</a>
 </div>
diff --git a/source/css/molecules/switch.pcss b/source/css/molecules/switch.pcss
index e74a9fbf75eb8bc36d09069882d8a988f5117182..7e5c37badee7c9b7b4384c7617e689c2c89866de 100644
--- a/source/css/molecules/switch.pcss
+++ b/source/css/molecules/switch.pcss
@@ -8,9 +8,8 @@
   &:hover {
     @apply no-underline bg-grey-500;
   }
-
-  &.switch__item--active,
-  &.switch__item--active:hover {
-    @apply bg-cyan-300;
-  }
 }
+.switch__item--active,
+.switch__item--active:hover {
+@apply bg-cyan-300;
+}
\ No newline at end of file