diff --git a/src/main/resources/static/css/filter.css b/src/main/resources/static/css/collapsible.css
similarity index 100%
rename from src/main/resources/static/css/filter.css
rename to src/main/resources/static/css/collapsible.css
diff --git a/src/main/resources/static/css/dark/filter.css b/src/main/resources/static/css/dark/collapsible.css
similarity index 79%
rename from src/main/resources/static/css/dark/filter.css
rename to src/main/resources/static/css/dark/collapsible.css
index 934de436eacf8fa6670fd623e11f82ff948d92ce..5fb78b5d95d02d3d02a885784207714edb950014 100644
--- a/src/main/resources/static/css/dark/filter.css
+++ b/src/main/resources/static/css/dark/collapsible.css
@@ -21,8 +21,4 @@
 .collapsible-body {
     background-color: #444444;
     border-bottom: 1px solid #666666;
-}
-
-input[type="checkbox"]:not(:checked) + span:not(.lever)::before {
-    border: 2px solid rgba(255, 255, 255, 0.7);
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 4b378d08100454fbb74199ab8a1173c2fe344c8b..42d3c862d74c5291c11f9ce08d05ce02cb968ef0 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -128,8 +128,7 @@ main {
     width: 350px;
 }
 
-ul.sidenav.sidenav-fixed > li:last-child
-{
+ul.sidenav.sidenav-fixed > li:last-child {
     margin-bottom: 160px;
 }
 
@@ -474,6 +473,11 @@ input[type="checkbox"]:checked + span:not(.lever)::before {
     border-bottom: 3px solid #45A0EF;
 }
 
+input[type="checkbox"]:not(:checked) + span:not(.lever)::before {
+    border: 2px solid rgba(255, 255, 255, 0.7);
+}
+
+
 /* chips autocomplete dropdown */
 .autocomplete-content li span {
     color: #2E79B9;
diff --git a/src/main/resources/static/css/dark/templates.css b/src/main/resources/static/css/dark/templates.css
index 5e14c6634b731703dbcb83e868fa5772325a947c..4f56a863e34b42c78020d34321ff815ab2b33193 100644
--- a/src/main/resources/static/css/dark/templates.css
+++ b/src/main/resources/static/css/dark/templates.css
@@ -1,20 +1,10 @@
-.card-template {
-    color: #212121;
-    background-color: #CCCCCC;
-}
-
-.card-template .card-title {
-    font-weight: bold;
-}
-
-.card-delimiter {
-    border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
-}
-
-.table-template-content {
-    color: #212121;
+.template-content-label {
+    font-weight: 600;
 }
 
-.template-content-label {
+.collapsible-header-button {
+    position: absolute;
+    right: 15px;
+    top: 8px;
     font-weight: bold;
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/templates.css b/src/main/resources/static/css/templates.css
index e3ba2cdb3e4672ca203b0bb27d4b63b31f7e1f28..4f56a863e34b42c78020d34321ff815ab2b33193 100644
--- a/src/main/resources/static/css/templates.css
+++ b/src/main/resources/static/css/templates.css
@@ -1,20 +1,10 @@
-.card-template {
-    color: #212121;
-    background-color: #d9d9d9;
-}
-
-.card-template .card-title {
+.template-content-label {
     font-weight: 600;
 }
 
-.card-delimiter {
-    border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
-}
-
-.table-template-content {
-    color: #212121;
-}
-
-.template-content-label {
-    font-weight: 600;
+.collapsible-header-button {
+    position: absolute;
+    right: 15px;
+    top: 8px;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/templates.js b/src/main/resources/static/js/templates.js
index f537fd39b84d2baf823ce6b62b22550f8891ed83..9c3b2f1fd91e6c1a399f09a413f21f97cfc70c8f 100644
--- a/src/main/resources/static/js/templates.js
+++ b/src/main/resources/static/js/templates.js
@@ -24,11 +24,15 @@ $(document).ready(function()
                 data: {},
                 success: function(data)
                 {
-                   createAndOpenModal(data)
+                    createAndOpenModal(data)
                 }
             });
         });
     }
+
+    M.Collapsible.init(document.querySelector('.collapsible.expandable'), {
+        accordion: false
+    });
 });
 
 function createAndOpenModal(data)
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 2645533b8c6b261684ff51abe78b3e3e5ab286e7..cf711c1fa1ef165bf0d4847371984e8d9a24a401 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -3,7 +3,7 @@
         <#import "../helpers/header.ftl" as header>
         <@header.header "BudgetMaster"/>
         <@header.style "datepicker"/>
-        <@header.style "filter"/>
+        <@header.style "collapsible"/>
         <@header.style "charts"/>
         <#import "/spring.ftl" as s>
     </head>
@@ -30,7 +30,7 @@
                         <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
 
                         <div class="row">
-                            <div class="s12">
+                            <div class="col s12">
                                 <ul class="collapsible z-depth-2">
 
                                     <!-- STEP 1 -->
diff --git a/src/main/resources/templates/filter/filterMacros.ftl b/src/main/resources/templates/filter/filterMacros.ftl
index dcc824c953d6681f41d9db3713c633022da9db8e..d0892a6dbd16fad031bf23045511957c27f12f8c 100644
--- a/src/main/resources/templates/filter/filterMacros.ftl
+++ b/src/main/resources/templates/filter/filterMacros.ftl
@@ -115,7 +115,7 @@
         <#assign prefixValue = ""/>
     </#if>
     <div class="row">
-        <div class="s12">
+        <div class="col s12">
             <ul class="collapsible z-depth-2" id="filterSettings">
                 <li id="section-type">
                     <div class="collapsible-header">
diff --git a/src/main/resources/templates/reports/reports.ftl b/src/main/resources/templates/reports/reports.ftl
index a917de4412fbd1f78553e5b5e2d1362cc760e6d9..314acf1ce80e422663efc0d5ab67662ed6b9e5f4 100644
--- a/src/main/resources/templates/reports/reports.ftl
+++ b/src/main/resources/templates/reports/reports.ftl
@@ -4,7 +4,7 @@
         <@header.header "BudgetMaster"/>
         <@header.style "reports"/>
         <@header.style "globalDatepicker"/>
-        <@header.style "filter"/>
+        <@header.style "collapsible"/>
         <#import "/spring.ftl" as s>
     </head>
     <body class="budgetmaster-blue-light">
diff --git a/src/main/resources/templates/templates/selectTemplate.ftl b/src/main/resources/templates/templates/selectTemplate.ftl
index 47b7fd071253d3d440f653b0384db048465da79e..7b14cc19df938ec1e1d9d98134fb5752b809d463 100644
--- a/src/main/resources/templates/templates/selectTemplate.ftl
+++ b/src/main/resources/templates/templates/selectTemplate.ftl
@@ -2,6 +2,7 @@
     <head>
         <#import "../helpers/header.ftl" as header>
         <@header.header "BudgetMaster"/>
+        <@header.style "collapsible"/>
         <@header.style "templates"/>
         <#import "/spring.ftl" as s>
     </head>
@@ -27,7 +28,7 @@
                         <div class="headline center-align">${locale.getString("placeholder")}</div>
                     </div>
                 <#else>
-                    <@templateFunctions.listTemplatesAsCards templates/>
+                    <@templateFunctions.listTemplates templates/>
                 </#if>
             </div>
         </main>
diff --git a/src/main/resources/templates/templates/templateFunctions.ftl b/src/main/resources/templates/templates/templateFunctions.ftl
index 9c6cc78e43949ead47655dec0c7346396029fbff..6eaabb2c116e40c7e598b259a7d98f4c8e09b54e 100644
--- a/src/main/resources/templates/templates/templateFunctions.ftl
+++ b/src/main/resources/templates/templates/templateFunctions.ftl
@@ -13,43 +13,50 @@
     </div>
 </#macro>
 
-<#macro listTemplatesAsCards templates>
-    <div class="row">
-        <#list templates as template>
-            <div class="col s12 m6 l4">
-                <div class="card card-template">
-                    <div class="card-content">
-                        <@templateCardTitle template/>
-
-                        <table class="table-template-content">
-                            <@templateCardName template/>
-                            <@templateCardAmount template/>
-                            <@templateCardCategory template/>
-                            <@templateCardDescription template/>
-                            <@templateCardTags template/>
-                            <@templateCardAccount template/>
-                            <@templateCardTransferAccount template/>
-                        </table>
-                    </div>
-                    <div class="card-action center-align card-delimiter">
-                        <a href="<@s.url '/templates/${template.ID?c}/select'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">note_add</i>${locale.getString("title.transaction.new", locale.getString("title.transaction.new.normal"))}</a>
-                    </div>
-                </div>
+<#macro listTemplates templates>
+    <div class="container">
+        <div class="row">
+            <div class="col s12">
+                <ul class="collapsible expandable z-depth-2">
+                    <#list templates as template>
+                        <li>
+                            <div class="collapsible-header bold">
+                                <@templateHeader template/>
+                            </div>
+                            <div class="collapsible-body">
+                                <div class="row no-margin-bottom">
+                                    <table class="table-template-content text-color">
+                                        <@templateName template/>
+                                        <@templateAmount template/>
+                                        <@templateCategory template/>
+                                        <@templateDescription template/>
+                                        <@templateTags template/>
+                                        <@templateAccount template/>
+                                        <@templateTransferAccount template/>
+                                    </table>
+                                </div>
+                            </div>
+                        </li>
+                    </#list>
+                </ul>
             </div>
-        </#list>
+        </div>
     </div>
 </#macro>
 
-<#macro templateCardTitle template>
-    <span class="card-title">
-        <#if template.getTransferAccount()??>
-            <i class="material-icons">swap_horiz</i>
-        </#if>
-        ${template.getTemplateName()}
-    </span>
+<#macro templateHeader template>
+    <#if template.getTransferAccount()??>
+        <i class="material-icons">swap_horiz</i>
+    <#else>
+        <i class="material-icons">payment</i>
+    </#if>
+    ${template.getTemplateName()}
+    <div class="collapsible-header-button">
+        <a href="<@s.url '/templates/${template.ID?c}/select'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">note_add</i>${locale.getString("title.transaction.new", locale.getString("title.transaction.new.normal"))}</a>
+    </div>
 </#macro>
 
-<#macro templateCardName template>
+<#macro templateName template>
     <#if template.getName()??>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.name")}</td>
@@ -58,7 +65,7 @@
     </#if>
 </#macro>
 
-<#macro templateCardAmount template>
+<#macro templateAmount template>
     <#if template.getAmount()??>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.amount")}</td>
@@ -67,7 +74,7 @@
     </#if>
 </#macro>
 
-<#macro templateCardCategory template>
+<#macro templateCategory template>
     <#if template.getCategory()??>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.category")}</td>
@@ -76,7 +83,7 @@
     </#if>
 </#macro>
 
-<#macro templateCardDescription template>
+<#macro templateDescription template>
     <#if template.getDescription()??>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.description")}</td>
@@ -85,7 +92,7 @@
     </#if>
 </#macro>
 
-<#macro templateCardTags template>
+<#macro templateTags template>
     <#if template.getTags()?? && template.getTags()?size gt 0>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.tags")}</td>
@@ -98,7 +105,7 @@
     </#if>
 </#macro>
 
-<#macro templateCardAccount template>
+<#macro templateAccount template>
     <#if template.getAccount()??>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.account")}</td>
@@ -107,7 +114,7 @@
     </#if>
 </#macro>
 
-<#macro templateCardTransferAccount template>
+<#macro templateTransferAccount template>
     <#if template.getTransferAccount()??>
         <tr>
             <td class="template-content-label">${locale.getString("transaction.new.label.transfer.account")}</td>
diff --git a/src/main/resources/templates/transactions/newTransactionNormal.ftl b/src/main/resources/templates/transactions/newTransactionNormal.ftl
index 2d953b2e0e9e6a719265862d04442e530b4fd129..39e39fe6b457484567106faf05ee0af9db4c1c62 100644
--- a/src/main/resources/templates/transactions/newTransactionNormal.ftl
+++ b/src/main/resources/templates/transactions/newTransactionNormal.ftl
@@ -5,7 +5,7 @@
         <@header.style "transactions"/>
         <@header.style "datepicker"/>
         <@header.style "categories"/>
-        <@header.style "filter"/>
+        <@header.style "collapsible"/>
         <#import "/spring.ftl" as s>
     </head>
     <body class="budgetmaster-blue-light">
diff --git a/src/main/resources/templates/transactions/newTransactionTransfer.ftl b/src/main/resources/templates/transactions/newTransactionTransfer.ftl
index 48c5ea5469b0d8581638daf5ade4e5011f20a458..e8f3cd7c00fec60589e58add5c6bbdc0b28703c4 100644
--- a/src/main/resources/templates/transactions/newTransactionTransfer.ftl
+++ b/src/main/resources/templates/transactions/newTransactionTransfer.ftl
@@ -5,7 +5,7 @@
         <@header.style "transactions"/>
         <@header.style "datepicker"/>
         <@header.style "categories"/>
-        <@header.style "filter"/>
+        <@header.style "collapsible"/>
         <#import "/spring.ftl" as s>
     </head>
     <body class="budgetmaster-blue-light">
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 2e473e0bc7f05b64e4c0e8c8e94e1a9c98de2f93..e985582f00833bd85a377e632d60932349c871d7 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -5,7 +5,7 @@
         <@header.style "categories"/>
         <@header.style "transactions"/>
         <@header.style "globalDatepicker"/>
-        <@header.style "filter"/>
+        <@header.style "collapsible"/>
         <#import "/spring.ftl" as s>
     </head>
     <body class="budgetmaster-blue-light">