diff --git a/cmd/drone-server/static/scripts/views/repos_env.html b/cmd/drone-server/static/scripts/views/repos_env.html
index 65a44438be..a0f6d9f321 100644
--- a/cmd/drone-server/static/scripts/views/repos_env.html
+++ b/cmd/drone-server/static/scripts/views/repos_env.html
@@ -22,19 +22,10 @@
 </div>
 <article>
 	<section style="padding:30px;">
-		<div ng-repeat="(key, value) in repo.params" style="
-padding: 30px 0px;
-border-bottom: 1px solid #EEE;
-font-size: 14px;
-color: #757575;font-family:'Droid Sans Mono','Roboto','Arial';position:relative;">
-			<div style="display:inline-block;"><span style="color:#2196F3">export</span> {{ key }} <span style="color:#2196F3">=</span></div>
-			<div style="display:inline-block;">{{ value }}</div>
-			<button ng-click="deleteParam(key)" style="position:absolute;right:0px;background: #EF5350;
-padding: 8px 10px;
-color: #FFF;
-font-family: Roboto;
-font-size:12px;
-text-transform: uppercase;">remove</button>
+		<div ng-repeat="(key, value) in repo.params" class="row-env">
+			<div><span>export</span> {{ key }} <span>=</span></div>
+			<div>{{ value }}</div>
+			<button ng-click="deleteParam(key)" class="btn-remove"></button>
 		</div>
 		<form style="padding-top:30px;font-family:'Droid Sans Mono','Roboto','Arial';font-size:14px;">
 			<span style="color:#2196F3">export</span>
diff --git a/cmd/drone-server/static/scripts/views/users.html b/cmd/drone-server/static/scripts/views/users.html
index 41e251a884..ad5eda52db 100644
--- a/cmd/drone-server/static/scripts/views/users.html
+++ b/cmd/drone-server/static/scripts/views/users.html
@@ -24,28 +24,17 @@
 	</section>
 
 	<section>
-		<table border="1">
-			<thead>
-				<tr>
-					<th></th>
-					<th>Login</th>
-					<th>Email</th>
-					<th>Admin</th>
-					<th></th>
-					<th></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr ng-repeat="user in users">
-					<td><img ng-src="{{ user.gravatar_id | gravatar }}" /></td>
-					<td>{{ user.login }}</td>
-					<td>{{ user.email }}</td>
-					<td>{{ !!user.admin }}</td>
-					<td><button ng-click="toggle(user)">toggle admin</button></td>
-					<td><button ng-click="remove(user)">delete</button></td>
-				</tr>
-			</tbody>
-		</table>
+		<div class="row row-user" ng-repeat="user in users">
+			<div>
+				<img ng-src="{{ user.gravatar_id | gravatar }}" />
+			</div>
+			<div>
+				<h3>{{ user.login }} <small ng-if="user.admin">Admin</small></h3>
+				<p>{{ user.email }}</p>
+				<button ng-click="toggle(user)" ng-class="{'btn-admin':true, 'btn-checked': user.admin}"></button>
+				<button ng-click="remove(user)" class="btn-remove"></button>
+			</div>
+		</div>
 	</section>
 
 
diff --git a/cmd/drone-server/static/styles/drone.css b/cmd/drone-server/static/styles/drone.css
index e5e2e020fb..c0829b859b 100644
--- a/cmd/drone-server/static/styles/drone.css
+++ b/cmd/drone-server/static/styles/drone.css
@@ -1586,10 +1586,119 @@ input:checked + .switch:active::before {
   box-shadow: 0 2px 10.416666666666668px rgba(0,0,0,0.28), 0 0 0 25px rgba(0,150,136,0.2);
 }
 
+.row.row-user div:first-child {
+    width:50px;
+    max-width:50px;
+    min-width:50px;
+}
 
+.row.row-user div:last-child {
+    position:relative;
+}
+.row-user img {
+    background:#E0E0E0;
+    border-radius:50%;
+    width:36px;
+    height:36px;
+    border:none;
+}
+.row-user h3 {
+    white-space:nowrap;
+    color: #212121;
+    font-size: 18px;
+    margin-bottom: 10px;
+    margin-top: 4px;
+}
+.row-user small {
+    background: #4CAF50;
+    color:#FFF;
+    display:inline-block;
+    text-transform: uppercase;
+    font-size:13px;
+    margin-left:10px;
+    line-height:18px;
+    padding:0px 3px;
+    border-radius:2px;
+}
 
+.row-env {
+    padding: 30px 0px;
+    border-bottom: 1px solid #EEE;
+    position:relative;
+    color: #757575;
+    font-family:'Droid Sans Mono','Roboto','Arial';
+    font-size: 14px;
+}
+.row-env span {
+    color:#2196F3;
+    display:inline-block;
+}
+.row-env div {
+    display:inline-block;
+}
+
+.btn-admin,
+.btn-remove {
+    border:none;
+    background: #E0E0E0;
+    color: rgba(255,255,255,0.9);
+    border-radius:50%;
+    width:25px;
+    height:25px;
+    border-radius:50%;
+    text-align: center;
+    cursor:pointer;
+    vertical-align: middle;
+}
 
 
+.btn-remove:hover {
+    background: #EF5350;
+    color: #FFF;
+}
+.btn-remove:before {
+    content: "\f102";
+    font-family:"Material-Design-Iconic-Font";
+    line-height:25px;
+    width:25px;
+    vertical-align: middle;
+    text-align: center;
+    display:inline-block;
+    font-size:16px;
+}
+.btn-admin.btn-checked,
+.btn-admin:hover {
+    background: #4CAF50;
+    color: #FFF;
+}
+.btn-admin:before {
+    content: "\f08e";
+    font-family:"Material-Design-Iconic-Font";
+    line-height:25px;
+    width:25px;
+    vertical-align: middle;
+    text-align: center;
+    display:inline-block;
+    font-size:16px;
+}
+
+
+
+.row-env .btn-remove {
+    position: absolute;
+    right: 0px;
+    top: 25px;
+}
+.row-user .btn-remove {
+    position: absolute;
+    right: 0px;
+    top: 40px;
+}
+.row-user .btn-admin {
+    position: absolute;
+    right: 40px;
+    top: 40px;
+}
 /*