diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index 4361843..a4b4b92 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -66,6 +66,7 @@ label:has(#is-dataset) {
     box-sizing: border-box;
     background-color: var(--text-color);
     transition: inset-inline ease-out 50ms;
+    filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
 }
 
 #is-dataset:not(:checked) + #is-dataset-toggle::before {
diff --git a/src/main/resources/static/contentUtility.js b/src/main/resources/static/contentUtility.js
index eb2c2ce..61c9f36 100644
--- a/src/main/resources/static/contentUtility.js
+++ b/src/main/resources/static/contentUtility.js
@@ -1,4 +1,7 @@
-function fetchQuery(fetchString) {
+import { searchBarTimeout } from "./main.js"
+
+export function fetchQuery(fetchString) {
+    clearTimeout(searchBarTimeout);
     fetch(fetchString)
         .then(resp => resp.json())
         .then((data) => {
@@ -7,5 +10,5 @@ function fetchQuery(fetchString) {
 }
 
 function parseContent(content) {
-
+    //TODO: method for parsing query results
 }
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index ece21e9..3c2d591 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -147,10 +147,14 @@ header {
     filter: brightness(1.3);
 }
 
-.btn:is(:hover, :focus-visible) {
+.btn.flat {
+    transition: filter ease-out 50ms;
+}
+
+.btn.flat:is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-.btn:active {
+.btn.flat:active {
     filter: brightness(1.75);
 }
diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js
index 9b74cd2..cf8b852 100644
--- a/src/main/resources/static/main.js
+++ b/src/main/resources/static/main.js
@@ -1,4 +1,6 @@
-const baseURL = "http://" + window.location.host + "/api/v1/datasets";
+import { fetchQuery } from "./contentUtility.js";
+
+const apiEndpoint = "/api/v1/datasets";
 const defaultPagingValue = 20;
 const lastQuery = {
     url: "",
@@ -6,35 +8,53 @@ const lastQuery = {
     currentPage: 0
 };
 
+// definition of all buttons
 const addButton = document.getElementById("add-btn");
+const filterButton = document.getElementById("filter-btn");
+const searchButton = document.getElementById("search-btn");
+const searchBar = document.getElementById("search-entry");
+const sortButton = document.getElementById("sort-btn");
+const upvoteButtons = document.getElementsByClassName("upvote-btn");
+const downvoteButtons = document.getElementsByClassName("downvote-btn");
+
+// ID of the timeout, because we need to cancel it at some point
+export let searchBarTimeout;
+
+// Event listeners
 addButton.addEventListener("click", () => {
     navigateToAdd();
 });
 
-const filterButton = document.getElementById("filter-btn");
 filterButton.addEventListener("change", () => {
     const filterString = filterButton.value;
     filter(filterString);
 });
 
-const searchButton = document.getElementById("search-btn");
 searchButton.addEventListener("click", () => {
     const searchString = searchBar.value;
     search(searchString);
 });
-const searchBar = document.getElementById("search-entry");
+
 searchBar.addEventListener("input", () => {
-    const searchString = searchBar.value;
-    search(searchString);
+    clearTimeout(searchBarTimeout);
+    searchBarTimeout = setTimeout(() => {
+        const searchString = searchBar.value;
+        search(searchString);
+    }, 1000);
 });
 
-const sortButton = document.getElementById("sort-btn");
+searchBar.addEventListener('keypress', function (e) {
+    if (e.key === 'Enter') {
+        const searchString = searchBar.value;
+        search(searchString);
+    }
+})
+
 sortButton.addEventListener("change", () => {
     const sortString = sortButton.value;
     sort(sortString);
 });
 
-const upvoteButtons = document.getElementsByClassName("upvote-btn");
 const upvoteButtonClickListener = e  => {
     const entryID = e.target.parentElement.parentElement.dataset.id;
     vote(entryID, true);
@@ -43,7 +63,6 @@ for (const upvoteButton of upvoteButtons) {
     upvoteButton.addEventListener("click", upvoteButtonClickListener);
 }
 
-const downvoteButtons = document.getElementsByClassName("downvote-btn");
 const downvoteButtonClickListener = e  => {
     const entryID = e.target.parentElement.parentElement.dataset.id;
     vote(entryID, false);
@@ -52,43 +71,41 @@ for (const downvoteButton of downvoteButtons) {
     downvoteButton.addEventListener("click", downvoteButtonClickListener);
 }
 
+// functions of the main page
 function navigateToAdd() {
-
+    //TODO: url to add page not yet implemented, add here
 }
 
 function filter(filterString) {
     filterString = filterString.toUpperCase();
-    const fetchURL = baseURL + "?type=" + filterString + "&size=" + defaultPagingValue;
+    const fetchURL = apiEndpoint + "?type=" + encodeURIComponent(filterString) + "&size=" + defaultPagingValue;
+    console.log(fetchURL); // TODO: remove
     fetchQuery(fetchURL);
 }
 
 function search(searchString) {
-    const fetchURL = baseURL + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString);
-    console.log(fetchURL);
+    const fetchURL = apiEndpoint + "/search" + "?search=" + encodeURIComponent(searchString.length === 0?"%":searchString);
+    console.log(fetchURL); // TODO: remove
     fetchQuery(fetchURL);
 }
 
 function sort(sortString) {
     let query = sortString.toLowerCase().split(" ");
-    if (query[1] === "A-Z" || query[1] === "↑") {
+    if (query[1] === "a-z" || query[1] === "↑") {
         query[1] = "asc";
     } else {
         query[1] = "desc";
     }
-    const fetchURL = baseURL + "?sort=" + query[0] + "&direction=" + query[1];
-    console.log(fetchURL);
+    const fetchURL = apiEndpoint + "?sort=" + query[0] + "&direction=" + query[1];
+    console.log(fetchURL); // TODO: remove
     fetchQuery(fetchURL);
 }
 
 function vote(entryID, up) {
-    console.log(baseURL + "/id/" + entryID + "/" + (up?"upvote":"downvote"));
-    fetch(baseURL + "/id/" + entryID + "/" + up?"upvote":"downvote");
+    console.log(apiEndpoint + "/id/" + entryID + "/" + (up ? "upvote" : "downvote")); // TODO: remove
+    fetch(apiEndpoint + "/id/" + entryID + "/" + (up ? "upvote" : "downvote"));
 }
 
 function incrementPageCount() {
     lastQuery.currentPage++;
 }
-
-
-
-
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index f80de12..4355483 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash</title>
     <link rel="stylesheet" href="main.css">
-    <script type="text/javascript" src="main.js" defer></script>
+    <script type="module"  src="main.js" defer></script>
 </head>
 <body>
-    <div onclick="console.log('add')" id="add-btn" title="Add a new API entry"></div>
+    <div id="add-btn" title="Add a new API entry"></div>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>
@@ -16,7 +16,7 @@
         </header>
 
         <section id="tool-bar">
-            <select id="sort-btn" title="Sort entries">Sort by
+            <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
                 <option>Author A-Z</option>
                 <option>Author Z-A</option>
                 <option>Title A-Z</option>
@@ -27,17 +27,17 @@
                 <option>Votes ↓</option>
             </select>
             <div class="divider"></div>
-            <select class="btn" id="filter-btn" title="Filter entries">Filter
+            <select class="btn flat" id="filter-btn" title="Filter entries">Filter
                 <optgroup label="Standard categories">
-                    <option>Option 1</option>
-                    <option>Option 2</option>
+                    <option>Dataset</option>
+                    <option>API</option>
                 </optgroup>
-                <optgroup label="User categories">
-                    <option>user category</option>
+                <optgroup label="Other categories">
+                    <option>a category</option>
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
-            <button class="btn" id="search-btn" title="Search entries">Search</button>
+            <button class="btn flat" id="search-btn" title="Search entries">Search</button>
         </section>
 
         <section id="recents">
@@ -53,9 +53,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -67,9 +67,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -81,9 +81,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -95,9 +95,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -109,9 +109,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
             </ul>
@@ -128,9 +128,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
             </ul>