diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index 92ba60e5f..777574b3d 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -29,7 +29,7 @@
 @import "modules/base/fab-text-editor";
 @import "modules/base/labelled-input";
 @import "modules/calendar/calendar";
-@import "modules/form/form";
+@import "modules/form/form-item";
 @import "modules/machines/machine-card";
 @import "modules/machines/machines-filters";
 @import "modules/machines/machines-list";
diff --git a/app/frontend/src/stylesheets/modules/form/form.scss b/app/frontend/src/stylesheets/modules/form/form.scss
deleted file mode 100644
index ef69c469d..000000000
--- a/app/frontend/src/stylesheets/modules/form/form.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-.form-input {
-  width: 100%;
-  margin-bottom: 1.6rem;
-
-  &-header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 0.8rem;
-    p { margin: 0; }
-  }
-  &.is-required &-header p::after {
-    content: "*";
-    margin-left: 0.5ch;
-    color: var(--error);
-  }
-
-  &-field {
-    height: 4rem;
-    display: grid;
-    grid-template-areas: "icon field addon";
-    grid-template-columns: min-content 1fr min-content;
-    border: 1px solid var(--gray-soft-dark);
-    border-radius: var(--border-radius);
-    transition: border-color ease-in-out 0.15s;
-
-    .icon,
-    .addon {
-      width: 4rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--gray-hard-light);
-      background-color: var(--gray-soft);
-    }
-    .icon {
-      grid-area: icon;
-      border-right: 1px solid var(--gray-soft-dark);
-    }
-
-    & > input {
-      grid-area: field;
-      border: none;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
-      padding: 0 0.8rem;
-      color: var(--gray-hard-darkest);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 0 2px var(--information);
-      }
-    }
-
-    // override React-select component's style
-    .rs {
-      grid-area: field;
-      &__control {
-        border: none;
-        border-radius: var(--border-radius);
-        &--is-focused {
-          box-shadow: 0 0 0 2px var(--information);
-        }
-      }
-      &__menu {
-        margin-top: 1px;
-        border: 1px solid var(--gray-soft-dark);
-        box-shadow: var(--shadow);
-      }
-      &__option {
-        color: #000000;
-        &:hover {
-          background-color: var(--information-lightest);
-        }
-        &--is-selected,
-        &--is-selected:hover {
-          background-color: var(--information-light);
-        }
-      }
-    }
-
-    .addon {
-      grid-area: addon;
-      border-left: 1px solid var(--gray-soft-dark);
-    }
-  }
-  &.is-incorrect &-field {
-    border-color: var(--error);
-    .icon {
-      color: var(--error);
-      border-color: var(--error);
-      background-color: var(--error-lightest);
-    }
-  }
-  &.is-disabled &-field input,
-  &.is-readOnly &-field input {
-    background-color: var(--gray-soft-light);
-  }
-
-  &-error {
-    margin-top: 0.4rem;
-    color: var(--error);
-  }
-}