diff --git a/.gitignore b/.gitignore
index 9e5fc42..94da51a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ db.sqlite3.SAVE
 node_modules/
 config_local.py
 locale/*/LC_MESSAGES/django.mo
+.DS_Store
diff --git a/ivatar/ivataraccount/templates/profile.html b/ivatar/ivataraccount/templates/profile.html
index c4ee0fb..6da094d 100644
--- a/ivatar/ivataraccount/templates/profile.html
+++ b/ivatar/ivataraccount/templates/profile.html
@@ -6,162 +6,247 @@
 {% block title %}{% trans 'Your Profile' %}{% endblock title %}
 
 {% block content %}
-
+<script type="text/javascript">
+  function add_active(id){
+    var elems = document.querySelector(".active");
+    if(elems !== null){
+      elems.classList.remove("active");
+    }
+    element = document.getElementById(id);
+    element.classList.add("active");
+  }
+</script>
 <h1>
   {% trans 'Your Profile' %} -
   {% if user.first_name and user.last_name %}
-    {{ user.first_name }} {{ user.last_name }}
+  {{ user.first_name }} {{ user.last_name }}
   {% else %}
-    {{ user.username }}
+  {{ user.username }}
   {% endif %}
 </h1>
 
 <style>
-.action-item:hover span {
+  .action-item:hover span {
     display: inline !important;
-}
-@media screen and (max-width: 320px) {
-  .action-item, .btn {
-    padding-left: 0.3em;
-    padding-right: 0.3em;
   }
-}
-.thumbnail {
-max-width:80px;
-max-height:80px;
-}
-.nobutton {
-background: none;
-color: inherit;
-border: none;
-padding: 0;
-font: inherit;
-cursor: pointer;
-outline: inherit;
-}
-.button {
-  margin-bottom: 1.5rem;
-  margin-right: 1rem;
-}
-.container{
-  display: grid;
-}
-.btn-group{
-  display: inline-flex;
-}
-.input-group-addon{
-  width: auto;
-  height: 3rem;
-  margin-top: 0.2rem;
-}
-@media only screen and (max-width: 470px) {
+  @media screen and (max-width: 320px) {
+    .action-item, .btn {
+      padding-left: 0.3em;
+      padding-right: 0.3em;
+    }
+  }
+  .thumbnail {
+    max-width:80px;
+    max-height:80px;
+  }
+  .nobutton {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
   .button {
     margin-bottom: 1.5rem;
     margin-right: 1rem;
   }
-  .unconfirmed-mail-form{
-    margin-bottom: 2rem;
+  .container{
+    display: grid;
   }
   .btn-group{
-    display: contents;
+    display: inline-flex;
+  }
+  .input-group-addon{
+    width: auto;
+    height: 3rem;
+    margin-top: 0.2rem;
+  }
+  @media only screen and (max-width: 470px) {
+    .button {
+      margin-bottom: 1.5rem;
+      margin-right: 1rem;
+    }
+    .unconfirmed-mail-form{
+      margin-bottom: 2rem;
+    }
+    .btn-group{
+      display: contents;
+    }
+  }
+  @media only screen and (max-width: 470px) {
+    p {
+      padding-top: 2rem;
+    }
+    h3{
+      line-height: 3.4rem;
+    }
   }
-}
 </style>
 
+<noscript>
+    <style type="text/css">
+      .profile-container > ul{
+        display:block;
+      }
+    </style>
+</noscript>
+
 {% if user.confirmedemail_set.count or user.confirmedopenid_set.count %}
 <h3>{% trans 'You have the following confirmed identities:' %}</h3>
-<div class="row">
-    {% for email in user.confirmedemail_set.all %}
-        <form action="{% url 'remove_confirmed_email' email.id %}" method="post">
-{% csrf_token %}
-<div class="panel" style="width:172px;margin-left:20px;float:left">
-  <div class="panel-heading" style="padding-right:0">
-    <h3 class="panel-title" title="{{ email.email }}" style="display:inline-flex"><a href="{% url 'assign_photo_email' email.id %}"><i class="fa fa-edit"></i></a>&nbsp;
-<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')"><i class="fa fa-trash"></i></button>&nbsp;
-{{ email.email|truncatechars:12 }}</h3>
-</div>
-  <div class="panel-body" style="height:130px">
-        <center>
-          <img title="{% trans 'Access count' %}: {{ email.access_count }}" style="max-height:100px;max-width:100px" src="{% if email.photo %}{% url 'raw_image' email.photo.id %}{% else %}{% static '/img/nobody/80.png' %}{% endif %}">
-        </center>
-</div>
-</div>
-        </form>
-    {% endfor %}
-    {% for openid in user.confirmedopenid_set.all %}
-        <form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
-<div class="panel" style="width:172px;margin-left:20px;float:left">
-  <div class="panel-heading" style="padding-right:0">
-    <h3 class="panel-title" title="{{ openid.openid }}" style="display:inline-flex"><a href="{% url 'assign_photo_openid' openid.pk %}"><i class="fa fa-edit"></i></a>&nbsp;
-<button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')"><i class="fa fa-trash"></i></button>&nbsp;
-{{ openid.openid|cut:"http://"|cut:"https://"|truncatechars:12 }}</h3>
-</div>
-  <div class="panel-body" style="height:130px">
-        <center>
-          <img title="{% trans 'Access count' %}: {{ openid.access_count }}" style="max-height:100px;max-width:100px" src="{% if openid.photo %}{% url 'raw_image' openid.photo.id %}{% else %}{% static '/img/nobody/80.png' %}{% endif %}">
-        </center>
-</div>
-</div>
-        </form>
-    {% endfor %}
-</div>
-{% endif %}
+<div class="row profileid">
+  {% for email in user.confirmedemail_set.all %}
+    {% if user.confirmedemail_set.all|length == 1%}
+    <form action="{% url 'remove_confirmed_email' email.id %}" method="post">
+      {% csrf_token %}
+        <div id="email-conf-{{ forloop.counter }}" class="profile-container active">
+            <img title="{% trans 'Access count' %}: {{ email.access_count }}" src="{% if email.photo %}{% url 'raw_image' email.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
+            <h3 class="panel-title email-profile" title="{{ email.email }}">
+               {{ email.email }}
+            </h3>
+            <ul>
+              <li>
+                <a href="{% url 'assign_photo_email' email.id %}">
+                  Change Profile Picture
+                </a>
+              </li>
+              <li class="email-delete">
+                <button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')">
+                  Delete Email Adress
+                </button>
+              </li>
+            </ul>
+        </div>
+    </form>
+    {% else %}
+    <form action="{% url 'remove_confirmed_email' email.id %}" method="post">
+      {% csrf_token %}
+        <div id="email-conf-{{ forloop.counter }}" class="profile-container" onclick="add_active('email-conf-{{ forloop.counter }}')">
+            <img title="{% trans 'Access count' %}: {{ email.access_count }}" src="{% if email.photo %}{% url 'raw_image' email.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
+            <h3 class="panel-title email-profile" title="{{ email.email }}">
+               {{ email.email }}
+            </h3>
+            <ul>
+              <li>
+                <a href="{% url 'assign_photo_email' email.id %}">
+                  Change Profile Picture
+                </a>
+              </li>
+              <li class="email-delete">
+                <button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')">
+                  Delete Email Adress
+                </button>
+              </li>
+            </ul>
+        </div>
+    </form>
+    {% endif %}
+  {% endfor %}
+  {% for openid in user.confirmedopenid_set.all %}
+    {% if user.confirmedopenid_set.all|length == 1 %}
+    <form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
+      <div>
+        <div id="id-conf-{{ forloop.counter }}" class="profile-container active">
+          <img title="{% trans 'Access count' %}: {{ openid.access_count }}" src="{% if openid.photo %}{% url 'raw_image' openid.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
+          <h3 class="panel-title email-profile" title="{{ openid.openid }}">
+            {{ openid.openid }}
+          </h3>
+          <ul>
+            <li>
+              <a href="{% url 'assign_photo_openid' openid.pk %}">
+                Change OpenID Picture
+              </a>
+            </li>
+            <li>
+              <button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')">
+                Delete OpenID
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </form>
+    {% else %}
+    <form action="{% url 'remove_confirmed_openid' openid.id %}" method="post">{% csrf_token %}
+      <div>
+        <div id="id-conf-{{ forloop.counter }}" class="profile-container" onclick="add_active('id-conf-{{ forloop.counter }}')">
+          <img title="{% trans 'Access count' %}: {{ openid.access_count }}" src="{% if openid.photo %}{% url 'raw_image' openid.photo.id %}{% else %}{% static '/img/nobody/120.png' %}{% endif %}">
+          <h3 class="panel-title email-profile" title="{{ openid.openid }}">
+            {{ openid.openid }}
+          </h3>
+          <ul>
+            <li>
+              <a href="{% url 'assign_photo_openid' openid.pk %}">
+                Change OpenID Picture
+              </a>
+            </li>
+            <li>
+              <button type="submit" class="nobutton" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')">
+                Delete OpenID
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </form>
+    {% endif %}
+  {% endfor %}
+  </div>
+  {% endif %}
 
-{% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %}
-<h3>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</h3>
-    {% for email in user.unconfirmedemail_set.all %}
-        <form class="unconfirmed-mail-form" action="{% url 'remove_unconfirmed_email' email.id %}" method="post">
-{% csrf_token %}
-<div class="btn-group form-group" role="group">
-<button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')"><i class="fa fa-trash"></i></button>
-<a href="{% url 'resend_confirmation_mail' email.pk %}" class="button"><i class="fa fa-envelope"></i></a>
-<span class="input-group-addon" style="width: auto;">{{ email.email }}</span>
-</div>
-</form>
-        {# TODO: (expires in xx hours) #}
+  {% if user.unconfirmedemail_set.count or user.unconfirmedopenid_set.count %}
+  <h3>{% trans 'You have the following unconfirmed email addresses and OpenIDs:' %}</h3>
+  {% for email in user.unconfirmedemail_set.all %}
+  <form class="unconfirmed-mail-form" action="{% url 'remove_unconfirmed_email' email.id %}" method="post">
+    {% csrf_token %}
+    <div class="btn-group form-group" role="group">
+      <button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this email address?' %}')"><i class="fa fa-trash"></i></button>
+      <a href="{% url 'resend_confirmation_mail' email.pk %}" class="button"><i class="fa fa-envelope"></i></a>
+      <span class="input-group-addon" style="width: auto;">{{ email.email }}</span>
+    </div>
+  </form>
+  {# TODO: (expires in xx hours) #}
+  {% endfor %}
+  {% for openid in user.unconfirmedopenid_set.all %}
+  <form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">
+    {% csrf_token %}
+    <div class="btn-group form-group" role="group">
+      <button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')"><i class="fa fa-trash"></i></button>
+      <span class="input-group-addon">{{ openid.openid }}</span>
+    </div>
+  </form>
+  {# TODO: (expires in xx hours) #}
+  {% endfor %}
+  {% endif %}
+  <p style="padding-top:5px;">
+    {% if not max_emails %}<a href="{% url 'add_email' %}" class="button" >{% trans 'Add a new email address' %}</a>&nbsp;{% endif %}
+    <a href="{% url 'add_openid' %}" class="button">{% trans 'Add a new OpenID' %}</a></p>
+  </p>
+  {% if user.photo_set.count %}
+  <h3>{% trans 'Here are the photos you have uploaded/imported:' %}</h3>
+  <div class="row">
+    {% for photo in user.photo_set.all %}
+    <div class="panel panel-tortin" style="width:132px;margin-left:20px;float:left">
+      <div class="panel-heading">
+        <h3 class="panel-title"><a href="{% url 'delete_photo' photo.pk %}" onclick="return confirm('{% trans 'Are you sure that you want to delete this image?' %}')"><i class="fa fa-trash"></i></a> {% trans 'Image' %} {{ forloop.counter }}</h3>
+      </div>
+      <div class="panel-body" style="height:130px">
+        <img title="{% trans 'Access count' %}: {{ photo.access_count }}" style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
+      </div>
+    </div>
     {% endfor %}
-    {% for openid in user.unconfirmedopenid_set.all %}
-        <form action="{% url 'remove_unconfirmed_openid' openid.id %}" method="post">
-{% csrf_token %}
-<div class="btn-group form-group" role="group">
-<button type="submit" class="button" onclick="return confirm('{% trans 'Are you sure that you want to delete this OpenID?' %}')"><i class="fa fa-trash"></i></button>
-<span class="input-group-addon">{{ openid.openid }}</span>
-</div>
-        </form>
-        {# TODO: (expires in xx hours) #}
-    {% endfor %}
-{% endif %}
+  </div>
+  {% endif %}
 
-<p>
-{% if not max_emails %}<a href="{% url 'add_email' %}" class="button" >{% trans 'Add a new email address' %}</a>&nbsp;{% endif %}
-<a href="{% url 'add_openid' %}" class="button">{% trans 'Add a new OpenID' %}</a></p>
-</p>
-{% if user.photo_set.count %}
-<h3>{% trans 'Here are the photos you have uploaded/imported:' %}</h3>
-<div class="row">
-  {% for photo in user.photo_set.all %}
-<div class="panel panel-tortin" style="width:132px;margin-left:20px;float:left">
-  <div class="panel-heading">
-    <h3 class="panel-title"><a href="{% url 'delete_photo' photo.pk %}" onclick="return confirm('{% trans 'Are you sure that you want to delete this image?' %}')"><i class="fa fa-trash"></i></a> {% trans 'Image' %} {{ forloop.counter }}</h3>
-</div>
-  <div class="panel-body" style="height:130px">
-        <center>
-          <img title="{% trans 'Access count' %}: {{ photo.access_count }}" style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
-        </center>
-</div>
-</div>
-{% endfor %}
-</div>
-{% endif %}
-
-{% if not max_photos %}
+  {% if not max_photos %}
   <p>
     <a href="{% url 'upload_photo' %}" class="button">{% trans 'Upload a new photo' %}</a>&nbsp;
     <a href="{% url 'import_photo' %}" class="button">{% trans 'Import photo from other services' %}</a>
   </p>
-{% else %}
-    {% trans "You've reached the maximum number of allowed images!" %}<br/>
-    {% trans "No further images can be uploaded." %}
-{% endif %}
-<div style="height:40px"></div>
-{% endblock content %}
+  {% else %}
+  {% trans "You've reached the maximum number of allowed images!" %}<br/>
+  {% trans "No further images can be uploaded." %}
+  {% endif %}
+  <div style="height:40px"></div>
+  {% endblock content %}
diff --git a/ivatar/static/css/libravatar_base.css b/ivatar/static/css/libravatar_base.css
index 19b5037..7b4cf17 100644
--- a/ivatar/static/css/libravatar_base.css
+++ b/ivatar/static/css/libravatar_base.css
@@ -82,14 +82,17 @@ h2 {
   letter-spacing: 0.05rem;
   font-weight: 500;
 }
-
 h3 {
   font-family: 'Lato', sans-serif;
   font-size: 24px;
   margin-bottom: 2rem;
   color: #545454;
 }
-
+ @media only screen and (max-width: 470px) {
+   h3{
+     font-size: 20px;
+   }
+}
 h4 {
   font-family: 'Lato', sans-serif;
   font-size: 25px;
@@ -404,7 +407,6 @@ transition: all 0.3s;
     top: 26rem;
   }
 }
-
 @media only screen and (max-width: 620px) {
   #page .container #home-form {
     margin-bottom: 2rem;
@@ -728,3 +730,138 @@ color:#335ECF;
      margin-top: 11rem !important;
    }
  }
+.profile-container{
+  border-top: solid 5px #2F95EDB3;
+  display: grid;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.profile-container img{
+  margin: 0.5em;
+}
+.panel-body.profile > div, .panel-body.profile > img {
+  text-align: left;
+}
+.panel-heading.profile{
+  background: none;
+  border-top-left-radius: unset;
+  border-top-right-radius: unset;
+}
+.profile-container > h3{
+  color: #353535;
+  font-weight: bold;
+}
+.profile-container > ul > li > a, .profile-container button{
+  color: #353535;
+  text-decoration: none;
+}
+.profile-container.active{
+  border-top: solid 5px #335ECF;
+}
+.profile-container ul > li > button:hover, .profile-container ul > li > a:hover{
+  color: #335ECF;
+}
+.email-profile { grid-area: email; }
+.profile-container{
+  padding-top: 2rem;
+}
+.profile-container > img {
+  grid-area: img;
+  margin: auto;
+}
+.profile-container > ul {
+  grid-area: list;
+  list-style-type: none;
+  padding:0;
+  font-size: 18px;
+}
+.profile-container > ul > li{
+  padding-top: 0.5rem;
+}
+@media only screen and (max-width: 420px) {
+  .profile-container > ul > li {
+    padding-top: 0.85rem;
+  }
+}
+.profile-container > ul > li > a:hover{
+  text-decoration: none;
+}
+.profile-container {
+  display: grid;
+  grid-template-areas:
+    'img email email email email email'
+    'img list list list list list';
+  grid-gap: 0;
+  grid-template-columns: 20% 80%;
+}
+@media only screen and (max-width: 700px) {
+  .profile-container {
+    grid-template-columns: 40% 60%;
+  }
+}
+.profile-container > div, profile-container > img {
+  text-align: center;
+}
+.profile-container.active > img{
+  max-height:120px;
+  max-width:120px;
+}
+@media only screen and (max-width: 420px) {
+  .profile-container.active > img {
+    max-height:80px;
+    max-width:80px;
+  }
+}
+.profile-container > ul{
+  display:none
+}
+.profile-container.active > ul{
+  display:block;
+}
+.profile-container > img{
+  max-height:80px;
+  max-width:80px;
+}
+h3.panel-title{
+  margin-top: unset;
+}
+.profile-container > h3{
+  padding-top: 26px;
+}
+@media only screen and (max-width: 470px) {
+  .profile-container > h3{
+    padding-top: 20px;
+  }
+}
+.profile-container:hover {
+  cursor: pointer;
+}
+.profile-container.active > h3{
+  padding-top: 12px;
+}
+.profile-container.active{
+  cursor: pointer;
+  background: #dcdcdcb5;
+}
+.profile-container.active:hover{
+  cursor:auto;
+}
+@media only screen and (min-width: 768px) {
+  .profile-container:hover ul {
+    display:block !important;
+  }
+  .profile-container:hover {
+    background: #dcdcdcb5;
+  }
+  .profile-container:hover img{
+    max-height:120px;
+    max-width:120px;
+  }
+  .profile-container:hover h3{
+    padding-top: 12px;
+  }
+}
+.alert-success {
+    color: #353535;
+    background-color: #3582d71f;
+}