diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 42d3c862d74c5291c11f9ce08d05ce02cb968ef0..e201d4a2d7dee1365b8454fada049c7aef1b1ce3 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -607,6 +607,11 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     margin-bottom: 20px;
 }
 
+/* inputs with icon prefix */
+.input-field .prefix.active {
+    color: #2E79B9;
+}
+
 .invisible {
     opacity: 0;
 }
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index d3291a9f132b17dcb34b192dc34ed86514c65e92..123f416901a90e41a43f1bf99bc280a4920350c8 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -522,6 +522,11 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     margin-bottom: 20px;
 }
 
+/* inputs with icon prefix */
+.input-field .prefix.active {
+    color: #2E79B9;
+}
+
 .invisible {
     opacity: 0;
 }
diff --git a/src/main/resources/static/js/templates.js b/src/main/resources/static/js/templates.js
index 9c3b2f1fd91e6c1a399f09a413f21f97cfc70c8f..db21e2388d47f85f437adcb0cb180426d8fc7b23 100644
--- a/src/main/resources/static/js/templates.js
+++ b/src/main/resources/static/js/templates.js
@@ -33,6 +33,17 @@ $(document).ready(function()
     M.Collapsible.init(document.querySelector('.collapsible.expandable'), {
         accordion: false
     });
+
+
+    let inputSearchTemplate = document.getElementById('searchTemplate');
+    if(inputSearchTemplate !== undefined)
+    {
+        $(inputSearchTemplate).on('change keydown paste input', function()
+        {
+            let searchText = $(this).val();
+            searchTemplates(searchText);
+        });
+    }
 });
 
 function createAndOpenModal(data)
@@ -111,4 +122,48 @@ function createAdditionalHiddenInput(name, value)
     newInput.setAttribute('name', name);
     newInput.setAttribute('value', value);
     return newInput;
+}
+
+function searchTemplates(searchText)
+{
+    searchText = searchText.trim();
+
+    let templateItems = document.querySelectorAll('.template-item');
+    let collapsible = document.getElementById('templateCollapsible');
+
+    if(!searchText)
+    {
+        templateItems.forEach((item) =>
+        {
+            collapsible.classList.remove('hidden');
+            item.classList.remove('hidden');
+        });
+        return;
+    }
+
+    let numberOfVisibleItems = 0;
+    for(let i = 0; i < templateItems.length; i++)
+    {
+        let item = templateItems[i];
+        let templateName = item.querySelector('.template-header-name').innerText;
+        if(templateName.includes(searchText))
+        {
+            item.classList.remove('hidden');
+            numberOfVisibleItems++;
+        }
+        else
+        {
+            item.classList.add('hidden');
+        }
+    }
+
+    // hide whole collapsible to prevent shadows from remaining visible
+    if(numberOfVisibleItems === 0)
+    {
+        collapsible.classList.add('hidden');
+    }
+    else
+    {
+        collapsible.classList.remove('hidden');
+    }
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/templates/selectTemplate.ftl b/src/main/resources/templates/templates/selectTemplate.ftl
index d5dfc3b4d2c859d864abbb7b04039a3da26149dd..2d2ab5d6593e28fccdb3de1e50433d8d1ea3fa26 100644
--- a/src/main/resources/templates/templates/selectTemplate.ftl
+++ b/src/main/resources/templates/templates/selectTemplate.ftl
@@ -19,6 +19,13 @@
                     <div class="section center-align">
                         <div class="headline">${locale.getString("menu.templates")}</div>
                     </div>
+                    <div class="searchTemplateWrapper">
+                        <div class="input-field col s12 m12 l8 offset-l2">
+                            <i class="material-icons prefix">search</i>
+                            <input id="searchTemplate" type="text">
+                            <label for="searchTemplate">${locale.getString("search")}</label>
+                        </div>
+                    </div>
                 </div>
                 <br>
                 <div class="center-align"><a href="<@s.url '/templates'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">edit</i>${locale.getString("home.menu.templates.action.manage")}</a></div>
diff --git a/src/main/resources/templates/templates/templateFunctions.ftl b/src/main/resources/templates/templates/templateFunctions.ftl
index aafd6cb0bd511122237f0bce9332ea42c8fc7367..e2cf1267f56de0e8ebd2f229f7e071b9b43eee02 100644
--- a/src/main/resources/templates/templates/templateFunctions.ftl
+++ b/src/main/resources/templates/templates/templateFunctions.ftl
@@ -17,9 +17,9 @@
     <div class="container">
         <div class="row">
             <div class="col s12">
-                <ul class="collapsible expandable z-depth-2">
+                <ul class="collapsible expandable z-depth-2" id="templateCollapsible">
                     <#list templates as template>
-                        <li>
+                        <li class="template-item">
                             <div class="collapsible-header bold">
                                 <@templateHeader template/>
                                 <div class="collapsible-header-button">