diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco
index 79e87f722..7a79cc856 100755
--- a/server/documents/collections/form.html.eco
+++ b/server/documents/collections/form.html.eco
@@ -33,32 +33,117 @@ themes      : ['default', 'GitHub']
         <a href="/elements/input.html">inputs</a>, standard form fields, <a href="/elements/label.html">labels</a>, <a href="/modules/dropdown.html">selection dropdowns</a>, textareas, as well as:
         <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/collections/message.html">message blocks</a>.
     </p>
-    <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
     <div class="ui ignored warning top attached message">
       <p>If you are looking for form validation, you should check out <a href="/modules/form.html">form validation</a>.</p>
     </div>
-    <div class="ui ignored bottom attached message">
-      <p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p>
+    <div class="ui ignored info attached message"><p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
+    <p>This example also uses <a href="/elements/segment.html">ui segment</a> to group the form. This is not required.
     </div>
     <div class="ui form segment">
-      <div class="required field">
-        <label>Username</label>
-        <div class="ui left labeled icon input">
-          <input type="text" placeholder="Username">
-          <i class="user icon"></i>
+      <h4 class="ui dividing header">Personal Information</h4>
+      <div class="two fields">
+        <div class="field">
+          <label>Name</label>
+          <div class="two fields">
+            <div class="field">
+              <input type="text" name="first-name" placeholder="First Name">
+            </div>
+            <div class="field">
+              <input type="text" name="last-name" placeholder="Last Name">
+            </div>
+          </div>
+        </div>
+        <div class="field">
+          <label>Gender</label>
+          <div class="ui selection dropdown">
+            <input type="hidden" name="gender">
+            <div class="default text">Gender</div>
+            <i class="dropdown icon"></i>
+            <div class="menu">
+              <div class="item" data-value="male">Male</div>
+              <div class="item" data-value="female">Female</div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="required field">
-        <label>Password</label>
-        <div class="ui left labeled icon input">
-          <input type="password">
-          <i class="lock icon"></i>
+      <div class="field">
+        <label>Biography</label>
+        <textarea></textarea>
+      </div>
+      <h4 class="ui dividing header">Account Info</h4>
+      <div class="two fields">
+        <div class="required field">
+          <label>Username</label>
+          <div class="ui left labeled icon input">
+            <input type="text" placeholder="Username">
+            <i class="user icon"></i>
+          </div>
+        </div>
+        <div class="required field">
+          <label>Password</label>
+          <div class="ui left labeled icon input">
+            <input type="password">
+            <i class="lock icon"></i>
+          </div>
+        </div>
+      </div>
+
+      <h4 class="ui block top attached header">Optional Survey</h4>
+      <div class="ui bottom attached secondary segment">
+        <div class="grouped fields">
+          <label for="alone">Are you a human?</label>
+          <div class="field">
+            <div class="ui radio checkbox">
+              <input type="radio" checked="" name="alone">
+              <label>Yes</label>
+            </div>
+          </div>
+          <div class="field">
+            <div class="ui radio checkbox">
+              <input type="radio" name="alone">
+              <label>No</label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h4 class="ui dividing header">Settings</h4>
+      <h5 class="ui header">Privacy</h5>
+      <div class="field">
+        <div class="ui toggle checkbox">
+          <input type="radio" name="privacy">
+          <label>Allow <b>anyone</b> to see my account</label>
+        </div>
+      </div>
+      <div class="field">
+        <div class="ui toggle checkbox">
+          <input type="radio" name="privacy">
+          <label>Allow <b>only friends</b> to see my account</label>
+        </div>
+      </div>
+      <h5 class="ui header">Newsletter Subscriptions</h5>
+      <div class="field">
+        <div class="ui slider checkbox">
+          <input type="checkbox" name="top-posts">
+          <label>Top Posts This Week</label>
+        </div>
+      </div>
+      <div class="field">
+        <div class="ui slider checkbox">
+          <input type="checkbox" name="hot-deals">
+          <label>Hot Deals</label>
+        </div>
+      </div>
+      <div class="field">
+        <div class="ui checkbox">
+          <input type="checkbox" name="hot-deals">
+          <label>I agree to the <a href="#">Terms of Service</a>.</label>
         </div>
       </div>
       <div class="ui error message">
         <div class="header">We noticed some issues</div>
       </div>
