diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 8d8ed55..6221bdf 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -16,10 +16,18 @@ export default {
 
 <template>
     <div class="relative hidden md:block">
-        <label for="searchBar" class="hidden">{{ $t("main.search") }}</label>
-        <v-icon name="io-search-outline" class="text-black absolute my-auto inset-y-0 left-2"></v-icon>
-        <input type="text" :placeholder="$t('main.search')"
-            @keyup.enter=redirectToSearch v-model="searchInput"
-            class="rounded-md p-1 pl-8 text-black" ref="searchInput" />
+      <form class="relative">
+          <label for="searchBar" class="hidden">{{ $t("main.search") }}</label>
+          <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
+          <input
+            type="text"
+            id="searchBar"
+            name="searchBar"
+            :placeholder="$t('main.search')"
+            v-model="searchInput"
+            @keyup.enter=redirectToSearch
+            class="rounded-md p-1 pl-8 text-black bg-white placeholder:text-black"
+          />
+        </form>
     </div>
 </template>
\ No newline at end of file