diff --git a/src/modules/album/album.go b/src/modules/album/album.go
index 13d42fa..9ebca26 100644
--- a/src/modules/album/album.go
+++ b/src/modules/album/album.go
@@ -43,10 +43,10 @@ func allAlbumsPage(c echo.Context) error {
 
 	if isHtmxRequest {
 		// return just a fragment
-		return utils.RenderTempl(c, http.StatusOK, albumsFragment(albums))
+		return utils.RenderTempl(c, http.StatusOK, albumsFragment(albums, searchQuery))
 	} else {
 		// return a full-blown html page
-		return utils.RenderTempl(c, http.StatusOK, allAlbumsTempl(albums))
+		return utils.RenderTempl(c, http.StatusOK, allAlbumsTempl(albums, searchQuery))
 	}
 }
 
diff --git a/src/modules/album/album.templ b/src/modules/album/album.templ
index 29f680d..fa83a91 100644
--- a/src/modules/album/album.templ
+++ b/src/modules/album/album.templ
@@ -8,30 +8,41 @@ import (
 )
 
 // Renders a page with all albums passed to it
-templ allAlbumsTempl(albums []utils.Album) {
+templ allAlbumsTempl(albums []utils.Album, query string) {
 	@utils.SkeletonTempl() {
-		<div>
-			<h1 class="font-bold pt-4 pb-2 text-2xl">
-				Albums
-			</h1>
-			<div class="px-2">
-				<form
-					action="/album/"
-					method="GET"
-					hx-boost="true"
-					hx-target="#album-list"
-					hx-trigger="keyup changed delay:500ms from:input, search"
-				>
-					<input
-						class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
-						type="search"
-						placeholder="Search albums"
-						name="s"
-					/>
-				</form>
-			</div>
-			<br/>
-			<div id="album-list" class="grid grid-cols-3 gap-2 px-2">
+		@albumsFragment(albums, query)
+	}
+}
+
+templ albumsFragment(albums []utils.Album, query string) {
+	<div id="album-list">
+		<h1 class="font-bold pt-4 pb-2 text-2xl">
+			Albums
+		</h1>
+		<div class="px-2">
+			<form
+				action="/album/"
+				method="GET"
+				hx-boost="true"
+				hx-target="#album-list"
+				hx-trigger="keyup changed delay:500ms from:input, search"
+			>
+				<input
+					class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
+					type="search"
+					placeholder="Search albums"
+					value={ query }
+					name="s"
+				/>
+			</form>
+		</div>
+		<br/>
+		<div id="album-list" class="flex flex-wrap justify-evenly gap-2 px-2">
+			if len(albums) == 0 {
+				<p>
+					No albums found
+				</p>
+			} else {
 				for _, album := range albums {
 					@index.AlbumCard(album)
 				}
@@ -40,20 +51,9 @@ templ allAlbumsTempl(albums []utils.Album) {
 						No albums found
 					</p>
 				}
-			</div>
+			}
 		</div>
-	}
-}
-
-templ albumsFragment(albums []utils.Album) {
-	for _, album := range albums {
-		@index.AlbumCard(album)
-	}
-	if len(albums) == 0 {
-		<p>
-			No albums found
-		</p>
-	}
+	</div>
 }
 
 // Renders the page of a single Album
diff --git a/src/modules/index/index.templ b/src/modules/index/index.templ
index edc7235..a5002ba 100644
--- a/src/modules/index/index.templ
+++ b/src/modules/index/index.templ
@@ -29,7 +29,9 @@ templ IndexTempl(albums []utils.Album) {
 templ AlbumCard(album utils.Album) {
 	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800">
 		<div class="h-30 w-28 relative">
-			<img class="w-full" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
+			<div class="text-center">
+				<img class="inline-block w-[6.75rem] h-[6.75rem] min-h-26 overflow-hidden rounded" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
+			</div>
 			<a
 				href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
 				class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"