diff --git a/app/components/search/ModpackList.vue b/app/components/search/ModpackList.vue
index e3fe792..f8966f6 100644
--- a/app/components/search/ModpackList.vue
+++ b/app/components/search/ModpackList.vue
@@ -30,16 +30,21 @@
 		async () => {
 			const LIMIT = 10;
 
-			const response = await $fetch("/api/reverseSearch/all", {
-				params: {
-					id: props.id,
-					offset: data.value.length,
-					limit: LIMIT,
-				},
-			});
+			try {
+				const response = await $fetch("/api/reverseSearch/all", {
+					params: {
+						id: props.id,
+						offset: data.value.length,
+						limit: LIMIT,
+					},
+				});
 
-			data.value.push(...response);
-			canLoadMore = response.length >= LIMIT;
+				data.value.push(...response);
+				canLoadMore = response.length >= LIMIT;
+			} catch (error) {
+				console.error(error);
+				canLoadMore = false;
+			}
 		},
 		{
 			distance: 500,
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index a7d973c..43c3637 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -37,7 +37,7 @@
 					class="group font-bold flex items-center gap-2 text-3xl text-transparent! from-white to-white bg-linear-to-br bg-clip-text hover:from-cyan-200! hover:to-cyan-600!"
 				>
 					<Icon
-						name="akar-icons:statistic-up"
+						name="akar-icons:search"
 						size="35"
 						class="bg-linear-to-br from-white group-hover:from-cyan-200 group-hover:to-cyan-600 group-[.active-link]:to-cyan-500!"
 					/>
diff --git a/app/pages/reverseSearch.vue b/app/pages/reverseSearch.vue
index 8cf3271..0cdea94 100644
--- a/app/pages/reverseSearch.vue
+++ b/app/pages/reverseSearch.vue
@@ -1,28 +1,56 @@
 <script setup lang="ts">
 	import ModpackList from "~/components/search/ModpackList.vue";
 
-	const text = ref("P7dR8mSH");
+	const route = useRoute();
+	const router = useRouter();
+
+	const input = ref((route.query.id as string) || "");
+	const currentId = ref(input.value);
+
 	const { data: count } = useFetch("/api/reverseSearch/count", {
 		params: {
-			id: text,
+			id: currentId,
 		},
 	});
+
+	async function search() {
+		currentId.value = input.value;
+
+		await router.replace({
+			query: {
+				...route.query,
+				id: currentId.value,
+			},
+		});
+	}
 </script>
 <template>
 	<div class="flex flex-1 flex-col">
 		<div class="flex flex-col gap-5 items-center mt-4">
 			<span class="text-3xl">Find all Modpacks which include the Project</span>
-			<input
-				class="border border-gray-300 rounded-md px-2 py-1"
-				v-model="text"
-				type="text"
-				placeholder="Project ID..."
+			<form
+				class="border border-gray-300 rounded-md flex"
+				@submit.prevent="search"
 			>
+				<input
+					class="pl-1.5"
+					v-model="input"
+					type="text"
+					placeholder="Project ID..."
+				>
+				<button class="border-l flex items-center p-1 group" type="submit">
+					<Icon
+						class="group-hover:scale-110 transition"
+						name="akar-icons:search"
+						size="20"
+					/>
+				</button>
+			</form>
 		</div>
 		<div class="flex flex-col flex-1 mx-4 gap-4">
 			<div class="text-2xl">Modpacks: {{ count?.count }}</div>
 			<div class="relative flex-1">
-				<ModpackList :id="text" class="h-full overflow-y-auto absolute"/>
+				<ModpackList :id="currentId" class="h-full overflow-y-auto absolute"/>
 			</div>
 		</div>
 	</div>