diff --git a/templates/bootstrap/file.html b/templates/bootstrap/file.html
index bceed0e..b749795 100644
--- a/templates/bootstrap/file.html
+++ b/templates/bootstrap/file.html
@@ -90,6 +90,40 @@
       margin: 0;
     }
 
+    .filtered { display: none; }
+
+    #filter ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        text-align: left;
+        text-transform:none;
+    }
+
+    #filter ul li {
+        cursor: pointer;
+    }
+
+    #filter li {
+        display: inline-block;
+        padding: .2em 1em;
+        border: 2px solid #DDDDDD;
+        margin: 2px;
+        color: black;
+        background-color: white;
+        opacity: 0.5;
+    }
+
+    .filter-include {
+        border-left:thick solid blue;
+        opacity: 1;
+    }
+
+    .filter-exclude {
+        border-right:thick solid red;
+        opacity: 1;
+    }
+
     </style>
 
 {{? it.server_side_rendering == 0}}
diff --git a/templates/bootstrap/main.html b/templates/bootstrap/main.html
index d4e8f30..7023a18 100644
--- a/templates/bootstrap/main.html
+++ b/templates/bootstrap/main.html
@@ -6,6 +6,10 @@
         {{= it.fullhtml}}
     {{?}}
 {{??}}
+<div id="filter">
+    <ul>
+    </ul>
+</div>
 <div class="row">
 {{~it.entries:entry:i}}
     {{? it.containsBook == 0}}
@@ -22,7 +26,7 @@
             </div>
         </div>
     {{??}}
-        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 books">
         <div class="panel panel-default" style="height: 320px;">
           <div class="panel-heading">
             <h2 class="panel-title"><a href="{{=str_format (it.c.url.detailUrl, entry.book.id, it.databaseId)}}">{{=htmlspecialchars (entry.title)}}</a></h2>