diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index b684064ff0c580f1c5b4e0cb50cf737e4a9e0fb3..df656ce1b9ed7685c2d1ce4163413aa793cd5161 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -493,7 +493,7 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     margin: auto
 }
 
-.btn-flat {
+.btn-flat, .btn {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -563,10 +563,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     width: 17vmin;
 }
 
-.ellipsis {
-    text-overflow: ellipsis;
-}
-
 .no-wrap {
     white-space: nowrap;
 }
@@ -607,14 +603,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     .budget {
         font-size: 3.5vmin;
     }
-
-    .transaction-table-cell {
-        text-align: center !important;
-    }
-
-    .transaction-name {
-        width: 100% !important;
-    }
 }
 
 @media all and (max-width: 599px) and (min-width: 320px) {
@@ -634,14 +622,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     .container, .transaction-container {
         width: 100% !important;
     }
-
-    .transaction-table-cell {
-        text-align: center !important;
-    }
-
-    .transaction-name {
-        width: 100% !important;
-    }
 }
 
 .debug {
diff --git a/src/main/resources/static/css/dark/transactions.css b/src/main/resources/static/css/dark/transactions.css
index 322bd080a0012914f7b6cced7ff8bb3afe8e0f54..6a8f76d0ba26d9c74f5d06082c094d0764939584 100644
--- a/src/main/resources/static/css/dark/transactions.css
+++ b/src/main/resources/static/css/dark/transactions.css
@@ -23,14 +23,21 @@
     width: 90%;
 }
 
