diff --git a/assets/scripts/app/helpers/handlebars.coffee b/assets/scripts/app/helpers/handlebars.coffee
index f90f0f9c..14186fab 100644
--- a/assets/scripts/app/helpers/handlebars.coffee
+++ b/assets/scripts/app/helpers/handlebars.coffee
@@ -86,6 +86,8 @@ Ember.Handlebars.registerHelper('travis-field', (name, options) ->
     controller: this
     template: template
     errors: errors
+    name: name
+    classNameBindings: ['name']
   )
 
   Ember.Handlebars.helpers.view.call(this, view, options)
diff --git a/assets/scripts/app/templates/env_vars.hbs b/assets/scripts/app/templates/env_vars.hbs
index 0de51dc8..407a4c50 100644
--- a/assets/scripts/app/templates/env_vars.hbs
+++ b/assets/scripts/app/templates/env_vars.hbs
@@ -2,10 +2,10 @@
 
 <ul class="env-vars">
   {{#each controller itemController="envVar"}}
-    {{#if isEditing}}
-      {{partial 'env_vars/form'}}
-    {{else}}
-      <li class="env-var">
+    <li class="env-var">
+      {{#if isEditing}}
+        {{partial 'env_vars/form'}}
+      {{else}}
         <span class="name">{{name}}</span>
         <span class="equals">=</span>
         <span class="value value-display">{{value}}</span>
@@ -13,7 +13,7 @@
         <a href="#" {{action "delete"}} {{bind-attr class=":delete-var isDeleting:deleting"}}>
           Delete
         </a>
-      </li>
-    {{/if}}
+      {{/if}}
+    </li>
   {{/each}}
 </ul>
diff --git a/assets/scripts/app/templates/env_vars/_form.hbs b/assets/scripts/app/templates/env_vars/_form.hbs
index 414ccfd5..c2eae188 100644
--- a/assets/scripts/app/templates/env_vars/_form.hbs
+++ b/assets/scripts/app/templates/env_vars/_form.hbs
@@ -1,17 +1,21 @@
 <form class="env-var" {{action "save" on="submit"}}>
   {{#travis-field "name"}}
-    {{#label for="name"}}Name:{{/label}}
-    {{input value=name class="env-name"}} {{travis-errors "name"}}
+    {{#label for="name" class="name"}}Name:{{/label}}
+    {{input value=name class="env-name" placeholder="Name"}} {{travis-errors "name"}}
   {{/travis-field}}
+  <span class="equals">=</span>
   {{#if showValueField}}
-    <div class="field">
-      {{#label for="value"}}Value:{{/label}}
-      {{input value=value class="env-value"}}
+    <div class="field value">
+      {{#label for="value" class="value"}}Value:{{/label}}
+      {{input value=value class="env-value" placeholder="Value"}}
     </div>
+  {{else}}
+    <span class="value value-display">{{value}}</span>
   {{/if}}
+  <div style="clear: both"></div>
   <div class="field">
     {{travis-switch active=public class="value"}}
-    {{#label for="secure" class="value"}}Display value in build logs{{/label}}
+    {{#label for="secure" class="public"}}Display value in build logs{{/label}}
   </div>
 
   <div class="actions">
diff --git a/assets/styles/settings.sass b/assets/styles/settings.sass
index 5dce674e..ef3537dc 100644
--- a/assets/styles/settings.sass
+++ b/assets/styles/settings.sass
@@ -197,6 +197,35 @@
     border-bottom: 1px dotted #bbb
     max-width: 800px
 
+    form
+      padding-left: 15px
+      width: 100%
+      label.name, label.value
+        display: none
+
+      label.public
+        width: 80%
+
+      .field.name, .field.value
+        float: left
+        padding-bottom: 0
+        height: 33px
+
+      span.equals
+        float: left
+        display: block
+
+      .field.name
+        width: 30%
+        input
+          width: 95%
+      .field.value
+        width: 45%
+        input
+          width: 95%
+      .actions
+        margin-bottom: 10px
+
     .var
       font-size: 13px
       display: inline-block
@@ -208,7 +237,7 @@
         text-align: left
         margin-right: 5px
 
-    .name, .value, .equals
+    span.name, span.value, .equals
       display: block
       float: left
       position: relative
@@ -217,10 +246,11 @@
     .equals
       margin: 0 10px
 
-    .name
+    span.name
       width: 30%
       text-align: right
 
-    .value
+    span.value
       width: 45%
       text-align: left
+      margin-right: 15px