diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index 5be78f9..967c446 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -15,8 +15,8 @@
         <%= hidden_field_tag :unlink_flag, "false", id: "unlink_flag" %>
 
         <%= f.label :email, _('Email') + " *" %>
-        <%= f.email_field :email, as: :email, class: "combobox-like" %>
-        <div class="combobox-like"><%= _('Please enter your current password below when changing your email address.') %></div>
+        <%= f.email_field :email, as: :email, class: "left-indent input-medium" %>
+        <div class="left-indent"><%= _('Please enter your current password below when changing your email address.') %></div>
         
         <div class="heading-spacer"></div>
         
@@ -24,14 +24,14 @@
         <%= f.text_field :firstname, as: :string,
                           id: "first_time_login_firstname",
                           autofocus: true,
-                          class: "combobox-like has-tooltip",
+                          class: "left-indent input-medium has-tooltip",
                           "data-toggle" => "tooltip",
                           "data-trigger" => "focus" ,
                           "title" => _('Please enter your first name.') %>
 
         <%= f.label :surname, _('Last name') + " *" %>
         <%= f.text_field :surname, as: :string, id: "first_time_login_surname",
-                  class: "combobox-like has-tooltip", "data-toggle" => "tooltip",
+                  class: "left-indent input-medium has-tooltip", "data-toggle" => "tooltip",
                   "data-trigger" => "focus" ,
                   "title" => _('Please enter your surname or family name.') %>
           
@@ -41,13 +41,14 @@
                             id: "#{resource_name}_org_name",
                             default_selection: @default_org,
                             models: @orgs,
-                            attribute: 'name'} %>
+                            attribute: 'name',
+                            classes: 'input-large'} %>
 
         <% if MANY_LANGUAGES %>
           <% lang = current_user.language.nil? ? FastGettext.default_locale : current_user.language.abbreviation %>
           <%= f.label :language, _('Language') %>
           <select id="user_language_id" name="user[language_id]" 
-                  class="combobox-like">
+                  class="left-indent input-medium">
             <%= @languages.each do |l| %>
               <option value="<%= l.id %>"<%= lang == l.abbreviation ? ' selected="selected"' : '' %>>
                 <%= l.name %>
@@ -58,7 +59,7 @@
 
         <% @identifier_schemes.each do |scheme| %>
           <label><%= scheme.name %></label>
-          <div class="combobox-like">
+          <div class="left-indent">
             <%= render partial: 'external_identifier', 
                        locals: {scheme: scheme, 
                                 id: current_user.identifier_for(scheme)} %>
@@ -79,24 +80,24 @@
       
         <% unless @user.api_token.blank? %>
           <%= f.label :api_token, _('API token') %>
-          <div class="combobox-like"><%= @user.api_token %></div>
+          <div class="left-indent input-medium"><%= @user.api_token %></div>
           
           <label><%= _('API Information') %></label>
-          <div class="combobox-like"><%= link_to( _('How to use the API'), controller: "token_permission_types", action: "index")%></div>
+          <div class="left-indent"><%= link_to( _('How to use the API'), controller: "token_permission_types", action: "index")%></div>
         <% end %>
 
-        <div class="heading-spacer"></div>
-        
+       
         <h3><%= _('If you would like to change your password please complete the following fields.') %></h3>
 
         <%= f.label :current_password,  _('Current password') %>
-        <%= f.password_field :current_password, as: :password, class: 'combobox-like' %>
+        <%= f.password_field :current_password, as: :password, class: 'left-indent input-medium' %>
         
         <%= f.label :password, _('New password') %>
-        <%= f.password_field :password, as: :password, autocomplete: "off", class: 'combobox-like' %>
+        <%= f.password_field :password, as: :password, autocomplete: "off", class: 'left-indent input-medium' %>
         
         <%= f.label :password_confirmation, _('Password confirmation') %>
-        <%= f.password_field :password_confirmation, as: :password, autocomplete: "off", class: 'combobox-like' %>
+        <%= f.password_field :password_confirmation, as: :password, autocomplete: "off", 
+                    class: 'left-indent input-medium' %>
         
       </fieldset>
     </div>
diff --git a/app/views/plans/_available_templates.html.erb b/app/views/plans/_available_templates.html.erb
index 72c8089..acdd409 100644
--- a/app/views/plans/_available_templates.html.erb
+++ b/app/views/plans/_available_templates.html.erb
@@ -4,12 +4,12 @@
   <%= _('Select a template') %>
 </label>
 
