From b1d8232f113333c2fd51528b4d6d3f806f86bdf0 Mon Sep 17 00:00:00 2001
From: Ciro Scognamiglio <ciro.scognamiglio@cslash.net>
Date: Mon, 17 Mar 2014 17:28:56 +0100
Subject: [PATCH] update styles and forms

---
 portal/static/css/onelab.css                  |  33 +-
 portal/templates/about.html                   |   4 +
 portal/templates/account-view.html            | 404 +++++++++---------
 portal/templates/contact.html                 |  35 +-
 portal/templates/contact_sent.html            |   4 +
 portal/templates/documentationview.html       |   6 +-
 portal/templates/institution.html             |   2 +-
 portal/templates/join_view.html               | 257 +++++------
 portal/templates/manageuserview.html          |   4 +-
 .../onelab/onelab_widget-slice-sections.html  |   4 +-
 portal/templates/password_reset_complete.html |   6 +-
 portal/templates/password_reset_confirm.html  |   6 +-
 portal/templates/password_reset_done.html     |   6 +-
 portal/templates/password_reset_form.html     |   6 +-
 portal/templates/registration_view.html       |  93 ++--
 portal/templates/slicerequest_view.html       | 120 +++---
 portal/templates/validate_pending.html        |   2 +-
 17 files changed, 494 insertions(+), 498 deletions(-)

diff --git a/portal/static/css/onelab.css b/portal/static/css/onelab.css
index e61d07a0..a643755d 100644
--- a/portal/static/css/onelab.css
+++ b/portal/static/css/onelab.css
@@ -261,21 +261,6 @@ div#home-dashboard div#home-slice-list li {
 }
 /**/
 
-/* NAV TABS */
-
-.nav.nav-tabs {
-}
-
-.nav.nav-tabs li.active a {
-   
-}
-
-.nav.nav-tabs li a {
-}
-
-.nav.nav-tabs li a:hover {
-}
-
 /**/
 /* WELL */
 div.well {
@@ -338,25 +323,24 @@ div#ticket-request p {
     margin:20px 0;
 }
 
-/* SLICE VIEW */
 ul.nav-tabs {}
