diff --git a/src/app/static/css/colours.css b/src/app/static/css/colours.css
deleted file mode 100644
index c534401..0000000
--- a/src/app/static/css/colours.css
+++ /dev/null
@@ -1,8 +0,0 @@
-:root {
-    --success: #22c55e;
-    --info: #0ea5e9;
-    --warning: #f97316;
-    --help: #a855f7;
-    --error: #ef4444;
-    --default-dark-theme-text: #d1d7e0;
-  }
\ No newline at end of file
diff --git a/src/app/static/css/dashboard.css b/src/app/static/css/dashboard.css
deleted file mode 100644
index deb6fe0..0000000
--- a/src/app/static/css/dashboard.css
+++ /dev/null
@@ -1,6 +0,0 @@
-#post:hover {
-  border: 1px solid lightblue !important;
-}
-#post {
-  transition: border 0.3s ease;
-}
diff --git a/src/app/static/css/discover.css b/src/app/static/css/discover.css
deleted file mode 100644
index 1b4cb98..0000000
--- a/src/app/static/css/discover.css
+++ /dev/null
@@ -1,6 +0,0 @@
-#unit:hover {
-  border:  2px solid lightblue !important;
-}
-#unit {
-  transition: border 0.3s ease;
-}
diff --git a/src/app/static/css/dropdown.css b/src/app/static/css/dropdown.css
deleted file mode 100644
index a86d849..0000000
--- a/src/app/static/css/dropdown.css
+++ /dev/null
@@ -1,23 +0,0 @@
-#searchInput {
-    z-index: 1;
-}
-#results.dropdown-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    top: 100%;
-    position: absolute;
-    width: 200px;
-    background-color: #111;
-    z-index: 2;
-}
-
-#results li {
-    padding: 8px 12px;
-    cursor: pointer;
-    color: white;
-}
-
-#results li:hover {
-    background-color: #333;
-}
\ No newline at end of file
diff --git a/src/app/static/css/tailwindglobals.css b/src/app/static/css/tailwindglobals.css
index d07e561..e2ae5ff 100644
--- a/src/app/static/css/tailwindglobals.css
+++ b/src/app/static/css/tailwindglobals.css
@@ -1,3 +1,11 @@
+:root {
+  --success: #22c55e;
+  --info: #0ea5e9;
+  --warning: #f97316;
+  --help: #a855f7;
+  --error: #ef4444;
+  --default-dark-theme-text: #d1d7e0;
+}
 body {
   font-family: 'Inter', sans-serif;
 }
diff --git a/src/app/static/js/friends.js b/src/app/static/js/friends.js
index ba7cc90..9e340ec 100644
--- a/src/app/static/js/friends.js
+++ b/src/app/static/js/friends.js
@@ -28,6 +28,7 @@ document.addEventListener("DOMContentLoaded", function() {
                     results.innerHTML = '';
                     data.forEach(person => {
                         const li = document.createElement('li');
+                        li.classList.add("px-3", "py-2", "cursor-pointer", "text-white", "hover:bg-[#333]");
                         li.textContent = `${person.username}`;
                         li.addEventListener('click', () => {
                             input.value = '';
diff --git a/src/app/templates/base.html b/src/app/templates/base.html
index b5a99b2..ff2f712 100644
--- a/src/app/templates/base.html
+++ b/src/app/templates/base.html
@@ -15,9 +15,6 @@
   <script src="{{ url_for('static', filename='js/tailwindconfig.js') }}" defer></script>
   <script src="{{ url_for('static', filename='js/darkmode.js') }}" defer></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindglobals.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/discover.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/dropdown.css') }}">
 
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
diff --git a/src/app/templates/discover_unit.html b/src/app/templates/discover_unit.html
index d0ef2f5..e9e68c7 100644
--- a/src/app/templates/discover_unit.html
+++ b/src/app/templates/discover_unit.html
@@ -27,11 +27,11 @@ <h1 class="text-2xl font-bold">{{ unit_code }} - {{ unit_name }}</h1>
 <div class="flex flex-col w-full h-[80vh]">
   <div class="w-full flex flex-row gap-4 transition-colors duration-300">
     <div class="flex flex-col flex-grow" style="position: relative;">
-      <input type="text" id="searchInput" placeholder="Search units..." autocomplete="off" class="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-dark-border
+      <input type="text" id="searchInput" placeholder="Search units..." autocomplete="off" class="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-dark-border relative z-[1]
             bg-gray-50 dark:bg-dark-fg text-gray-900 dark:text-dark-primary
             focus:outline-none focus:border-blue-500 dark:focus:border-blue-400
             transition">
-      <ul id="results" class="dropdown-list" style="width: 100%;"></ul>
+      <ul id="results" class="dropdown-list list-none p-0 m-0 absolute top-full w-[200px] bg-[#111] z-[2]" style="width: 100%;"></ul>
     </div>
   </div>
   <div class="flex flex-col mt-4 w-full overflow-y-auto">
diff --git a/src/app/templates/friends.html b/src/app/templates/friends.html
index 914bf5e..8869955 100644
--- a/src/app/templates/friends.html
+++ b/src/app/templates/friends.html
@@ -10,8 +10,8 @@
             class="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-dark-border
             bg-gray-50 dark:bg-dark-fg text-gray-900 dark:text-dark-primary
             focus:outline-none focus:border-blue-500 dark:focus:border-blue-400
-            transition">
-            <ul id="results" class="dropdown-list" style="width: 100%;"></ul>
+            transition relative z-[1]" >
+            <ul id="results" class="dropdown-list list-none p-0 m-0 absolute top-full w-[200px] bg-[#111] z-[2]" style="width: 100%;"></ul>
         </div>
     </div>
     <div class="flex flex-col mt-4 w-full">
diff --git a/src/app/templates/unitplans.html b/src/app/templates/unitplans.html
index 0c48d5c..c43aa35 100644
--- a/src/app/templates/unitplans.html
+++ b/src/app/templates/unitplans.html
@@ -10,8 +10,8 @@
             class="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-dark-border
             bg-gray-50 dark:bg-dark-fg text-gray-900 dark:text-dark-primary
             focus:outline-none focus:border-blue-500 dark:focus:border-blue-400
-            transition">
-            <ul id="results" class="dropdown-list" style="width: 100%;"></ul>
+            transition relative z-[1]" >
+            <ul id="results" class="dropdown-list list-none p-0 m-0 absolute top-full w-[200px] bg-[#111] z-[2]" style="width: 100%;"></ul>
         </div>
     </div>
     <div class="flex flex-col mt-4 w-full">