diff --git a/pages/_includes/cards/form-elements.html b/pages/_includes/cards/form-elements.html
index d181fe701..b9cc99d80 100644
--- a/pages/_includes/cards/form-elements.html
+++ b/pages/_includes/cards/form-elements.html
@@ -126,126 +126,25 @@
             </div>
             <div class="form-group">
                <label class="form-label">Size</label>
-               <div class="selectgroup w-100">
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="50" class="selectgroup-input" checked="">
-                     <span class="selectgroup-button">S</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="100" class="selectgroup-input">
-                     <span class="selectgroup-button">M</span>
-                  </label>
-
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="150" class="selectgroup-input">
-                     <span class="selectgroup-button">L</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="200" class="selectgroup-input">
-                     <span class="selectgroup-button">XL</span>
-                  </label>
-               </div>
+               {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
             </div>
             <div class="form-group">
                <label class="form-label">Shipping methods</label>
-               <div class="selectgroup selectgroup-vertical w-100">
-                  <label class="selectgroup-item">
-                     <input type="radio" name="shipping" value="unregistered" class="selectgroup-input" checked>
-                     <span class="selectgroup-button">Unregistered</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="shipping" value="priority" class="selectgroup-input">
-                     <span class="selectgroup-button">Priority Mail</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="shipping" value="express" class="selectgroup-input">
-                     <span class="selectgroup-button">Express Mail</span>
-                  </label>
-               </div>
+               {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
             </div>
             <div class="form-group">
                <label class="form-label">Icons input</label>
-               <div class="selectgroup w-100">
-                  <label class="selectgroup-item">
-                     <input type="radio" name="transportation" value="2" class="selectgroup-input">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="smartphone" %}</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="tablet" %}</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="transportation" value="6" class="selectgroup-input">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="monitor" %}</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="transportation" value="6" class="selectgroup-input">
-                     <span class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="x" %}</span>
-                  </label>
-               </div>
+               {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
             </div>
 
             <div class="form-group">
                <label class="form-label">Icon input</label>
-               <div class="selectgroup selectgroup-pills">
-                  <label class="selectgroup-item">
-                     <input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="sun" %}</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="icon-input" value="2" class="selectgroup-input">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="moon" %}</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="icon-input" value="3" class="selectgroup-input">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="cloud-rain" %}</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="icon-input" value="4" class="selectgroup-input">
-                     <span
-                        class="selectgroup-button selectgroup-button-icon">{% include ui/icon.html icon="cloud" %}</span>
-                  </label>
-               </div>
+               {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
             </div>
 
             <div class="form-group">
                <label class="form-label">Your skills</label>
-               <div class="selectgroup selectgroup-pills">
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
-                     <span class="selectgroup-button">HTML</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="CSS" class="selectgroup-input">
-                     <span class="selectgroup-button">CSS</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="PHP" class="selectgroup-input">
-                     <span class="selectgroup-button">PHP</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
-                     <span class="selectgroup-button">JavaScript</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
-                     <span class="selectgroup-button">Ruby</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
-                     <span class="selectgroup-button">Ruby</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="checkbox" name="value" value="C++" class="selectgroup-input">
-                     <span class="selectgroup-button">C++</span>
-                  </label>
-               </div>
+               {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
             </div>
 
             {% include parts/input-toggle.html %}
diff --git a/pages/_includes/ui/input-selectgroup.html b/pages/_includes/ui/input-selectgroup.html
new file mode 100644
index 000000000..5f5cfb630
--- /dev/null
+++ b/pages/_includes/ui/input-selectgroup.html
@@ -0,0 +1,12 @@
+{% assign values = include.values | default: "One,Two,Three" | split: ',' %}
+{% assign type = include.type | default: "checkbox" %}
+{% assign name = include.name | default: "name" %}
+<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
+   {% for value in values %}
+   <label class="selectgroup-item">
+      <input type="{{ type }}" name="input-{{ name }}" value="{{ value }}" class="selectgroup-input"{% if forloop.first %}{% if type == "radio" %} selected{% else %} checked{% endif %}{% endif %}>
+      {% assign s = value | split: "i:" %}
+      <span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon %}{% else %}{{ value }}{% endif %}</span>
+   </label>
+   {% endfor %}
+</div>
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index bb3551cf9..9e48b7154 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -23,7 +23,7 @@
 	{% include layout/css.html %}
 	{% include layout/js.html %}
 </head>
-<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
 
    {{ content}}
 
diff --git a/scss/_dark.scss b/scss/_dark.scss
index 3de52352f..43b614e34 100644
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -34,7 +34,7 @@ body.theme-dark {
 }
 
 @media (prefers-color-scheme: dark) {
-  body {
+  body.auto-theme-dark {
     @include dark-mode;
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cf2799199..444de5716 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -43,13 +43,13 @@ $dark: #2d3748 !default;
 $black: #121212 !default;
 $white: #fff !default;
 
-$body-bg: #f5f7fb !default;
+$body-bg: #F8FAFB !default;
 
 $text-color: #495057 !default;
 $text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
-$border-color: rgba(0, 0, 0, 0.08) !default;
+$border-color: rgba(0, 0, 0, 0.09) !default;
 
 $social-colors: (
   "facebook": #3b5998,
diff --git a/scss/ui/_inputs.custom.scss b/scss/ui/_inputs.custom.scss
index 5634f679f..23cd3c196 100644
--- a/scss/ui/_inputs.custom.scss
+++ b/scss/ui/_inputs.custom.scss
@@ -161,25 +161,20 @@ Selectgroup
   min-width: $input-height;
   padding: $input-btn-padding-y 1rem;
   font-size: $font-size-base;
-  line-height: 1.5rem;
+  line-height: $input-line-height;
   color: $text-muted;
   text-align: center;
   cursor: pointer;
   user-select: none;
   border: 1px solid $input-border-color;
   border-radius: 3px;
-}
-
-.selectgroup-button-icon {
-  padding-right: .5rem;
-  padding-left: .5rem;
-  font-size: 1rem;
+  background: rgba(#fff, .064);
 }
 
 .selectgroup-input:checked + .selectgroup-button {
   z-index: 1;
   color: $primary;
-  background: mix(#fff, $primary, 90%);
+  background: rgba($primary, .08);
   border-color: $primary;
 }