diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js
index cbea6161..1565cadc 100644
--- a/js/components/forms/new_project.js
+++ b/js/components/forms/new_project.js
@@ -1,5 +1,7 @@
 import textinput from '../text_input'
 
+const createEnvironment = (name) => ({ name })
+
 export default {
   name: 'new-project',
 
@@ -18,7 +20,7 @@ export default {
     const {
       name,
       description,
-      environments = ['']
+      environments = [ createEnvironment() ]
     } = this.initialData
 
     return {
@@ -34,7 +36,7 @@ export default {
 
   methods: {
     addEnvironment: function (event) {
-      this.environments.push('')
+      this.environments.push(createEnvironment(""))
     },
 
     removeEnvironment: function (index) {
diff --git a/templates/workspace_project_new.html b/templates/workspace_project_new.html
index 85cdf673..877729fb 100644
--- a/templates/workspace_project_new.html
+++ b/templates/workspace_project_new.html
@@ -34,13 +34,14 @@
         </header>
 
         <ul>
-          <li v-for="(_, i) in environments" class="block-list__item">
-              {{ TextInput(form.environment_name) }}
+          <li v-for="(environment, i) in environments" class="block-list__item">
+              {{ form.environment_names.label }}
+              <textarea :name="'environment_names-' + i" :id="'environment_names-' + i" v-model="environment.name"></textarea>
               <span class="icon-link icon-link--danger icon-link--vertical" v-on:click="removeEnvironment(i)">{{ Icon('x') }} Remove</span>
-
           </li>
         </ul>
 
+        {{ form.environment_names.errors }}
         <div class="block-list__footer">
           <a v-on:click="addEnvironment" class="icon-link">Add another environment</a>
         </div>