-ul.nav-tabs li {
-    
-}
-ul.nav-tabs li a {
+ul.nav-tabs ul {}
+ul.nav-tabs li {}
+
+ul.nav-section li a {
     border-bottom:0;
 }
-ul.nav-tabs li:first-child {
+ul.nav-section li:first-child {
     padding:0;
 }
-ul.nav-tabs li:first-child a {
+ul.nav-section li:first-child a {
     font-weight:bold;
     padding:6px 15px 4px 15px;
 }
-ul.nav-tabs li:first-child.active a {
+ul.nav-section li:first-child.active a {
     padding:6px 15px 3px 15px;
 }
-ul.nav-tabs li:first-child img {
+ul.nav-section li:first-child img {
     margin:0 4px 1px 0;
     padding:0;
 }
@@ -369,6 +353,7 @@ ul.nav-resources a {
 }
 
 
+/* SLICE VIEW */
 
 
 div#slice-view {
diff --git a/portal/templates/about.html b/portal/templates/about.html
index 9b124f28..578561b5 100644
--- a/portal/templates/about.html
+++ b/portal/templates/about.html
@@ -2,10 +2,13 @@
 
 {% block content %}
 <div class="row">
+	<div class="col-md-12">
 	<h1><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> About</h1>
+	</div>
 </div>
 
 <div class="row">
+	<div class="col-md-12">
  	<h3>A ready-made and easily customisable user interface for your testbed.</h3>
 
 	<p>
@@ -36,6 +39,7 @@
 	<p>
 		Go to the <a href ="http://myslice.info">MySlice web site</a> or the <a href ="http://onelab.eu">OneLab public web site</a>
 	</p>
+	</div>
 </div>
 
 {% endblock %}
diff --git a/portal/templates/account-view.html b/portal/templates/account-view.html
index f435500c..bd7269b8 100644
--- a/portal/templates/account-view.html
+++ b/portal/templates/account-view.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "layout_wide.html" %}
 {% block content %}
 
 
@@ -9,156 +9,159 @@
     {% endfor %}
 </ul>
 {% endif %}
-
-<div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="" /> User Account</h1>
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<ul class="nav nav-tabs nav-section">
+				<li class="active"><a href="#profile"><img src="{{ STATIC_URL }}icons/user-xs.png" alt="User Account" /> User Profile</a></li>
+				<li><a href="#account">Account</a></li>
+				<li><a href="#access">Testbed Access</a></li>
+			</ul>
+	    </div>
+	</div>
 </div>
+<div class="container tab-content">
+	<div class="tab-pane active row" id="profile">
+		
+	  	<div class="col-md-12">
 
-<div class="row">
-    <ul class="nav nav-tabs">
-      <li class="active"><a class="account-tab" data-panel="user_profile" href="#">User Profile</a></li>
-      <li><a class="account-tab" data-panel="principal_acc" href="#">User Account</a></li>
-      <li><a class="account-tab" data-panel="ref_acc" href="#">Testbed Access</a></li>
-    </ul>
-	
-	<div class="account-panel" id="user_profile">
-	<form id="editForm" method="post" action="account_process" enctype="multipart/form-data">
-	<div>
-	  	{% csrf_token %}
-	  		<table class="profile">          
-	    		<tr>
-	      			<td colspan="2">
-						<div>Platform: Myslice</div>
-	      			</td>
-	    		</tr>
-	    		<tr>
-	      			<td class="key">Email</td>
-	      			<td class="value">
-						<span id="emailval" class="value" >{{ person.email }}</span>
-						<button class="btn btn-default btn-xs" type="button" id="edit_email" onclick="editAlert();"  title="To change your affiliation please contact the administrator">
-    						<span class="glyphicon glyphicon-question-sign"></span> Edit
-						</button>
-					</td>
-	      		</tr>
-	      		<tr class="odd">
-					<td class="key">Password</td>
-					<td class="value"> 
-		  				<button class="btn btn-default btn-xs" type="button" title="Password" name="edit_pass" id="edit_pass">
-							<span class="glyphicon glyphicon-edit"></span> Edit
-						</button>
-		  				<span id="passval"class="value">******** </span>
-		  				<span class="hide_this" id="span_pass">
-		    				<button type="button" class="btn btn-default btn-xs" title="Cancel" id="cancel_pass_change"> Cancel </button>
-		    				<div style='display:none;' id="pass_form">
-		    				<input type='hidden'  value='' /></div>
-		    				<table id="edit_password">
-		      					<tr>
-									<td>Enter password: </td>
-									<td class="field"> <input type="password" name="password" id="password" /> </td>
-		      						</tr>
-		      						<tr>
-									<td>Confirm password: </td>
-									<td class="field"> 
-			  							<input type="password" name="confirmpassword" id="confirmpassword" /> 
-			  							<input type="submit" class="btn btn-default btn-xs" name="submit_pass" value="Save"/> 
-									</td>
-		      					</tr>
-		    				</table>
-		  				</span>	
-					</td>
-	      		</tr>
-	      		<tr class="even">
-					<td class="key">Full Name</td>
-					<td class="value">
-		  				<span id="nameval" class="value" >{{ fullname }} </span>
-		  				<span class="hide_this" id="span_name">
-		    				<button type="button" class="btn btn-default btn-xs" title="Cancel" id="cancel_name_change"> Cancel </button> 
-		    				<div style='display:none;'><input type='hidden'  name='nameform'  /></div>
-		    				<input id="fname" type="text" name="fname" class="required"  maxlength="200" value="{{firstname}}" />
-		    				<input id="lname" type="text" name="lname" class="required"  maxlength="200" value="{{lastname}}" />
-		    				<input type="submit" class="btn btn-default btn-xs" name="submit_name" value="Save"/>
-		  				</span>
-		  				<button class="btn btn-default btn-xs" type="button"title="Full Name" id="edit_name">
-							<span class="glyphicon glyphicon-edit"></span> Edit
-						</button>
-					</td>
-	      		</tr>
-	      		<tr class="odd">
-					<td class="key">Authority</td>
-					<td class="value">
-		  				<span id="affval" class="value">{{ authority }}</span>
-						 <button class="btn btn-default btn-xs" type="button" id="edit_auth" onclick="editAlert()"  title="To change your authority please contact the administrator">
-     						<span class="glyphicon glyphicon-question-sign"></span> Edit
-						 </button>
-		  			</td>
-				</tr>
-				{%if 'Enabled'  in user_status %}
-				<tr class="even">
-		  			<td class="key">Generate Keys</td>
-		  			<td>
-						<input type="submit" name="generate" class="btn btn-danger btn-xs" value="Generate a new Key Pair" id="generate_keypair" 
-							   onclick="return confirm('Are you sure? If you do so, your current credentials will be overwritten.');" 
-							   title="It will generate a new key Pair and your current credentials will be overwritten."/>
-	      			</td> 
-	    		</tr>
-	    		<tr class="odd">
-	      			<td class="key">Public Key</td>
-	      			<td class="value">
-						<span id="keyval" class="value">******** </span>
-						<span class="hide_this" id="span_upload">
-		  					<button type="button" class="btn btn-default btn-xs" title="Cancel" id="cancel_upload"> Cancel </button>
-		  					<div style='display:none;'>
-		  						<input type='hidden'  name='upload'  /></div>
-		  						<input type="file" name="pubkey" class="required" id="pubkey"/>  
-		  						<input class="btn btn-default btn-xs" name="upload_key" id="upload_key"  type="submit" title="Upload your public key" value="Upload"
-								   onclick="return confirm('Are you sure? It will overwrite your current credentials and you have delegate it manually.');"/>
-						</span>
-						<div style='display:none;'> <input type='hidden'  name='dload'  /> </div> 
-						<button type="submit" name="dl_pubkey" class="btn btn-default btn-xs" title="Download your public key" id="dl_file">
-							<span class="glyphicon glyphicon-download"></span> Download
-						</button>
-						<button class="btn btn-default btn-xs" id="upload_file" type="button" title="Upload a public key">
-							<span class="glyphicon glyphicon-upload"></span> Upload
-						</button>       
-	      			</td>
-	    		</tr>
-	    		<tr class="even" id="pkey_row">
-				 {%if 'N/A' not in user_private_key%}
-	      			<td class="key">Private Key </td> <!-- Hide if priv_key doesn't exist in myslice platform   -->
-	      			<td class="value">********<a href="#">
-	      				<button type="submit" name="dl_pkey" class="btn btn-default btn-xs" title="Download your privaye key" id="dl_pkey">
-							<span class="glyphicon glyphicon-download"></span> Download	
-						</button>
-	      				<input class="btn btn-danger btn-xs" id="delete" name="delete" type="submit"  value="Delete" title="Delete your private key"
-								onclick="return confirm('Are you sure? If you do so, you have to delegate your credentials manually.');"/> 
-	    			</td>
-				  {%else%}
-					<td class="key">Private Key </td> <!-- Hide if priv_key doesn't exist in myslice platform   -->
- 					<td class="value">********<a href="#">
-     					<button type="submit" name="dl_pkey" class="btn btn-default btn-xs disabled" title="Download your privaye key" id="dl_pkey">
-        					<span class="glyphicon glyphicon-download"></span> Download 
-     					</button>
-     					<input class="btn btn-danger btn-xs disabled" id="delete" name="delete" type="submit" title="Delete your private key" value="Delete" />
-					</td>
-				 {%endif%}		
-	  			</tr>
-	  			<tr class="odd">
-	    			<td colspan="2">
-	      				<p class="message" id="pkey_del_msg"><b> Tradeoff:</b> Ease-of-use vs Security.<br>
-							<b>Ease-of-use:</b> Automatic account delegation. Don't delete private key.<br>
-							<b>Security:</b> Manual account delegation. Download & Delete private key.
-						</p>
-	    			</td>
-	  			</tr>
-				{%endif%}
-			</table>
+			<form id="editForm" method="post" action="account_process" enctype="multipart/form-data">
+			  	{% csrf_token %}
+			  		<table class="profile">          
+			    		<tr>
+			      			<td colspan="2">
+								<div>Platform: Myslice</div>
+			      			</td>
+			    		</tr>
+			    		<tr>
+			      			<td class="key">Email</td>
+			      			<td class="value">
+								<span id="emailval" class="value" >{{ person.email }}</span>
+								<button class="btn btn-default btn-xs" type="button" id="edit_email" onclick="editAlert();"  title="To change your affiliation please contact the administrator">
+		    						<span class="glyphicon glyphicon-question-sign"></span> Edit
+								</button>
+							</td>
+			      		</tr>
+			      		<tr class="odd">
+							<td class="key">Password</td>
+							<td class="value"> 
+				  				<button class="btn btn-default btn-xs" type="button" title="Password" name="edit_pass" id="edit_pass">
+									<span class="glyphicon glyphicon-edit"></span> Edit
+								</button>
+				  				<span id="passval"class="value">******** </span>
+				  				<span class="hide_this" id="span_pass">
+				    				<button type="button" class="btn btn-default btn-xs" title="Cancel" id="cancel_pass_change"> Cancel </button>
+				    				<div style='display:none;' id="pass_form">
+				    				<input type='hidden'  value='' /></div>
+				    				<table id="edit_password">
+				      					<tr>
+											<td>Enter password: </td>
+											<td class="field"> <input type="password" name="password" id="password" /> </td>
+				      						</tr>
+				      						<tr>
+											<td>Confirm password: </td>
+											<td class="field"> 
+					  							<input type="password" name="confirmpassword" id="confirmpassword" /> 
+					  							<input type="submit" class="btn btn-default btn-xs" name="submit_pass" value="Save"/> 
+											</td>
+				      					</tr>
+				    				</table>
+				  				</span>	
+							</td>
+			      		</tr>
+			      		<tr class="even">
+							<td class="key">Full Name</td>
+							<td class="value">
+				  				<span id="nameval" class="value" >{{ fullname }} </span>
+				  				<span class="hide_this" id="span_name">
+				    				<button type="button" class="btn btn-default btn-xs" title="Cancel" id="cancel_name_change"> Cancel </button> 
+				    				<div style='display:none;'><input type='hidden'  name='nameform'  /></div>
+				    				<input id="fname" type="text" name="fname" class="required"  maxlength="200" value="{{firstname}}" />
+				    				<input id="lname" type="text" name="lname" class="required"  maxlength="200" value="{{lastname}}" />
+				    				<input type="submit" class="btn btn-default btn-xs" name="submit_name" value="Save"/>
+				  				</span>
+				  				<button class="btn btn-default btn-xs" type="button"title="Full Name" id="edit_name">
+									<span class="glyphicon glyphicon-edit"></span> Edit
+								</button>
+							</td>
+			      		</tr>
+			      		<tr class="odd">
+							<td class="key">Authority</td>
+							<td class="value">
+				  				<span id="affval" class="value">{{ authority }}</span>
+								 <button class="btn btn-default btn-xs" type="button" id="edit_auth" onclick="editAlert()"  title="To change your authority please contact the administrator">
+		     						<span class="glyphicon glyphicon-question-sign"></span> Edit
+								 </button>
+				  			</td>
+						</tr>
+						{%if 'Enabled'  in user_status %}
+						<tr class="even">
+				  			<td class="key">Generate Keys</td>
+				  			<td>
+								<input type="submit" name="generate" class="btn btn-danger btn-xs" value="Generate a new Key Pair" id="generate_keypair" 
+									   onclick="return confirm('Are you sure? If you do so, your current credentials will be overwritten.');" 
+									   title="It will generate a new key Pair and your current credentials will be overwritten."/>
+			      			</td> 
+			    		</tr>
+			    		<tr class="odd">
+			      			<td class="key">Public Key</td>
+			      			<td class="value">
+								<span id="keyval" class="value">******** </span>
+								<span class="hide_this" id="span_upload">
+				  					<button type="button" class="btn btn-default btn-xs" title="Cancel" id="cancel_upload"> Cancel </button>
+				  					<div style='display:none;'>
+				  						<input type='hidden'  name='upload'  /></div>
+				  						<input type="file" name="pubkey" class="required" id="pubkey"/>  
+				  						<input class="btn btn-default btn-xs" name="upload_key" id="upload_key"  type="submit" title="Upload your public key" value="Upload"
+										   onclick="return confirm('Are you sure? It will overwrite your current credentials and you have delegate it manually.');"/>
+								</span>
+								<div style='display:none;'> <input type='hidden'  name='dload'  /> </div> 
+								<button type="submit" name="dl_pubkey" class="btn btn-default btn-xs" title="Download your public key" id="dl_file">
+									<span class="glyphicon glyphicon-download"></span> Download
+								</button>
+								<button class="btn btn-default btn-xs" id="upload_file" type="button" title="Upload a public key">
+									<span class="glyphicon glyphicon-upload"></span> Upload
+								</button>       
+			      			</td>
+			    		</tr>
+			    		<tr class="even" id="pkey_row">
+						 {%if 'N/A' not in user_private_key%}
+			      			<td class="key">Private Key </td> <!-- Hide if priv_key doesn't exist in myslice platform   -->
+			      			<td class="value">********<a href="#">
+			      				<button type="submit" name="dl_pkey" class="btn btn-default btn-xs" title="Download your privaye key" id="dl_pkey">
+									<span class="glyphicon glyphicon-download"></span> Download	
+								</button>
+			      				<input class="btn btn-danger btn-xs" id="delete" name="delete" type="submit"  value="Delete" title="Delete your private key"
+										onclick="return confirm('Are you sure? If you do so, you have to delegate your credentials manually.');"/> 
+			    			</td>
+						  {%else%}
+							<td class="key">Private Key </td> <!-- Hide if priv_key doesn't exist in myslice platform   -->
+		 					<td class="value">********<a href="#">
+		     					<button type="submit" name="dl_pkey" class="btn btn-default btn-xs disabled" title="Download your privaye key" id="dl_pkey">
+		        					<span class="glyphicon glyphicon-download"></span> Download 
+		     					</button>
+		     					<input class="btn btn-danger btn-xs disabled" id="delete" name="delete" type="submit" title="Delete your private key" value="Delete" />
+							</td>
+						 {%endif%}		
+			  			</tr>
+			  			<tr class="odd">
+			    			<td colspan="2">
+			      				<p class="message" id="pkey_del_msg"><b> Tradeoff:</b> Ease-of-use vs Security.<br>
+									<b>Ease-of-use:</b> Automatic account delegation. Don't delete private key.<br>
+									<b>Security:</b> Manual account delegation. Download & Delete private key.
+								</p>
+			    			</td>
+			  			</tr>
+						{%endif%}
+					</table>
+			
 		</div>
 	</div>
 
-	<div class="account-panel" id="principal_acc" style="display:none;">
-
-	<h3>Principal Account <small>Account used for delegating credentials</small></h3>
-	<div class="raw">
+	<div class="tab-pane row" id="account">
+	  	<div class="col-md-12">
+	
+		<h3>Principal Account <small>Account used for delegating credentials</small></h3>
 		<table class="table"> 
 			<tr class="odd"> 
     			<th>Platform</th> 
@@ -179,12 +182,12 @@
     		</tr> 
 			{%endfor%}               
 		</table>
-	</div>
-
-
+	
+		</div>
+	
 
 	{%if 'Enabled'  in user_status %}
-	<div class="row">
+	  	<div class="col-md-12">
 		<h3>Credentials <small>Delegated to Principal Account</small></h3>
 		        <table class="table">
 					<caption><b>Delegated User Credential</b></caption> 
@@ -250,71 +253,66 @@
 				<p><button class="btn btn-danger btn-lg btn-block disabled"   name= "clear_cred" type="submit" title="Clear All Credentials">Clear Credentials</button></p>
 				{%endif%}
 		</div>
+		</form>
 	</div>
-	
-
 
-	<div class="account-panel" id="ref_acc" style="display:none;">
+	<div class="tab-pane row" id="access">
+	  	<div class="col-md-12">
+	
 		<h3>Testbed Access <small>Reference Accounts in the following testbeds</small></h3>
-		<div class="row">
-		        <table class="mytable table table-bordered table-hover"> 
-		            <tr class="odd"> 
-		                <th>Platform</th> 
-		                <th>Account Type</th>
-						<th>Reference to</th>
-						<th>Remove Account</th>
-		            </tr>   
-		            {% for row in ref_acc %}         
-		            <tr class="border_bottom">
-		                <td class="odd"> {{ row.platform_name }} </td>
-		                <td class="odd"> {{ row.account_type }} </td>
-						<td class="odd"> {{ row.account_reference }} </td>
-						<td class="odd">
-		    				<button class="btn btn-danger btn-xs" name="delete_{{row.platform_name}}" type="submit" title="Delete account from this platform">
-								<span class="glyphicon glyphicon-minus"></span>
-							</button>
-						</td>
-		            </tr> 
-		            {%endfor%}               
-		        </table>
-		</div>
-		
+        <table class="mytable table table-bordered table-hover"> 
+            <tr class="odd"> 
+                <th>Platform</th> 
+                <th>Account Type</th>
+				<th>Reference to</th>
+				<th>Remove Account</th>
+            </tr>   
+            {% for row in ref_acc %}         
+            <tr class="border_bottom">
+                <td class="odd"> {{ row.platform_name }} </td>
+                <td class="odd"> {{ row.account_type }} </td>
+				<td class="odd"> {{ row.account_reference }} </td>
+				<td class="odd">
+    				<button class="btn btn-danger btn-xs" name="delete_{{row.platform_name}}" type="submit" title="Delete account from this platform">
+						<span class="glyphicon glyphicon-minus"></span>
+					</button>
+				</td>
+            </tr> 
+            {%endfor%}               
+        </table>		
 		
 		
 		<h3>Add reference account to the following testbeds</h3>
-		<div class="row">
-		        <table class="mytable table table-bordered table-hover"> 
-		            <tr class="odd"> 
-		                <th>Platforms</th> 
-		                <th>Add Account</th>
-		            </tr>   
-		            {% for platform in platform_list %}         
-		            <tr class="border_bottom">
-		                <td class="odd"> {{ platform.platform_no_access }} </td>
-		                <td class="odd">
-							<button class="btn btn-success btn-sm" name= "add_{{platform.platform_no_access}}" type="submit" title="Add account to this platform">
-								<span class="glyphicon glyphicon-plus"></span>
-							</button>
-						</td>
-		            </tr> 
-		            {%endfor%}               
-		        </table>
-		</div>
+        <table class="mytable table table-bordered table-hover"> 
+            <tr class="odd"> 
+                <th>Platforms</th> 
+                <th>Add Account</th>
+            </tr>   
+            {% for platform in platform_list %}         
+            <tr class="border_bottom">
+                <td class="odd"> {{ platform.platform_no_access }} </td>
+                <td class="odd">
+					<button class="btn btn-success btn-sm" name= "add_{{platform.platform_no_access}}" type="submit" title="Add account to this platform">
+						<span class="glyphicon glyphicon-plus"></span>
+					</button>
+				</td>
+            </tr> 
+            {%endfor%}               
+        </table>
 	</div>
 {%endif%} 
-</form>
+</div>
 </div>
 
 <script>
     $(document).ready(function() {
-		$('li#nav-account').addClass("active");
-
-        $('a.account-tab').click(function() {
-            $('ul.nav-tabs li').removeClass('active');
-            $(this).parent().addClass('active');
-            $('div.account-panel').hide();
-            $('div#'+$(this).data('panel')).show();
-        });
+    	$('.nav-tabs a').click(function (e) {
+			e.preventDefault();
+			$(this).tab('show');
+			id = $(this).attr('href').substr(1);
+		
+		});
+		
         $('button#createslice').click(function() {
             window.location="/portal/slice_request/";
         });
diff --git a/portal/templates/contact.html b/portal/templates/contact.html
index fe327a68..35065e49 100644
--- a/portal/templates/contact.html
+++ b/portal/templates/contact.html
@@ -6,30 +6,37 @@
 
 {% block content %}
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_support_small.png" alt="Open a Ticket" /> OneLab Support</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/support-xs.png" alt="Open a Ticket" /> OneLab Support</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">&nbsp;</div>
+</div>
+<div class="row">
+	<div class="col-md-12">
 	<p>Please check our <a href="/portal/support/documentation">FAQ</a> section. Most of the basic problems are explained there.</p>
 	<p>
 	If you haven't find your answes in the FAQ, please contact us by filling the form below.<br />
 	You can also <a href="mailto:support@myslice.info">e-mail</a> us directly.
 	</p>
+	</div>
 </div>
 
 <div class="row">
-  <form class="cmxform form-horizontal" id="commentForm" action="#" method="post" role="form">{% csrf_token %}
-  <fieldset>
-    {% for field in form %}
-    <div class="form-group">
-      <label for="{{ field.html_name }}" class="col-xs-3 control-label">{{ field.label }}</label>
-      <div class="col-xs-6"> {{ field.errors }} {{ field }} <p class="form-hint">{{ field.help_text }}</p> </div>
-    </div>
-    {% endfor %}
-    <div class="col-xs-5">
-    </div>
-    <button class="submit btn btn-default col-xs-2" type="submit">Create Ticket</button>
-  </fieldset>
-  </form>
+	<div class="col-md-2"></div>
+	<div class="col-md-8">
+		<form role="form" method="post">
+		{% csrf_token %}
+		{% for field in form %}
+	    <div class="form-group">
+	      	<label for="{{ field.html_name }}" class="control-label">{{ field.label }}</label>
+	      	{{ field.errors }} {{ field }}
+	    </div>
+	    {% endfor %}
+		<button type="submit" class="btn btn-default">Create Ticket</button>
+		</form>
+	</div>
 </div>
 {% endblock %}
 
diff --git a/portal/templates/contact_sent.html b/portal/templates/contact_sent.html
index c1d0d7d1..430658c3 100644
--- a/portal/templates/contact_sent.html
+++ b/portal/templates/contact_sent.html
@@ -2,13 +2,17 @@
 
 {% block content %}
 <div class="row">
+	<div class="col-md-12">
 	<h1><img src="{{ STATIC_URL }}img/icon_support_small.png" alt="Open a Ticket" /> OneLab Support</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">
   	<h2>Query Received !</h2>
 	<p>
 	We will study your problem and get back to you as soon as possible.
 	</p>
+	</div>
 </div>
 {% endblock %}
 
diff --git a/portal/templates/documentationview.html b/portal/templates/documentationview.html
index 00a07f9c..44e902d8 100644
--- a/portal/templates/documentationview.html
+++ b/portal/templates/documentationview.html
@@ -2,9 +2,12 @@
 
 {% block content %}
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_support_small.png" alt="Open a Ticket" /> OneLab Portal Documentation</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/support-xs.png" alt="OneLab Portal Documentation" /> OneLab Portal Documentation</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">
 <h2>Portal Components</h2>
 <h3>Myslice (Web Frontend)</h3>
 <p>
@@ -49,5 +52,6 @@ slices that belongs to his institution.</p>
 <h5>Can I see the pending users/slices of other institutions?</h5>
 <h5>How can I manage the users that belong to my institution?</h5>
 </div>
+</div>
 {% endblock %}
 
diff --git a/portal/templates/institution.html b/portal/templates/institution.html
index 79b7361c..f7c81876 100644
--- a/portal/templates/institution.html
+++ b/portal/templates/institution.html
@@ -8,7 +8,7 @@
 <div class="container">
 	<div class="row">
 		<div class="col-md-12">
-			<ul class="nav nav-tabs">
+			<ul class="nav nav-tabs nav-section">
 				<li class="active"><a href="#info"><img src="{{ STATIC_URL }}icons/authority-xs.png" alt="Institution" /> Institution {{user_details.parent_authority}}</a></li>
 				<li><a href="#users">Users</a></li>
 				<li><a href="#slices">Slices</a></li>
diff --git a/portal/templates/join_view.html b/portal/templates/join_view.html
index 576458ad..8576d1a5 100644
--- a/portal/templates/join_view.html
+++ b/portal/templates/join_view.html
@@ -4,17 +4,22 @@
 
 
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_testbed_small.png" alt="Join Federation" /> Join the OneLab Federation</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/testbed-xs.png" alt="Join Federation" /> Join the OneLab Federation</h1>
+	</div>
 </div>
 <div class="row">
-	
-	<p>
+	<div class="col-md-12">
+	<h3>
 	OneLab welcomes companies, universities, and research laboratories to join the OneLab Federation of Testbeds. <br>
+	</h3>
+	<p>
 	We are supported by the European Commision through its 7th Framework Programs and FIRE initiative (Future Internet Research and Experimentation), as well as by other national and international funding initiatives.
 	</p>
 	<p>
 	If you wish to become a new member of OneLab Federation, you should first consult the Membership Agreement.
 	</p>
+	</div>
 </div>
 
 {% if errors %}
@@ -26,138 +31,150 @@
     </ul>
 </div>
 {% endif %}
-  
+<form id="joinForm" method="post">
 <div class="row">
-  <form action="" id="joinForm" method="post">
+  
   {% csrf_token %}
-    <fieldset>
-      <table>
-        <tr><td colspan="2"><h4>Site Information</h4></td></tr>
-        <tr>
-          <th><label for="site_name">Site name: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="site_name" name="site_name" value="{{ site_name }}" size="20" maxlength="40" class="form-control" required> </td>
-        </tr>
-       <tr>
-          <th><label for="root_authority_hrn">Root authority: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td> 
-               <select id="root_authority_hrn" name="root_authority_hrn" class="form-control" required>
-               {% if root_authorities %}
-                    {% for root_auth in root_authorities %}
-               <option>{{ root_auth.authority_hrn }}</option>
-                    {% endfor %}
-               {% endif %}
-               </select>
+  <div class="col-md-6">
+  	<h3>Site Information</h3>
+  	
+  	<div class="form-group">
+  		<label for="site_name">Site name:</label>
+    	<input type="text" id="site_name" name="site_name" value="{{ site_name }}" maxlength="40" class="form-control" required>
+    </div>
+	<div class="form-group">
+    	<label for="root_authority_hrn">Root authority:</label>
+	    <select id="root_authority_hrn" name="root_authority_hrn" class="form-control" required>
+		   {% if root_authorities %}
+		        {% for root_auth in root_authorities %}
+		   <option>{{ root_auth.authority_hrn }}</option>
+		        {% endfor %}
+		   {% endif %}
+		</select>
 <!--
                <div class="ui-widget">
                    <input id="root_authority_hrn" name="root_authority_hrn" class="form-control" value="{{ root_authority_hrn }}" required>
                </div>
 -->
-          </td>
-        </tr>
-        <tr>
-          <th><label for="site_authority">Site authority: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="site_authority" name="site_authority" value="{{ site_authority }}" size="10" maxlength="16" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="site_abbreviated_name">Abbreviated name: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="site_abbreviated_name" name="site_abbreviated_name" value="{{ site_abbreviated_name }}" size="20" maxlength="40" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="site_url">URL: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="site_url" name="site_url" value="{{ site_url }}" size="30" maxlength="128" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="site_latitude">Latitude: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="site_latitude" name="site_latitude" value="{{ site_latitude }}" size="10" maxlength="10" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="site_longitude">Longitude: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="site_longitude" name="site_longitude" value="{{ site_longitude }}" size="10" maxlength="10" class="form-control" required> </td>
-        </tr>
-        <tr><td colspan="2">&nbsp;</td></tr>
-        <tr><td colspan="2"><h4>Principal Investigator Information</h4></td></tr>
-        <tr>
-          <th><label for="pi_first_name">PI First Name: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="pi_first_name" name="pi_first_name" value="{{ pi_first_name }}" size="20" maxlength="20" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="pi_last_name">PI Last Name: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="pi_last_name" name="pi_last_name" value="{{ pi_last_name }}" size="20" maxlength="20" class="form-control" required> </td>
-        </tr>
+	</div>
+	<div class="form-group">
+		<label for="site_authority">Site authority:</label>
+		<input type="text" id="site_authority" name="site_authority" value="{{ site_authority }}" maxlength="16" class="form-control" required>
+    </div>
+	<div class="form-group">  
+        <label for="site_abbreviated_name">Abbreviated name:</label>
+        <input type="text" id="site_abbreviated_name" name="site_abbreviated_name" value="{{ site_abbreviated_name }}" maxlength="40" class="form-control" required>
+    </div>
+	<div class="form-group">  
+        <label for="site_url">URL:</label>
+        <input type="text" id="site_url" name="site_url" value="{{ site_url }}" maxlength="128" class="form-control" required>
+    </div>
+	<div class="form-group"> 
+        <label for="site_latitude">Latitude:</label>
+        <input type="text" id="site_latitude" name="site_latitude" value="{{ site_latitude }}" maxlength="10" class="form-control" required>
+    </div>
+	<div class="form-group"> 
+        <label for="site_longitude">Longitude:</label>
+        <input type="text" id="site_longitude" name="site_longitude" value="{{ site_longitude }}" maxlength="10" class="form-control" required>
+    </div>
+  </div>
+  
+  <div class="col-md-6">
+  	<h3>Postal address</h3>
+
+	<div class="form-group">
+  		<label class="" for="address_line1">Address: </label>
+        <input type="text" id="address_line1" name="address_line1" value="{{ address_line1 }}" maxlength="40" class="form-control">
+    </div>
+	<div class="form-group"> 
+        <label class="" for="address_line2">Address (2): </label>
+        <input type="text" id="address_line2" name="address_line2" value="{{ address_line2 }}" maxlength="40" class="form-control">
+    </div>
+	<div class="form-group"> 
+        <label class="" for="address_line3">Address (3): </label>
+        <input type="text" id="address_line3" name="address_line3" value="{{ address_line3 }}" maxlength="40" class="form-control">
+    </div>
+	<div class="form-group"> 
+        <label class="" for="address_city">City: </label>
+        <input type="text" id="address_city" name="address_city" value="{{ address_city }}" maxlength="20" class="form-control">
+    </div>
+	<div class="form-group"> 
+        <label class="" for="address_postalcode">Postal Code: </label>
+        <input type="text" id="address_postalcode" name="address_postalcode" value="{{ address_postalcode }}" size="10" maxlength="10" class="form-control">
+    </div>
+	<div class="form-group">
+        <label class="" for="address_state">State: </label>
+        <input type="text" id="address_state" name="address_state" value="{{ address_state }}" maxlength="20" class="form-control">
+    </div>
+	<div class="form-group">   
+        <label class="" for="address_country">Country: </label>
+        <input type="text" id="address_country" name="address_country" value="{{ address_country }}" maxlength="20" class="form-control">
+    </div>
+	
+  </div>
+</div>
+
+<div class="row"> 
+  
+  <div class="col-md-6">
+  	
+  	<h3>Principal Investigator Information</h3>
+
+	<div class="form-group">
+	  	<label for="pi_first_name">PI First Name</label>
+    	<input type="text" id="pi_first_name" name="pi_first_name" value="{{ pi_first_name }}" maxlength="20" class="form-control" required>
+    </div>
+	<div class="form-group">    
+    	<label for="pi_last_name">PI Last Name:</label>
+		<input type="text" id="pi_last_name" name="pi_last_name" value="{{ pi_last_name }}" maxlength="20" class="form-control" required>
 <!--
         <tr>
           <th><label class="" for="pi_title">PI Title: </label></th>
-          <td><input type="text" id="pi_title" name="pi_title" value="{{ pi_title }}" size="6" maxlength="6" class="form-text "> </td>
+          <td><input type="text" id="pi_title" name="pi_title" value="{{ pi_title }}" size="6" maxlength="6" class="form-control "> </td>
         </tr>
 -->
-        <tr>
-          <th><label for="pi_phone">PI Phone: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="pi_phone" name="pi_phone" value="{{ pi_phone }}" size="20" maxlength="20" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="pi_email">PI email: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="text" id="pi_email" name="pi_email" value="{{ pi_email }}" size="20" maxlength="40" class="form-control" required> </td>
-        </tr>
-        <tr>
-          <th><label for="pi_password">PI password: <span class="form-required" title="This field is required.">*</span></label></th>
-          <td><input type="password" id="pi_password" name="pi_password" value="" size="20" maxlength="20" class="form-control" required> </td>
-        </tr>
-        <tr><td colspan="2">&nbsp;</td></tr>
-        <tr><td colspan="2"><h4>Postal address</h4></td></tr>
-        <tr>
-          <th><label class="" for="address_line1">Address: </label></th>
-          <td><input type="text" id="address_line1" name="address_line1" value="{{ address_line1 }}" size="30" maxlength="40" class="form-text"> </td>
-        </tr>
-        <tr>
-          <th><label class="" for="address_line2">Address (2): </label></th>
-          <td><input type="text" id="address_line2" name="address_line2" value="{{ address_line2 }}" size="30" maxlength="40" class="form-text"> </td>
-        </tr>
-        <tr>
-          <th><label class="" for="address_line3">Address (3): </label></th>
-          <td><input type="text" id="address_line3" name="address_line3" value="{{ address_line3 }}" size="30" maxlength="40" class="form-text"> </td>
-        </tr>
-        <tr>
-          <th><label class="" for="address_city">City: </label></th>
-          <td><input type="text" id="address_city" name="address_city" value="{{ address_city }}" size="20" maxlength="20" class="form-text"> </td>
-        </tr>
-        <tr>
-          <th><label class="" for="address_postalcode">Postal Code: </label></th>
-          <td><input type="text" id="address_postalcode" name="address_postalcode" value="{{ address_postalcode }}" size="10" maxlength="10" class="form-text"> </td>
-        </tr>
-        <tr>
-          <th><label class="" for="address_state">State: </label></th>
-          <td><input type="text" id="address_state" name="address_state" value="{{ address_state }}" size="20" maxlength="20" class="form-text"> </td>
-        </tr>
-        <tr>
-          <th><label class="" for="address_country">Country: </label></th>
-          <td><input type="text" id="address_country" name="address_country" value="{{ address_country }}" size="20" maxlength="20" class="form-text "> </td>
-        </tr>
-        <tr><td colspan="2">&nbsp;</td></tr>
-        <tr><td colspan="2" style="text-align:center"><input type="submit" name="op" value="Register" class="form-submit"></td></tr>
-      </table>
-    </fieldset>
-  </form>
+	</div>
+	<div class="form-group">
+		<label for="pi_phone">PI Phone:</label>
+    	<input type="text" id="pi_phone" name="pi_phone" value="{{ pi_phone }}" maxlength="20" class="form-control" required>
+    </div>
+	<div class="form-group">
+    	<label for="pi_email">PI email:</label>
+    	<input type="text" id="pi_email" name="pi_email" value="{{ pi_email }}" maxlength="40" class="form-control" required>
+    </div>
+	<div class="form-group">
+    	<label for="pi_password">PI password:</label>
+    	<input type="password" id="pi_password" name="pi_password" value="" maxlength="20" class="form-control" required>
+	</div>
+  	
+	</div>
+	<div class="col-md-6">
+		<h3>Site Registration Information</h3>
+	<p>
+		A membership agreement document will be sent to your email address as a PDF file.
+	</p><p>
+		Please print and sign a copy of the agreement and send it to:
+	</p><p>
+	Ciro Scognamiglio<br>
+	UPMC - LIP6<br>
+	Campus Jussieu<br>
+	Couloir 26-00, bureau 102<br>
+	Boite courrier 169<br>
+	4 place Jussieu<br>
+	F-75252 PARIS cedex 05 - FRANCE<br>
+	</p><p>
+	Once your membership has been processed we will contact you to welcome you as a member.
+	</p><p>
+	If you have any questions about membership, contact the <a href="/portal/contact" >OneLab Support team</a>.
+	</p>
+	</div>
 </div>
-
 <div class="row">
-	<p>
-A membership agreement document will be sent to your email address as a PDF file.
-</p><p>
-Please print and sign a copy of the agreement and send it to:
-</p><p>
-Ciro Scognamiglio<br>
-UPMC - LIP6<br>
-Campus Jussieu<br>
-Couloir 26-00, bureau 102<br>
-Boite courrier 169<br>
-4 place Jussieu<br>
-F-75252 PARIS cedex 05 - FRANCE<br>
-</p><p>
-Once your membership has been processed we will contact you to welcome you as a member.
-</p><p>
-If you have any questions about membership, contact the <a href="/portal/contact" >OneLab Support team</a>.
-</p>
+	<div class="col-md-12" style="text-align:center;">
+		<button type="submit" class="btn btn-default">Send registration form</button>
+	</div>
 </div>
+</form>
 <script>
 /*
 jQuery(document).ready(function(){
diff --git a/portal/templates/manageuserview.html b/portal/templates/manageuserview.html
index 83b37ee3..7f2e98e3 100644
--- a/portal/templates/manageuserview.html
+++ b/portal/templates/manageuserview.html
@@ -2,7 +2,9 @@
 {% block content %}
 
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_users_small.png" alt="Manage Users" /> Manage Users</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/users-xs.png" alt="Manage Users" /> Manage Users</h1>
+	</div>
 </div>
 
 
diff --git a/portal/templates/onelab/onelab_widget-slice-sections.html b/portal/templates/onelab/onelab_widget-slice-sections.html
index 30881589..bf64b8d8 100644
--- a/portal/templates/onelab/onelab_widget-slice-sections.html
+++ b/portal/templates/onelab/onelab_widget-slice-sections.html
@@ -1,5 +1,5 @@
 {% if section == "resources" %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs nav-section">
 	<li><a href="/slice/{{ slice }}#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
 	<li><a href="/slice/{{ slice }}#testbeds">Testbeds</a></li>
 	<li class="active"><a class="link" href="/resources/{{ slice }}">Resources</a></li>
@@ -9,7 +9,7 @@
 	<li><a href="/slice/{{ slice }}#experiment" data-toggle="tab">Experiment</a></li>
 </ul>
 {% else %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs nav-section">
 	<li class="active"><a href="#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
 	<li class="testbeds"><a href="#testbeds">Testbeds</a></li>
 	<li><a class="link" href="/resources/{{ slice }}">Resources</a></li>
diff --git a/portal/templates/password_reset_complete.html b/portal/templates/password_reset_complete.html
index eee3d20e..da3476b2 100644
--- a/portal/templates/password_reset_complete.html
+++ b/portal/templates/password_reset_complete.html
@@ -4,15 +4,19 @@
 {% block content %}
 
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="Password reset" /> Password reset</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="Password reset" /> Password reset</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">
 	<h3>Onelab secured Password reset wizard</h3>
 	<p>Password reset successful</p>
 
 	<p>Your password has been set.  You may go ahead and log in now.</p>
 
 	<p><a href="/">Log in</a></p>
+	</div>
 </div>
 {% endblock %}
 
diff --git a/portal/templates/password_reset_confirm.html b/portal/templates/password_reset_confirm.html
index 5701ab1e..dbffdb44 100644
--- a/portal/templates/password_reset_confirm.html
+++ b/portal/templates/password_reset_confirm.html
@@ -4,9 +4,12 @@
 {% if validlink %}
 
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="Password reset" /> Password reset</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="Password reset" /> Password reset</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">
 	<h3>Onelab secured Password reset wizard</h3>
 
 	<p>Please enter your new password twice so we can verify you typed it in correctly.</p>
@@ -26,6 +29,7 @@
 	<p> The password reset link was invalid, possibly because it has already been used.  Please request a new <a href="/portal/pass_reset/">password reset.</a></p>
 
 	<p>If you still encounter problem please <a href="/portal/contact/">Contact Support</a> for password recovery.</p> 
+	</div>
 </div>
 {% endif %}
 
diff --git a/portal/templates/password_reset_done.html b/portal/templates/password_reset_done.html
index 5efdfb2e..d3b4f3ae 100644
--- a/portal/templates/password_reset_done.html
+++ b/portal/templates/password_reset_done.html
@@ -1,12 +1,16 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="Password reset" /> Password reset</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="Password reset" /> Password reset</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">
 	<h3>Onelab secured Password reset wizard</h3>
 
 	<p>We've emailed you instructions for setting your password to the email address you submitted. You should be receiving it shortly.</p>
+	</div>
 </div>
 {% endblock %}
 
diff --git a/portal/templates/password_reset_form.html b/portal/templates/password_reset_form.html
index 427c4fe1..e30af4ae 100644
--- a/portal/templates/password_reset_form.html
+++ b/portal/templates/password_reset_form.html
@@ -1,9 +1,12 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="Password reset" /> Password reset</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="Password reset" /> Password reset</h1>
+	</div>
 </div>
 <div class="row">
+	<div class="col-md-12">
 	<h3>Welcome to Onelab secured Password reset wizard</h3>
 
 	<p>Forgotten your password? Enter your email address below, and we'll email instructions for setting a new one.</p>
@@ -12,6 +15,7 @@
 	{{ form.email.errors }}
 	<p><label for="id_email">Email address:</label> {{ form.email }} <input type="submit" value="Reset my password" /></p>
 	</form>
+	</div>
 </div>
 {% endblock %}
 
diff --git a/portal/templates/registration_view.html b/portal/templates/registration_view.html
index 10381a33..0f0925e5 100644
--- a/portal/templates/registration_view.html
+++ b/portal/templates/registration_view.html
@@ -3,12 +3,15 @@
 {% block content %}        
 
 <div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_user_small.png" alt="User Registration" /> OneLab Experimenter Registration</h1>
+	<div class="col-md-12">
+	<h1><img src="{{ STATIC_URL }}icons/user-xs.png" alt="User Registration" /> OneLab Experimenter Registration</h1>
+	</div>
 </div>
 <div class="row">
-
-  <h4>For First Line Support please <a href="/portal/contact" >Contact Support</a></h3>
-
+	<div class="col-md-12">
+  		<h3>For First Line Support please <a href="/portal/contact" >Contact Support</a></h3>
+	</div>
+</div>
 {% if errors %}
 <ul>
   {% for error in errors %}
@@ -17,31 +20,23 @@
 </ul>
 {% endif %}
    
- <form class="cmxform form-horizontal" id="registrationForm" method="post" action="" enctype="multipart/form-data" role="form">
-    <fieldset>
+<div class="row">
+	<div class="col-md-2"></div>
+	<div class="col-md-8">
+	<form class="cmxform form-horizontal" id="registrationForm" method="post" enctype="multipart/form-data" role="form">
     {% csrf_token %}
     <div class="form-group">
-      <label for="firstname" class="col-xs-2 control-label">First Name</label>
-      <div class="col-xs-4">
-	<input type="text" name="firstname" class="form-control" minlength="2" value="{{ firstname }}" placeholder="First Name" required />
-      </div>
-      <div class="col-xs-6"> <p class="form-hint">Enter your first name</p> </div>
+    	<label for="firstname" class="control-label">First Name</label>
+		<input type="text" name="firstname" class="form-control" minlength="2" value="{{ firstname }}" placeholder="First Name" required />
     </div>
     <div class="form-group">
-      <label for="lastname" class="col-xs-2 control-label">Last Name</label>
-      <div class="col-xs-4">
-	<input type="text" name="lastname" size="25" class="form-control" minlength="2" value="{{ lastname }}" placeholder="Last Name" required />
-      </div>
-      <div class="col-xs-6"><p class="form-hint">Enter your last name</p></div>
+    	<label for="lastname" class="control-label">Last Name</label>
+		<input type="text" name="lastname" size="25" class="form-control" minlength="2" value="{{ lastname }}" placeholder="Last Name" required />
     </div>
     <div class="form-group">
-      <label for="authority_hrn" class="col-xs-2 control-label">Authority</label>
-      <div class="col-xs-4">
-        <div class="ui-widget">
-            <input id="authority_hrn" name="authority_hrn" class="form-control" value="{{ authority_hrn }}" required>
-        </div>
-     </div>
-      <div class="col-xs-6"><p class="form-hint">An authority responsible for vetting your account</p></div>
+      <label for="authority_hrn" class="control-label">Authority</label>
+      <input id="authority_hrn" name="authority_hrn" class="form-control" value="{{ authority_hrn }}" required>
+      <p class="help-block">An authority responsible for vetting your account</p>
     </div>
 
 	<!-- LOGIN
@@ -58,49 +53,37 @@
 	-->
 
     <div class="form-group">
-      <label for="email" class="col-xs-2 control-label">Email</label>
-      <div class="col-xs-4">
-	<input type="email" name="email" size="25"  class="form-control" value="{{ email }}" required/> 
-      </div>
-      <div class="col-xs-6"><p class="form-hint">Enter a valid email address</p></div>
+    	<label for="email" class="control-label">Email</label>
+    	<input type="email" name="email" size="25"  class="form-control" value="{{ email }}" required/>
     </div>
     <div class="form-group">
-      <label for="password" class="col-xs-2 control-label">Password</label>
-      <div class="col-xs-4">
-	<input type="password"  id="password" name="password"   class="form-control" minlength="4" value="{{ password }}" required/> 
-      </div>
-      <div class="col-xs-6"><p class="form-hint">Enter password</p></div>
+      <label for="password" class="control-label">Password</label>
+      <input type="password"  id="password" name="password"   class="form-control" minlength="4" value="{{ password }}" required/>
     </div>
     <div class="form-group">
-      <label for="password" class="col-xs-2 control-label">Confirm Password</label>
-      <div class="col-xs-4">
-	<input type="password"  id="confirmpassword" name="confirmpassword"   minlength="4" class="form-control" 
-	       value="" placeholder="Confirm Password" required/>
-      </div>
-      <div class="col-xs-6"><p class="form-hint">Retype the password</p></div>
+    	<label for="password" class="control-label">Confirm Password</label>
+		<input type="password"  id="confirmpassword" name="confirmpassword"   minlength="4" class="form-control" value="" placeholder="Confirm Password" required/>
     </div>
     <div class="form-group">
-      <label for="question" class="col-xs-2 control-label">My Keys</label>
-      <div class="col-xs-4">
-	<select name="question" class="form-control" id="key-policy" required>        
-	  <option value="generate">Generate key pairs for me </option>
-	  <option value="upload">Upload my public key </option>
-	</select>
-      </div>
-      <div class="col-xs-6"><p class="form-hint">Genkey: Account Delegation Automatic (Recommended)</p> </div>
+    	<label for="question" class="control-label">My Keys</label>
+		<select name="question" class="form-control" id="key-policy" required>        
+	  		<option value="generate">Generate key pairs for me </option>
+	  		<option value="upload">Upload my public key </option>
+		</select>
+      	<p class="help-block">Genkey: Account Delegation Automatic (Recommended)</p>
     </div>
     <div class="form-group" style="display:none;" id="upload_key">
-      <label for="file" class="col-xs-2 control-label">Upload public key</label>
-      <div class="col-xs-4">
-	<input type="file" name="user_public_key" class="form-control" id="user_public_key" required/>
-	<p class="warning" id="pkey_del_msg">Once your account is validated, you will have to delegate your credentials manually using SFA [Advanced users only]</p>
-      </div>
-      <div class="col-xs-6"><p class="form-hint">Account Delegation: Manual (Advanced Users)</p></div>
+      	<label for="file" class="control-label">Upload public key</label>
+      	<input type="file" name="user_public_key" class="form-control" id="user_public_key" required>
+      	<br />
+		<div class="alert alert-danger" id="pkey_del_msg">
+			Once your account is validated, you will have to delegate your credentials manually using SFA [Advanced users only]
+		</div>
+      	<p class="help-block">Account Delegation: Manual (Advanced Users)</p>
     </div>
     <div class="form-group" id="register">
-      <button class="submit btn btn-default col-xs-12" type="submit">Register</button>
+      <button class="submit btn btn-default" type="submit">Register</button>
     </div>
-  </fieldset>
   </form>  
 </div>
 <script>
diff --git a/portal/templates/slicerequest_view.html b/portal/templates/slicerequest_view.html
index 1f57bcec..0f895b76 100644
--- a/portal/templates/slicerequest_view.html
+++ b/portal/templates/slicerequest_view.html
@@ -2,81 +2,57 @@
 {% load i18n %}
 
 {% block content %}
+	<div class="row">
+		<div class="col-md-12">
+		<h1><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="Request a Slice" /> Request a new Slice</h1>
+		</div>
+	</div>
 
-<div class="row">
-	<h1><img src="{{ STATIC_URL }}img/icon_slices_small.png" alt="Request a Slice" /> Request a new Slice</h1>
-</div>
-{% if errors %}
-<ul>
-  {% for error in errors %}
-  <li>{{ error }}</li>
-  {% endfor %}
-</ul>
-{% endif %}
-
-<div class="row">
-  <form id="commentForm" class="form-horizontal" method="post">
-  {% csrf_token %}
-  <fieldset>
-
-   <div class="form-group">
-     <label for="email" class="col-xs-2 control-label">Experimenter</label>
-     <div class="col-xs-4">
-        <label class="col-xs-2 control-label">{{ email }}</label>
-     </div>
-     <div class="col-xs-6">
-     	<p class="form-hint">Experimenter requesting a Slice</p>
-     </div>
-   </div>
-
-   <div class="form-group">
-     <label for="slice_name" class="col-xs-2 control-label">Slice Name</label>
-     <div class="col-xs-4">
-        <input type="text" name="slice_name" class="form-control" minlength="2" value="{{ slice_name }}" placeholder="Slice Name" required />
-     </div>
-     <div class="col-xs-6"> <p class="form-hint">The name of the slice you wish to create</p> </div>
-   </div>
-
-   <div class="form-group">
-     <label for="authority_hrn" class="col-xs-2 control-label">Authority</label>
-     <div class="col-xs-4">
-       <div class="ui-widget">
-           <input id="authority_hrn" name="authority_hrn" class="form-control" value="{{ authority_hrn }}" placeholder="Authority" required />
-       </div>
-    </div>
-     <div class="col-xs-6"><p class="form-hint">An authority responsible for vetting your slice</p></div>
-   </div>
-
-   <div class="form-group">
-     <label for="number_of_nodes" class="col-xs-2 control-label">Number of nodes</label>
-     <div class="col-xs-4">
-       <div class="ui-widget">
-           <input id="number_of_nodes" name="number_of_nodes" class="form-control" value="{{ number_of_nodes }}" />
-       </div>
-    </div>
-     <div class="col-xs-6"><p class="form-hint">Number of nodes you expect to request (informative)</p></div>
-   </div>
-
-   <div class="form-group">
-     <label for="purpose" class="col-xs-2 control-label">Experiment purpose</label>
-     <div class="col-xs-4">
-       <div class="ui-widget">
-           <textarea id="purpose" name="purpose" class="form-control" style="height:110px;" placeholder="Experiment Purpose" required>{{ purpose }}</textarea>
-       </div>
-    </div>
-     <div class="col-xs-6">
-     	<p class="form-hint">Purpose of your experiment (informative)</p>
-     </div>
-   </div>
-
-	<div class="col-xs-2">
+	{% if errors %}
+	<ul>
+	  {% for error in errors %}
+	  <li>{{ error }}</li>
+	  {% endfor %}
+	</ul>
+	{% endif %}
+	<div class="row">
+		<div class="col-md-12">&nbsp;</div>
 	</div>
-	<div class="col-xs-4">
-		<button class="submit btn btn-default" type="submit">Request Slice</button>
+	<div class="row">
+		<div class="col-md-2"></div>
+		<div class="col-md-8">
+			<form role="form" method="post">
+			{% csrf_token %}
+			  <div class="form-group">
+			    <label for="email">Experimenter</label>
+			    <input type="email" class="form-control" id="email" value="{{ email }}" readonly="readonly">
+			  </div>
+			  <div class="form-group">
+			    <label for="slice_name">Slice Name</label>
+			    <input type="text" class="form-control" name="slice_name" id="slice_name" placeholder="Slice Name" required="required">
+			  	<p class="help-block"></p>
+			  </div>
+			  <div class="form-group">
+			    <label for="authority">Authority</label>
+			    <input type="text" class="form-control" id="authority_hrn" name="authority_hrn" placeholder="Authority" required="required">
+			  	<p class="help-block">An authority responsible for vetting your slice</p>
+			  </div>
+			  <div class="form-group">
+			    <label for="number_of_nodes">Number of Nodes</label>
+			    <input type="text" class="form-control" name="number_of_nodes" id="number_of_nodes" placeholder="Number of Nodes">
+			  	<p class="help-block">Number of nodes you expect to request (informative)</p>
+			  </div>
+			  <div class="form-group">
+			    <label for="purpose">Experiment Purpose</label>
+			  	<textarea id="purpose" name="purpose" class="form-control" rows="6" placeholder="Experiment Purpose" required="required">{{ purpose }}</textarea>
+			    <p class="help-block">Purpose of your experiment (informative)</p>
+			  </div>
+			  <button type="submit" class="btn btn-default">Request Slice</button>
+			</form>
+	
+		</div>
 	</div>
-  </fieldset>
-  </form>
-</div>
+		
 <script>
 jQuery(document).ready(function(){
     var availableTags = [
diff --git a/portal/templates/validate_pending.html b/portal/templates/validate_pending.html
index 6012720c..497b70b5 100644
--- a/portal/templates/validate_pending.html
+++ b/portal/templates/validate_pending.html
@@ -49,7 +49,7 @@
 
 {% block content %}
 	<div class="row">
-		<h1><img src="{{ STATIC_URL }}img/icon_testbed_small.png" alt="" /> Pending requests</h1>
+		<h1><img src="{{ STATIC_URL }}icons/testbed-xs.png" alt="Pending Requests" /> Pending requests</h1>
 	</div>
 
 	{% if my_authorities %}
-- 
2.43.0