diff --git a/components/ui/TextInput.vue b/components/ui/TextInput.vue
index 09480e23..7402259e 100644
--- a/components/ui/TextInput.vue
+++ b/components/ui/TextInput.vue
@@ -4,6 +4,9 @@
     <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
       <span class="material-icons text-lg">{{ prependIcon }}</span>
     </div>
+    <div v-if="clearable && input" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center" @click.stop="clear">
+      <span class="material-icons text-lg">close</span>
+    </div>
   </div>
 </template>
 
@@ -26,7 +29,8 @@ export default {
     prependIcon: {
       type: String,
       default: null
-    }
+    },
+    clearable: Boolean
   },
   data() {
     return {}
@@ -53,6 +57,9 @@ export default {
     }
   },
   methods: {
+    clear() {
+      this.input = ''
+    },
     focus() {
       if (this.$refs.input) {
         this.$refs.input.focus()
diff --git a/pages/search.vue b/pages/search.vue
index 4c6cf971..f7f747f4 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full">
     <div class="px-4 py-6">
-      <ui-text-input ref="input" v-model="search" @input="updateSearch" borderless placeholder="Search" bg="white bg-opacity-5" rounded="md" prepend-icon="search" text-size="base" class="w-full text-lg" />
+      <ui-text-input ref="input" v-model="search" @input="updateSearch" borderless placeholder="Search" bg="white bg-opacity-10" rounded="md" prepend-icon="search" text-size="base" clearable class="w-full text-lg" />
     </div>
     <div class="w-full overflow-x-hidden overflow-y-auto search-content px-4" @click.stop>
       <div v-show="isFetching" class="w-full py-8 flex justify-center">