diff --git a/switch.css b/switch.css
index e3f7c98..afc2a03 100644
--- a/switch.css
+++ b/switch.css
@@ -17,7 +17,7 @@
 }
 .switch input:checked ~ .switchbg{
     background: var(--switch-active);
-    filter: saturate(50%) brightness(150%)
+    filter: saturate(50%) brightness(125%)
 }
 .switch input:checked ~ .nub {
     background: var(--switch-active);
@@ -51,4 +51,4 @@
     background: white;
     z-index: 1;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
-}
\ No newline at end of file
+}
diff --git a/switch.lit.html b/switch.lit.html
index cb4409e..13a49e3 100644
--- a/switch.lit.html
+++ b/switch.lit.html
@@ -10,6 +10,7 @@
         <form>
             <mk-switch></mk-switch>
             <mk-switch name="two" checked="true" style="--switch-active: hsl(138, 48%, 48%)"></mk-switch>
+            <mk-switch name="three" style="--switch-active: hsl(205, 48%, 48%)">
             <input type="submit" value="sumbit">
         </form>
         <script src="./switch.lit.js" type="module"></script>
diff --git a/switch.lit.js b/switch.lit.js
index 5a9c5b5..52f3359 100644
--- a/switch.lit.js
+++ b/switch.lit.js
@@ -16,7 +16,7 @@ class Switch extends LitElement {
         return html`
             <label class="switch" role="tab">
                 <input type="checkbox" name="${this.name}" id="nub" ?checked=${this.checked}>
-                <span class="nub"></span>
+                <div class="nub"></div>
                 <div class="switchbg"></div>
             </label>
             <link rel="stylesheet" href="https://switch.fallproject.org/switch.css">