diff --git a/web/src/p2k16/web/static/p2k16/p2k16.css b/web/src/p2k16/web/static/p2k16/p2k16.css
index a063568..a475cb1 100644
--- a/web/src/p2k16/web/static/p2k16/p2k16.css
+++ b/web/src/p2k16/web/static/p2k16/p2k16.css
@@ -44,7 +44,7 @@ div.error-container {
 
 /* Avatar on navbar */
 .header-avatar {
-    webkit-border-radius: 50%;
+    -webkit-border-radius: 50%;
     border-radius: 50%;
     padding-right: 2px;
 }
@@ -228,6 +228,12 @@ hr {
   text-overflow: ellipsis;
 }
 
+.tools-buttons-table{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 .list-inline-badges > li {
   margin-bottom: 15px;
 }
diff --git a/web/src/p2k16/web/static/p2k16/p2k16.js b/web/src/p2k16/web/static/p2k16/p2k16.js
index f5deefb..40e9e36 100644
--- a/web/src/p2k16/web/static/p2k16/p2k16.js
+++ b/web/src/p2k16/web/static/p2k16/p2k16.js
@@ -641,6 +641,7 @@
      * @param {P2k16} P2k16
      * @param recent_events
      * @param membership_tiers
+     * @param {CoreDataService} CoreDataService
      */
     function FrontPageController(DoorDataService, P2k16, recent_events, membership_tiers, CoreDataService) {
         var self = this;
@@ -667,7 +668,7 @@
         };
 
         self.retryPayment = function () {
-            CoreDataService.membership_retry_payment().then(function (res) {
+            CoreDataService.membership_retry_payment().then(function (_res) {
                 setTimeout(function(){
                     window.location.reload();
                  }, 2000);
@@ -779,19 +780,25 @@
         self.my_account = P2k16.currentAccount().id;
 
         function isMyTool(tool) {
-            return tool.checkout.account == self.my_account;
+            return tool.checkout.account === self.my_account;
         }
 
         function update(data) {
             self.tools = data;
             self.my_tools = self.tools.filter(isMyTool);
+            self.available_tools = self.tools.filter((tool) =>
+                !isMyTool(tool) && !tool.checkout.account
+            );
+            self.others_tools = self.tools.filter((tool)=>
+                tool.checkout.account && tool.checkout.account !== self.my_account
+            )
         }
 
         update(tools);
 
         self.checkoutToolConfirm = function (tool) {
             console.log('ask for checkout of ', tool);
-            if (window.confirm("Do you really want to checkout " + tool.name + "? This may destroy a job in progress!")) {
+            if (window.confirm(`Do you really want to checkout ${tool.description} (${tool.name})? This may destroy a job in progress!`)) {
                 self.checkoutTool(tool);
             }
         };
@@ -809,6 +816,10 @@
                 update(res.data);
             })
         };
+
+        self.descriptionToLowerCase = function (tool) {
+            return tool.description ? tool.description.toLowerCase() : '';
+        };
     }
 
     /*************************************************************************
@@ -994,7 +1005,7 @@
                 controllerAs: 'ctrl'
             }).result.then(function (circle) {
                 console.log("Removing circle", circle);
-                CoreDataService.remove_circle(circle.id).then(function (res) {
+                CoreDataService.remove_circle(circle.id).then(function (_res) {
                     circles.remove(circle);
                     $location.url("/admin/circle");
                 });
@@ -1110,6 +1121,7 @@
 
     /**
      * @param $location
+     * @param $window
      * @param $uibModal
      * @param {P2k16} P2k16
      * @param {CoreDataService} CoreDataService
diff --git a/web/src/p2k16/web/static/tool-front-page.html b/web/src/p2k16/web/static/tool-front-page.html
index 9e11050..1a6ef1a 100644
--- a/web/src/p2k16/web/static/tool-front-page.html
+++ b/web/src/p2k16/web/static/tool-front-page.html
@@ -20,27 +20,61 @@ <h4 class="panel-title">Instructions</h4>
   </div>
 
   <form class="form-horizontal">
-    <table class="table tools-buttons-table">
-      <tr ng-repeat="tool in ctrl.tools | orderBy:'description'">
-        <td class="text-center">
-          <button ng-if="tool.checkout.active && tool.checkout.account != ctrl.my_account" type="submit" class="btn btn-block btn-danger" ng-click="ctrl.checkoutToolConfirm(tool)" id="{{tool.name}}">
-            <strong>{{tool.description}}</strong>
-            <br>
-            <small class="text-center">{{tool.checkout.username}} - {{tool.checkout.started | date:'short'}}</small>
-          </button>
-          <button ng-if="tool.checkout.active && tool.checkout.account == ctrl.my_account" type="submit" class="btn btn-default btn-block" ng-click="ctrl.checkinTool(tool)" id="{{tool.name}}">
-            <strong>{{tool.description}}</strong>
-            <br>
-            <small class="text-center">{{tool.checkout.username}} - {{tool.checkout.started | date:'short'}}</small>
-          </button>
-          <button ng-if="!tool.checkout.active" type="submit" class="btn btn-default btn-block" ng-click="ctrl.checkoutTool(tool)" id="{{tool.name}}">
-            <span>{{tool.description}}</span>
-            <br>
-            <small style="color: green">Available</small>
-          </button>
-        </td>
+    <div class="row">
+      <div class="col-sm-12">
+        <h3 class="text-center">Available Tools</h3>
+        <div ng-if="ctrl.available_tools.length === 0" class="text-center text-muted">
+          No tools available.
+        </div>
+        <div class="tools-buttons-table">
+          <div class="mb-2" ng-repeat="tool in ctrl.available_tools | orderBy:ctrl.descriptionToLowerCase">
+            <button type="submit" class="btn btn-block btn-default"
+                    ng-click="ctrl.checkoutTool(tool)"
+                    id="{{tool.name}}_available">
+              <strong>{{tool.description}}</strong>
+              <br>
+              <small style="color: green">Available</small>
+            </button>
+          </div>
+        </div>
       </div>
-    </table>
+
+      <div class="col-sm-12" >
+        <h3 class="text-center">My checked out Tools</h3>
+        <div ng-if="ctrl.my_tools.length === 0" class="text-center text-muted">
+          No tools currently checked out.
+        </div>
+        <div class="tools-buttons-table">
+          <div class="mb-2" ng-repeat="tool in ctrl.my_tools | orderBy:ctrl.descriptionToLowerCase">
+            <button type="submit" class="btn btn-block btn-warning"
+                    ng-click="ctrl.checkinTool(tool)"
+                    id="{{tool.name}}_my">
+              <strong>{{tool.description}}</strong>
+              <br>
+              <small>{{tool.checkout.username}} - {{tool.checkout.started | date:'short'}}</small>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-sm-12">
+        <h3 class="text-center">Tools checked out by others</h3>
+        <div ng-if="ctrl.others_tools.length === 0" class="text-center text-muted">
+          No tools checked out by others.
+        </div>
+        <div class="tools-buttons-table">
+          <div class="mb-2" ng-repeat="tool in ctrl.others_tools | orderBy:ctrl.descriptionToLowerCase">
+            <button type="button" class="btn btn-block btn-danger"
+                    ng-click="ctrl.checkoutToolConfirm(tool)"
+                    id="{{tool.name}}_others">
+              <strong>{{tool.description}}</strong>
+              <br>
+              <small>{{tool.checkout.username}} - {{tool.checkout.started | date:'short'}}</small>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </form>
 
   <div class="col-sm-12"><hr></div>