-<select id="plan_template_id" name="plan[template_id]" class="combobox-like">
+<select id="plan_template_id" name="plan[template_id]" class="left-indent input-large">
   <option value=""><%= _('Please select one') %></option>
   <%= raw @templates.collect{|t| "<option value=\"#{t.id}\">#{t.title}</option>" }.join('') %>
 </select>
 
-<div class="combobox-like">
+<div class="left-indent">
   <%= _('We found multiple DMP templates corresponding to your funder.') %>
 </div>
 
diff --git a/app/views/plans/_plan_details.html.erb b/app/views/plans/_plan_details.html.erb
index b277af4..4a5dfc4 100644
--- a/app/views/plans/_plan_details.html.erb
+++ b/app/views/plans/_plan_details.html.erb
@@ -9,77 +9,60 @@
 
   <!-- the editing div -->
   <div class="edit-plan-details <%= unless @editing then "project-hide" end %>">
-      <!-- edit pro ject button -->
-      <div class="div_left">
-        <p>
-        <%= raw _("Please fill in the basic project details below and click 'Update' to save")%>
-        </p>
+    <%= form_for @plan, url: {controller: :plans, action: :update }, 
+												html: {method: :put, class: "side-by-side"} do |f| %>
+      <div class="dmp_details">
+
+        <!-- If not first time login in or editing project details -->
+      	<fieldset class="no-heading">
+        	<h3><%= _('Please fill in the basic project details below') %></h3>
+		
+					<div>
+		        <%= f.label :title, _('Plan name') %>
+		        <%= f.text_field :title, class: "left-indent input-large has-tooltip", 'data-toggle': "tooltip", 
+										'title': _('If applying for funding, state the name exactly as in the grant proposal.') %>
+					</div>
+					<div>
+						<%= f.label :identifier, _('ID') %>
+	          <%= f.text_field :identifier, class: 'left-indent input-medium has-tooltip', 'data-toggle': "tooltip", 
+										'title': _('A pertinent ID as determined by the funder and/or institution.') %>
+    			</div>
+					<div>
+						<%= f.label :grant_number, _('Grant number') %>
+	          <%= f.text_field :grant_number, class: 'tleft-indent input-medium has-tooltip', 
+										'data-toggle': "tooltip", 
+										'title': _('Grant reference number if applicable [POST-AWARD DMPs ONLY]') %>
+      		</div>
+					<div>
+						<%= f.label :principal_investigator, _('Principal Investigator/Researcher') %>
+						<%= f.text_field :principal_investigator, class: 'left-indent input-medium has-tooltip', 
+										'data-toggle': "tooltip", 
+										'title': _('Name of Principal Investigator(s) or main researcher(s) on the project.') %>
+      		</div>
+					<div>
+						<%= f.label :principal_investigator_identifier, _('Principal Investigator/Researcher ID') %>
+	          <%= f.text_field :principal_investigator_identifier, class: 'left-indent input-medium has-tooltip', 
+										'data-toggle': "tooltip", 'title': _('E.g ORCID http://orcid.org/.') %>
+      		</div>
+					<div>			
+						<%= f.label :data_contact, _('Plan data contact') %>
+	          <%= f.text_field :data_contact, class: 'left-indent input-medium has-tooltip', 
+										'data-toggle': "tooltip", 
+										'title': _('Name (if different to above), telephone and email contact details') %>
+					</div>
+					<div>
+	          <%= f.label :description, _('Description') %>
+	          <%= f.text_area :description, { rows: 7, class: 'left-indent input-large has-tooltip', 
+										'data-toggle': "tooltip", 'data-html': "true", 
+										'title': _("<div class='tooltip_box'><h4>Questions to consider:</h4><ul><li>- What is the nature of your research project?</li><li>- What research questions are you addressing? </li><li>- For what purpose are the data being collected or created? </li></ul><h4>Guidance:</h4><p>Briefly summarise the type of study (or studies) to help others understand the purposes for which the data are being collected or created.</p></div>")} %>
+					</div>
+				</fieldset>
       </div>
