diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 26f03e9..a31a233 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,4 +1,15 @@
-@import 'base';
+@import 'components/base';
+@import 'components/header';
+@import 'components/button';
+@import 'components/ceremony';
+@import 'components/loading';
+@import 'components/table';
+@import 'components/dropdown';
+@import 'components/icon';
+@import 'components/pagination';
+@import 'components/status';
+@import 'components/fieldset';
+@import 'components/form';
 
 .wrapper {
   display: flex;
@@ -12,41 +23,6 @@
   }
 }
 
-.header {
-  padding-top: 20px;
-  padding-left: .75rem;
-  padding-right: .75rem;
-
-  @include tablet-only {
-    > .container {
-      .navbar-brand {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .navbar-brand {
-    align-items: center;
-  }
-
-  @include mobile {
-    .navbar-menu {
-      text-align: center;
-    }
-  }
-
-  .logo {
-    height: 40px;
-  }
-
-  .navbar-menu {
-    .navbar-item {
-      padding-left: 1.25rem;
-      padding-right: 1.25rem;
-    }
-  }
-}
-
 .title {
   transition: color .15s ease-in-out;
 }
@@ -55,574 +31,6 @@
   transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
 }
 
-.button {
-  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  font-weight: $weight-bold;
-
-  &.is-primary.is-outlined {
-    background-color: rgba($primary, .104);
-
-    &.is-loading:focus {
-      background-color: rgba($primary, .104);
-
-      &::after {
-        border-color: transparent transparent $primary $primary !important;
-      }
-    }
-  }
-
-  &.is-loading {
-    &::after {
-      border-radius: 100%;
-    }
-  }
-
-  &.is-icon {
-    padding:0;
-    width: 18px;
-    height: 18px;
-    background-color: transparent;
-    border: none;
-
-    svg {
-      height: 100%;
-      width: 100%;
-    }
-
-    &:hover {
-      path:not(.no-hover) {
-        fill: #87feb7;
-        transition: fill .15s ease-out;
-      }
-    }
-
-    &:focus:not(:active) {
-      box-shadow: none;
-    }
-
-    .icon:first-child:last-child {
-      margin: 0;
-    }
-  }
-}
-
 .box {
   border: 1px solid #393939;
 }
-
-.ceremony {
-  text-align: center;
-
-  .title {
-    color: $white;
-
-    span {
-      color: $primary;
-    }
-  }
-
-  .p {
-    font-size: .857rem;
-    max-width: 66.6666%;
-    margin: 0 auto;
-
-    &:not(:last-child) {
-      margin-bottom: $block-spacing;
-    }
-
-    a {
-      color: $primary;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .columns:not(:last-child) {
-    margin-bottom: calc(2.5rem - 0.75rem);
-  }
-
-  .box {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-
-    &:hover, &.is-hovered {
-      color: $primary;
-      border-color: #94febf;
-
-      .title {
-        color: $primary;
-      }
-
-      .cloak {
-        path {
-          transition: stroke .15s ease-in-out;
-          stroke: $primary;
-        }
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .cloak {
-      align-self: center;
-    }
-
-    .form {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: stretch;
-    }
-
-    &-anonymous {
-      width: 100%;
-      cursor: pointer;
-    }
-  }
-
-  fieldset[disabled] {
-    .box {
-      background-color: $primary-invert;
-      border-color: #393939;
-
-      .title {
-        color: $white;
-      }
-
-      .cloak {
-        path {
-          stroke: #393939;
-        }
-      }
-    }
-  }
-
-  .field {
-    .label {
-      text-align: left;
-    }
-
-    .help {
-      text-align: left;
-      position: absolute;
-
-      &.counter {
-        right: 0;
-      }
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 1.5rem;
-    }
-
-    &.is-horizontal {
-      display: flex;
-      align-items: center;
-
-      @include mobile {
-        justify-content: center;
-      }
-
-      .field-label.is-normal {
-        padding-top: 0;
-        margin-right: 1.5rem;
-      }
-    }
-
-    .control.has-icons-right {
-      .input {
-        padding-right: calc(#{$control-padding-horizontal} - 1px);
-      }
-
-      .icon.is-right {
-        display: none;
-      }
-    }
-  }
-
-  .currently {
-    font-size: .85rem;
-
-    span {
-      color: $primary;
-      font-size: 2.5rem;
-      font-weight: $weight-bold;
-    }
-
-    &:not(:last-child) {
-      margin-bottom: $block-spacing;
-    }
-  }
-}
-
-.status {
-  &:not(:last-child) {
-    margin-bottom: $block-spacing;
-  }
-
-  .status-message {
-    color: $primary;
-    text-align: center;
-
-    &.is-danger {
-      color: $danger;
-    }
-  }
-}
-
-.loading-overlay {
-  &.is-full-page {
-    .loading-background {
-      background:rgba(0,0,0,0.85);
-    }
-  }
-  .loading-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .loading-tornado {
-      &:after {
-        content: '';
-        display: block;
-        height: 60px;
-        width: 60px;
-        background-image: url('../img/logo.svg');
-        animation: spinAroundReverse 2000ms infinite linear;
-      }
-    }
-
-    .loading-message {
-      padding-top: .5rem;
-      color: $primary;
-      text-align: center;
-
-      &.is-danger {
-        color: $danger;
-      }
-    }
-  }
-}
-
-@keyframes spinAroundReverse {
-  from {
-    transform: rotate(359deg); }
-  to {
-    transform: rotate(0deg); }
-}
-
-.b-table {
-  .table {
-    a {
-      color: $primary;
-      text-decoration: underline;
-    }
-
-    .social-link {
-      display: flex;
-      align-items: center;
-
-      .icon {
-        margin-right: .75rem;
-        height: 18px;
-        width: 18px;
-      }
-    }
-
-    th {
-      font-weight: $weight-normal;
-    }
-
-    td {
-      border-color: rgba($primary, .5)
-    }
-
-    td, th {
-      vertical-align: middle;
-    }
-
-    tbody {
-      tr {
-        &:last-child {
-          td {
-            border-bottom-width: 1px;
-          }
-        }
-
-        &:not(.is-selected) {
-          &:nth-child(odd) {
-            background-color: $table-striped-row-even-background-color;
-          }
-
-          &:hover {
-            background-color: $table-row-hover-background-color;
-            &:nth-child(odd) {
-              background-color: $table-striped-row-even-hover-background-color;
-            }
-          }
-        }
-
-        &:not(.is-selected).is-empty {
-          background-color: transparent;
-
-          &:hover {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  .dropdown.is-expanded {
-    min-width: 75px;
-  }
-}
-
-.icon {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-
-  &-emoticon-sad {
-    background-image: url('../img/icons/emoticon-sad.svg');
-  }
-
-  &.icon-48px {
-    height: 48px;
-    width: 48px;
-  }
-
-  &-twitter {
-    background-image: url('../img/icons/tw.svg');
-  }
-
-  &-github {
-    background-image: url('../img/icons/git.svg');
-  }
-
-  &-anonymous {
-    background-image: url('../img/icons/anonymous.svg');
-  }
-
-  &-link {
-    background-image: url('../img/icons/link.svg');
-  }
-}
-
-.table-search {
-  .icon {
-    mask-image: url("../img/icons/search.svg");
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: 16px 16px;
-
-    background-color: $input-placeholder-color;
-  }
-
-  .input {
-    &:hover {
-      ~ .icon {
-        background-color: $input-hover-color;
-      }
-    }
-
-    &:focus {
-      ~ .icon {
-        background-color: $primary;
-      }
-    }
-  }
-}
-
-.dropdown.is-mobile-modal.is-expanded {
-  .dropdown-trigger {
-    .control {
-      .input {
-        &::after {
-          border: 1px solid #393939;
-          border-radius: 1px;
-          border-right: 0;
-          border-top: 0;
-          content: " ";
-          display: block;
-          margin-top: -0.5em;
-          pointer-events: none;
-          position: absolute;
-          top: 50%;
-          transform: rotate(-45deg);
-          transform-origin: center;
-          height: .625em;
-          width: .625em;
-          right: 1.125em;
-          transition: border-color .15s ease-in-out;
-        }
-
-        &:hover {
-          &::after {
-            border-color: $white;
-          }
-        }
-
-        &:focus {
-          &::after {
-            border-color: $primary;
-          }
-        }
-      }
-
-      &.is-loading {
-        .input {
-          &::after {
-            opacity: 0;
-            visibility: hidden;
-          }
-        }
-
-        &::after {
-          height: 1.14rem;
-          width: 1.14rem;
-          right: .86rem;
-          top: .86rem;
-          border-radius: 1.14rem;
-        }
-      }
-    }
-  }
-
-  .dropdown-menu {
-    @include touch {
-      max-width: 460px;
-    }
-
-    > .dropdown-content {
-      overflow: hidden;
-      margin: 1px;
-
-      > .dropdown-item {
-        font-size: 1rem;
-        padding: 0.675rem 1.25rem;
-        transition: color .15s ease-in-out, background-color .15s ease-in-out;
-      }
-    }
-  }
-
-  &.is-active {
-    .dropdown-trigger {
-      .control {
-        .input {
-          border-color: $primary;
-
-          &::after {
-            border-color: $primary;
-          }
-        }
-      }
-    }
-  }
-
-  &.is-top-right {
-    .dropdown-menu {
-      padding-top: 0px;
-      padding-bottom: 4px;
-    }
-  }
-}
-
-.pagination {
-  &-previous, &-next, &-link {
-    background-color: rgba($primary, .104);
-    font-weight: $weight-bold;
-
-    &:hover {
-      background-color: $primary;
-    }
-
-    &[disabled] {
-      opacity: .5;
-
-      &:hover {
-        background-color: rgba($primary, .104);
-      }
-    }
-  }
-
-  &-previous, &-next {
-    .icon {
-      width: 9px;
-      height: 16px;
-      background-color: $primary
-    }
-
-    &:hover {
-      .icon {
-        background-color: $primary-invert;
-      }
-    }
-
-    &[disabled] {
-      &:hover {
-        .icon {
-          background-color: $primary;
-        }
-      }
-    }
-  }
-
-  &-previous {
-    .icon {
-      mask-image: url("../img/icons/arrow-left.svg");
-    }
-  }
-
-  &-next {
-    .icon {
-      mask-image: url("../img/icons/arrow-right.svg");
-    }
-  }
-}
-
-fieldset {
-  &:not(:last-child) {
-    margin-bottom: $block-spacing;
-  }
-
-  &.authorize {
-    max-width: 30%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &[disabled] {
-    opacity: .5;
-    cursor: not-allowed;
-
-    label {
-      cursor: inherit;
-    }
-  }
-}
-
-.form {
-  position: relative;
-
-  .logout {
-    position: absolute;
-    top: 0;
-    right: -2px;
-    height: 22px;
-    width: 22px
-  }
-
-  .button.is-fullwidth + .button.is-fullwidth {
-    margin-top: 1rem;
-  }
-}
diff --git a/assets/styles/base.scss b/assets/styles/components/_base.scss
similarity index 100%
rename from assets/styles/base.scss
rename to assets/styles/components/_base.scss
diff --git a/assets/styles/components/_button.scss b/assets/styles/components/_button.scss
new file mode 100644
index 0000000..5dd7089
--- /dev/null
+++ b/assets/styles/components/_button.scss
@@ -0,0 +1,50 @@
+.button {
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  font-weight: $weight-bold;
+
+  &.is-primary.is-outlined {
+    background-color: rgba($primary, .104);
+
+    &.is-loading:focus {
+      background-color: rgba($primary, .104);
+
+      &::after {
+        border-color: transparent transparent $primary $primary !important;
+      }
+    }
+  }
+
+  &.is-loading {
+    &::after {
+      border-radius: 100%;
+    }
+  }
+
+  &.is-icon {
+    padding:0;
+    width: 18px;
+    height: 18px;
+    background-color: transparent;
+    border: none;
+
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+
+    &:hover {
+      path:not(.no-hover) {
+        fill: #87feb7;
+        transition: fill .15s ease-out;
+      }
+    }
+
+    &:focus:not(:active) {
+      box-shadow: none;
+    }
+
+    .icon:first-child:last-child {
+      margin: 0;
+    }
+  }
+}
diff --git a/assets/styles/components/_ceremony.scss b/assets/styles/components/_ceremony.scss
new file mode 100644
index 0000000..71ec776
--- /dev/null
+++ b/assets/styles/components/_ceremony.scss
@@ -0,0 +1,151 @@
+.ceremony {
+  text-align: center;
+
+  .title {
+    color: $white;
+
+    span {
+      color: $primary;
+    }
+  }
+
+  .p {
+    font-size: .857rem;
+    max-width: 66.6666%;
+    margin: 0 auto;
+
+    &:not(:last-child) {
+      margin-bottom: $block-spacing;
+    }
+
+    a {
+      color: $primary;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .columns:not(:last-child) {
+    margin-bottom: calc(2.5rem - 0.75rem);
+  }
+
+  .box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    &:hover, &.is-hovered {
+      color: $primary;
+      border-color: #94febf;
+
+      .title {
+        color: $primary;
+      }
+
+      .cloak {
+        path {
+          transition: stroke .15s ease-in-out;
+          stroke: $primary;
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .cloak {
+      align-self: center;
+    }
+
+    .form {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: stretch;
+    }
+
+    &-anonymous {
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+
+  fieldset[disabled] {
+    .box {
+      background-color: $primary-invert;
+      border-color: #393939;
+
+      .title {
+        color: $white;
+      }
+
+      .cloak {
+        path {
+          stroke: #393939;
+        }
+      }
+    }
+  }
+
+  .field {
+    .label {
+      text-align: left;
+    }
+
+    .help {
+      text-align: left;
+      position: absolute;
+
+      &.counter {
+        right: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 1.5rem;
+    }
+
+    &.is-horizontal {
+      display: flex;
+      align-items: center;
+
+      @include mobile {
+        justify-content: center;
+      }
+
+      .field-label.is-normal {
+        padding-top: 0;
+        margin-right: 1.5rem;
+      }
+    }
+
+    .control.has-icons-right {
+      .input {
+        padding-right: calc(#{$control-padding-horizontal} - 1px);
+      }
+
+      .icon.is-right {
+        display: none;
+      }
+    }
+  }
+
+  .currently {
+    font-size: .85rem;
+
+    span {
+      color: $primary;
+      font-size: 2.5rem;
+      font-weight: $weight-bold;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: $block-spacing;
+    }
+  }
+}
diff --git a/assets/styles/components/_dropdown.scss b/assets/styles/components/_dropdown.scss
new file mode 100644
index 0000000..86db9cd
--- /dev/null
+++ b/assets/styles/components/_dropdown.scss
@@ -0,0 +1,87 @@
+.dropdown.is-mobile-modal.is-expanded {
+  .dropdown-trigger {
+    .control {
+      .input {
+        &::after {
+          border: 2px solid $primary;
+          border-radius: 2px;
+          border-right: 0;
+          border-top: 0;
+          content: " ";
+          display: block;
+          margin-top: -0.5em;
+          pointer-events: none;
+          position: absolute;
+          top: 50%;
+          transform: rotate(-45deg);
+          transform-origin: center;
+          height: .625em;
+          width: .625em;
+          right: 1.125em;
+          transition: border-color .15s ease-in-out;
+        }
+
+        &:hover {
+          &::after {
+            border-color: $white;
+          }
+        }
+      }
+
+      &.is-loading {
+        .input {
+          &::after {
+            opacity: 0;
+            visibility: hidden;
+          }
+        }
+
+        &::after {
+          height: 1.14rem;
+          width: 1.14rem;
+          right: .86rem;
+          top: .86rem;
+          border-radius: 1.14rem;
+        }
+      }
+    }
+  }
+
+  .dropdown-menu {
+    @include touch {
+      max-width: 460px;
+    }
+
+    > .dropdown-content {
+      overflow: hidden;
+      margin: 1px;
+
+      > .dropdown-item {
+        font-size: 1rem;
+        padding: 0.675rem 1.25rem;
+        transition: color .15s ease-in-out, background-color .15s ease-in-out;
+      }
+    }
+  }
+
+  &.is-active {
+    .dropdown-trigger {
+      .control {
+        .input {
+          border-color: $primary;
+
+          &::after {
+            border-color: $primary;
+          }
+        }
+      }
+    }
+  }
+
+  &.is-top-right {
+    .dropdown-menu {
+      padding-top: 0px;
+      padding-bottom: 4px;
+    }
+  }
+}
diff --git a/assets/styles/components/_fieldset.scss b/assets/styles/components/_fieldset.scss
new file mode 100644
index 0000000..2998689
--- /dev/null
+++ b/assets/styles/components/_fieldset.scss
@@ -0,0 +1,20 @@
+fieldset {
+  &:not(:last-child) {
+    margin-bottom: $block-spacing;
+  }
+
+  &.authorize {
+    max-width: 30%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &[disabled] {
+    opacity: .5;
+    cursor: not-allowed;
+
+    label {
+      cursor: inherit;
+    }
+  }
+}
diff --git a/assets/styles/components/_form.scss b/assets/styles/components/_form.scss
new file mode 100644
index 0000000..c9b0547
--- /dev/null
+++ b/assets/styles/components/_form.scss
@@ -0,0 +1,15 @@
+.form {
+  position: relative;
+
+  .logout {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    height: 22px;
+    width: 22px
+  }
+
+  .button.is-fullwidth + .button.is-fullwidth {
+    margin-top: 1rem;
+  }
+}
diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss
new file mode 100644
index 0000000..50b22c6
--- /dev/null
+++ b/assets/styles/components/_header.scss
@@ -0,0 +1,34 @@
+.header {
+  padding-top: 20px;
+  padding-left: .75rem;
+  padding-right: .75rem;
+
+  @include tablet-only {
+    > .container {
+      .navbar-brand {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .navbar-brand {
+    align-items: center;
+  }
+
+  @include mobile {
+    .navbar-menu {
+      text-align: center;
+    }
+  }
+
+  .logo {
+    height: 40px;
+  }
+
+  .navbar-menu {
+    .navbar-item {
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+    }
+  }
+}
diff --git a/assets/styles/components/_icon.scss b/assets/styles/components/_icon.scss
new file mode 100644
index 0000000..b99a3d9
--- /dev/null
+++ b/assets/styles/components/_icon.scss
@@ -0,0 +1,30 @@
+.icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  &-emoticon-sad {
+    background-image: url('../img/icons/emoticon-sad.svg');
+  }
+
+  &.icon-48px {
+    height: 48px;
+    width: 48px;
+  }
+
+  &-twitter {
+    background-image: url('../img/icons/tw.svg');
+  }
+
+  &-github {
+    background-image: url('../img/icons/git.svg');
+  }
+
+  &-anonymous {
+    background-image: url('../img/icons/anonymous.svg');
+  }
+
+  &-link {
+    background-image: url('../img/icons/link.svg');
+  }
+}
diff --git a/assets/styles/components/_loading.scss b/assets/styles/components/_loading.scss
new file mode 100644
index 0000000..900155d
--- /dev/null
+++ b/assets/styles/components/_loading.scss
@@ -0,0 +1,42 @@
+.loading-overlay {
+  &.is-full-page {
+    .loading-background {
+      background:rgba(0,0,0,0.85);
+    }
+  }
+  .loading-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .loading-tornado {
+      &:after {
+        content: '';
+        display: block;
+        height: 60px;
+        width: 60px;
+        background-image: url('../img/logo.svg');
+        animation: spinAroundReverse 2000ms infinite linear;
+      }
+    }
+
+    .loading-message {
+      padding-top: .5rem;
+      color: $primary;
+      text-align: center;
+
+      &.is-danger {
+        color: $danger;
+      }
+    }
+  }
+}
+
+@keyframes spinAroundReverse {
+  from {
+    transform: rotate(359deg); }
+  to {
+    transform: rotate(0deg); }
+}
diff --git a/assets/styles/components/_pagination.scss b/assets/styles/components/_pagination.scss
new file mode 100644
index 0000000..e6512a9
--- /dev/null
+++ b/assets/styles/components/_pagination.scss
@@ -0,0 +1,53 @@
+
+.pagination {
+  &-previous, &-next, &-link {
+    background-color: rgba($primary, .104);
+    font-weight: $weight-bold;
+
+    &:hover {
+      background-color: $primary;
+    }
+
+    &[disabled] {
+      opacity: .5;
+
+      &:hover {
+        background-color: rgba($primary, .104);
+      }
+    }
+  }
+
+  &-previous, &-next {
+    .icon {
+      width: 9px;
+      height: 16px;
+      background-color: $primary
+    }
+
+    &:hover {
+      .icon {
+        background-color: $primary-invert;
+      }
+    }
+
+    &[disabled] {
+      &:hover {
+        .icon {
+          background-color: $primary;
+        }
+      }
+    }
+  }
+
+  &-previous {
+    .icon {
+      mask-image: url("../img/icons/arrow-left.svg");
+    }
+  }
+
+  &-next {
+    .icon {
+      mask-image: url("../img/icons/arrow-right.svg");
+    }
+  }
+}
diff --git a/assets/styles/components/_status.scss b/assets/styles/components/_status.scss
new file mode 100644
index 0000000..c2f0273
--- /dev/null
+++ b/assets/styles/components/_status.scss
@@ -0,0 +1,14 @@
+.status {
+  &:not(:last-child) {
+    margin-bottom: $block-spacing;
+  }
+
+  .status-message {
+    color: $primary;
+    text-align: center;
+
+    &.is-danger {
+      color: $danger;
+    }
+  }
+}
diff --git a/assets/styles/components/_table.scss b/assets/styles/components/_table.scss
new file mode 100644
index 0000000..05a6d24
--- /dev/null
+++ b/assets/styles/components/_table.scss
@@ -0,0 +1,91 @@
+.b-table {
+  .table {
+    a {
+      color: $primary;
+      text-decoration: underline;
+    }
+
+    .social-link {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-right: .75rem;
+        height: 18px;
+        width: 18px;
+      }
+    }
+
+    th {
+      font-weight: $weight-normal;
+    }
+
+    td {
+      border-color: rgba($primary, .5)
+    }
+
+    td, th {
+      vertical-align: middle;
+    }
+
+    tbody {
+      tr {
+        &:last-child {
+          td {
+            border-bottom-width: 1px;
+          }
+        }
+
+        &:not(.is-selected) {
+          &:nth-child(odd) {
+            background-color: $table-striped-row-even-background-color;
+          }
+
+          &:hover {
+            background-color: $table-row-hover-background-color;
+            &:nth-child(odd) {
+              background-color: $table-striped-row-even-hover-background-color;
+            }
+          }
+        }
+
+        &:not(.is-selected).is-empty {
+          background-color: transparent;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown.is-expanded {
+    min-width: 75px;
+  }
+}
+
+.table-search {
+  .icon {
+    mask-image: url("../img/icons/search.svg");
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 16px 16px;
+
+    background-color: $input-placeholder-color;
+  }
+
+  .input {
+    &:hover {
+      ~ .icon {
+        background-color: $input-hover-color;
+      }
+    }
+
+    &:focus {
+      ~ .icon {
+        background-color: $primary;
+      }
+    }
+  }
+}