diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss
index beb533fbb..384abb8a1 100644
--- a/assets/stylesheets/_bootstrap.scss
+++ b/assets/stylesheets/_bootstrap.scss
@@ -52,3 +52,4 @@
 @import "loader";
 @import "skip-link";
 @import "error";
+@import "listbox";
diff --git a/assets/stylesheets/_listbox.scss b/assets/stylesheets/_listbox.scss
new file mode 100644
index 000000000..537888cd9
--- /dev/null
+++ b/assets/stylesheets/_listbox.scss
@@ -0,0 +1,76 @@
+[role="option"] {
+  display: block;
+  padding: 12px;
+  position: relative;
+  line-height: 1.6;
+  color: #017d87;
+  white-space: nowrap;
+  border-bottom: 1px solid #e9ecef;
+}
+
+[role="option"]:last-child {
+  border-bottom: none;
+}
+
+[role="option"] {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+[role="option"] > i {
+  margin-right: 1rem;
+}
+
+[role="option"]:hover {
+  background: #017d87;
+  color: white;
+}
+
+[role="option"].focused {
+  background: #017d87;
+  color: white;
+}
+
+[role="option"][aria-selected="true"] {
+  background-color: #017d87;
+  color: white;
+}
+
+.c-fancy-listbox {
+  position: relative;
+  display: block;
+  vertical-align: middle;
+}
+
+.c-fancy-listbox__toggle {
+  position: relative;
+  display: flex;
+  padding: 12px;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  transition: none;
+}
+
+.c-fancy-listbox__toggle.c-fancy-listbox__toggle[aria-expanded="true"] {
+  background-color: white;
+  color: #017d87;
+  transition: none;
+}
+
+.c-fancy-listbox__toggle__value {
+  display: flex;
+  align-items: center;
+}
+
+.c-fancy-listbox__toggle__value > i {
+  font-size: 24px;
+  margin-right: 1rem;
+}
+
+.c-fancy-listbox__dropdown {
+  padding: 0;
+  width: 100%;
+  font-weight: 600;
+}