diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss
index f8b30374e..4fd73b654 100644
--- a/app/assets/stylesheets/shared_styles/elements/buttons.scss
+++ b/app/assets/stylesheets/shared_styles/elements/buttons.scss
@@ -11,6 +11,7 @@
   line-height: 20px;
   outline: 0;
   padding: 7px 16px;
+  position: relative;
   transition: .3s;
   user-select: none;
 
@@ -84,4 +85,41 @@
   &:focus {
     border: $border-focus;
   }
+
+  &:disabled {
+    background: $color-alto;
+    border: $border-tertiary;
+    color: $color-silver-chalice;
+    opacity: .25;
+
+    &.secondary,
+    &.tertiary {
+      background: $color-white;
+
+      &:hover {
+        background: $color-white;
+        border: $border-tertiary;
+      }
+    }
+
+    &.sensitive {
+      &:hover {
+        background: $color-alto;
+      }
+    }
+  }
+}
+
+.sci-btn-group {
+  display: inline-block;
+  position: relative;
+
+  .sci-btn {
+    float: left;
+    margin: 0 4px 4px 0;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
new file mode 100644
index 000000000..649f38117
--- /dev/null
+++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss
@@ -0,0 +1,62 @@
+:root {
+  --sci-checkbox-size: 16px;
+}
+
+input[type="checkbox"].sci-checkbox {
+  cursor: pointer;
+  flex-shrink: 0;
+  height: var(--sci-checkbox-size);
+  margin: 0;
+  opacity: 0;
+  position: relative;
+  width: var(--sci-checkbox-size);
+  z-index: 2;
+
+  + .sci-checkbox-label {
+    display: inline-block;
+    flex-shrink: 0;
+    height: var(--sci-checkbox-size);
+    margin-left: calc((var(--sci-checkbox-size) * -1) - 3px);
+    position: relative;
+    width: var(--sci-checkbox-size);
+
+    &::before {
+      animation-timing-function: $timing-function-sharp;
+      background: $color-white;
+      border: $border-default;
+      border-radius: 1px;
+      color: $color-white;
+      content: "";
+      font-family: "Font Awesome 5 Free";
+      font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * 0.375);
+      font-weight: 501;
+      height: var(--sci-checkbox-size);
+      left: 0;
+      line-height: calc(var(--sci-checkbox-size) - 2px);
+      position: absolute;
+      text-align: center;
+      top: 1px;
+      transition: .2s;
+      width: var(--sci-checkbox-size);
+    }
+  }
+
+  &.hidden + .sci-checkbox-label {
+    display: none;
+  }
+
+  &:checked + .sci-checkbox-label {
+    &::before {
+      background: $brand-primary;
+      border: 1px solid $brand-primary;
+      content: "\f00c";
+    }
+  }
+
+  &:disabled + .sci-checkbox-label {
+    &::before {
+      background: $color-alto;
+      border: $border-tertiary;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss b/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss
new file mode 100644
index 000000000..23cf8ddd4
--- /dev/null
+++ b/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss
@@ -0,0 +1,80 @@
+:root {
+  --sci-radio-size: 16px;
+}
+
+input[type="radio"].sci-radio {
+  cursor: pointer;
+  flex-shrink: 0;
+  height: var(--sci-radio-size);
+  margin: 0;
+  opacity: 0;
+  position: relative;
+  width: var(--sci-radio-size);
+  z-index: 2;
+
+  + .sci-radio-label {
+    display: inline-block;
+    flex-shrink: 0;
+    height: var(--sci-radio-size);
+    margin-left: calc((var(--sci-radio-size) * -1) - 3px);
+    position: relative;
+    width: var(--sci-radio-size);
+
+    &::before {
+      animation-timing-function: $timing-function-sharp;
+      border: $border-default;
+      border-radius: 50%;
+      color: $color-white;
+      content: "";
+      font-family: "Font Awesome 5 Free";
+      font-size: calc(var(--sci-radio-size) - var(--sci-radio-size) * 0.375);
+      font-weight: 501;
+      height: var(--sci-radio-size);
+      left: 0;
+      line-height: calc(var(--sci-radio-size) - 2px);
+      position: absolute;
+      text-align: center;
+      top: 1px;
+      transition: .2s;
+      width: var(--sci-radio-size);
+    }
+
+    &::after {
+      animation-timing-function: $timing-function-sharp;
+      background: $color-white;
+      border-radius: 50%;
+      content: "";
+      display: inline-block;
+      height: calc(var(--sci-radio-size) - 6px);
+      left: 3px;
+      position: absolute;
+      top: 4px;
+      transition: .2s;
+      width: calc(var(--sci-radio-size) - 6px);
+    }
+  }
+
+  &.hidden + .sci-radio-label {
+    display: none;
+  }
+
+  &:checked + .sci-radio-label {
+    &::before {
+      border: 1px solid $brand-primary;
+    }
+    &::after {
+      background: $brand-primary;
+    }
+  }
+
+  &:disabled + .sci-radio-label {
+    &::before {
+      background: $color-alto;
+      border: $border-tertiary;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index 0dd059ce8..641b50ed0 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -173,33 +173,53 @@
 <!-- remove next part before merge -->
 
 <div class="demo-container" style="background: white; padding: 20px;">
-  <div>
+  <div class="sci-btn-group">
     <button class="sci-btn">Button</button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn secondary">Button</button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn tertiary">Button</button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn sensitive">Button</button>
   </div>
   <hr>
-  <div>
+  <div class="sci-btn-group">
     <button class="sci-btn"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn secondary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn tertiary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn sensitive"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
   </div>
   <hr>
-  <div>
+  <div class="sci-btn-group">
     <button class="sci-btn icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn secondary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn tertiary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
-    <span style="display: inline-block; width: 30px"></span>
     <button class="sci-btn sensitive icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
   </div>
+  <hr>
+  <div class="sci-btn-group">
+    <button class="sci-btn" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+    <button class="sci-btn secondary" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+    <button class="sci-btn tertiary" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+    <button class="sci-btn sensitive" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+  </div>
+  <hr>
+  <div>
+    <input type="checkbox" class="sci-checkbox">
+    <span class="sci-checkbox-label"></span>
+    <span style="display: inline-block; width: 20px"></span>
+    <input type="checkbox" class="sci-checkbox" disabled>
+    <span class="sci-checkbox-label"></span>
+    <span style="display: inline-block; width: 20px"></span>
+    <input type="checkbox" class="sci-checkbox" disabled checked>
+    <span class="sci-checkbox-label"></span>
+  </div>
+  <hr>
+  <div>
+    <input type="radio" name="test" class="sci-radio">
+    <span class="sci-radio-label"></span>
+    <span style="display: inline-block; width: 20px"></span>
+    <input type="radio" name="test" class="sci-radio">
+    <span class="sci-radio-label"></span>
+    <span style="display: inline-block; width: 20px"></span>
+    <input type="radio" name="test" class="sci-radio" disabled>
+    <span class="sci-radio-label"></span>
+  </div>
 </div>