diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 7bad975..9c5ba92 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,11 +1,13 @@
 button, .button, input[type="submit"], .submit {
   font-weight: bold;
   font-size: 1em;
+  @include fontFamily;
   text-transform: none;
   border-radius: 3px;
   padding: .8rem 3.5rem .5rem;
   height: auto;
   border: 0;
+  overflow: hidden;
   &:hover {
     cursor: pointer;
   }
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 94ef663..3b98626 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -2,7 +2,10 @@
 $white: #ffffff;
 $black: #333;
 $darkgrey: #666;
+$medgrey: #d7dbe0;
 $lightgrey: #ccc;
+$lightblue: #f0f2f5;
+$purple: #5A3EC8;
 $field__disabled: #d8d8d8;
 $btn__disabled-txt: #a6a5a6;
 $btn__disabled-bg: #d8d8d8;
@@ -27,16 +30,18 @@
 $secbtn__border: #3f71ec;
 $secbtn__text: #3f71ec;
 
+// Dropdowns
+$dropdown__focus-bg: #e6e9ee;
 
 // Alerts
-$alert__error: rgba(230, 35, 37, 0.3);
-$alert__warning: rgba(255, 127, 0, 0.3);
-$alert__message: rgba(203, 221, 235, 0.5);
+$alert__error: rgb(230, 35, 37);
+$alert__warning: rgb(255, 127, 0);
+$alert__message: rgb(203, 221, 235);
 
 // Links
 $links: #648FFF;
 $links__hover: $lightbg__accent;
-$links__visited: #5A3EC8;
+$links__visited: $purple;
 $links__disabled: rgba(27, 40, 52, 0.70);
 
 // Navigation
@@ -44,7 +49,8 @@
 $nav__second-level-color: #e6e9ed;
 
 // Status colors
-$error-color: #FF5C49;
+$error-color: #e62425;
 $status-ok: #34bc6e;
 $status-ok-light: #bcefce;
-$status-warn: #ffb000;
\ No newline at end of file
+$status-warn: #ffb000;
+
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index f899e0c..b49c5b2 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -57,73 +57,3 @@
     box-shadow: 0 0 0;
   }
 }
-
-//Custom Checkbox and Radio
-.checkbox-custom,
-.radio-custom {
-  opacity: 0;
-  position: absolute;
-}
-
-.checkbox-custom, .checkbox-custom-label,
-.radio-custom,
-.radio-custom-label {
-  display: inline-block;
-  vertical-align: middle;
-  margin: .1em 0 .1em -.5em;
-  padding: .5em;
-  cursor: pointer;
-}
-
-.checkbox-custom-label, .radio-custom-label {
-  position: relative;
-  padding-left: 2em;
-
-}
-
-.checkbox-custom + .checkbox-custom-label:before,
-.radio-custom + .radio-custom-label:before {
-  content: '';
-  background: #fff;
-  border: 1px solid $lightbg__grey;
-  display: inline-block;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-  margin-top: -3px;
-  text-align: center;
-  position: absolute;
-  left: 9px;
-  top: 15px;
-}
-
-.checkbox-custom:checked + .checkbox-custom-label:after {
-  content: '\2713';
-  position: absolute;
-  left: 10px;
-  top: 3px;
-  font-size: 1em;
-  padding: 4px 0 0 2px;
-  color: $white;
-}
-
-.checkbox-custom:checked + .checkbox-custom-label:before {
-  background: $lightbg__primary;
-  @include fastTransition-all;
-}
-
-.radio-custom + .radio-custom-label:before {
-  border-radius: 50%;
-}
-
-.radio-custom:checked + .radio-custom-label:before {
-  background: $lightbg__primary;
-  @include fastTransition-all;
-  box-shadow: inset 0px 0px 0px 2px #fff;
-}
-
-
-.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
-  outline: 1px solid $lightbg__grey; /* focus style */
-}
diff --git a/app/common/styles/base/foundation b/app/common/styles/base/foundation.scss
similarity index 100%
rename from app/common/styles/base/foundation
rename to app/common/styles/base/foundation.scss
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 71d8f39..6caeba7 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -30,6 +30,11 @@
   font-weight: 200;
 }
 