-.transaction-name {
-    width: 50%;
+.transaction-container .category-circle,
+.transaction-container .category-circle-small{
+    margin: auto;
 }
 
-.transaction-table-cell {
-    text-align: left;
+.transaction-row {
+    margin-bottom: 5px;
+    margin-top: 20px;
 }
 
-.transaction-container .category-circle-small {
-    margin: auto;
+.transaction-text {
+    font-size: 1.2rem;
+}
+
+.transaction-buttons .btn-flat {
+    height: auto;
+    line-height: inherit;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index e0c829d231ceeec77ede344582f30786503f13a8..f3a920e75a2a93d199cfd080b964332c1ec9b0ac 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -420,7 +420,7 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     margin: auto
 }
 
-.btn-flat {
+.btn-flat, .btn {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
@@ -476,10 +476,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     border-bottom: 1px solid #212121;
 }
 
-.ellipsis {
-    text-overflow: ellipsis;
-}
-
 .no-wrap {
     white-space: nowrap;
 }
@@ -520,14 +516,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     .budget {
         font-size: 3.5vmin;
     }
-
-    .transaction-table-cell {
-        text-align: center !important;
-    }
-
-    .transaction-name {
-        width: 100% !important;
-    }
 }
 
 @media all and (max-width: 599px) and (min-width: 320px) {
@@ -547,14 +535,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     .container, .transaction-container {
         width: 100% !important;
     }
-
-    .transaction-table-cell {
-        text-align: center !important;
-    }
-
-    .transaction-name {
-        width: 100% !important;
-    }
 }
 
 .debug {
diff --git a/src/main/resources/static/css/transactions.css b/src/main/resources/static/css/transactions.css
index 322bd080a0012914f7b6cced7ff8bb3afe8e0f54..6a8f76d0ba26d9c74f5d06082c094d0764939584 100644
--- a/src/main/resources/static/css/transactions.css
+++ b/src/main/resources/static/css/transactions.css
@@ -23,14 +23,21 @@
     width: 90%;
 }
 
-.transaction-name {
-    width: 50%;
+.transaction-container .category-circle,
+.transaction-container .category-circle-small{
+    margin: auto;
 }
 
-.transaction-table-cell {
-    text-align: left;
+.transaction-row {
+    margin-bottom: 5px;
+    margin-top: 20px;
 }
 
-.transaction-container .category-circle-small {
-    margin: auto;
+.transaction-text {
+    font-size: 1.2rem;
+}
+
+.transaction-buttons .btn-flat {
+    height: auto;
+    line-height: inherit;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index a93ccc2ec78be41fc2519fd3afa4abfc2fce584a..50fc52389d962ee03587a1059d42ecfae653d191 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -49,22 +49,21 @@
 
                     <#-- transactions list -->
                     <br>
-                    <div class="row">
-                        <div class="col s12">
-                            <table class="bordered responsive-table">
-                                <#list transactions as transaction>
-                                    <tr>
-                                        <td class="transaction-table-cell">${helpers.getDateStringWithoutYear(transaction.date)}</td>
-                                        <@transactionsMacros.transactionRepeating transaction/>
-                                        <@transactionsMacros.transactionCategory transaction/>
-                                        <@transactionsMacros.transactionNameAndDescription transaction/>
-                                        <@transactionsMacros.transactionAmount transaction.getAmount()/>
-                                        <@transactionsMacros.transactionButtons transaction/>
-                                    </tr>
-                                </#list>
-                            </table>
+                    <#list transactions as transaction>
+                        <div class="row valign-wrapper transaction-row">
+                            <div class="col s3 l1 center-align bold transaction-text">
+                                ${helpers.getDateStringWithoutYear(transaction.date)}
+                            </div>
+                            <@transactionsMacros.transactionRepeating transaction/>
+                            <@transactionsMacros.transactionButtons transaction/>
                         </div>
-                    </div>
+                        <div class="row valign-wrapper">
+                            <@transactionsMacros.transactionCategory transaction/>
+                            <@transactionsMacros.transactionNameAndDescription transaction/>
+                            <@transactionsMacros.transactionAmount transaction.getAmount()/>
+                        </div>
+                        <hr>
+                    </#list>
 
                     <#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction -->
                     <@transactionsMacros.placeholder transactions/>
diff --git a/src/main/resources/templates/transactions/transactionsMacros.ftl b/src/main/resources/templates/transactions/transactionsMacros.ftl
index c57e6576886b07e204e2f1c6c0328e5e2f6f951e..515e75598b240a02c8f980d4fc2d2c09830aa772 100644
--- a/src/main/resources/templates/transactions/transactionsMacros.ftl
+++ b/src/main/resources/templates/transactions/transactionsMacros.ftl
@@ -1,13 +1,13 @@
 <#import "/spring.ftl" as s>
 
 <#macro transactionRepeating transaction>
-    <td class="transaction-table-cell">
+    <div class="col s1 l1">
         <i class="material-icons <#if !transaction.isRepeating()>invisible</#if>">repeat</i>
-    </td>
+    </div>
 </#macro>
 
 <#macro transactionCategory transaction>
-    <td>
+    <div class="col s3 l1 center-align">
         <div class="hide-on-med-and-down">
             <div class="category-circle" style="background-color: ${transaction.category.color}">
                 <span style="color: ${transaction.category.getAppropriateTextColor()}">
@@ -22,35 +22,35 @@
                 </span>
             </div>
         </div>
-    </td>
+    </div>
 </#macro>
 
 <#macro transactionNameAndDescription transaction>
-    <td class="transaction-name transaction-table-cell">
-        <div class="ellipsis">${transaction.name}</div>
+    <div class="col s5 l7">
+        <div class="truncate transaction-text">${transaction.name}</div>
         <div class="hide-on-med-and-down">
             <#if transaction.description??>
                 <div class="italic">${transaction.description}</div>
             </#if>
         </div>
-    </td>
+    </div>
 </#macro>
 
 <#macro transactionAmount amount>
     <#if amount <= 0>
-        <td class="transaction-table-cell bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
+        <div class="col s4 bold ${redTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
     <#else>
-        <td class="transaction-table-cell bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
+        <div class="col s4 bold ${greenTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
     </#if>
 </#macro>
 
 <#macro transactionButtons transaction>
-    <td class="transaction-table-cell">
-        <#if (transaction.category.type.name() != "REST")>
-            <a href="<@s.url '/transactions/${transaction.ID?c}/edit'/>" class="btn-flat no-padding text-color"><i class="material-icons left">edit</i></a>
-            <a href="<@s.url '/transactions/${transaction.ID?c}/requestDelete'/>" class="btn-flat no-padding text-color"><i class="material-icons left">delete</i></a>
-        </#if>
-    </td>
+        <div class="col s8 l10 right-align transaction-buttons">
+            <#if (transaction.category.type.name() != "REST")>
+                <a href="<@s.url '/transactions/${transaction.ID?c}/edit'/>" class="btn-flat no-padding text-color"><i class="material-icons left">edit</i></a>
+                <a href="<@s.url '/transactions/${transaction.ID?c}/requestDelete'/>" class="btn-flat no-padding text-color"><i class="material-icons left no-margin">delete</i></a>
+            </#if>
+        </div>
 </#macro>
 
 <#macro placeholder transactions>