diff --git a/css/style.css b/css/style.css
index 6fd787b..da4a16a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -244,6 +244,8 @@ td.ε_row {
 }
 .page-title {
 	font-size: 32px;
+  line-height: 40px;
+  margin-bottom: 10px;
 }
 #timetracker-tags {
     width: 100%;
@@ -457,4 +459,4 @@ td.ε_row {
 .ui-widget-header {
     background: var(--color-background-dark);
     color: var(--color-text-lighter);
-}
\ No newline at end of file
+}
diff --git a/js/tags.js b/js/tags.js
index 8e594f2..344ee93 100644
--- a/js/tags.js
+++ b/js/tags.js
@@ -9,57 +9,56 @@
               autoOpen: false,
               modal: true
             });
-          });
-          
+        });
+
         $("#new-tag-submit").click(function () {
-          if ($("#new-tag-input").val().trim() == '')
-              return false;
+            if ($("#new-tag-input").val().trim() == '')
+                return false;
             var baseUrl = OC.generateUrl('/apps/timetracker/ajax/add-tag/'+$("#new-tag-input").val());
             var jqxhr = $.post( baseUrl, function() {
-
                 getTags();
                 $(dialogTagEditForm).dialog("close");
-              })
-                .done(function(data, status, jqXHR) {
-                  var response = data;
-                  if ('Error' in response){
+            }).done(function(data, status, jqXHR) {
+                var response = data;
+                if ('Error' in response){
                     alert(response.Error);
-                  }
-                })
-                .fail(function() {
-                  alert( "error" );
-                })
-          return false;
+                }
+            }).fail(function() {
+                alert( "error" );
+            })
+            return false;
         });
+
         dialogTagEditForm = $( "#dialog-tag-edit-form" ).dialog({
             autoOpen: false,
             height: 400,
             width: 350,
             modal: true,
             buttons: {
-              "Edit tag": {click: function(){
-                  editTag(dialogTagEditForm);
-                  return false;
-              },
-              text: 'Edit tag',
-              class:'primary'
-            },
-              Cancel: function() {
-                dialogTagEditForm.dialog( "close" );
-              }
+                "Edit tag": {
+                    click: function(){
+                        editTag(dialogTagEditForm);
+                        return false;
+                    },
+                    text: 'Edit tag',
+                    class:'primary'
+                },
+                Cancel: function() {
+                    dialogTagEditForm.dialog( "close" );
+                }
             },
             close: function() {
-              form[ 0 ].reset();
+                form[ 0 ].reset();
             }
-          });
-       
-          form = dialogTagEditForm.find( "form" ).on( "submit", function( event ) {
+       });
+
+       form = dialogTagEditForm.find( "form" ).on( "submit", function( event ) {
             event.preventDefault();
             editTag(dialogTagEditForm);
-          });
+       });
 
-        getTags();
-        function editTag(dialogTagEditForm){
+       getTags();
+       function editTag(dialogTagEditForm){
             target = dialogTagEditForm.target;
             form =  dialogTagEditForm.find( "form" );
             var baseUrl = OC.generateUrl('/apps/timetracker/ajax/edit-tag/'+target);
@@ -78,72 +77,66 @@
                 })
 
         }
