diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 6c854ac..86867ed 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -102,7 +102,8 @@
                             <!-- history -->
                             <div id="history" class="medium-vertical-margin tabcontent">
                                 <div class="block-display max-width">
-                                    <div class="display-space-between max-width small-vertical-margin">
+                                    <button id="btn-history-filter" class="clickable-text highlight"><span>&gt;</span> filter</button>
+                                    <div id ="history-filter" class="display-space-between max-width small-vertical-margin hiddable">
                                         <div class="three-fourth-width display-space-evenly">
                                             <div class="block-display half-width with-padding">
                                                 <label for="historyFrom" class="block-label">From</label>
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index 0c7fd25..e938af3 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -22,8 +22,15 @@ function changeAdvancedVisibility(){
     setCookie();
 }
 
+const historyFilterSwitch = function(){
+    $('#history-filter').toggleClass('active');
+}
+
 $("#optional").click(changeAdvancedVisibility);
 $('#historyTab').click(showHistory);
+$('#btn-history-filter').click(historyFilterSwitch);
+
+
 
 const tabitem = $('.tabitem');
 function showHistory(){
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index 6c854ac..86867ed 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -102,7 +102,8 @@
                             <!-- history -->
                             <div id="history" class="medium-vertical-margin tabcontent">
                                 <div class="block-display max-width">
-                                    <div class="display-space-between max-width small-vertical-margin">
+                                    <button id="btn-history-filter" class="clickable-text highlight"><span>&gt;</span> filter</button>
+                                    <div id ="history-filter" class="display-space-between max-width small-vertical-margin hiddable">
                                         <div class="three-fourth-width display-space-evenly">
                                             <div class="block-display half-width with-padding">
                                                 <label for="historyFrom" class="block-label">From</label>
diff --git a/target/classes/static/js/uianimation.js b/target/classes/static/js/uianimation.js
index 0c7fd25..e938af3 100644
--- a/target/classes/static/js/uianimation.js
+++ b/target/classes/static/js/uianimation.js
@@ -22,8 +22,15 @@ function changeAdvancedVisibility(){
     setCookie();
 }
 
+const historyFilterSwitch = function(){
+    $('#history-filter').toggleClass('active');
+}
+
 $("#optional").click(changeAdvancedVisibility);
 $('#historyTab').click(showHistory);
+$('#btn-history-filter').click(historyFilterSwitch);
+
+
 
 const tabitem = $('.tabitem');
 function showHistory(){