-      <div class="ui submit button">Login</div>
+      <div class="ui submit button">Register</div>
     </div>
   </div>
 
diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco
index aa9e79d56..3b307a71d 100755
--- a/server/documents/modules/checkbox.html.eco
+++ b/server/documents/modules/checkbox.html.eco
@@ -39,19 +39,19 @@ themes      : ['default']
 
     <div class="example">
       <h4 class="ui header">Slider</h4>
-      <p>A checkbox can be formatted to show user selection as a slider</p>
+      <p>A checkbox can be formatted to emphasize the current selection state</p>
       <div class="ui slider checkbox">
-        <input type="checkbox" name="walk" />
-        <label>Allow others to see when your dog is on a walk</label>
+        <input type="checkbox" name="newsletter" />
+        <label>Receive weekly poodle newsletter</label>
       </div>
     </div>
 
     <div class="example">
       <h4 class="ui header">Toggle</h4>
-      <p>A checkbox can be formatted to show user selection as a toggle</p>
+      <p>A checkbox can be formatted to show an on or off choice</p>
       <div class="ui toggle checkbox">
-        <input type="checkbox" name="pet" />
-        <label>Allow other people to pet my dog</label>
+        <input type="checkbox" name="public" />
+        <label>Make my dog's profile public</label>
       </div>
     </div>
 
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
index c5af9dcdc..0ed01748e 100755
--- a/src/definitions/collections/form.less
+++ b/src/definitions/collections/form.less
@@ -48,7 +48,7 @@
   clear: both;
   margin: @fieldMargin;
 }
-.ui.form .field:last-child {
+.ui.form :not(.fields) .field:last-child {
   margin-bottom: 0em;
 }
 
diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
index bc54962d2..cf7e1844a 100755
--- a/src/definitions/modules/checkbox.less
+++ b/src/definitions/modules/checkbox.less
@@ -228,6 +228,7 @@
 .ui.slider.checkbox label {
   padding-left: @sliderLabelDistance;
   line-height: @sliderLabelLineHeight;
+  color: @sliderOffLabelColor;
 }
 
 /* Line */
@@ -243,12 +244,12 @@
   z-index: 1;
   border: none !important;
 
-  background-color: @neutralCheckbox;
+  background-color: @sliderLineColor;
   width: @sliderLineWidth;
   height: @sliderLineHeight;
 
   transform: none;
-  border-radius: @circularRadius;
+  border-radius: @sliderLineRadius;
   transition:
     background 0.3s ease
   ;
@@ -283,10 +284,24 @@
   border: none;
 }
 
+/* Hover */
+.ui.slider.checkbox .box:hover,
+.ui.slider.checkbox label:hover {
+  color: @sliderHoverLabelColor;
+}
+.ui.slider.checkbox .box:hover::before,
+.ui.slider.checkbox label:hover::before {
+  background: @sliderHoverLaneBackground;
+}
+
 /* Active */
+.ui.slider.checkbox input:checked ~ .box,
+.ui.slider.checkbox input:checked ~ label {
+  color: @sliderOnLabelColor;
+}
 .ui.slider.checkbox input:checked ~ .box:before,
 .ui.slider.checkbox input:checked ~ label:before {
-  background-color: @positiveCheckbox;
+  background-color: @sliderOnLineColor;
 }
 .ui.slider.checkbox input:checked ~ .box:after,
 .ui.slider.checkbox input:checked ~ label:after {
@@ -308,6 +323,7 @@
   height: @toggleSize;
   padding-left: @toggleLabelDistance;
   line-height: @toggleLabelLineHeight;
+  color: @toggleOffLabelColor;
 }
 
 /* Switch */
