diff --git a/frontend/package.json b/frontend/package.json
index 9c8f2a2..a9a725d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -35,6 +35,7 @@
 		"d3": "^7.9.0",
 		"js-cookie": "^3.0.5",
 		"marked": "^12.0.0",
+		"svelte-infinite-loading": "^1.3.8",
 		"svelte-routing": "^2.11.0"
 	},
 	"workspaces": [
diff --git a/frontend/src/lib/ListProteins.svelte b/frontend/src/lib/ListProteins.svelte
index 5b604ed..86b40ae 100644
--- a/frontend/src/lib/ListProteins.svelte
+++ b/frontend/src/lib/ListProteins.svelte
@@ -99,7 +99,6 @@
 		flex-wrap: wrap;
 		padding: 10px;
 		margin-left: 10px;
-		height: calc(100vh - 100px);
 	}
 	.prot-info {
 		width: 300px;
diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte
index 3415e3e..3bb5ab4 100644
--- a/frontend/src/routes/Search.svelte
+++ b/frontend/src/routes/Search.svelte
@@ -6,8 +6,8 @@
 	import { Search, Button } from "flowbite-svelte";
 	import RangerFilter from "../lib/RangerFilter.svelte";
 	import DelayedSpinner from "../lib/DelayedSpinner.svelte";
-    import app from "../main";
-    import { navigate } from "svelte-routing";
+	import InfiniteLoading from "svelte-infinite-loading";
+	import type { InfiniteEvent } from "svelte-infinite-loading";
 
 	let query = "";
 	let proteinEntries: ProteinEntry[];
@@ -18,55 +18,73 @@
 	let lengthExtent: { min: number; max: number };
 	let massFilter: { min: number; max: number } | undefined;
 	let massExtent: { min: number; max: number };
-    let filterResetCounter = 0;
-
-    let urlParams = new URLSearchParams(window.location.search)
-    let proteinsPerPage = 20 // The number of proteins to show per page
-    let page = 0
+	let filterResetCounter = 0;
+	let searchTop: HTMLFormElement;
+	let proteinsPerPage = 20; // The number of proteins to show per page
+	let page = 0;
 	onMount(async () => {
-        // Redirects user to ?page=1 if page query string not present
-
-        /*
-        if (page == null) {
-            navigate('search?page=1')
-        }
-        console.log("Page is", page)
-        */
-
 		await search();
 		species = await Backend.searchSpecies();
 		lengthExtent = await Backend.searchRangeLength();
 		massExtent = await Backend.searchRangeMass();
 		massFilter = massExtent;
 		lengthFilter = lengthExtent;
-        console.log(page)
+		console.log(page);
 	});
 
+	function infiniteProteinScroll({
+		detail: { loaded, complete },
+	}: InfiniteEvent) {
+		page++;
+		Backend.searchProteins({
+			query,
+			speciesFilter,
+			lengthFilter,
+			massFilter,
+			proteinsPerPage,
+			page,
+		}).then((d) => {
+			totalFound = d.totalFound;
+			if (totalFound === 0) {
+				complete();
+			} else {
+				proteinEntries = proteinEntries.concat(d.proteinEntries); // add on top instead of replacing as we load more
+				loaded();
+			}
+		});
+	}
+
 	async function search() {
 		const result = await Backend.searchProteins({
 			query,
 			speciesFilter,
 			lengthFilter,
 			massFilter,
-            proteinsPerPage,
-            page
+			proteinsPerPage,
+			page,
 		});
 		proteinEntries = result.proteinEntries;
 		totalFound = result.totalFound;
 	}
-    async function searchAndResetPage() {
-        page = 0;
-        await search();
-    }
+	async function searchAndResetPage() {
+		scrollTop();
+		page = 0;
+		await search();
+	}
 	async function resetFilter() {
+		scrollTop();
 		speciesFilter = undefined;
 		lengthFilter = lengthExtent;
 		massFilter = massExtent;
 		query = "";
-        page = 0;
-        filterResetCounter++; // Incrementing this so relevant components can be destroyed and re-created
+		page = 0;
+		filterResetCounter++; // Incrementing this so relevant components can be destroyed and re-created
 		await search();
 	}
+
+	function scrollTop() {
+		searchTop.scrollIntoView({ block: "end" });
+	}
 </script>
 
 <svelte:head>
@@ -88,7 +106,7 @@
 								outline
 								on:click={async () => {
 									speciesFilter = s;
-                                    await searchAndResetPage();
+									await searchAndResetPage();
 								}}
 							>
 								{s}
@@ -100,38 +118,43 @@
 			<div>
 				<h3>Amino Acids Length</h3>
 				{#if lengthExtent && lengthFilter}
-                    {#key filterResetCounter}
-                        <RangerFilter
-                            min={lengthExtent.min}
-                            max={lengthExtent.max}
-                            on:change={async ({ detail }) => {
-                                lengthFilter = detail;
-                                await searchAndResetPage();
-                            }}
-                        />
-                    {/key}
+					{#key filterResetCounter}
+						<RangerFilter
+							min={lengthExtent.min}
+							max={lengthExtent.max}
+							on:change={async ({ detail }) => {
+								lengthFilter = detail;
+								await searchAndResetPage();
+							}}
+						/>
+					{/key}
 				{/if}
 			</div>
 
 			<div>
 				<h3>Mass (Da)</h3>
 				{#if massExtent && massFilter}
-                    {#key filterResetCounter}
-                        <RangerFilter
-                            min={massExtent.min}
-                            max={massExtent.max}
-                            on:change={async ({ detail }) => {
-                                massFilter = detail;
-                                await searchAndResetPage()
-                            }}
-                        />
-                    {/key}
+					{#key filterResetCounter}
+						<RangerFilter
+							min={massExtent.min}
+							max={massExtent.max}
+							on:change={async ({ detail }) => {
+								massFilter = detail;
+								await searchAndResetPage();
+							}}
+						/>
+					{/key}
 				{/if}
 			</div>
 
 			<div class="mt-5">
-				<Button on:click={resetFilter} outline size="xs" color="light"
-					>Reset All Filters</Button
+				<Button
+					on:click={async () => {
+						await resetFilter();
+					}}
+					outline
+					size="xs"
+					color="light">Reset All Filters</Button
 				>
 			</div>
 		{:else}
@@ -140,47 +163,39 @@
 	</div>
 
 	<div id="view">
-		<form id="search-bar" on:submit|preventDefault={searchAndResetPage}>
-			<Search
-				size="lg"
-				type="text"
-				class="flex gap-2 items-center"
-				placeholder="Enter search..."
-				bind:value={query}
-			/>
-			<Button type="submit" size="sm">Search</Button>
-		</form>
-		{#if totalFound > 0 || page > 0}
-			<div id="found">
-                {#if totalFound == 1}
-                    {totalFound} protein shown |
-                {:else}
-                    {totalFound} proteins shown |
-                {/if}
-                <Button disabled={page <= 0} on:click={async()=>{
-                    page--
-                    await search();
-                }}>Previous {proteinsPerPage}</Button> | 
-                <Button disabled={totalFound < proteinsPerPage} on:click={async()=>{
-                    page++
-                    await search();
-                }}>Next {proteinsPerPage}</Button>
+		<form
+			id="search-bar"
+			on:submit|preventDefault={searchAndResetPage}
+			bind:this={searchTop}
+		>
+			<div style="width: 500px;">
+				<Search
+					size="lg"
+					type="text"
+					class="flex gap-2 items-center"
+					bind:value={query}
+				></Search>
 			</div>
-		{/if}
+			<div>
+				<Button type="submit">Search Proteins</Button>
+			</div>
+		</form>
 		{#if proteinEntries === undefined}
 			<DelayedSpinner
 				text="Fetching Proteins from the Venome DB..."
 				textRight
 			/>
-        {:else if proteinEntries.length === 0}
-            { #if page > 0 }
-                No more proteins found
-            {:else}
-                No proteins found
-            {/if}
-            
+		{:else if proteinEntries.length === 0}
+			{#if page > 0}
+				No more proteins found
+			{:else}
+				No proteins found
+			{/if}
 		{:else}
 			<ListProteins allEntries={proteinEntries} />
+			{#if totalFound !== 0}
+				<InfiniteLoading on:infinite={infiniteProteinScroll} />
+			{/if}
 		{/if}
 	</div>
 </section>
@@ -207,16 +222,16 @@
 
 	#search-bar {
 		display: flex;
-		width: 500px;
 		gap: 5px;
 		padding: 10px;
+		align-items: center;
 	}
 
 	#found {
 		position: absolute;
 		top: 25px;
 		right: 25px;
-		color: var(--primary-500);
+		color: var(--primary-700);
 	}
 	h3 {
 		margin-bottom: 3px;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b4a5ab4..259aeb4 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7235,6 +7235,11 @@ svelte-hmr@^0.15.3:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6"
   integrity sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==
 
+svelte-infinite-loading@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/svelte-infinite-loading/-/svelte-infinite-loading-1.3.8.tgz#c479938bd5ca69264fe591ffbbb013b368afe578"
+  integrity sha512-hn4o848LKd2Q+M11hiMWnfFxM1GHKVDi92HPZ1FYvfed4bEeRZL+QvFAQzhy1SACq6Si0CAJcQFUZpIYmAEnpQ==
+
 svelte-preprocess@^5.1.0:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.3.tgz#7682239fe53f724c845b53026816fdfe15d028f9"