+@mixin fontCourierBold {
+  font-family: "Courier New", Helvetica, arial, sans-serif;
+  font-weight: 700;
+}
+
 //Transitions mixin
 @mixin fastTransition-all {
   transition: all .5s ease;
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index e69de29..f4be1b1 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -0,0 +1,172 @@
+// Drop downs
+.dropdown__button {
+  position: relative;
+  padding: 1em;
+  margin-top: -10px;
+  &.active,
+  &:hover {
+    background: $dropdown__focus-bg;
+  }
+  &:after {
+    content: '\276F';
+    display: inline-block;
+    margin-left: 5px;
+    font-size: .8em;
+    transform: rotate(90deg);
+    color: $lightbg__primary;
+  }
+}
+
+.dropdown__wrapper {
+  position: relative;
+  display: inline-block;
+  float: left;
+}
+
+.dropdown__list {
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  top: 100%;
+  background: $white;
+  padding: 0;
+  width: 100%;
+  border: 1px solid $lightbg__grey;
+  margin-top: -5px;
+  box-shadow: 0 4px 10px -2px $lightgrey;
+  li {
+    list-style-type: none;
+  }
+  button {
+    padding: 1em 1em 1em 1.8em;
+    text-align: left;
+    width: 100%;
+    &:hover {
+      background: $dropdown__focus-bg;
+    }
+  }
+}
+
+.dropdown__list {
+  min-width: 230px;
+}
+.dropdown__list.multi-select {
+  > .active {
+    position: relative;
+    &:before {
+      content: '\2713';
+      position: absolute;
+      display: inline-block;
+      top: 50%;
+      left: .6em;
+      color: $lightbg__primary;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+.dropdown__date {
+  width: 430px;
+  .row {
+    padding: 1em;
+    margin-right: 0;
+  }
+  input {
+    max-width: 170px;
+    color: $darkgrey;
+  }
+}
+
+
+
+// Checkbox
+
+.control-check {
+  font-size: 18px;
+  position: relative;
+  display: inline-block;
+  margin-bottom: 15px;
+  padding-left: 1em;
+  padding-top: 7px;
+  cursor: pointer;
+  line-height: .5;
+}
+
+.control-check input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.control__indicator {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background: $white;
+  border: 1px solid $lightgrey;
+}
+
+.control--radio .control__indicator {
+  border-radius: 50%;
+}
+
+/* Hover and focus states */
+.control-check:hover input ~ .control__indicator,
+.control-check input:focus ~ .control__indicator {
+  border: 1px solid $primebtn__bg;
+}
+
+/* Checked state */
+.control-check input:checked ~ .control__indicator {
+  background: $primebtn__bg;
+
+}
+
+/* Hover state whilst checked */
+.control-check:hover input:not([disabled]):checked ~ .control__indicator {
+  background: $primebtn__bg;
+}
+
+/* Disabled state */
+.control-check input:disabled ~ .control__indicator {
+  pointer-events: none;
+  opacity: .6;
+  background: #ccc;
+  border: 1px solid $white;
+}
+
+.control-check:hover > input:disabled ~ .control__indicator {
+  outline: 0;
+}
+
+/* Check mark */
+.control__indicator:after,
+.control-check input:not(:checked){
+  position: absolute;
+  display: none;
+  content: '';
+}
+
+/* Show check mark */
+.control-check input:checked ~ .control__indicator:after {
+  display: block;
+}
+
+/* Checkbox tick */
+.control-check .control__indicator:after {
+  top: 3px;
+  left: 7px;
+  width: 5px;
+  height: 10px;
+  transform: rotate(45deg);
+  border: solid $white;
+  border-width: 0 2px 2px 0;
+}
+
+/* Disabled tick colour */
+.control-check input:disabled ~ .control__indicator:after {
+  border-color: $white;
+  color: $white;
+}
\ No newline at end of file
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 7d04da2..6277a91 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -2,4 +2,5 @@
 @import "toggle-switch";
 @import "status";
 @import "alerts";
+@import "tags";
 @import "inline-confirm";
\ No newline at end of file
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
new file mode 100644
index 0000000..b2eab1d
--- /dev/null
+++ b/app/common/styles/elements/tags.scss
@@ -0,0 +1,63 @@
+// Tags
+
+.tag {
+  font-size: .9em;
+  padding: .4em .8em .2em;
+  position: relative;
+  display: inline-block;
+  font-weight: 700;
+  padding-right: 60px;
+  border-radius: 3px;
+  line-height: 1.5;
+  overflow: hidden;
+  margin: .4em .3em;
+  min-width: 185px;
+  text-align: left;
+  &:hover {
+    cursor: pointer;
+  }
+  &:before { // close icon
+    content: '+';
+    font-size: 2em;
+    font-weight: 400;
+    transform: rotate(45deg);
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin-top: -18px;
+    color: $darkgrey;
+    height: 20px;
+    width: 20px;
+  }
+  &:after { // white separator
+    content: '';
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 40px;
+    border-left: 1px solid $white;
+  }
+}
+
+//Custom tag
+.tag.custom {
+  background: lighten($darkbg__primary, 65%);
+}
+
+//Event log tags
+.event__resolved {
+  background: lighten($purple, 40%);
+}
+.event__unresolved {
+  background: lighten($purple, 40%);
+}
+.event__high {
+  background: lighten($error-color, 30%);
+}
+.event__medium{
+  background: lighten($alert__warning, 30%);
+}
+.event__low {
+  background: lighten($lightbg__primary, 30%);
+}
\ No newline at end of file