diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 638a8b4e..dd405e6b 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -246,7 +246,15 @@ export default {
         'border-cyan-500/80',
         'border-orange-500/80',
         'border-lime-500/80',
-        'border-indigo-500/80'
+        'border-indigo-500/80',
+        'border-red-500/80',
+        'border-sky-500/80',
+        'border-emerald-500/80',
+        'border-yellow-300/80',
+        'border-purple-600/80',
+        'border-pink-500/80',
+        'border-cyan-500/80',
+        'border-orange-500/80'
       ]
     },
     bgColors () {
@@ -260,7 +268,15 @@ export default {
         'bg-cyan-100/80',
         'bg-orange-100/80',
         'bg-lime-100/80',
-        'bg-indigo-100/80'
+        'bg-indigo-100/80',
+        'bg-red-100/80',
+        'bg-sky-100/80',
+        'bg-emerald-100/80',
+        'bg-yellow-100/80',
+        'bg-purple-100/80',
+        'bg-pink-100/80',
+        'bg-cyan-100/80',
+        'bg-orange-100/80'
       ]
     },
     isSelected () {
diff --git a/app/javascript/template_builder/field_submitter.vue b/app/javascript/template_builder/field_submitter.vue
index 4f6938a2..db8d3de0 100644
--- a/app/javascript/template_builder/field_submitter.vue
+++ b/app/javascript/template_builder/field_submitter.vue
@@ -67,7 +67,7 @@
               </button>
             </a>
           </li>
-          <li v-if="submitters.length < 10 && editable">
+          <li v-if="submitters.length < 18 && editable">
             <a
               href="#"
               class="flex px-2"
@@ -145,7 +145,7 @@
         <a
           href="#"
           class="flex px-2 group justify-between items-center"
-          :class="{ 'active': submitter === selectedSubmitter }"
+          :class="{ 'active': submitter === selectedSubmitter, 'py-1': submitters.length > 8 }"
           @click.prevent="selectSubmitter(submitter)"
         >
           <span class="py-1 flex items-center">
@@ -189,7 +189,7 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < 10 && editable && allowAddNew">
+      <li v-if="submitters.length < 18 && editable && allowAddNew">
         <a
           href="#"
           class="flex px-2"
@@ -277,7 +277,15 @@ export default {
         'bg-cyan-500',
         'bg-orange-500',
         'bg-lime-500',
-        'bg-indigo-500'
+        'bg-indigo-500',
+        'bg-red-500',
+        'bg-sky-500',
+        'bg-emerald-500',
+        'bg-yellow-300',
+        'bg-purple-600',
+        'bg-pink-500',
+        'bg-cyan-500',
+        'bg-orange-500'
       ]
     },
     names () {
@@ -291,7 +299,15 @@ export default {
         this.t('seventh_party'),
         this.t('eighth_party'),
         this.t('ninth_party'),
-        this.t('tenth_party')
+        this.t('tenth_party'),
+        this.t('eleventh_party'),
+        this.t('twelfth_party'),
+        this.t('thirteenth_party'),
+        this.t('fourteenth_party'),
+        this.t('fifteenth_party'),
+        this.t('sixteenth_party'),
+        this.t('seventeenth_party'),
+        this.t('eighteenth_party')
       ]
     },
     selectedSubmitter () {
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index b52e09e3..0d8cc632 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -31,6 +31,14 @@ const en = {
   eighth_party: 'Eighth Party',
   ninth_party: 'Ninth Party',
   tenth_party: 'Tenth Party',
+  eleventh_party: 'Eleventh Party',
+  twelfth_party: 'Twelfth Party',
+  thirteenth_party: 'Thirteenth Party',
+  fourteenth_party: 'Fourteenth Party',
+  fifteenth_party: 'Fifteenth Party',
+  sixteenth_party: 'Sixteenth Party',
+  seventeenth_party: 'Seventeenth Party',
+  eighteenth_party: 'Eighteenth Party',
   add: 'Add',
   or_add_field_without_drawing: 'Or add field without drawing',
   text: 'Text',