diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 63bbb697c06e8bc542f1854ec3639912f19d9163..72adbfa804d982326a463aed3c0c773d56ab2955 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -50,17 +50,31 @@
                     <#-- transactions list -->
                     <br>
                     <#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 class="hide-on-large-only">
+                            <div class="row valign-wrapper transaction-row">
+                                <div class="col s3 center-align bold transaction-text">
+                                    ${helpers.getDateStringWithoutYear(transaction.date)}
+                                </div>
+                                <@transactionsMacros.transactionRepeating transaction/>
+                                <@transactionsMacros.transactionButtons transaction/>
+                            </div>
+                            <div class="row valign-wrapper">
+                                <@transactionsMacros.transactionCategory transaction "center-align"/>
+                                <@transactionsMacros.transactionNameAndDescription transaction/>
+                                <@transactionsMacros.transactionAmount transaction.getAmount()/>
                             </div>
-                            <@transactionsMacros.transactionRepeating transaction/>
-                            <@transactionsMacros.transactionButtons transaction/>
                         </div>
-                        <div class="row valign-wrapper">
-                            <@transactionsMacros.transactionCategory transaction/>
-                            <@transactionsMacros.transactionNameAndDescription transaction/>
-                            <@transactionsMacros.transactionAmount transaction.getAmount()/>
+                        <div class="hide-on-med-and-down">
+                            <div class="row valign-wrapper transaction-row">
+                                <div class="col l1 xl1 bold transaction-text">
+                                    ${helpers.getDateStringWithoutYear(transaction.date)}
+                                </div>
+                                <@transactionsMacros.transactionCategory transaction "left-align"/>
+                                <@transactionsMacros.transactionRepeating transaction/>
+                                <@transactionsMacros.transactionNameAndDescription transaction/>
+                                <@transactionsMacros.transactionAmount transaction.getAmount()/>
+                                <@transactionsMacros.transactionButtons transaction/>
+                            </div>
                         </div>
                         <hr>
                     </#list>
diff --git a/src/main/resources/templates/transactions/transactionsMacros.ftl b/src/main/resources/templates/transactions/transactionsMacros.ftl
index 515e75598b240a02c8f980d4fc2d2c09830aa772..8e6a5b9b67548c93eef0df0a57fd087f372f23a8 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>
-    <div class="col s1 l1">
+    <div class="col s1 l1 xl1">
         <i class="material-icons <#if !transaction.isRepeating()>invisible</#if>">repeat</i>
     </div>
 </#macro>
 
-<#macro transactionCategory transaction>
-    <div class="col s3 l1 center-align">
+<#macro transactionCategory transaction alignment>
+    <div class="col s3 l1 xl1 ${alignment}">
         <div class="hide-on-med-and-down">
             <div class="category-circle" style="background-color: ${transaction.category.color}">
                 <span style="color: ${transaction.category.getAppropriateTextColor()}">
@@ -26,7 +26,7 @@
 </#macro>
 
 <#macro transactionNameAndDescription transaction>
-    <div class="col s5 l7">
+    <div class="col s5 l4 xl5">
         <div class="truncate transaction-text">${transaction.name}</div>
         <div class="hide-on-med-and-down">
             <#if transaction.description??>
@@ -38,14 +38,14 @@
 
 <#macro transactionAmount amount>
     <#if amount <= 0>
-        <div class="col s4 bold ${redTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
+        <div class="col s4 l3 xl3 bold ${redTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
     <#else>
-        <div class="col s4 bold ${greenTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
+        <div class="col s4 l3 xl3 bold ${greenTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
     </#if>
 </#macro>
 
 <#macro transactionButtons transaction>
-        <div class="col s8 l10 right-align transaction-buttons">
+        <div class="col s8 l2 xl1 right-align transaction-buttons no-wrap">
             <#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>