diff --git a/17th Website/src/components/inputs/pingableTextBox.vue b/17th Website/src/components/inputs/pingableTextBox.vue
index dcdeeb5..e1b6242 100644
--- a/17th Website/src/components/inputs/pingableTextBox.vue	
+++ b/17th Website/src/components/inputs/pingableTextBox.vue	
@@ -38,6 +38,8 @@ export default {
             } else if(this.search.length > 0) {
                 this.filter();
                 this.isOpen = true;
+            } else if (this.results.length <= 2) {
+                this.isOpen(false);
             } else {
                 this.isOpen = false;
             }
@@ -90,9 +92,10 @@ export default {
 <template>
     <div class="relative">
         <input type="text" v-model="search" @input="onchange" @keydown.down="bumpDown" @keydown.up="bumpUp"
-            @keydown.enter="select" @keydown.tab="select" :class="{}"
-            class="bg-gray-light rounded-md text-white focus:outline-none p-1 px-2"/>
-        <ul id="results" v-show="isOpen">
+            @keydown.enter="select" @keydown.tab="select" spellcheck="false"
+            class="bg-gray-light rounded-md text-white focus:outline-none p-1 px-2" 
+            :class="{'outline outline-1 outline-blue':items.includes(search), 'outline outline-1 outline-red-500':!items.includes(search) && search != ''}"/>
+        <ul id="results" v-show="isOpen" class="shadow-2xl">
             <li class="result" v-for="(result, i) in results" :key="i" @click="setResult(result)"
                 :class="{ 'is-active': i === arrowCounter }">
                 {{ result }}
@@ -106,11 +109,13 @@ export default {
     position: absolute;
     padding: 0;
     margin: 0;
-    border: 1px solid #eeeeee;
+    /* border: 1px solid #eeeeee; */
     height: max-content;
     /* min-height: 1em;
     max-height: 6em; */
     overflow: auto;
+    border-radius: 5px;
+    
 }
 
 .result {
@@ -118,6 +123,7 @@ export default {
     text-align: left;
     padding: 4px 2px;
     cursor: pointer;
+    background-color: #272731;
 }
 
 .result.is-active,