diff --git a/edx-platform/wikilearn/lms/static/sass/components/_refine-sidebar.scss b/edx-platform/wikilearn/lms/static/sass/components/_refine-sidebar.scss
new file mode 100644
index 0000000..c4e7a02
--- /dev/null
+++ b/edx-platform/wikilearn/lms/static/sass/components/_refine-sidebar.scss
@@ -0,0 +1,19 @@
+.facet-header-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    border-top: 1px solid $gray-l4;
+
+    .lng-srch-facet-input {
+        margin: ($baseline/4) !important;
+    }
+}
+
+.facet-list{
+    ul{
+        max-height: ($baseline*1.5)*5;
+        overflow: hidden;
+        overflow-y:scroll;
+    }
+}
diff --git a/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_extras.scss b/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_extras.scss
index 813c8d3..aa167d8 100644
--- a/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_extras.scss
+++ b/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_extras.scss
@@ -20,3 +20,4 @@
 @import '../../../components/footer';
 @import '../../../components/course';
 @import '../../../features/catalog';
+@import "../../../components/refine-sidebar"
diff --git a/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_variables.scss b/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_variables.scss
index 16747db..ce0caf7 100644
--- a/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_variables.scss
+++ b/edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_variables.scss
@@ -16,11 +16,13 @@ $theme-blue:                #36c;
 $cornflower-blue:           #447ff5;
 $butterfly-bush:            #6b4ba1;
 $base-font-color:           #000;
+$gray:                      rgb(127,127,127);
 $footer-bg:                 #f6f6f6;
 $m-blue-d6:                 #256a97 !default;
 $blue:                      rgb(0, 159, 230) !default;
 $white:                     rgb(255, 255, 255) !default;
 $m-blue-d5:                 rgb(0, 158, 231) !default;
+$gray-l4:                   tint($gray,80%);
 $primary:                   $theme-blue;
 $action-primary-bg:         $theme-blue;
 
diff --git a/edx-platform/wikilearn/lms/templates/discovery/facet.underscore b/edx-platform/wikilearn/lms/templates/discovery/facet.underscore
new file mode 100644
index 0000000..5f5dd7f
--- /dev/null
+++ b/edx-platform/wikilearn/lms/templates/discovery/facet.underscore
@@ -0,0 +1,23 @@
+<div class=".facet-container">
+    <div class="facet-header-container">
+        <h3 class="header-facet">
+            <%- displayName %>
+        </h3>
+        <% if (listIsHuge) { %>
+            <input type="text" id="lng-srch-facet-input", class="lng-srch-facet-input" placeholder="Search..." />
+        <% } %>
+    </div>
+    <ul data-facet="<%- name %>" class="facet-list collapse">
+        <%= HtmlUtils.ensureHtml(optionsHtml) %>
+    </ul>
+</div>
+<% if (listIsHuge) { %>
+    <div class="toggle ">
+        <button class="show-more discovery-button">
+            <%- gettext("More") %>
+        </button>
+        <button class="show-less hidden discovery-button">
+            <%- gettext("Less") %>
+        </button>
+    </div>
+<% } %>