diff --git a/src/nginxconfig/scss/_code.scss b/src/nginxconfig/scss/_code.scss
new file mode 100644
index 0000000..0157147
--- /dev/null
+++ b/src/nginxconfig/scss/_code.scss
@@ -0,0 +1,63 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+pre {
+  &[class*="language-"] {
+    padding: .5rem 1rem;
+
+    code {
+      &[class*="language-"] {
+        &,
+        .token {
+          font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+          font-size: 13.6px;
+          font-weight: normal;
+          line-height: 1.4em;
+        }
+
+        // Fix Bulma & DO Prism styles interfering with default Prism
+        .token {
+          &.number,
+          &.tag,
+          &.entity,
+          &.operator,
+          &.url {
+            background: transparent;
+            border-radius: initial;
+            display: initial;
+            font-size: inherit;
+            margin: initial;
+            padding: initial;
+            text-align: initial;
+            vertical-align: initial;
+          }
+        }
+      }
+    }
+  }
+}
+
+.code-toolbar {
+  > .toolbar {
+    right: calc(.2em + 16px);
+  }
+}
+
+mark {
+  background: rgba($highlight, .45);
+  color: inherit;
+  display: inline-block;
+}
diff --git a/src/nginxconfig/scss/_fields.scss b/src/nginxconfig/scss/_fields.scss
new file mode 100644
index 0000000..49c4d52
--- /dev/null
+++ b/src/nginxconfig/scss/_fields.scss
@@ -0,0 +1,164 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.field-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0 -.5rem;
+
+  .field {
+    flex-grow: 1;
+    margin: 0 .5rem;
+    text-align: left;
+  }
+
+  + .field-row,
+  + .field {
+    margin-top: 1rem;
+  }
+}
+
+.field {
+  &.is-horizontal {
+    align-items: center;
+
+    &.is-aligned-top {
+      align-items: flex-start;
+    }
+  }
+
+  &.is-grouped {
+    > .control {
+      &:last-child {
+        margin: .25rem 0 0;
+      }
+
+      &:not(:last-child) {
+        margin: .25rem .75rem 0 0;
+      }
+    }
+  }
+
+  .is-changed {
+    input {
+      &:not(.vs__search) {
+        &,
+        &:focus {
+          background: rgba($highlight, .35);
+        }
+      }
+    }
+
+    .checkbox,
+    .radio,
+    .text {
+      background: rgba($highlight, .35);
+    }
+
+    label {
+      &.text {
+        padding: .25rem .5rem;
+      }
+    }
+
+    .v-select {
+      .vs__dropdown-toggle { // sass-lint:disable-line class-name-format
+        background: rgba($highlight, .35);
+      }
+    }
+  }
+
+  label {
+    @include sailec-medium;
+
+    color: $dark-blue;
+    font-size: 1rem;
+
+    &.text {
+      border-radius: $border-radius;
+      color: $dark-grey;
+      display: inline-block;
+      font-size: 14px;
+      padding: 0 .5rem;
+    }
+  }
+
+  .button {
+    &.is-static {
+      background: $panel;
+      border: 1px solid $border;
+      color: $dark-grey;
+      padding: 0 ($margin * 1.5);
+    }
+  }
+
+  .control {
+    &:not(.is-expanded) {
+      + .control {
+        &:not(.is-expanded) {
+          margin-top: .25rem;
+        }
+      }
+    }
+  }
+}
+
+.field-body {
+  &.is-vertical {
+    flex-direction: column;
+
+    > .field {
+      &:not(:last-child) {
+        margin-bottom: .75rem;
+      }
+    }
+  }
+}
+
+.checkbox,
+.radio {
+  border-radius: $border-radius;
+  padding: .25rem .5rem;
+
+  .pretty {
+    &.p-icon {
+      font-size: 18px;
+      margin: 0;
+
+      .state {
+        .icon {
+          &::before {
+            color: $panel;
+            font-size: 14px;
+          }
+        }
+
+        label {
+          color: $dark-grey;
+          font-size: 14px;
+          padding-left: calc(#{$margin / 2} + 1.5em);
+          text-indent: initial;
+
+          &::before,
+          &::after {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/nginxconfig/scss/_modals.scss b/src/nginxconfig/scss/_modals.scss
new file mode 100644
index 0000000..02affc2
--- /dev/null
+++ b/src/nginxconfig/scss/_modals.scss
@@ -0,0 +1,21 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.modal {
+  .modal-card {
+    text-align: left;
+  }
+}
diff --git a/src/nginxconfig/scss/_panel.scss b/src/nginxconfig/scss/_panel.scss
new file mode 100644
index 0000000..164a4a5
--- /dev/null
+++ b/src/nginxconfig/scss/_panel.scss
@@ -0,0 +1,80 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.panel {
+  margin-top: 0;
+  padding: 1.5rem 0 2rem;
+  text-align: left;
+
+  // The presets panel has a custom header with a dropdown indicator
+  &.presets {
+    .header-group,
+    .buttons-group {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    .header-group {
+      h3 {
+        margin: 0;
+      }
+
+      .button {
+        &.is-tiny {
+          font-size: 20px;
+        }
+      }
+    }
+
+    .message,
+    .buttons-group {
+      margin: 1rem 0 0;
+    }
+
+    .buttons-group {
+      align-items: center;
+    }
+  }
+
+  .container {
+    padding: 0 1.5rem;
+  }
+
+  .tabs {
+    ul {
+      padding: 0 1rem;
+    }
+  }
+
+  // Custom navigation buttons bottom right of the panels
+  .navigation-buttons {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin: 1.5rem 1.5rem 0;
+
+    .button {
+      margin-left: .5rem;
+
+      i + span,
+      span + i {
+        margin: 0 0 0 .5rem;
+      }
+    }
+  }
+}
diff --git a/src/nginxconfig/scss/_setup.scss b/src/nginxconfig/scss/_setup.scss
new file mode 100644
index 0000000..1a2726b
--- /dev/null
+++ b/src/nginxconfig/scss/_setup.scss
@@ -0,0 +1,40 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.setup {
+  .panel {
+    p {
+      color: $dark-blue;
+      overflow-wrap: break-word;
+
+      a {
+        text-decoration: none;
+      }
+    }
+
+    ol {
+      margin: 0 1rem;
+
+      li {
+        margin: 0 0 1.5rem;
+      }
+    }
+  }
+
+  .buttons {
+    margin: 1rem 0;
+  }
+}
diff --git a/src/nginxconfig/scss/_tabs.scss b/src/nginxconfig/scss/_tabs.scss
new file mode 100644
index 0000000..319ff9b
--- /dev/null
+++ b/src/nginxconfig/scss/_tabs.scss
@@ -0,0 +1,105 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.tabs {
+  ul {
+    li {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+
+      &:hover,
+      &:focus {
+        a {
+          &::after {
+            background: $dark-blue;
+          }
+        }
+      }
+
+      // Light blue color if the user has gone past a tab
+      &.is-before {
+        a {
+          color: mix($dark-grey, $primary);
+
+          &::after {
+            background: rgba($primary, .5);
+          }
+
+          &:hover {
+            color: $dark-blue;
+
+            &::after {
+              background: $dark-blue;
+            }
+          }
+        }
+      }
+
+      // If a user has changed something in the tab, we'll make the text dark always
+      &.is-changed {
+        a {
+          color: $dark-blue;
+        }
+      }
+
+      a {
+        // Support having a remove button inline with the normal tab text
+        &.domain {
+          flex-grow: 1;
+          padding-right: .25rem;
+
+          &::after {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+        }
+
+        &.remove {
+          padding-left: .25rem;
+          transition: color $transition;
+
+          &::after {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+
+          &:hover,
+          &:focus {
+            color: $danger;
+
+            &::after {
+              background: $danger;
+            }
+          }
+
+          i {
+            margin: 0;
+          }
+        }
+
+        // Handle having the remove icon as well as the add icon
+        i {
+          font-size: .75em;
+
+          &.fa-plus {
+            margin: 0 .35rem 0 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/nginxconfig/scss/_vue-select.scss b/src/nginxconfig/scss/_vue-select.scss
new file mode 100644
index 0000000..11b7a28
--- /dev/null
+++ b/src/nginxconfig/scss/_vue-select.scss
@@ -0,0 +1,73 @@
+/*
+Copyright 2020 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// sass-lint:disable class-name-format
+.v-select {
+  &.vs--open {
+    > ul {
+      opacity: 1;
+    }
+
+    .vs__dropdown-toggle {
+      border-color: $primary;
+      box-shadow: 0 0 2px rgba($success, .5);
+
+      .vs__selected {
+        top: .75em;
+      }
+    }
+  }
+
+  > ul {
+    display: block !important; // sass-lint:disable-line no-important
+    margin: 0;
+    opacity: 0;
+    transition: opacity $transition;
+  }
+
+  .vs__dropdown-toggle {
+    box-shadow: none;
+    padding: 0 16px;
+    transition: border $transition, box-shadow $transition;
+
+    .vs__selected-options {
+      padding: 0;
+
+      .vs__selected {
+        margin: 0;
+        padding: 0;
+        transition: opacity $transition;
+      }
+
+      .vs__search {
+        &,
+        &:focus {
+          background: none;
+          border: 0;
+          box-shadow: none;
+          margin: 0;
+          padding: 0;
+          width: 0;
+        }
+      }
+    }
+
+    .vs__actions {
+      padding: 0;
+    }
+  }
+}
+// sass-lint:enable class-name-format
diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index d319b6b..f2ab5d1 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -24,445 +24,18 @@ $highlight: #f2c94c;
   $pretty--color-dark: $primary;
   $pretty--color-default: $primary;
   @import "~pretty-checkbox/src/pretty-checkbox";
+
   $vs-border-color: $border;
   $vs-border-radius: $border-radius;
   $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
   $vs-state-active-bg: $primary;
   @import "~vue-select/src/scss/vue-select";
 
-  .tabs {
-    ul {
-      li {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-
-        &:hover,
-        &:focus {
-          a {
-            &::after {
-              background: $dark-blue;
-            }
-          }
-        }
-
-        &.is-before {
-          a {
-            color: mix($dark-grey, $primary);
-
-            &::after {
-              background: rgba($primary, .5);
-            }
-
-            &:hover {
-              color: $dark-blue;
-
-              &::after {
-                background: $dark-blue;
-              }
-            }
-          }
-        }
-
-        &.is-changed {
-          a {
-            color: $dark-blue;
-          }
-        }
-
-        a {
-          &.domain {
-            flex-grow: 1;
-            padding-right: .25rem;
-
-            &::after {
-              border-bottom-right-radius: 0;
-              border-top-right-radius: 0;
-            }
-          }
-
-          &.remove {
-            padding-left: .25rem;
-            transition: color $transition;
-
-            &::after {
-              border-bottom-left-radius: 0;
-              border-top-left-radius: 0;
-            }
-
-            &:hover,
-            &:focus {
-              color: $danger;
-
-              &::after {
-                background: $danger;
-              }
-            }
-
-            i {
-              margin: 0;
-            }
-          }
-
-          i {
-            font-size: .75em;
-
-            &.fa-plus {
-              margin: 0 .35rem 0 0;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .panel {
-    margin-top: 0;
-    padding: 1.5rem 0 2rem;
-    text-align: left;
-
-    &.presets {
-      .header-group,
-      .buttons-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      .header-group {
-        h3 {
-          margin: 0;
-        }
-
-        .button {
-          &.is-tiny {
-            font-size: 20px;
-          }
-        }
-      }
-
-      .message,
-      .buttons-group {
-        margin: 1rem 0 0;
-      }
-
-      .buttons-group {
-        align-items: center;
-      }
-    }
-
-    .container {
-      padding: 0 1.5rem;
-    }
-
-    .tabs {
-      ul {
-        padding: 0 1rem;
-      }
-    }
-
-    .navigation-buttons {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      margin: 1.5rem 1.5rem 0;
-
-      .button {
-        margin-left: .5rem;
-
-        i + span,
-        span + i {
-          margin: 0 0 0 .5rem;
-        }
-      }
-    }
-  }
-
-  .field-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.5rem;
-
-    .field {
-      flex-grow: 1;
-      margin: 0 .5rem;
-      text-align: left;
-    }
-
-    + .field-row,
-    + .field {
-      margin-top: 1rem;
-    }
-  }
-
-  .field {
-    &.is-horizontal {
-      align-items: center;
-
-      &.is-aligned-top {
-        align-items: flex-start;
-      }
-    }
-
-    &.is-grouped {
-      > .control {
-        &:last-child {
-          margin: .25rem 0 0;
-        }
-
-        &:not(:last-child) {
-          margin: .25rem .75rem 0 0;
-        }
-      }
-    }
-
-    .is-changed {
-      input {
-        &:not(.vs__search) {
-          &,
-          &:focus {
-            background: rgba($highlight, .35);
-          }
-        }
-      }
-
-      .checkbox,
-      .radio,
-      .text {
-        background: rgba($highlight, .35);
-      }
-
-      label {
-        &.text {
-          padding: .25rem .5rem;
-        }
-      }
-
-      .v-select {
-        .vs__dropdown-toggle { // sass-lint:disable-line class-name-format
-          background: rgba($highlight, .35);
-        }
-      }
-    }
-
-    label {
-      @include sailec-medium;
-
-      color: $dark-blue;
-      font-size: 1rem;
-
-      &.text {
-        border-radius: $border-radius;
-        color: $dark-grey;
-        display: inline-block;
-        font-size: 14px;
-        padding: 0 .5rem;
-      }
-    }
-
-    .button {
-      &.is-static {
-        background: $panel;
-        border: 1px solid $border;
-        color: $dark-grey;
-        padding: 0 ($margin * 1.5);
-      }
-    }
-
-    .control {
-      &:not(.is-expanded) {
-        + .control {
-          &:not(.is-expanded) {
-            margin-top: .25rem;
-          }
-        }
-      }
-    }
-  }
-
-  .field-body {
-    &.is-vertical {
-      flex-direction: column;
-
-      > .field {
-        &:not(:last-child) {
-          margin-bottom: .75rem;
-        }
-      }
-    }
-  }
-
-  .checkbox,
-  .radio {
-    border-radius: $border-radius;
-    padding: .25rem .5rem;
-
-    .pretty {
-      &.p-icon {
-        font-size: 18px;
-        margin: 0;
-
-        .state {
-          .icon {
-            &::before {
-              color: $panel;
-              font-size: 14px;
-            }
-          }
-
-          label {
-            color: $dark-grey;
-            font-size: 14px;
-            padding-left: calc(#{$margin / 2} + 1.5em);
-            text-indent: initial;
-
-            &::before,
-            &::after {
-              font-size: 18px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // sass-lint:disable class-name-format
-  .v-select {
-    &.vs--open {
-      > ul {
-        opacity: 1;
-      }
-
-      .vs__dropdown-toggle {
-        border-color: $primary;
-        box-shadow: 0 0 2px rgba($success, .5);
-
-        .vs__selected {
-          top: .75em;
-        }
-      }
-    }
-
-    > ul {
-      display: block !important; // sass-lint:disable-line no-important
-      margin: 0;
-      opacity: 0;
-      transition: opacity $transition;
-    }
-
-    .vs__dropdown-toggle {
-      box-shadow: none;
-      padding: 0 16px;
-      transition: border $transition, box-shadow $transition;
-
-      .vs__selected-options {
-        padding: 0;
-
-        .vs__selected {
-          margin: 0;
-          padding: 0;
-          transition: opacity $transition;
-        }
-
-        .vs__search {
-          &,
-          &:focus {
-            background: none;
-            border: 0;
-            box-shadow: none;
-            margin: 0;
-            padding: 0;
-            width: 0;
-          }
-        }
-      }
-
-      .vs__actions {
-        padding: 0;
-      }
-    }
-  }
-  // sass-lint:enable class-name-format
-
-  .modal {
-    .modal-card {
-      text-align: left;
-    }
-  }
-
-  .setup {
-    .panel {
-
-      p {
-        color: $dark-blue;
-        overflow-wrap: break-word;
-
-        a {
-          text-decoration: none;
-        }
-      }
-
-      ol {
-        margin: 0 1rem;
-
-        li {
-          margin: 0 0 1.5rem;
-        }
-      }
-    }
-
-    .buttons {
-      margin: 1rem 0;
-    }
-  }
-
-  pre {
-    &[class*="language-"] {
-      padding: .5rem 1rem;
-
-      code {
-        &[class*="language-"] {
-          &,
-          .token {
-            font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-            font-size: 13.6px;
-            font-weight: normal;
-            line-height: 1.4em;
-          }
-
-          // Fix Bulma interfering with Prism
-          .token {
-            &.number,
-            &.tag,
-            &.entity,
-            &.operator,
-            &.url {
-              background: transparent;
-              border-radius: initial;
-              display: initial;
-              font-size: inherit;
-              margin: initial;
-              padding: initial;
-              text-align: initial;
-              vertical-align: initial;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .code-toolbar {
-    > .toolbar {
-      right: calc(.2em + 16px);
-    }
-  }
-
-  mark {
-    background: rgba($highlight, .45);
-    color: inherit;
-    display: inline-block;
-  }
+  @import "tabs";
+  @import "panel";
+  @import "fields";
+  @import "vue-select";
+  @import "modals";
+  @import "setup";
+  @import "code";
 }