@@ -346,7 +362,10 @@
   left: 0em;
 
   border-radius: @circularRadius;
-  transition: @toggleLabelTransition;
+  transition:
+    background 0.3s ease 0s,
+    left 0.3s ease 0s
+  ;
 }
 
 .ui.toggle.checkbox input ~ .box:after,
@@ -361,14 +380,21 @@
   border: none;
 }
 
+/* Hover */
+.ui.toggle.checkbox .box:hover::before,
+.ui.toggle.checkbox label:hover::before {
+  background-color: @toggleHoverColor;
+  border: none;
+}
+
 /* Active */
 .ui.toggle.checkbox input:checked ~ .box,
 .ui.toggle.checkbox input:checked ~ label {
-  color: @positiveCheckbox;
+  color: @toggleOnLabelColor;
 }
 .ui.toggle.checkbox input:checked ~ .box:before,
 .ui.toggle.checkbox input:checked ~ label:before {
-  background-color: @positiveCheckbox;
+  background-color: @toggleOnLaneColor;
 }
 .ui.toggle.checkbox input:checked ~ .box:after,
 .ui.toggle.checkbox input:checked ~ label:after {
diff --git a/src/themes/packages/default/modules/checkbox.variables b/src/themes/packages/default/modules/checkbox.variables
index d3ed58623..4be777c9f 100755
--- a/src/themes/packages/default/modules/checkbox.variables
+++ b/src/themes/packages/default/modules/checkbox.variables
@@ -25,7 +25,7 @@
 ;
 
 /* Checkmark */
-@checkboxCheckOffset: 1px;
+@checkboxCheckOffset: 2px;
 
 /*-------------------
       Coupling
@@ -69,39 +69,55 @@
 ;
 
 /* Slider */
-@sliderHandleSize: 1.5rem;
+@sliderSize: 1.5rem;
+@sliderHandleSize: @sliderSize;
 
 @sliderLineWidth: 3.5rem;
 @sliderLineHeight: 0.25rem;
 @sliderLineVerticalOffset: 0.4rem;
+@sliderLineColor: @neutralCheckbox;
+@sliderLineRadius: @circularRadius;
 
 @sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
 @sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
+
 @sliderLabelDistance: @sliderLineWidth + 1rem;
+@sliderOffLabelColor: @unselectedTextColor;
 
-@sliderSize: @sliderHandleSize;
+@sliderOnLineColor: @strongTransparentBlack;
+@sliderOnLabelColor: @selectedTextColor;
 @sliderLabelLineHeight: 1rem;
 
+@sliderHoverLaneBackground: @strongTransparentBlack;
+@sliderHoverLabelColor: @selectedTextColor;
+
+
 /* Toggle */
-@toggleSize: 1.75rem;
+@toggleSize: 1.5rem;
 @toggleHandleSize: @toggleSize;
 @toggleHandleRadius: @circularRadius;
 @toggleHandleOffset: 0rem;
+@toggleHandleTransition:
+  background 0.3s ease 0s,
+  left 0.3s ease 0s
+;
 
 @toggleLaneWidth: 3.5rem;
-@toggleLaneHeight: 1.75rem;
+@toggleLaneHeight: @toggleSize;
 @toggleLaneVerticalOffset: 0rem;
 @toggleOffOffset: -0.05rem;
 @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem;
 
-@toggleLabelDistance: @toggleLaneWidth + @toggleSize;
+@toggleLabelDistance: @toggleLaneWidth + 1rem;
 @toggleLabelLineHeight: 1.5rem;
-@toggleLabelTransition:
-  background 0.3s ease 0s,
-  left 0.3s ease 0s
-;
+
 
 @toggleFocusColor: @strongTransparentBlack;
+@toggleHoverColor: @toggleFocusColor;
+
+@toggleOffLabelColor: @checkboxColor;
+@toggleOnLabelColor: @positiveCheckbox;
+@toggleOnLaneColor: @positiveCheckbox;