-        function getTags(){
-          var baseUrl = OC.generateUrl('/apps/timetracker/ajax/tags');
 
-          var editIcon = function(cell, formatterParams){ //plain text value
-            return "<i class='fa fa-edit'></i>";
-        };
-        
-        
-          var columns = [
-            {title:"#", field:"", formatter:"rownum", width: 40, align: "center"},
-            {title:"Name", field:"name", widthGrow:1}, //column will be allocated 1/5 of the remaining space
-            {formatter:"buttonCross", width:40, align:"center", cellClick:function(e, cell){
-               $("#dialog-confirm").dialog({
-                buttons : {
-                  "Confirm" : {click: function() {
-                    var baseUrl = OC.generateUrl('/apps/timetracker/ajax/delete-tag/'+cell.getRow().getData().id);
-                        var jqxhr = $.post( baseUrl, function() {
-                            getTags();
-                            $("#dialog-confirm").dialog("close");
-                        })
-                            .done(function(data, status, jqXHR) {
-                              var response = data;
-                              if ('Error' in response){
-                                alert(response.Error);
-                              }
-                            })
-                            .fail(function() {
-                            alert( "error" );
-                            })
-                            return false;
-                  },
-                  text: 'Confirm',
-                  class:'primary'
-                },
-                  "Cancel" : function() {
-                    $(this).dialog("close");
-                  }
-                }
-              });
-              $("#dialog-confirm").dialog('open');
-
-              //cell.getRow().delete();
-          }},
-          {formatter:editIcon, width:40, align:"center", cellClick:function(e, cell){
+        function getTags(){
+            var baseUrl = OC.generateUrl('/apps/timetracker/ajax/tags');
 
-            dialogTagEditForm.target = cell.getRow().getData().id;
-            
-            form = dialogTagEditForm.find( "form" )
-            form.find("#name").val(cell.getRow().getData().name);
-            dialogTagEditForm.dialog("open");
+            var editIcon = function(cell, formatterParams){ //plain text value
+                return "<i class='fa fa-edit'></i>";
+            };
 
-       }},
-          ];
+            $.get(baseUrl, function(data){
+                $('#tags').html('');
+                var contentList = $('<div/>').addClass('app-content-list');
+                for (tag of data.Tags) {
+                    console.log(tag);
+                    var listItem = $('<a/>', {href:'#'}).addClass('app-content-list-item');
+                    listItem.append($('<div/>').addClass('app-content-list-item-icon')
+                                               .addClass('icon-tag-white')
+                                               .css('background-color', 'rgb(100,100,100)'));
+                    listItem.append($('<div/>').addClass('app-content-list-item-line-one').text(tag.name));
+                    listItem.append($('<div/>').addClass('icon-delete').click(function(event){
+                       event.stopPropagation();
+                       $("#dialog-confirm").dialog({
+                           buttons : {
+                              "Confirm" : {click: function() {
+                              var baseUrl = OC.generateUrl('/apps/timetracker/ajax/delete-tag/'+tag.id);
+                                  var jqxhr = $.post( baseUrl, function() {
+                                      getTags();
+                                      $("#dialog-confirm").dialog("close");
+                                  })
+                                      .done(function(data, status, jqXHR) {
+                                        var response = data;
+                                        if ('Error' in response){
+                                          alert(response.Error);
+                                        }
+                                      })
+                                      .fail(function() {
+                                      alert( "error" );
+                                      })
+                                      return false;
+                              },
+                              text: 'Confirm',
+                              class:'primary'
+                             },
+                           "Cancel" : function() {
+                               $(this).dialog("close");
+                           }
+                          }
+                       });
+                       $("#dialog-confirm").dialog('open');
+                    }));
+                    listItem.click(function(){
+                        dialogTagEditForm.target = tag.id;
 
-          var table = new Tabulator("#tags", {
-            ajaxURL:baseUrl,
-            layout:"fitColumns",
-            columns:columns,
-            rowClick:function(e, row){
-              return false;
-            },
-            ajaxResponse:function(url, params, response){
-      
-              return response.Tags; //return the tableData property of a response json object
-          },
-          });
+                        form = dialogTagEditForm.find( "form" )
+                        form.find("#name").val(tag.name);
+                        dialogTagEditForm.dialog("open");
+                    });
+                    contentList.append(listItem);
+                }
+                $('#tags').append(contentList);
+            });
         }
-      } );
+   });
 }());
diff --git a/templates/content/tags.php b/templates/content/tags.php
index 5fcf6df..c5c937c 100644
--- a/templates/content/tags.php
+++ b/templates/content/tags.php
@@ -1,10 +1,10 @@
 <div id="timetracker-tags">
 <h1 class='page-title'>Tags</h1>
-<div id="client-input-container" class='center'>
-        <form>
-            <input tabindex="1" type="text" spellcheck="false" autocomplete="off" class="" value="" placeholder="New tag name..." id="new-tag-input">
-            <input type="submit" value="Add tag" id="new-tag-submit"  class='ui-button primary'>
-        </form>
+<div id="client-input-container">
+    <form>
+        <input tabindex="1" type="text" spellcheck="false" autocomplete="off" class="" value="" placeholder="New tag name..." id="new-tag-input">
+        <input type="submit" value="Add tag" id="new-tag-submit"  class='ui-button primary'>
+     </form>
 </div>
 <div id="dialog-confirm" title="Confirmation Required" class='hidden'>
   Are you sure you want to delete this tag?
@@ -25,4 +25,4 @@
 <div class="clearfix"> </div>
 <div id="tags">
 </div>
-</div>
\ No newline at end of file
+</div>