--- a
+++ b/qiita_pet/templates/user_profile.html
@@ -0,0 +1,58 @@
+{%extends sitebase.html%}
+{% block head %}
+<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/jquery.validate.min.js"></script>
+<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/password_validation.js"></script>
+<script type="text/javascript">
+$( document ).ready(function() { dualpass_validator(); });
+</script>
+{% end %}
+
+{%block content%}
+<div class="row">
+  <div class="col-lg-6">
+    <h3>User Information</h3>
+    <form role="form" action="{% raw qiita_config.portal_dir %}/profile/" method="post">
+      <input type="hidden" name="action" value="profile">
+      {% for form_item in profile %}
+      <div class="form-group" style="display: flex; flex-direction: column;">
+        <div style="display: inline; padding-left: 1em;">
+          {% if form_item.id.startswith('social_') %}
+            <img style="height: 24px; padding-right: 5px;" src="{% raw qiita_config.portal_dir %}/static/img/logo_{% raw form_item.id %}.png"/>
+          {% end %}
+          {% raw form_item.label %}
+        </div>
+        {% raw form_item(class_='form-control', placeholder=form_item.description) %}
+        {% if form_item.errors %}
+          <div style='color: #ff0000; padding-left: 10px;'>{% for e in form_item.errors %}{%raw e%}<br/>{% end %}</div>
+        {% end %}
+      </div>
+      {% end %}
+      {%if creation_timestamp is not None %}
+        <div style="padding-left: 1em; padding-bottom: 1em; color: grey;">account created on {{creation_timestamp}}</div>
+      {% end %}
+      <div style="color:{% if msg.startswith('ERROR:') %}red{% else %}darkgreen{% end %};">{{msg}}</div>
+      <button type="submit" class="btn btn-success">Save Edits</button>
+    </form>
+  </div>
+  <div class="col-lg-6">
+  <h3>Change Password</h3>
+  <form role="form" action="{% raw qiita_config.portal_dir %}/profile/" method="post" id="change_pass" name="change_pass" class="dualpass">
+  <input type="hidden" name="action" value="password">
+<div class="form-group">
+    <label for="oldpass" class="col-sm-10 control-label">Old Password</label>
+      <input type="password" class="form-control" id="oldpass" name="oldpass">
+</div>
+<div class="form-group">
+    <label for="newpass" class="col-sm-10 control-label">New Password</label>
+      <input type="password" class="form-control" id="newpass" name="newpass">
+</div>
+<div class="form-group">
+    <label for="newpass2" class="col-sm-10 control-label">Repeat New Password</label>
+      <input type="password" class="form-control" id="newpass2" name="newpass2">
+  </div>
+<div style="color:red;">{{passmsg}}</div>
+<button class="btn btn-danger">Change Password</button>
+</form>
+  </div>
+</div>
+{%end%}