-      <div class="div_right">
-        <a href='#' class='btn btn-primary show-edit-toggle'><%= _('Cancel') %></a> 
-      </div>
-
-      <div class="div_clear"> </div>
-
-      <%= semantic_form_for @plan, :url => {:controller => :plans, :action => :update }, :html=>{:method=>:put} do |f| %>
-        <%= f.inputs do %>
-          <div class="dmp_details">
-
-            <!-- If not first time login in or editing project details -->
-            <table class="dmp_details_table">
-              <tr>
-                <td class="first"><%= _('Plan name') %></td>
-                <td>
-                  <%= f.text_field :title, :class => 'text_field has-tooltip', 'data-toggle' => "tooltip", 'title' => _('If applying for funding, state the name exactly as in the grant proposal.') %>
-                </td>
-              </tr>
-              <tr>
-                <td class="first"><%= _('ID') %></td>
-                <td>
-                  <%= f.text_field :identifier, :class => 'text_field has-tooltip', 'data-toggle' => "tooltip", 'title' => _('A pertinent ID as determined by the funder and/or institution.') %>
-                </td>
-              </tr>
-              <tr>
-                <td class="first"><%= _('Grant number') %></td>
-                <td>
-                  <%= f.text_field :grant_number, :class => 'text_field has-tooltip', 'data-toggle' => "tooltip", 'title' => _('Grant reference number if applicable [POST-AWARD DMPs ONLY]') %>
-                </td>
-              </tr>
-              <tr>
-                <td class="first"><%= _('Principal Investigator/Researcher') %></td>
-                <td>
-                  <%= f.text_field :principal_investigator, :class => 'text_field has-tooltip', 'data-toggle' => "tooltip", 'title' => _('Name of Principal Investigator(s) or main researcher(s) on the project.') %>
-                </td>
-              </tr>
-              <tr>
-                <td class="first"><%= _('Principal Investigator/Researcher ID') %></td>
-                <td>
-                  <%= f.text_field :principal_investigator_identifier, :class => 'text_field has-tooltip', 'data-toggle' => "tooltip", 'title' => _('E.g ORCID http://orcid.org/.') %>
-                </td>
-              </tr>
-              <tr>
-                <td class="first"><%= _('Plan data contact') %></td>
-                <td>
-                  <%= f.text_field :data_contact, :class => 'text_field has-tooltip', 'data-toggle' => "tooltip", 'title' => _('Name (if different to above), telephone and email contact details') %>
-                </td>
-              </tr>
-              <tr>
-                <td class="first"><%= _('Description') %></td>
-                <td>
-                  <%= f.text_area :description, { :rows => 7, :class => 'text_area has-tooltip', 'data-toggle' => "tooltip", 'data-html' => "true", 'title'=> _("<div class='tooltip_box'><h4>Questions to consider:</h4><ul><li>- What is the nature of your research project?</li><li>- What research questions are you addressing? </li><li>- For what purpose are the data being collected or created? </li></ul><h4>Guidance:</h4><p>Briefly summarise the type of study (or studies) to help others understand the purposes for which the data are being collected or created.</p></div>")} %>
-                </td>
-              </tr>
-            </table>
-          </div>
-        <% end %>
-        <!-- submit buttons -->
-        <%= f.actions do %>
-          <div class="move_2_right">
-            <%= f.submit _('Save'), :class => 'btn btn-primary' %>
-            <a href='#' class='btn btn-primary show-edit-toggle'><%= _('Cancel') %></a>
-          </div>
-        <%end%>
-      <%end%>
+			
+			<div class="button-spacer"></div>
+			<input type="submit" class="form-submit" value="<%= _('Save') %>" />
+			<button class="form-cancel show-edit-toggle"><%= _('Cancel') %></button>
+    <%end%>
   </div>
 
 
diff --git a/app/views/plans/new.html.erb b/app/views/plans/new.html.erb
index f0d51cd..9651ce1 100644
--- a/app/views/plans/new.html.erb
+++ b/app/views/plans/new.html.erb
@@ -19,8 +19,9 @@
         </label>
         
         <% default_name = (current_user.firstname.blank? ? _('My Plan') : current_user.firstname + "'s" + _(" Plan")) %>
-        <input type="text" id="plan_title" name="plan[title]" placeholder="<%= default_name %>" class="combobox-like" />
-        <div class="combobox-like">
+        <input type="text" id="plan_title" name="plan[title]" placeholder="<%= default_name %>" 
+               class="left-indent input-large" />
+        <div class="left-indent">
           <%= _('If applying for funding, state the title exactly as in the proposal.') %>
         </div>
       </fieldset>
