diff --git a/static/img/search_bar_gear.png b/static/img/search_bar_gear.png
new file mode 100644
index 0000000..22ebcdc
Binary files /dev/null and b/static/img/search_bar_gear.png differ
diff --git a/static/sass/index.sass b/static/sass/index.sass
index 243d73f..7355036 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -123,14 +123,11 @@ div#search-field
 
             #sidebar
                 padding-left: 1%
-                width: 20%
-
-                *
-                    font-size: 95%
+                width: 25%
 
                 >div
                     color: $baseColor2
-                    font-size: 107%
+                    font-size: 120%
                     padding-top: 5%
 
                 >ul
@@ -139,23 +136,41 @@ div#search-field
                     margin-bottom: 8%
                     margin-top: 2%
 
-                    li button
-                        background-color: #F1F1F1
-                        border: none
-                        width: 80%
+                    li
+                        margin-bottom: 2%
+
+                        label
+                            user-select: none
+
+                            div
+                                @extend .t3
+
+                                background-color: #F1F1F1
+                                border: none
+                                font-size: 96%
+                                padding: 3%
+                                width: 85%
+
+                                &:hover, &.selectedInputField
+                                    @extend .t3
+
+                                    background-color: $baseColor2
+                                    color: white
+                                    width: 90%
 
-                        &.clicked, &:hover
-                            @extend .t2
+                        input[type="checkbox"]
+                            display: none
 
-                            background-color: $baseColor1
-                            color: white
-                            width: 90%
+                            &:checked + label > div
+                                @extend .selectedInputField
 
-                >button#add-group
+                                background-color: $baseColor1
+                                color: white
+                                width: 90%
 
             #search-groups
                 background-color: blue
-                width: 80%
+                width: 75%
 
     &.partly-visible
         margin-top: 0%
diff --git a/templates/index.html b/templates/index.html
index 979e09a..9992f24 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,14 +39,38 @@
             Fields
           </div>
           <ul>
-            <li><button id="language">languages</button></li>
-            <li><button id="author">authors</button></li>
-            <li><button id="modified">date last modified</button></li>
-            <li><button id="created">date created</button></li>
-            <li><button id="symbol">symbols</button></li>
-            <li><button id="function">functions</button></li>
-            <li><button id="class">classes</button></li>
-            <li><button id="variable">variables</button></li>
+            <li>
+              <input type="checkbox" id="language"/>
+              <label for="language"><div>languages</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="author"/>
+              <label for="author"><div>authors</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="modified"/>
+              <label for="modified"><div>date last modified</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="created"/>
+              <label for="created"><div>date created</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="symbol"/>
+              <label for="symbol"><div>symbols</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="function"/>
+              <label for="function"><div>functions</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="class"/>
+              <label for="class"><div>classes</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="variable"/>
+              <label for="variable"><div>variables</div></label>
+            </li>
           </ul>
           <button id="add-group">
             +