diff --git a/web/pages/profile.html b/web/pages/profile.html
index 5e0539a..fb98766 100644
--- a/web/pages/profile.html
+++ b/web/pages/profile.html
@@ -4,7 +4,7 @@
 			<div class="panel panel-default">
 				<div class="panel-body">
 					<div style="width:100%;max-width:100%;">
-						<img src="/api/user/avatar/{{ user.uid }}" id="avatar" style="width:100%;" />
+						<img src="/api/user/avatar/{{ user.uid }}" id="avatar" style="width:100%;max-height:256px;" />
 						<small style="display:block;text-align:right;" ng-show="user['me']==true"><a href="/settings#profile">Edit Picture</a></small>
 					</div>
 					<h2 style="margin:0px;font-weight:bold;font-size:2em;">{{ user.name }}</h2>
diff --git a/web/pages/settings.html b/web/pages/settings.html
index 1026dce..00dcc7e 100644
--- a/web/pages/settings.html
+++ b/web/pages/settings.html
@@ -21,9 +21,16 @@
 					<label>Profile Picture</label>
 					<div class="row">
 						<div class="col-sm-2">
+							<img src="/api/user/avatar/{{ user.uid }}" id="avatar" style="width:100%;max-height:256px;" />
 						</div>
 						<div class="col-sm-10">
-							<pre>{{ user }}</pre>
+							<p>
+								<a href="javascript:upload_new_picture();" class="btn btn-primary">Upload new picture</a>
+								<a href="javascript:remove_profile_picture();" class="btn btn-default">Remove profile picture</a>
+							</p>
+							<p>
+								<i>If you remove your picture, an automatically generated <a href="http://en.wikipedia.org/wiki/Identicon" target="_blank">identicon</a> will be used.</i>
+							</p>
 						</div>
 					</div>
 				</div>