diff --git a/content/_index.md b/content/_index.md
index 52c1a53..230af49 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const rec = document.querySelectorAll('#artlist li')
   const search = document.querySelector('#search')
   const clearSearch = document.querySelector('.clear-search')
+  const artlist = document.getElementById('artlist')
 
   search.addEventListener('input', e => {
     // grab search input value
@@ -26,12 +27,15 @@ document.addEventListener('DOMContentLoaded', () => {
       const isMatch = recipeName.includes(searchText)
 
       el.hidden = !isMatch
+      el.classList.toggle('matched-recipe', isMatch && searchText.length !== 0);
+      artlist.classList.add('list-searched');
     })
   })
 
   clearSearch.addEventListener('click', e => {
     search.value = ''
     rec.forEach(el => el.hidden = false)
+    artlist.classList.remove('list-searched') ;
   })
 })
 </script>
diff --git a/static/style.css b/static/style.css
index dc08c37..0c659ba 100644
--- a/static/style.css
+++ b/static/style.css
@@ -51,6 +51,7 @@ h1 {
 
 h2 {
 	color: tomato ;
+	text-align: center ;
 }
 
 footer {
@@ -146,3 +147,13 @@ button.clear-search {
 button.clear-search:hover {
   color: #eee;
 }
+
+
+.matched-recipe {
+	font-size: x-large ;
+}
+
+.list-searched {
+	column-count: 1 !important ;
+	list-style: decimal ;
+}