diff --git a/internal/templates/sort_filter.templ b/internal/shared/ui/sort_filter.templ
similarity index 98%
rename from internal/templates/sort_filter.templ
rename to internal/shared/ui/sort_filter.templ
index 13243a9..2c59d2a 100644
--- a/internal/templates/sort_filter.templ
+++ b/internal/shared/ui/sort_filter.templ
@@ -1,4 +1,4 @@
-package templates
+package ui
 
 type SortFilterOptions struct {
 	Sort   string // "title", "date", "score"
diff --git a/internal/templates/notifications.templ b/internal/templates/notifications.templ
index 101c39b..0530ada 100644
--- a/internal/templates/notifications.templ
+++ b/internal/templates/notifications.templ
@@ -17,10 +17,9 @@ templ Notifications(watching []WatchingAnimeWithDetails) {
 			<p class="notifications-subtitle">Shows you're currently watching or planning to watch.</p>
 			
 			if len(watching) == 0 {
-				<div class="no-notifications">
-					<p>No airing anime in your watching list.</p>
-					<p class="hint">Add currently airing shows to your watching list to see upcoming episodes here.</p>
-				</div>
+				@ui.EmptyState("No airing anime in your watching list.") {
+					<span style="font-size: var(--text-sm); margin-top: var(--space-sm); display: block;">Add currently airing shows to your watching list to see upcoming episodes here.</span>
+				}
 			} else {
 				<div class="notifications-list">
 					for _, item := range watching {
@@ -52,10 +51,9 @@ func splitUpcomingSeasons(items []database.GetUpcomingSeasonsRow) (airing []data
 
 templ UpcomingSeasonsList(upcomingSeasons []database.GetUpcomingSeasonsRow) {
 	if len(upcomingSeasons) == 0 {
-		<div class="no-notifications">
-			<p>No upcoming seasons for anime you've watched.</p>
-			<p class="hint">As you watch more shows, new seasons will appear here.</p>
-		</div>
+		@ui.EmptyState("No upcoming seasons for anime you've watched.") {
+			<span style="font-size: var(--text-sm); margin-top: var(--space-sm); display: block;">As you watch more shows, new seasons will appear here.</span>
+		}
 	} else {
 		@renderSplitSeasons(upcomingSeasons)
 	}
diff --git a/internal/templates/watchlist.templ b/internal/templates/watchlist.templ
index 9a788aa..3d27524 100644
--- a/internal/templates/watchlist.templ
+++ b/internal/templates/watchlist.templ
@@ -31,7 +31,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
 			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=dropped&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "dropped") }>Dropped</a>
 			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=completed&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "completed") }>Completed</a>
 		</div>
-		@SortFilter(SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
+		@ui.SortFilter(ui.SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
 		if len(entries) == 0 {
 			@ui.EmptyState("Nothing here yet") {
 				if currentStatus == "all" {