@@ -38,7 +39,8 @@
                             id: 'plan_org_name',
                             default_selection: @default_org,
                             models: @orgs,
-                            attribute: 'name'} %>
+                            attribute: 'name',
+                            classes: 'input-large'} %>
       
         <input type="checkbox" id="plan_no_org">
         <span class="checkbox-label">
@@ -61,7 +63,8 @@
                             id: 'plan_funder_name',
                             default_selection: nil,
                             models: @funders,
-                            attribute: 'name'} %>
+                            attribute: 'name',
+                            classes: 'input-large'} %>
                                                                  
         <input type="checkbox" id="plan_no_funder" />
         <span class="checkbox-label">
diff --git a/app/views/shared/_accessible_combobox.html.erb b/app/views/shared/_accessible_combobox.html.erb
index 96dda5c..7eb94e3 100644
--- a/app/views/shared/_accessible_combobox.html.erb
+++ b/app/views/shared/_accessible_combobox.html.erb
@@ -3,7 +3,7 @@
   <% models.map{|m| json[m[attribute]] = m.id} %>
 
   <input type="text" name="<%= name %>" id="<%= id %>" 
-         class="js-combobox" list="<%= id %>_list" 
+         class="js-combobox <%= classes %>" list="<%= id %>_list" 
          data-combobox-prefix-class="combobox"
          data-combobox-case-sensitive="no"
          data-combobox-search-option="containing"
diff --git a/lib/assets/stylesheets/dmproadmap.scss b/lib/assets/stylesheets/dmproadmap.scss
index 2901858..3b11517 100644
--- a/lib/assets/stylesheets/dmproadmap.scss
+++ b/lib/assets/stylesheets/dmproadmap.scss
@@ -6,6 +6,7 @@
 
 $primary-color: #F49700;
 $disabled-button-color: #CCC;
+$cancel-button-color: #CCC;
 $reverse-text: #FFF;
 
 /* See `.combobox-clear-button` for an example of this mixin in use */
@@ -14,14 +15,47 @@
   @extend .fa-#{$icon}:before;
 }
 
+.input-large {
+  width: 550px;
+}
+.input-medium {
+  width: 206px;
+}
+.input-small {
+  width: 110px;
+}
+
 .main_header {
   margin-bottom: 20px;
 }
 
+input.form-submit {
+  background-color: $primary-color;
+  color: $reverse-text;
+  padding: 10px 30px;
+  font-size: 12pt;
+  
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+input.form-submit:disabled {
+  background-color: $disabled-button-color;
+}
+button.form-cancel {
+	background-color: $cancel-button-color;
+  color: $reverse-text;
+  padding: 10px 30px;
+  font-size: 12pt;
+  
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
 .main {
   
   form {
-    
     .white-fieldset {
       background-color: $white;
       padding: 0 25px 25px 25px;
@@ -38,12 +72,11 @@
       label, 
       input[type="checkbox"], 
       .combobox-container, 
-      .combobox-like {
+      .left-indent {
         margin-left: 15px;
       }
       
       input[type="text"], select {
-        width: 550px;
         margin-bottom: 15px;
       }
       
@@ -51,23 +84,45 @@
         vertical-align: top;
       }
     }
-    
-    input.form-submit {
-      background-color: $primary-color;
-      color: $reverse-text;
-      padding: 10px 30px;
-      font-size: 12pt;
-      
-      -webkit-border-radius: 10px;
-      -moz-border-radius: 10px;
-      border-radius: 10px;
-    }
-    input.form-submit:disabled {
-      background-color: $disabled-button-color;
-    }
-    
   }
+}
+
+form.side-by-side {
+	div {
+		fieldset {
+			div {
+				margin-left: 15px;
+				
+				label,
+				input[type="checkbox"], 
+		    .combobox-container, 
+		    .left-indent {
+		      display: inline-block;
+		    }
   
+		    label {
+		      width: 20%;
+		    }
+	
+				input.form-submit, 
+				button.form-cancel {
+					font-size: 9pt;
+				}
+			}
+		}
+	}
+
+	.button-spacer {
+		display: inline-block;
+		width: 21%;
+	}
+	
+	input.form-submit,
+	button.form-cancel {
+		font-size: 11pt;
+		padding: 10px 10px 10px 10px;
+		width: 80px;
+	}
 }
 
 /* Accessible JQuery combobox */