diff --git a/web/components/anime/pending.templ b/web/components/anime/pending.templ
index 8b4de59..0937ed8 100644
--- a/web/components/anime/pending.templ
+++ b/web/components/anime/pending.templ
@@ -2,11 +2,11 @@ package anime
 
 import (
 	"fmt"
-	"mal/web/templates"
+	"mal/web/shared/layout"
 )
 
 templ Pending(id int) {
-	@templates.Layout("mal - anime pending", true) {
+	@layout.Layout("mal - anime pending", true) {
 		<div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_300px]">
 			<div class="grid min-w-0 gap-8">
 				<section>
diff --git a/web/components/anime_list.templ b/web/components/anime_list.templ
index 26c2051..d3448c6 100644
--- a/web/components/anime_list.templ
+++ b/web/components/anime_list.templ
@@ -2,7 +2,7 @@ package ui
 
 import (
 	"fmt"
-	"mal/internal/jikan"
+	"mal/integrations/jikan"
 )
 
 templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
diff --git a/web/templates/layout.templ b/web/shared/layout/layout.templ
similarity index 99%
rename from web/templates/layout.templ
rename to web/shared/layout/layout.templ
index 259364a..5eed504 100644
--- a/web/templates/layout.templ
+++ b/web/shared/layout/layout.templ
@@ -1,4 +1,4 @@
-package templates
+package layout
 
 import "mal/web/components/icons"
 
diff --git a/web/templates/anime.templ b/web/templates/anime.templ
index 1f36926..bf6bbc4 100644
--- a/web/templates/anime.templ
+++ b/web/templates/anime.templ
@@ -9,10 +9,11 @@ import (
 	"mal/web/components"
 	watchlistcomponents "mal/web/components/watchlist"
 	"mal/web/shared"
+	"mal/web/shared/layout"
 )
 
 templ AnimeDetails(anime jikan.Anime, currentStatus string, nextEpisode int) {
-	@Layout("mal - " + anime.DisplayTitle(), true) {
+	@layout.Layout("mal - " + anime.DisplayTitle(), true) {
 		<div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_300px]">
 			<div class="grid min-w-0 gap-8">
 				<div class="grid gap-5 lg:grid-cols-[220px_minmax(0,1fr)]">
diff --git a/web/templates/auth.templ b/web/templates/auth.templ
index 708dee4..5df9ef9 100644
--- a/web/templates/auth.templ
+++ b/web/templates/auth.templ
@@ -1,7 +1,9 @@
 package templates
 
+import "mal/web/shared/layout"
+
 templ Login(formError string, username string) {
-	@Layout("Login", false) {
+	@layout.Layout("Login", false) {
 		<div class="w-full max-w-xl">
 			<div class="mx-auto w-full bg-(--panel) p-6">
 				<h2 class="m-0 text-2xl">Sign in</h2>
diff --git a/web/templates/catalog.templ b/web/templates/catalog.templ
index 1628d4c..4f4c84a 100644
--- a/web/templates/catalog.templ
+++ b/web/templates/catalog.templ
@@ -1,11 +1,12 @@
 package templates
 
-import "mal/internal/jikan"
-import "mal/internal/shared/ui"
+import "mal/integrations/jikan"
+import "mal/web/components"
 import "fmt"
+import "mal/web/shared/layout"
 
 templ Catalog() {
-	@Layout("mal - catalog", true) {
+	@layout.Layout("mal - catalog", true) {
 		<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="catalog-content">
 			<div class="col-span-full" hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML">
 				@ui.LoadingIndicator("Loading catalog")
diff --git a/web/templates/continue_watching.templ b/web/templates/continue_watching.templ
index da177cc..627c21a 100644
--- a/web/templates/continue_watching.templ
+++ b/web/templates/continue_watching.templ
@@ -2,12 +2,13 @@ package templates
 
 import (
 	"fmt"
-	"mal/internal/database"
-	"mal/internal/shared/ui"
+	"mal/internal/db"
+	"mal/web/components"
+	"mal/web/shared/layout"
 )
 
-templ ContinueWatching(entries []database.GetContinueWatchingEntriesRow) {
-	@Layout("mal - continue watching", true) {
+templ ContinueWatching(entries []db.GetContinueWatchingEntriesRow) {
+	@layout.Layout("mal - continue watching", true) {
 		<div class="grid gap-4">
 			<h1>Continue watching</h1>
 			<p class="m-0 text-sm text-(--text-muted)">Pick up where you left off.</p>
@@ -53,7 +54,7 @@ templ ContinueWatching(entries []database.GetContinueWatchingEntriesRow) {
 	}
 }
 
-func continueWatchingURL(entry database.GetContinueWatchingEntriesRow) string {
+func continueWatchingURL(entry db.GetContinueWatchingEntriesRow) string {
 	episode := 1
 	if entry.CurrentEpisode.Valid && entry.CurrentEpisode.Int64 > 0 {
 		episode = int(entry.CurrentEpisode.Int64)
@@ -62,6 +63,6 @@ func continueWatchingURL(entry database.GetContinueWatchingEntriesRow) string {
 	return fmt.Sprintf("/watch/%d/%d", entry.AnimeID, episode)
 }
 
-func displayContinueWatchingTitle(entry database.GetContinueWatchingEntriesRow) string {
-	return database.DisplayTitle(entry.TitleEnglish, entry.TitleJapanese, entry.TitleOriginal)
+func displayContinueWatchingTitle(entry db.GetContinueWatchingEntriesRow) string {
+	return db.DisplayTitle(entry.TitleEnglish, entry.TitleJapanese, entry.TitleOriginal)
 }
diff --git a/web/templates/discovery.templ b/web/templates/discovery.templ
index d72d2ba..fb5f3b6 100644
--- a/web/templates/discovery.templ
+++ b/web/templates/discovery.templ
@@ -1,11 +1,12 @@
 package templates
 
-import "mal/internal/jikan"
-import "mal/internal/shared/ui"
+import "mal/integrations/jikan"
+import "mal/web/components"
 import "fmt"
+import "mal/web/shared/layout"
 
 templ Discover() {
-	@Layout("mal - discover", true) {
+	@layout.Layout("mal - discover", true) {
 		<div class="grid gap-4">
 			<div class="grid gap-4">
 				<h1>Discover</h1>
diff --git a/web/templates/index.templ b/web/templates/index.templ
index 4ccf679..70f0d08 100644
--- a/web/templates/index.templ
+++ b/web/templates/index.templ
@@ -2,13 +2,14 @@ package templates
 
 import (
 	"fmt"
-	"mal/internal/jikan"
-	"mal/internal/shared/ui"
+	"mal/integrations/jikan"
+	"mal/web/components"
+	"mal/web/shared/layout"
 	"net/url"
 )
 
 templ Search(q string) {
-	@Layout("mal - search", true) {
+	@layout.Layout("mal - search", true) {
 		if q != "" {
 			<div id="loading" class="hidden htmx-request:inline-flex">
 				@ui.LoadingIndicator("Searching...")
diff --git a/web/templates/not_found.templ b/web/templates/not_found.templ
index 5930223..9c76ef5 100644
--- a/web/templates/not_found.templ
+++ b/web/templates/not_found.templ
@@ -1,7 +1,9 @@
 package templates
 
+import "mal/web/shared/layout"
+
 templ NotFoundPage() {
-	@Layout("mal - not found", false) {
+	@layout.Layout("mal - not found", false) {
 		<section class="w-full max-w-3xl min-h-dvh mx-auto grid content-center justify-items-center gap-3 px-7 py-8 text-center">
 			<p class="m-0 text-6xl leading-none tracking-wider text-(--text-muted) sm:text-7xl md:text-8xl lg:text-9xl">404</p>
 			<h1 class="m-0 text-3xl sm:text-4xl md:text-5xl">Page not found</h1>
diff --git a/web/templates/studio.templ b/web/templates/studio.templ
index 6c28e42..619ca8c 100644
--- a/web/templates/studio.templ
+++ b/web/templates/studio.templ
@@ -6,10 +6,11 @@ import (
 	"mal/integrations/jikan"
 	"mal/web/components"
 	"mal/web/shared"
+	"mal/web/shared/layout"
 )
 
 templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNext bool, nextPage int) {
-	@Layout("mal - "+shared.GetProducerName(producer), true) {
+	@layout.Layout("mal - "+shared.GetProducerName(producer), true) {
 		<div class="grid gap-5">
 			<div class="grid gap-4 bg-(--panel) p-4">
 				<div class="flex items-start gap-4">
diff --git a/web/templates/watch.templ b/web/templates/watch.templ
index 7f03950..848f4af 100644
--- a/web/templates/watch.templ
+++ b/web/templates/watch.templ
@@ -9,10 +9,11 @@ import (
 	"mal/web/components/watch"
 	"mal/web/components/watchlist"
 	"mal/web/shared"
+	"mal/web/shared/layout"
 )
 
 templ WatchPage(anime jikan.Anime, data shared.WatchPageData) {
-	@Layout(fmt.Sprintf("%s - episode %s", anime.DisplayTitle(), data.CurrentEpisode), true) {
+	@layout.Layout(fmt.Sprintf("%s - episode %s", anime.DisplayTitle(), data.CurrentEpisode), true) {
 		<div class="w-full overflow-x-clip">
 			<div class="mx-auto grid w-full gap-4 lg:gap-5 lg:grid-cols-[220px_minmax(0,1fr)_250px] xl:grid-cols-[240px_minmax(0,1fr)_280px]">
 			<!-- Left sidebar: Episodes -->
diff --git a/web/templates/watchlist.templ b/web/templates/watchlist.templ
index 3800b47..5889a6b 100644
--- a/web/templates/watchlist.templ
+++ b/web/templates/watchlist.templ
@@ -7,16 +7,17 @@ import (
 	"mal/web/components"
 	"mal/web/components/watchlist"
 	"mal/web/shared"
+	"mal/web/shared/layout"
 )
 
 templ Watchlist(
 	entries []db.GetUserWatchListRow,
-	layout string,
+	viewLayout string,
 	currentStatus string,
 	sortBy string,
 	sortOrder string,
 ) {
-	@Layout("mal - watchlist", true) {
+	@layout.Layout("mal - watchlist", true) {
 		<div
 			class="mb-4 flex items-end justify-between gap-4 max-lg:flex-col max-lg:items-start"
 		>
@@ -60,14 +61,14 @@ templ Watchlist(
 					class="flex flex-wrap gap-2 max-md:flex-nowrap max-md:overflow-x-auto max-md:pb-1"
 				>
 					<a
-						href={ templ.URL(shared.WatchlistURL("grid", currentStatus, sortBy, sortOrder)) }
-						class={ shared.TabClass(layout == "grid") }
-					>
-						Grid
-					</a>
-					<a
-						href={ templ.URL(shared.WatchlistURL("table", currentStatus, sortBy, sortOrder)) }
-						class={ shared.TabClass(layout == "table") }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "all", sortBy, sortOrder)) }
+					class={ shared.TabClass(viewLayout == "grid") }
+				>
+					Grid
+				</a>
+				<a
+					href={ templ.URL(shared.WatchlistURL(viewLayout, "table", sortBy, sortOrder)) }
+					class={ shared.TabClass(viewLayout == "table") }
 					>
 						Table
 					</a>
@@ -78,48 +79,48 @@ templ Watchlist(
 			class="mb-3 flex flex-wrap gap-2 max-md:flex-nowrap max-md:overflow-x-auto max-md:pb-1"
 		>
 			<a
-				href={ templ.URL(shared.WatchlistURL(layout, "all", sortBy, sortOrder)) }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "all", sortBy, sortOrder)) }
 				class={ shared.TabClass(currentStatus == "all") }
 			>
 				All
 			</a>
 			<a
-				href={ templ.URL(shared.WatchlistURL(layout, "watching", sortBy, sortOrder)) }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "watching", sortBy, sortOrder)) }
 				class={ shared.TabClass(currentStatus == "watching") }
 			>
 				Watching
 			</a>
 			<a
-				href={ templ.URL(shared.WatchlistURL(layout, "on_hold", sortBy, sortOrder)) }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "on_hold", sortBy, sortOrder)) }
 				class={ shared.TabClass(currentStatus == "on_hold") }
 			>
 				On hold
 			</a>
 			<a
-				href={ templ.URL(shared.WatchlistURL(layout, "plan_to_watch", sortBy, sortOrder)) }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "plan_to_watch", sortBy, sortOrder)) }
 				class={ shared.TabClass(currentStatus == "plan_to_watch") }
 			>
 				Plan to watch
 			</a>
 			<a
-				href={ templ.URL(shared.WatchlistURL(layout, "dropped", sortBy, sortOrder)) }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "dropped", sortBy, sortOrder)) }
 				class={ shared.TabClass(currentStatus == "dropped") }
 			>
 				Dropped
 			</a>
 			<a
-				href={ templ.URL(shared.WatchlistURL(layout, "completed", sortBy, sortOrder)) }
+				href={ templ.URL(shared.WatchlistURL(viewLayout, "completed", sortBy, sortOrder)) }
 				class={ shared.TabClass(currentStatus == "completed") }
 			>
 				Completed
 			</a>
 		</div>
-		@components.SortFilter(components.SortFilterOptions{
-			Sort:   sortBy,
-			Order:  sortOrder,
-			View:   layout,
-			Status: currentStatus,
-		})
+	@components.SortFilter(components.SortFilterOptions{
+		Sort:   sortBy,
+		Order:  sortOrder,
+		View:   viewLayout,
+		Status: currentStatus,
+	})
 		if len(entries) == 0 {
 			@components.EmptyState("Nothing here yet") {
 				if currentStatus == "all" {
@@ -129,7 +130,7 @@ templ Watchlist(
 				}
 			}
 		} else {
-			if layout == "grid" {
+			if viewLayout == "grid" {
 				<div
 					class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5"
 				>