diff --git a/src/API/API.ts b/src/API/API.ts
index 659cfef..c39811d 100644
--- a/src/API/API.ts
+++ b/src/API/API.ts
@@ -8,11 +8,15 @@ import {
 	duration,
 	isPaused,
 	plugin,
+	volume as volumeStore,
 } from "src/store";
 import { get } from "svelte/store";
 import encodePodnotesURI from "src/utility/encodePodnotesURI";
 import { isLocalFile } from "src/utility/isLocalFile";
 
+const clampVolume = (value: number): number =>
+	Math.min(1, Math.max(0, value));
+
 export class API implements IAPI {
 	public get podcast(): Episode {
 		return get(currentEpisode);
@@ -34,6 +38,14 @@ export class API implements IAPI {
 		return !get(isPaused);
 	}
 
+	public get volume(): number {
+		return get(volumeStore);
+	}
+
+	public set volume(value: number) {
+		volumeStore.set(clampVolume(value));
+	}
+
 	/**
 	 * Gets the current time in the given moment format.
 	 * @param format Moment format.
diff --git a/src/API/IAPI.ts b/src/API/IAPI.ts
index 48f3412..ac68698 100644
--- a/src/API/IAPI.ts
+++ b/src/API/IAPI.ts
@@ -5,6 +5,7 @@ export interface IAPI {
 	readonly isPlaying: boolean;
 	readonly length: number;
 	currentTime: number;
+	volume: number;
 
 	getPodcastTimeFormatted(
 		format: string,
diff --git a/src/constants.ts b/src/constants.ts
index 5d51db2..315a8c3 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -33,6 +33,8 @@ export const DEFAULT_SETTINGS: IPodNotesSettings = {
 	savedFeeds: {},
 	podNotes: {},
 	defaultPlaybackRate: 1,
+	defaultVolume: 1,
+	hidePlayedEpisodes: false,
 	playedEpisodes: {},
 	favorites: {
 		...FAVORITES_SETTINGS,
diff --git a/src/main.ts b/src/main.ts
index 7955843..87f0d5f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,8 @@ import {
 	playlists,
 	queue,
 	savedFeeds,
+	hidePlayedEpisodes,
+	volume,
 } from "src/store";
 import { Plugin, type WorkspaceLeaf } from "obsidian";
 import { API } from "src/API/API";
@@ -28,6 +30,7 @@ import { QueueController } from "./store_controllers/QueueController";
 import { FavoritesController } from "./store_controllers/FavoritesController";
 import type { Episode } from "./types/Episode";
 import CurrentEpisodeController from "./store_controllers/CurrentEpisodeController";
+import { HidePlayedEpisodesController } from "./store_controllers/HidePlayedEpisodesController";
 import { TimestampTemplateEngine } from "./TemplateEngine";
 import createPodcastNote from "./createPodcastNote";
 import downloadEpisodeWithNotice from "./downloadEpisode";
@@ -40,6 +43,7 @@ import getContextMenuHandler from "./getContextMenuHandler";
 import getUniversalPodcastLink from "./getUniversalPodcastLink";
 import type { IconType } from "./types/IconType";
 import { TranscriptionService } from "./services/TranscriptionService";
+import type { Unsubscriber } from "svelte/store";
 
 export default class PodNotes extends Plugin implements IPodNotes {
 	public api!: IAPI;
@@ -64,10 +68,16 @@ export default class PodNotes extends Plugin implements IPodNotes {
 	private downloadedEpisodesController?: StoreController<{
 		[podcastName: string]: DownloadedEpisode[];
 	}>;
+	private hidePlayedEpisodesController?: StoreController<boolean>;
 	private transcriptionService?: TranscriptionService;
+	private volumeUnsubscribe?: Unsubscriber;
 
 	private maxLayoutReadyAttempts = 10;
 	private layoutReadyAttempts = 0;
+	private isReady = false;
+	private pendingSave: IPodNotesSettings | null = null;
+	private saveScheduled = false;
+	private saveChain: Promise<void> = Promise.resolve();
 
 	override async onload() {
 		plugin.set(this);
@@ -84,6 +94,10 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		if (this.settings.currentEpisode) {
 			currentEpisode.set(this.settings.currentEpisode);
 		}
+		hidePlayedEpisodes.set(this.settings.hidePlayedEpisodes);
+		volume.set(
+			Math.min(1, Math.max(0, this.settings.defaultVolume ?? 1)),
+		);
 
 		this.playedEpisodeController = new EpisodeStatusController(
 			playedEpisodes,
@@ -102,8 +116,27 @@ export default class PodNotes extends Plugin implements IPodNotes {
 			currentEpisode,
 			this,
 		).on();
+		this.hidePlayedEpisodesController = new HidePlayedEpisodesController(
+			hidePlayedEpisodes,
+			this,
+		).on();
 
 		this.api = new API();
+		this.volumeUnsubscribe = volume.subscribe((value) => {
+			const clamped = Math.min(1, Math.max(0, value));
+
+			if (clamped !== value) {
+				volume.set(clamped);
+				return;
+			}
+
+			if (clamped === this.settings.defaultVolume) {
+				return;
+			}
+
+			this.settings.defaultVolume = clamped;
+			void this.saveSettings();
+		});
 
 		this.addCommand({
 			id: "podnotes-show-leaf",
@@ -291,6 +324,8 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		);
 
 		this.registerEvent(getContextMenuHandler(this.app));
+
+		this.isReady = true;
 	}
 
 	onLayoutReady(): void {
@@ -337,6 +372,8 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		this.localFilesController?.off();
 		this.downloadedEpisodesController?.off();
 		this.currentEpisodeController?.off();
+		this.hidePlayedEpisodesController?.off();
+		this.volumeUnsubscribe?.();
 	}
 
 	async loadSettings() {
@@ -350,6 +387,45 @@ export default class PodNotes extends Plugin implements IPodNotes {
 	}
 
 	async saveSettings() {
-		await this.saveData(this.settings);
+		if (!this.isReady) return;
+
+		this.pendingSave = this.cloneSettings();
+
+		if (this.saveScheduled) {
+			return this.saveChain;
+		}
+
+		this.saveScheduled = true;
+
+		this.saveChain = this.saveChain
+			.then(async () => {
+				while (this.pendingSave) {
+					const snapshot = this.pendingSave;
+					this.pendingSave = null;
+					await this.saveData(snapshot);
+				}
+			})
+			.catch((error) => {
+				console.error("PodNotes: failed to save settings", error);
+			})
+			.finally(() => {
+				this.saveScheduled = false;
+
+				// If a save was requested while we were saving, run again.
+				if (this.pendingSave) {
+					void this.saveSettings();
+				}
+			});
+
+		return this.saveChain;
+	}
+
+	private cloneSettings(): IPodNotesSettings {
+		// structuredClone is available in Obsidian's Electron runtime; fallback for safety.
+		if (typeof structuredClone === "function") {
+			return structuredClone(this.settings);
+		}
+
+		return JSON.parse(JSON.stringify(this.settings)) as IPodNotesSettings;
 	}
 }
diff --git a/src/services/TranscriptionService.ts b/src/services/TranscriptionService.ts
index 87d8b83..2679324 100644
--- a/src/services/TranscriptionService.ts
+++ b/src/services/TranscriptionService.ts
@@ -56,18 +56,15 @@ export class TranscriptionService {
 	private readonly CHUNK_SIZE_BYTES = 20 * 1024 * 1024;
 	private readonly WAV_HEADER_SIZE = 44;
 	private readonly PCM_BYTES_PER_SAMPLE = 2;
-	private isTranscribing = false;
+	private readonly MAX_CONCURRENT_TRANSCRIPTIONS = 2;
+	private pendingEpisodes: Episode[] = [];
+	private activeTranscriptions = new Set<string>();
 
 	constructor(plugin: PodNotes) {
 		this.plugin = plugin;
 	}
 
 	async transcribeCurrentEpisode(): Promise<void> {
-		if (this.isTranscribing) {
-			new Notice("A transcription is already in progress.");
-			return;
-		}
-
 		if (!this.plugin.settings.openAIApiKey?.trim()) {
 			new Notice(
 				"Please add your OpenAI API key in the transcript settings first.",
@@ -81,7 +78,6 @@ export class TranscriptionService {
 			return;
 		}
 
-		// Check if transcription file already exists
 		const transcriptPath = FilePathTemplateEngine(
 			this.plugin.settings.transcript.path,
 			currentEpisode,
@@ -95,13 +91,72 @@ export class TranscriptionService {
 			return;
 		}
 
-		this.isTranscribing = true;
-		const notice = TimerNotice("Transcription", "Preparing to transcribe...");
+		const episodeKey = this.getEpisodeKey(currentEpisode);
+		const isAlreadyQueued =
+			this.pendingEpisodes.some(
+				(episode) => this.getEpisodeKey(episode) === episodeKey,
+			) || this.activeTranscriptions.has(episodeKey);
+
+		if (isAlreadyQueued) {
+			new Notice("This episode is already queued or transcribing.");
+			return;
+		}
+
+		this.pendingEpisodes.push(currentEpisode);
+		new Notice(
+			`Queued "${currentEpisode.title}" for transcription. It will start automatically.`,
+		);
+		this.drainQueue();
+	}
+
+	private drainQueue(): void {
+		while (
+			this.activeTranscriptions.size < this.MAX_CONCURRENT_TRANSCRIPTIONS &&
+			this.pendingEpisodes.length > 0
+		) {
+			const nextEpisode = this.pendingEpisodes.shift();
+			if (!nextEpisode) {
+				return;
+			}
+
+			const episodeKey = this.getEpisodeKey(nextEpisode);
+			this.activeTranscriptions.add(episodeKey);
+
+			void this.transcribeEpisode(nextEpisode).finally(() => {
+				this.activeTranscriptions.delete(episodeKey);
+				this.drainQueue();
+			});
+		}
+	}
+
+	private getEpisodeKey(episode: Episode): string {
+		return `${episode.podcastName}:${episode.title}`;
+	}
+
+	private async transcribeEpisode(episode: Episode): Promise<void> {
+		const notice = TimerNotice(
+			`Transcription: ${episode.title}`,
+			"Preparing to transcribe...",
+		);
 
 		try {
+			const transcriptPath = FilePathTemplateEngine(
+				this.plugin.settings.transcript.path,
+				episode,
+			);
+			const existingFile =
+				this.plugin.app.vault.getAbstractFileByPath(transcriptPath);
+			if (existingFile instanceof TFile) {
+				notice.stop();
+				notice.update(
+					`Transcript already exists - skipped (${transcriptPath}).`,
+				);
+				return;
+			}
+
 			notice.update("Downloading episode...");
 			const downloadPath = await downloadEpisode(
-				currentEpisode,
+				episode,
 				this.plugin.settings.download.path,
 			);
 			const podcastFile =
@@ -127,16 +182,17 @@ export class TranscriptionService {
 			const transcription = await this.transcribeChunks(files, notice.update);
 
 			notice.update("Saving transcription...");
-			await this.saveTranscription(currentEpisode, transcription);
+			await this.saveTranscription(episode, transcription);
 
 			notice.stop();
 			notice.update("Transcription completed and saved.");
 		} catch (error) {
 			console.error("Transcription error:", error);
 			const message = error instanceof Error ? error.message : String(error);
+			notice.stop();
 			notice.update(`Transcription failed: ${message}`);
 		} finally {
-			this.isTranscribing = false;
+			notice.stop();
 			setTimeout(() => notice.hide(), 5000);
 		}
 	}
diff --git a/src/store/index.ts b/src/store/index.ts
index 2acee09..d42dcd2 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,4 +1,4 @@
-import { get, writable } from "svelte/store";
+import { get, readable, writable } from "svelte/store";
 import type PodNotes from "src/main";
 import type { Episode } from "src/types/Episode";
 import type { PlayedEpisode } from "src/types/PlayedEpisode";
@@ -12,6 +12,8 @@ import type { LocalEpisode } from "src/types/LocalEpisode";
 export const plugin = writable<PodNotes>();
 export const currentTime = writable<number>(0);
 export const duration = writable<number>(0);
+export const volume = writable<number>(1);
+export const hidePlayedEpisodes = writable<boolean>(false);
 
 export const currentEpisode = (() => {
 	const store = writable<Episode>();
@@ -101,6 +103,170 @@ export const savedFeeds = writable<{ [podcastName: string]: PodcastFeed }>({});
 
 export const episodeCache = writable<{ [podcastName: string]: Episode[] }>({});
 
+const LATEST_EPISODES_PER_FEED = 10;
+
+type LatestEpisodesByFeed = Map<string, Episode[]>;
+type FeedEpisodeSources = Map<string, Episode[]>;
+
+function getEpisodeTimestamp(episode?: Episode): number {
+	if (!episode?.episodeDate) return 0;
+
+	return Number(episode.episodeDate);
+}
+
+function getLatestEpisodesForFeed(episodes: Episode[]): Episode[] {
+	if (!episodes?.length) return [];
+
+	return episodes
+		.slice(0, LATEST_EPISODES_PER_FEED)
+		.sort((a, b) => getEpisodeTimestamp(b) - getEpisodeTimestamp(a));
+}
+
+function shallowEqualEpisodes(a?: Episode[], b?: Episode[]): boolean {
+	if (!a || !b || a.length !== b.length) return false;
+
+	for (let i = 0; i < a.length; i += 1) {
+		if (a[i] !== b[i]) return false;
+	}
+
+	return true;
+}
+
+const latestEpisodeIdentifier = (episode: Episode): string =>
+	`${episode.podcastName}::${episode.title}`;
+
+function insertEpisodeSorted(
+	episodes: Episode[],
+	episodeToInsert: Episode,
+	limit: number,
+): Episode[] {
+	const nextEpisodes = [...episodes];
+	const value = getEpisodeTimestamp(episodeToInsert);
+	let low = 0;
+	let high = nextEpisodes.length;
+
+	while (low < high) {
+		const mid = (low + high) >> 1;
+		const midValue = getEpisodeTimestamp(nextEpisodes[mid]);
+
+		if (value > midValue) {
+			high = mid;
+		} else {
+			low = mid + 1;
+		}
+	}
+
+	nextEpisodes.splice(low, 0, episodeToInsert);
+
+	if (nextEpisodes.length > limit) {
+		nextEpisodes.length = limit;
+	}
+
+	return nextEpisodes;
+}
+
+function removeFeedEntries(
+	currentLatest: Episode[],
+	feedEpisodes: Episode[] | undefined = [],
+): Episode[] {
+	if (!feedEpisodes?.length) {
+		return currentLatest;
+	}
+
+	const feedKeys = new Set(feedEpisodes.map(latestEpisodeIdentifier));
+
+	return currentLatest.filter(
+		(episode) => !feedKeys.has(latestEpisodeIdentifier(episode)),
+	);
+}
+
+function updateLatestEpisodesForFeed(
+	currentLatest: Episode[],
+	previousFeedEpisodes: Episode[] | undefined,
+	nextFeedEpisodes: Episode[] | undefined,
+	limit: number,
+): Episode[] {
+	let nextLatest = removeFeedEntries(currentLatest, previousFeedEpisodes);
+
+	if (!nextFeedEpisodes?.length) {
+		return nextLatest;
+	}
+
+	for (const episode of nextFeedEpisodes) {
+		nextLatest = insertEpisodeSorted(nextLatest, episode, limit);
+	}
+
+	return nextLatest;
+}
+
+export const latestEpisodes = readable<Episode[]>([], (set) => {
+	let latestByFeed: LatestEpisodesByFeed = new Map();
+	let feedSources: FeedEpisodeSources = new Map();
+	let mergedLatest: Episode[] = [];
+
+	const unsubscribe = episodeCache.subscribe((cache) => {
+		const cacheEntries = Object.entries(cache);
+		const feedCount = cacheEntries.length;
+		const latestLimit = Math.max(
+			1,
+			LATEST_EPISODES_PER_FEED * Math.max(feedCount, 1),
+		);
+
+		let changed = false;
+		let nextMerged = mergedLatest;
+		const nextSources: FeedEpisodeSources = new Map();
+		const nextLatestByFeed: LatestEpisodesByFeed = new Map();
+
+		for (const [feedTitle, episodes] of cacheEntries) {
+			nextSources.set(feedTitle, episodes);
+			const previousSource = feedSources.get(feedTitle);
+			const previousLatest = latestByFeed.get(feedTitle) || [];
+
+			const nextLatestForFeed =
+				previousSource === episodes && previousLatest
+					? previousLatest
+					: getLatestEpisodesForFeed(episodes);
+
+			nextLatestByFeed.set(feedTitle, nextLatestForFeed);
+
+			if (!shallowEqualEpisodes(previousLatest, nextLatestForFeed)) {
+				changed = true;
+				nextMerged = updateLatestEpisodesForFeed(
+					nextMerged,
+					previousLatest,
+					nextLatestForFeed,
+					latestLimit,
+				);
+			}
+		}
+
+		for (const feedTitle of latestByFeed.keys()) {
+			if (!nextSources.has(feedTitle)) {
+				changed = true;
+				nextMerged = removeFeedEntries(
+					nextMerged,
+					latestByFeed.get(feedTitle),
+				);
+			}
+		}
+
+		feedSources = nextSources;
+		latestByFeed = nextLatestByFeed;
+
+		if (changed) {
+			mergedLatest = nextMerged;
+			set(mergedLatest);
+		}
+	});
+
+	return () => {
+		latestByFeed.clear();
+		feedSources.clear();
+		mergedLatest = [];
+		unsubscribe();
+	};
+});
+
 export const downloadedEpisodes = (() => {
 	const store = writable<{ [podcastName: string]: DownloadedEpisode[] }>({});
 	const { subscribe, update, set } = store;
diff --git a/src/store_controllers/HidePlayedEpisodesController.ts b/src/store_controllers/HidePlayedEpisodesController.ts
new file mode 100644
index 0000000..7f6736d
--- /dev/null
+++ b/src/store_controllers/HidePlayedEpisodesController.ts
@@ -0,0 +1,19 @@
+import type { Writable } from "svelte/store";
+import type { IPodNotes } from "../types/IPodNotes";
+import { StoreController } from "../types/StoreController";
+
+export class HidePlayedEpisodesController extends StoreController<boolean> {
+	private plugin: IPodNotes;
+
+	constructor(store: Writable<boolean>, plugin: IPodNotes) {
+		super(store);
+		this.plugin = plugin;
+	}
+
+	protected override onChange(value: boolean) {
+		if (this.plugin.settings.hidePlayedEpisodes === value) return;
+
+		this.plugin.settings.hidePlayedEpisodes = value;
+		this.plugin.saveSettings();
+	}
+}
diff --git a/src/types/IPodNotesSettings.ts b/src/types/IPodNotesSettings.ts
index 78802cf..70b80dc 100644
--- a/src/types/IPodNotesSettings.ts
+++ b/src/types/IPodNotesSettings.ts
@@ -9,6 +9,8 @@ export interface IPodNotesSettings {
 	savedFeeds: { [podcastName: string]: PodcastFeed };
 	podNotes: { [episodeName: string]: PodNote };
 	defaultPlaybackRate: number;
+	defaultVolume: number;
+	hidePlayedEpisodes: boolean;
 	playedEpisodes: { [episodeName: string]: PlayedEpisode };
 	skipBackwardLength: number;
 	skipForwardLength: number;
diff --git a/src/ui/PodcastView/EpisodeList.svelte b/src/ui/PodcastView/EpisodeList.svelte
index 3fa7312..16a418c 100644
--- a/src/ui/PodcastView/EpisodeList.svelte
+++ b/src/ui/PodcastView/EpisodeList.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 	import type { Episode } from "src/types/Episode";
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher } from "svelte";
 	import EpisodeListItem from "./EpisodeListItem.svelte";
-	import { playedEpisodes } from "src/store";
+	import { hidePlayedEpisodes, playedEpisodes } from "src/store";
 	import Icon from "../obsidian/Icon.svelte";
 	import Text from "../obsidian/Text.svelte";
+	import Loading from "./Loading.svelte";
 
 	export let episodes: Episode[] = [];
 	export let showThumbnails: boolean = false;
 	export let showListMenu: boolean = true;
-	let hidePlayedEpisodes: boolean = false;
+	export let isLoading: boolean = false;
 	let searchInputQuery: string = "";
 
 	const dispatch = createEventDispatcher();
@@ -40,7 +41,7 @@
 			<div class="episode-list-search">
 				<Text
 					bind:value={searchInputQuery}
-					on:change={forwardSearchInput}
+					on:input={forwardSearchInput}
 					placeholder="Search episodes"
 					style={{
 						width: "100%",
@@ -48,11 +49,11 @@
 				/>
 			</div>
 			<Icon
-				icon={hidePlayedEpisodes ? "eye-off" : "eye"}
+				icon={$hidePlayedEpisodes ? "eye-off" : "eye"}
 				size={25}
-				label={hidePlayedEpisodes ? "Show played episodes" : "Hide played episodes"}
-				pressed={hidePlayedEpisodes}
-				on:click={() => (hidePlayedEpisodes = !hidePlayedEpisodes)}
+				label={$hidePlayedEpisodes ? "Show played episodes" : "Hide played episodes"}
+				pressed={$hidePlayedEpisodes}
+				on:click={() => hidePlayedEpisodes.update((value) => !value)}
 			/>
 			<Icon
 				icon="refresh-cw"
@@ -64,12 +65,18 @@
 	{/if}
 
 	<div class="podcast-episode-list">
-		{#if episodes.length === 0}
+		{#if isLoading}
+			<div class="episode-list-loading" role="status" aria-live="polite">
+				<Loading />
+				<span>Fetching episodes...</span>
+			</div>
+		{/if}
+		{#if episodes.length === 0 && !isLoading}
 			<p>No episodes found.</p>
 		{/if}
-		{#each episodes as episode}
+		{#each episodes as episode (episode.url || episode.streamUrl || `${episode.title}-${episode.episodeDate ?? ""}`)}
 			{@const episodePlayed = $playedEpisodes[episode.title]?.finished}
-			{#if !hidePlayedEpisodes || !episodePlayed}
+			{#if !$hidePlayedEpisodes || !episodePlayed}
 				<EpisodeListItem
 					{episode}
 					episodeFinished={episodePlayed}
@@ -86,17 +93,19 @@
 	.episode-list-view-container {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+		align-items: stretch;
+		justify-content: flex-start;
+		width: 100%;
 	}
 
 	.podcast-episode-list {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+		align-items: stretch;
+		justify-content: flex-start;
 		width: 100%;
 		height: 100%;
+		gap: 0.25rem;
 	}
 
 	.episode-list-menu {
@@ -114,4 +123,13 @@
 		width: 100%;
 		margin-bottom: 0.5rem;
 	}
+
+	.episode-list-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		padding: 1rem 0;
+		color: var(--text-muted);
+	}
 </style>
diff --git a/src/ui/PodcastView/EpisodeListItem.svelte b/src/ui/PodcastView/EpisodeListItem.svelte
index 54d440f..efb5664 100644
--- a/src/ui/PodcastView/EpisodeListItem.svelte
+++ b/src/ui/PodcastView/EpisodeListItem.svelte
@@ -8,6 +8,12 @@
 	export let showEpisodeImage: boolean = false;
 
 	const dispatch = createEventDispatcher();
+	const dateFormatter = new Intl.DateTimeFormat("en-GB", {
+		day: "2-digit",
+		month: "long",
+		year: "numeric"
+	});
+	const formattedDateCache = new Map<string, string>();
 
 	function onClickEpisode() {
 		dispatch("clickEpisode", { episode });
@@ -17,13 +23,33 @@
 		dispatch("contextMenu", { episode, event });
 	}
 
-	let _date: Date;
-	let date: string;
+	function parseEpisodeDate(rawDate?: Date | string): Date | null {
+		if (!rawDate) return null;
+		const parsedDate = new Date(rawDate);
+		return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+	}
+
+	function getCacheKey(ep: Episode, parsedDate: Date): string {
+		const identifier = ep.url ?? ep.streamUrl ?? ep.title ?? "episode";
+		return `${identifier}|${parsedDate.getTime()}`;
+	}
+
+	function formatEpisodeDate(ep: Episode): string {
+		const parsedDate = parseEpisodeDate(ep?.episodeDate);
+		if (!parsedDate) return "";
 
-	$: {
-		_date = new Date(episode.episodeDate || "");
-		date = window.moment(_date).format("DD MMMM YYYY");
+		const cacheKey = getCacheKey(ep, parsedDate);
+		const cachedDate = formattedDateCache.get(cacheKey);
+		if (cachedDate) return cachedDate;
+
+		const formattedDate = dateFormatter.format(parsedDate).toUpperCase();
+		formattedDateCache.set(cacheKey, formattedDate);
+		return formattedDate;
 	}
+
+	let date: string = "";
+
+	$: date = formatEpisodeDate(episode);
 </script>
 
 <button
@@ -38,17 +64,16 @@
 				src={episode.artworkUrl}
 				alt={episode.title}
 				fadeIn={true}
+				width="5rem"
+				height="5rem"
 				class="podcast-episode-thumbnail"
 			/>
 		</div>
 	{:else if showEpisodeImage}
 		<div class="podcast-episode-thumbnail-container"></div>
 	{/if}
-	<div 
-		class="podcast-episode-information" 
-		style:flex-basis={"80%"}
-	>
-		<span class="episode-item-date">{date.toUpperCase()}</span>
+	<div class="podcast-episode-information">
+		<span class="episode-item-date">{date}</span>
 		<span class={`episode-item-title ${episodeFinished && "strikeout"}`}>{episode.title}</span>
 	</div>
 </button>
@@ -57,12 +82,13 @@
 	.podcast-episode-item {
 		display: flex;
 		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
+		justify-content: flex-start;
+		align-items: flex-start;
 		padding: 0.5rem;
+		min-height: 5rem;
 		width: 100%;
 		border: solid 1px var(--background-divider);
-		gap: 0.25rem;
+		gap: 0.75rem;
 		background: transparent;
 		text-align: left;
 	}
@@ -84,8 +110,9 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		align-items: left;
-		width: 100%;
+		align-items: flex-start;
+		flex: 1 1 auto;
+		min-width: 0;
 	}
 
 	.episode-item-date {
@@ -93,16 +120,24 @@
 	}
 
 	.podcast-episode-thumbnail-container {
-		flex-basis: 20%;
+		flex: 0 0 5rem;
+		width: 5rem;
+		height: 5rem;
+		max-width: 5rem;
+		max-height: 5rem;
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		background: var(--background-secondary);
+		border-radius: 15%;
+		overflow: hidden;
 	}
 
 	:global(.podcast-episode-thumbnail) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
 		border-radius: 15%;
-		max-width: 5rem;
-		max-height: 5rem;
 		cursor: pointer !important;
 	}
 </style>
diff --git a/src/ui/PodcastView/EpisodePlayer.svelte b/src/ui/PodcastView/EpisodePlayer.svelte
index 63b021a..162b7da 100644
--- a/src/ui/PodcastView/EpisodePlayer.svelte
+++ b/src/ui/PodcastView/EpisodePlayer.svelte
@@ -5,6 +5,7 @@
 		currentEpisode,
 		isPaused,
 		plugin,
+		volume,
 		playedEpisodes,
 		queue,
 		playlists,
@@ -36,9 +37,11 @@
 
 	const offBinding = new CircumentForcedTwoWayBinding();
 	//#endregion
+	const clampVolume = (value: number): number => Math.min(1, Math.max(0, value));
 
 	let isHoveringArtwork: boolean = false;
 	let isLoading: boolean = true;
+	let playerVolume: number = 1;
 
 	function togglePlayback() {
 		isPaused.update((value) => !value);
@@ -84,6 +87,12 @@
 		offBinding.playbackRate = event.detail.value;
 	}
 
+	function onVolumeChange(event: CustomEvent<{ value: number }>) {
+		const newVolume = clampVolume(event.detail.value);
+
+		volume.set(newVolume);
+	}
+
 	function onMetadataLoaded() {
 		isLoading = false;
 
@@ -105,16 +114,7 @@
 
 	let srcPromise: Promise<string> = getSrc($currentEpisode);
 
-	// #region Keep player time and currentTime in sync
-	// Simply binding currentTime to the audio element will result in resets.
-	// Hence the following solution.
-	let playerTime: number = 0;
-
 	onMount(() => {
-		const unsub = currentTime.subscribe((ct) => {
-			playerTime = ct;
-		});
-
 		// This only happens when the player is open and the user downloads the episode via the context menu.
 		// So we want to update the source of the audio element to local file / online stream.
 		const unsubDownloadedSource = downloadedEpisodes.subscribe(_ => {
@@ -125,18 +125,17 @@
 			srcPromise = getSrc($currentEpisode);
 		});
 
+		const unsubVolume = volume.subscribe((value) => {
+			playerVolume = clampVolume(value);
+		});
+
 		return () => {
-			unsub();
 			unsubDownloadedSource();
 			unsubCurrentEpisode();
+			unsubVolume();
 		};
 	});
 
-	$: {
-		currentTime.set(playerTime);
-	}
-	// #endregion
-
 	onDestroy(() => {
 		playedEpisodes.setEpisodeTime($currentEpisode, $currentTime, $duration, ($currentTime === $duration));
 		isPaused.set(true);
@@ -204,9 +203,7 @@
 			{:else}
 				<div
 					class="podcast-artwork-overlay"
-					style={`display: ${
-						isHoveringArtwork || $isPaused ? "block" : "none"
-					}`}
+					class:visible={isHoveringArtwork || $isPaused}
 				>
 					<Icon icon={$isPaused ? "play" : "pause"} clickable={false} />
 				</div>
@@ -220,9 +217,10 @@
 		<audio
 			src={src}
 			bind:duration={$duration}
-			bind:currentTime={playerTime}
+			bind:currentTime={$currentTime}
 			bind:paused={$isPaused}
 			bind:playbackRate={offBinding._playbackRate}
+			bind:volume={playerVolume}
 			on:ended={onEpisodeEnded}
 			on:loadedmetadata={onMetadataLoaded}
 			on:play|preventDefault
@@ -236,9 +234,6 @@
 			on:click={onClickProgressbar}
 			value={$currentTime}
 			max={$duration}
-			style={{
-				"height": "2rem",
-			}}
 		/>
 		<span>{formatSeconds($duration - $currentTime, "HH:mm:ss")}</span>
 	</div>
@@ -248,29 +243,34 @@
 			icon="skip-back"
 			tooltip="Skip backward"
 			on:click={$plugin.api.skipBackward.bind($plugin.api)}
-			style={{
-				margin: "0",
-				cursor: "pointer",
-			}}
+			class="player-control-button"
 		/>
 		<Button
 			icon="skip-forward"
 			tooltip="Skip forward"
 			on:click={$plugin.api.skipForward.bind($plugin.api)}
-			style={{
-				margin: "0",
-				cursor: "pointer",
-			}}
+			class="player-control-button"
 		/>
 	</div>
 
-	<div class="playbackrate-container">
-		<span>{offBinding.playbackRate}x</span>
-		<Slider
-			on:change={onPlaybackRateChange}
-			value={offBinding.playbackRate}
-			limits={[0.5, 3.5, 0.1]}
-		/>
+	<div class="slider-stack">
+		<div class="volume-container">
+			<span>Volume: {Math.round(playerVolume * 100)}%</span>
+			<Slider
+				on:change={onVolumeChange}
+				value={playerVolume}
+				limits={[0, 1, 0.05]}
+			/>
+		</div>
+
+		<div class="playbackrate-container">
+			<span>{offBinding.playbackRate}x</span>
+			<Slider
+				on:change={onPlaybackRateChange}
+				value={offBinding.playbackRate}
+				limits={[0.5, 3.5, 0.1]}
+			/>
+		</div>
 	</div>
 
 	<EpisodeList 
@@ -345,11 +345,22 @@
 
 	:global(.podcast-artwork-overlay) {
 		position: absolute;
+		inset: 0;
+		display: none;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.podcast-artwork-overlay.visible) {
+		display: flex;
 	}
 
 	:global(.podcast-artwork-isloading-overlay) {
 		position: absolute;
-		display: block;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	:global(.podcast-artwork-overlay:hover) {
@@ -374,6 +385,10 @@
 		justify-content: space-around;
 	}
 
+	:global(.episode-player .status-container .progress) {
+		height: var(--episode-player-progress-height, 2rem);
+	}
+
 	:global(.controls-container) {
 		display: flex;
 		align-items: center;
@@ -383,12 +398,24 @@
 		margin-right: 25%;
 	}
 
-	:global(.playbackrate-container) {
+	:global(.player-control-button) {
+		margin: 0;
+		cursor: pointer;
+	}
+
+	:global(.slider-stack) {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		margin-top: auto;
+		margin-bottom: 2.5rem;
+	}
+
+	:global(.playbackrate-container),
+	:global(.volume-container) {
 		display: flex;
 		align-items: center;
 		justify-content: space-around;
-		margin-bottom: 2.5rem;
 		flex-direction: column;
-		margin-top: auto;
 	}
 </style>
diff --git a/src/ui/PodcastView/PodcastGrid.svelte b/src/ui/PodcastView/PodcastGrid.svelte
index 94ef829..1ddad97 100644
--- a/src/ui/PodcastView/PodcastGrid.svelte
+++ b/src/ui/PodcastView/PodcastGrid.svelte
@@ -17,13 +17,13 @@
 
 <div class="podcast-grid">
 	{#if playlists.length > 0}
-		{#each playlists as playlist}
+		{#each playlists as playlist (playlist.name)}
 			<PlaylistCard playlist={playlist} on:clickPlaylist={forwardClickPlaylist} />
 		{/each}
 	{/if}
 
 	{#if feeds.length > 0}
-		{#each feeds as feed}
+		{#each feeds as feed (feed.url)}
 			<PodcastGridCard
 				feed={feed}
 				on:clickPodcast
diff --git a/src/ui/PodcastView/PodcastView.integration.test.ts b/src/ui/PodcastView/PodcastView.integration.test.ts
index 5d7895a..0341fc0 100644
--- a/src/ui/PodcastView/PodcastView.integration.test.ts
+++ b/src/ui/PodcastView/PodcastView.integration.test.ts
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/svelte";
+import { fireEvent, render, screen, waitFor } from "@testing-library/svelte";
 import { get } from "svelte/store";
 import {
 	afterEach,
@@ -144,4 +144,89 @@ describe("PodcastView integration flow", () => {
 			expect.objectContaining({ path: expectedPath }),
 		);
 	});
+
+	test("shows loading state while fetching and streams episodes per feed", async () => {
+		const secondFeed: PodcastFeed = {
+			title: "Second Podcast",
+			url: "https://pod.example.com/feed-two.xml",
+			artworkUrl: "https://pod.example.com/art-two.jpg",
+		};
+
+		const firstEpisode: Episode = {
+			title: "Episode A",
+			streamUrl: "https://pod.example.com/a.mp3",
+			url: "https://pod.example.com/a",
+			description: "Episode A description",
+			content: "<p>Episode A content</p>",
+			podcastName: testFeed.title,
+			artworkUrl: testFeed.artworkUrl,
+			episodeDate: new Date("2024-02-01T00:00:00.000Z"),
+		};
+
+		const secondEpisode: Episode = {
+			title: "Episode B",
+			streamUrl: "https://pod.example.com/b.mp3",
+			url: "https://pod.example.com/b",
+			description: "Episode B description",
+			content: "<p>Episode B content</p>",
+			podcastName: secondFeed.title,
+			artworkUrl: secondFeed.artworkUrl,
+			episodeDate: new Date("2024-01-15T00:00:00.000Z"),
+		};
+
+		let resolveFirstFeed!: (value: Episode[]) => void;
+		let resolveSecondFeed!: (value: Episode[]) => void;
+
+		mockGetEpisodes
+			.mockImplementationOnce(
+				() =>
+					new Promise<Episode[]>((resolve) => {
+						resolveFirstFeed = resolve;
+					}),
+			)
+			.mockImplementationOnce(
+				() =>
+					new Promise<Episode[]>((resolve) => {
+						resolveSecondFeed = resolve;
+					}),
+			);
+
+		plugin.set({
+			settings: {
+				feedCache: {
+					enabled: false,
+					ttlHours: 6,
+				},
+			},
+		} as never);
+
+		savedFeeds.set({
+			[testFeed.title]: testFeed,
+			[secondFeed.title]: secondFeed,
+		});
+		viewState.set(ViewState.EpisodeList);
+
+		render(PodcastView);
+
+		await screen.findByText("Fetching episodes...");
+
+		resolveFirstFeed([firstEpisode]);
+
+		expect(
+			await screen.findByText(firstEpisode.title),
+		).toBeInTheDocument();
+		expect(screen.getByText("Fetching episodes...")).toBeInTheDocument();
+		expect(screen.queryByText(secondEpisode.title)).toBeNull();
+
+		resolveSecondFeed([secondEpisode]);
+
+		expect(
+			await screen.findByText(secondEpisode.title),
+		).toBeInTheDocument();
+		await waitFor(() =>
+			expect(
+				screen.queryByText("Fetching episodes..."),
+			).not.toBeInTheDocument(),
+		);
+	});
 });
diff --git a/src/ui/PodcastView/PodcastView.svelte b/src/ui/PodcastView/PodcastView.svelte
index 64c1c22..b243ff7 100644
--- a/src/ui/PodcastView/PodcastView.svelte
+++ b/src/ui/PodcastView/PodcastView.svelte
@@ -1,37 +1,38 @@
 <script lang="ts">
 	import type { PodcastFeed } from "src/types/PodcastFeed";
 	import PodcastGrid from "./PodcastGrid.svelte";
-import {
-	currentEpisode,
-	savedFeeds,
-	episodeCache,
-	playlists,
-	queue,
-	favorites,
-	localFiles,
-	podcastView,
-	viewState,
-	downloadedEpisodes,
-	plugin,
-} from "src/store";
+	import {
+		currentEpisode,
+		savedFeeds,
+		episodeCache,
+		latestEpisodes as latestEpisodesStore,
+		playlists,
+		queue,
+		favorites,
+		localFiles,
+		podcastView,
+		viewState,
+		downloadedEpisodes,
+		plugin,
+	} from "src/store";
 	import EpisodePlayer from "./EpisodePlayer.svelte";
 	import EpisodeList from "./EpisodeList.svelte";
 	import type { Episode } from "src/types/Episode";
 	import FeedParser from "src/parser/feedParser";
 	import TopBar from "./TopBar.svelte";
 	import { ViewState } from "src/types/ViewState";
-import { onMount } from "svelte";
+	import { onMount } from "svelte";
 	import EpisodeListHeader from "./EpisodeListHeader.svelte";
 	import Icon from "../obsidian/Icon.svelte";
 	import { debounce } from "obsidian";
 	import searchEpisodes from "src/utility/searchEpisodes";
 	import type { Playlist } from "src/types/Playlist";
 	import spawnEpisodeContextMenu from "./spawnEpisodeContextMenu";
-import {
-	getCachedEpisodes,
-	setCachedEpisodes,
-} from "src/services/FeedCacheService";
-import { get } from "svelte/store";
+	import {
+		getCachedEpisodes,
+		setCachedEpisodes,
+	} from "src/services/FeedCacheService";
+	import { get } from "svelte/store";
 
 	let feeds: PodcastFeed[] = [];
 	let selectedFeed: PodcastFeed | null = null;
@@ -39,42 +40,57 @@ import { get } from "svelte/store";
 	let displayedEpisodes: Episode[] = [];
 	let displayedPlaylists: Playlist[] = [];
 	let latestEpisodes: Episode[] = [];
+	let isFetchingEpisodes: boolean = false;
+	let loadingFeeds: Set<string> = new Set();
+	let currentSearchQuery: string = "";
+	let loadingFeedNames: string[] = [];
+	let loadingFeedSummary: string = "";
+
+	$: loadingFeedNames = Array.from(loadingFeeds);
+	$: loadingFeedSummary =
+		loadingFeedNames.length > 3
+			? `${loadingFeedNames.slice(0, 3).join(", ")} +${loadingFeedNames.length - 3} more`
+			: loadingFeedNames.join(", ");
+	$: isFetchingEpisodes = loadingFeedNames.length > 0;
+
+	onMount(() => {
+		const unsubscribePlaylists = playlists.subscribe((pl) => {
+			displayedPlaylists = [$queue, $favorites, $localFiles, ...Object.values(pl)];
+		});
 
-onMount(() => {
-	const unsubscribePlaylists = playlists.subscribe((pl) => {
-		displayedPlaylists = [$queue, $favorites, $localFiles, ...Object.values(pl)];
-	});
-
-	const unsubscribeSavedFeeds = savedFeeds.subscribe((storeValue) => {
-		feeds = Object.values(storeValue);
-	});
-
-	const unsubscribeEpisodeCache = episodeCache.subscribe((cache) => {
-		latestEpisodes = Object.entries(cache)
-			.map(([_, episodes]) => episodes.slice(0, 10))
-			.flat()
-			.sort((a, b) => {
-				if (a.episodeDate && b.episodeDate)
-					return Number(b.episodeDate) - Number(a.episodeDate);
+		const unsubscribeSavedFeeds = savedFeeds.subscribe((storeValue) => {
+			const updatedFeeds = Object.values(storeValue);
+			const previousFeedTitles = new Set(feeds.map((feed) => feed.title));
 
-				return 0;
-			});
-	});
+			feeds = updatedFeeds;
 
-	(async () => {
-		await fetchEpisodesInAllFeeds(feeds);
+			const newFeeds = updatedFeeds.filter(
+				(feed) => !previousFeedTitles.has(feed.title),
+			);
 
-		if (!selectedFeed) {
-			displayedEpisodes = latestEpisodes;
-		}
-	})();
+			if (newFeeds.length > 0) {
+				void fetchEpisodesInAllFeeds(newFeeds);
+			}
+		});
 
-	return () => {
-		unsubscribeEpisodeCache();
-		unsubscribeSavedFeeds();
-		unsubscribePlaylists();
-	};
-});
+		const unsubscribeLatestEpisodes = latestEpisodesStore.subscribe(
+			(episodes) => {
+				latestEpisodes = episodes;
+
+				if (!selectedFeed && !selectedPlaylist) {
+					displayedEpisodes = currentSearchQuery
+						? searchEpisodes(currentSearchQuery, episodes)
+						: episodes;
+				}
+			},
+		);
+
+		return () => {
+			unsubscribeLatestEpisodes();
+			unsubscribeSavedFeeds();
+			unsubscribePlaylists();
+		};
+	});
 
 	async function fetchEpisodes(
 		feed: PodcastFeed,
@@ -129,25 +145,54 @@ onMount(() => {
 		}
 	}
 
+	function setFeedLoading(feedTitle: string, isLoading: boolean) {
+		const updatedLoadingFeeds = new Set(loadingFeeds);
+
+		if (isLoading) {
+			updatedLoadingFeeds.add(feedTitle);
+		} else {
+			updatedLoadingFeeds.delete(feedTitle);
+		}
+
+		loadingFeeds = updatedLoadingFeeds;
+	}
+
 	function fetchEpisodesInAllFeeds(
 		feedsToSearch: PodcastFeed[]
-	): Promise<Episode[]> {
+	): Promise<void> {
+		if (!feedsToSearch.length) return Promise.resolve();
+
 		return Promise.all(
-			feedsToSearch.map((feed) => fetchEpisodes(feed))
-		).then((episodes) => {
-			return episodes.flat();
-		});
+			feedsToSearch.map(async (feed) => {
+				setFeedLoading(feed.title, true);
+
+				try {
+					await fetchEpisodes(feed);
+				} finally {
+					setFeedLoading(feed.title, false);
+				}
+			})
+		).then(() => undefined);
 	}
 
 	async function handleClickPodcast(
 		event: CustomEvent<{ feed: PodcastFeed }>
 	) {
 		const { feed } = event.detail;
-		displayedEpisodes = [];
 
 		selectedFeed = feed;
-		displayedEpisodes = await fetchEpisodes(feed);
+		displayedEpisodes = [];
 		viewState.set(ViewState.EpisodeList);
+		setFeedLoading(feed.title, true);
+
+		try {
+			const episodes = await fetchEpisodes(feed);
+			displayedEpisodes = currentSearchQuery
+				? searchEpisodes(currentSearchQuery, episodes)
+				: episodes;
+		} finally {
+			setFeedLoading(feed.title, false);
+		}
 	}
 
 	function handleClickEpisode(event: CustomEvent<{ episode: Episode }>) {
@@ -166,14 +211,24 @@ onMount(() => {
 	async function handleClickRefresh() {
 		if (!selectedFeed) return;
 
-		displayedEpisodes = await fetchEpisodes(selectedFeed, false);
+		setFeedLoading(selectedFeed.title, true);
+
+		try {
+			const episodes = await fetchEpisodes(selectedFeed, false);
+			displayedEpisodes = currentSearchQuery
+				? searchEpisodes(currentSearchQuery, episodes)
+				: episodes;
+		} finally {
+			setFeedLoading(selectedFeed.title, false);
+		}
 	}
 
 	const handleSearch = debounce((event: CustomEvent<{ query: string }>) => {
 		const { query } = event.detail;
+		currentSearchQuery = query;
 
 		if (selectedFeed) {
-			const episodesInFeed = $episodeCache[selectedFeed.title];
+			const episodesInFeed = $episodeCache[selectedFeed.title] ?? [];
 			displayedEpisodes = searchEpisodes(query, episodesInFeed);
 			return;
 		}
@@ -213,9 +268,25 @@ onMount(() => {
 	{#if $viewState === ViewState.Player}
 		<EpisodePlayer />
 	{:else if $viewState === ViewState.EpisodeList}
+		{#if loadingFeedNames.length > 0}
+			<div class="feed-loading-banner">
+				<div class="feed-loading-spinner">
+					<Icon icon="loader-2" size={18} clickable={false} />
+				</div>
+				<div class="feed-loading-text">
+					<span>
+						Updating {loadingFeedNames.length} feed{loadingFeedNames.length === 1 ? "" : "s"}
+					</span>
+					{#if loadingFeedSummary}
+						<span class="feed-loading-names">{loadingFeedSummary}</span>
+					{/if}
+				</div>
+			</div>
+		{/if}
 		<EpisodeList
 			episodes={displayedEpisodes}
 			showThumbnails={!selectedFeed || !selectedPlaylist}
+			isLoading={isFetchingEpisodes}
 			on:clickEpisode={handleClickEpisode}
 			on:contextMenuEpisode={handleContextMenuEpisode}
 			on:clickRefresh={handleClickRefresh}
@@ -228,16 +299,14 @@ onMount(() => {
 						class="go-back"
 						on:click={() => {
 							selectedFeed = null;
-							displayedEpisodes = latestEpisodes;
+							displayedEpisodes = currentSearchQuery
+								? searchEpisodes(currentSearchQuery, latestEpisodes)
+								: latestEpisodes;
 							viewState.set(ViewState.EpisodeList);
 						}}
 					>
 						<Icon
 							icon={"arrow-left"}
-							style={{
-								display: "flex",
-								"align-items": "center",
-							}}
 							size={20}
 							clickable={false}
 						/> Latest Episodes
@@ -252,23 +321,19 @@ onMount(() => {
 						class="go-back"
 						on:click={() => {
 							selectedPlaylist = null;
-							displayedEpisodes = latestEpisodes;
+							displayedEpisodes = currentSearchQuery
+								? searchEpisodes(currentSearchQuery, latestEpisodes)
+								: latestEpisodes;
 							viewState.set(ViewState.EpisodeList);
 						}}
 					>
 						<Icon
 							icon={"arrow-left"}
-							style={{
-								display: "flex",
-								"align-items": "center",
-							}}
 							size={20}
 							clickable={false}
 						/> Latest Episodes
 					</button>
-					<div
-						style="display: flex; align-items: center; justify-content: center;"
-					>
+					<div class="playlist-header-icon">
 						<Icon
 							icon={selectedPlaylist.icon}
 							size={40}
@@ -298,6 +363,42 @@ onMount(() => {
 		height: 100%;
 	}
 
+	.feed-loading-banner {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		box-sizing: border-box;
+	}
+
+	.feed-loading-spinner {
+		display: inline-flex;
+		animation: spin 1s linear infinite;
+	}
+
+	.feed-loading-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		font-size: 0.9rem;
+	}
+
+	.feed-loading-names {
+		opacity: 0.7;
+		font-size: 0.85rem;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
 	.go-back {
 		display: flex;
 		align-items: center;
@@ -314,4 +415,10 @@ onMount(() => {
 	.go-back:hover {
 		opacity: 1;
 	}
+
+	.playlist-header-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 </style>
diff --git a/src/ui/PodcastView/TopBar.svelte b/src/ui/PodcastView/TopBar.svelte
index 39e2866..feef28c 100644
--- a/src/ui/PodcastView/TopBar.svelte
+++ b/src/ui/PodcastView/TopBar.svelte
@@ -6,6 +6,19 @@
 	export let canShowEpisodeList: boolean = false;
 	export let canShowPlayer: boolean = false;
 
+	const gridTooltip = "Browse podcast grid";
+	const disabledEpisodeTooltip =
+		"Select a podcast or playlist to view its episodes.";
+	const disabledPlayerTooltip =
+		"Start playing an episode to open the player.";
+
+	$: episodeTooltip = canShowEpisodeList
+		? "View episode list"
+		: disabledEpisodeTooltip;
+	$: playerTooltip = canShowPlayer
+		? "Open player"
+		: disabledPlayerTooltip;
+
 	function handleClickMenuItem(newState: ViewState) {
 		if (viewState === newState) return;
 
@@ -29,6 +42,7 @@
         `}
 		aria-label="Podcast grid"
 		aria-pressed={viewState === ViewState.PodcastGrid}
+		title={gridTooltip}
 	>
 		<Icon icon="grid" size={20} clickable={false} />
 	</button>
@@ -38,11 +52,16 @@
 		class={`
             topbar-menu-button
             ${viewState === ViewState.EpisodeList ? "topbar-selected" : ""}
-            ${canShowEpisodeList ? "topbar-selectable" : ""}
+            ${canShowEpisodeList ? "topbar-selectable" : "topbar-disabled"}
         `}
-		aria-label="Episode list"
+		aria-label={
+			canShowEpisodeList
+				? "Episode list"
+				: "Episode list (select a podcast or playlist first)"
+		}
 		aria-pressed={viewState === ViewState.EpisodeList}
 		disabled={!canShowEpisodeList}
+		title={episodeTooltip}
 	>
 		<Icon icon="list-minus" size={20} clickable={false} />
 	</button>
@@ -52,11 +71,16 @@
 		class={`
             topbar-menu-button
             ${viewState === ViewState.Player ? "topbar-selected" : ""}
-            ${canShowPlayer ? "topbar-selectable" : ""}
+            ${canShowPlayer ? "topbar-selectable" : "topbar-disabled"}
         `}
-		aria-label="Player"
+		aria-label={
+			canShowPlayer
+				? "Player"
+				: "Player (start playing an episode to open the player)"
+		}
 		aria-pressed={viewState === ViewState.Player}
 		disabled={!canShowPlayer}
+		title={playerTooltip}
 	>
 		<Icon icon="play" size={20} clickable={false} />
 	</button>
@@ -68,9 +92,12 @@
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.25rem 0.5rem;
 		height: 50px;
 		min-height: 50px;
 		border-bottom: 1px solid var(--background-divider);
+		box-sizing: border-box;
 	}
 
 	.topbar-menu-button {
@@ -78,19 +105,51 @@
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		height: 100%;
-		opacity: 0.1;
-		border: none;
-		background: none;
-		padding: 0;
+		padding: 0.4rem 0.25rem;
+		flex: 1 1 0;
+		border: 1px solid var(--background-modifier-border, #3a3a3a);
+		border-radius: 8px;
+		background: var(--background-secondary, transparent);
+		color: var(--text-muted, #8a8a8a);
+		transition:
+			background-color 120ms ease,
+			border-color 120ms ease,
+			color 120ms ease,
+			box-shadow 120ms ease,
+			opacity 120ms ease;
 	}
 
-	.topbar-selected {
-		opacity: 1 !important;
+	.topbar-menu-button:focus-visible {
+		outline: 2px solid var(--interactive-accent, #5c6bf7);
+		outline-offset: 2px;
 	}
 
 	.topbar-selectable {
 		cursor: pointer;
-		opacity: 0.5;
+		color: var(--text-normal, #e6e6e6);
+		background: var(--background-secondary-alt, rgba(255, 255, 255, 0.02));
+	}
+
+	.topbar-menu-button:hover.topbar-selectable:not(.topbar-selected) {
+		background: var(--background-modifier-hover, rgba(255, 255, 255, 0.06));
+		border-color: var(--interactive-accent, #5c6bf7);
+		color: var(--text-normal, #e6e6e6);
+	}
+
+	.topbar-selected,
+	.topbar-selected:hover {
+		color: var(--text-on-accent, #ffffff);
+		background: var(--interactive-accent, #5c6bf7);
+		border-color: var(--interactive-accent, #5c6bf7);
+		box-shadow: 0 0 0 1px var(--interactive-accent, #5c6bf7);
+	}
+
+	.topbar-disabled,
+	.topbar-menu-button:disabled {
+		cursor: not-allowed;
+		color: var(--text-faint, #a0a0a0);
+		background: var(--background-modifier-border, #3a3a3a);
+		border-style: dashed;
+		opacity: 1;
 	}
 </style>
diff --git a/src/ui/PodcastView/TopBar.test.ts b/src/ui/PodcastView/TopBar.test.ts
index cf441cd..07a5b8c 100644
--- a/src/ui/PodcastView/TopBar.test.ts
+++ b/src/ui/PodcastView/TopBar.test.ts
@@ -15,14 +15,19 @@ describe("TopBar", () => {
 		});
 
 		const grid = getByLabelText("Podcast grid");
-		const episode = getByLabelText("Episode list");
-		const player = getByLabelText("Player");
+		const episode = getByLabelText(/Episode list/);
+		const player = getByLabelText(/Player/);
 
 		expect(grid.className).toContain("topbar-selected");
 		expect(episode.className).toContain("topbar-selectable");
 		expect(episode).not.toBeDisabled();
 		expect(player).toBeDisabled();
 		expect(player.className).not.toContain("topbar-selectable");
+		expect(player.className).toContain("topbar-disabled");
+		expect(player.getAttribute("title")).toBe(
+			"Start playing an episode to open the player."
+		);
+		expect(episode.getAttribute("title")).toBe("View episode list");
 	});
 
 	test("activates episode list when clicked", async () => {
@@ -34,8 +39,8 @@ describe("TopBar", () => {
 			},
 		});
 
-		const episodeButton = getByLabelText("Episode list");
-		const playerButton = getByLabelText("Player");
+		const episodeButton = getByLabelText(/Episode list/);
+		const playerButton = getByLabelText(/Player/);
 
 		await fireEvent.click(episodeButton);
 
@@ -52,12 +57,20 @@ describe("TopBar", () => {
 			},
 		});
 
-		const episodeButton = getByLabelText("Episode list");
-		const playerButton = getByLabelText("Player");
+		const episodeButton = getByLabelText(/Episode list/);
+		const playerButton = getByLabelText(/Player/);
 
 		expect(episodeButton).toBeDisabled();
 		expect(playerButton).toBeDisabled();
 		expect(episodeButton.className).not.toContain("topbar-selectable");
+		expect(episodeButton.className).toContain("topbar-disabled");
+		expect(playerButton.className).toContain("topbar-disabled");
+		expect(episodeButton.getAttribute("title")).toBe(
+			"Select a podcast or playlist to view its episodes."
+		);
+		expect(playerButton.getAttribute("title")).toBe(
+			"Start playing an episode to open the player."
+		);
 	});
 
 	test("activates player control when clicked", async () => {
@@ -69,7 +82,7 @@ describe("TopBar", () => {
 			},
 		});
 
-		const playerButton = getByLabelText("Player");
+		const playerButton = getByLabelText(/Player/);
 
 		await fireEvent.click(playerButton);
 
diff --git a/src/ui/PodcastView/index.ts b/src/ui/PodcastView/index.ts
index c5b14a0..821b600 100644
--- a/src/ui/PodcastView/index.ts
+++ b/src/ui/PodcastView/index.ts
@@ -3,13 +3,14 @@ import type { WorkspaceLeaf } from "obsidian";
 import type { IPodNotes } from "../../types/IPodNotes";
 import { VIEW_TYPE } from "../../constants";
 import PodcastView from "./PodcastView.svelte";
+import { mount, unmount } from "svelte";
 
 export class MainView extends ItemView {
 	constructor(leaf: WorkspaceLeaf, private plugin: IPodNotes) {
 		super(leaf);
 	}
 
-	private podcastView: PodcastView | null = null;
+	private podcastView: Record<string, unknown> | null = null;
 
 	override getViewType(): string {
 		return VIEW_TYPE;
@@ -24,13 +25,16 @@ export class MainView extends ItemView {
 	}
 
 	protected override async onOpen(): Promise<void> {
-		this.podcastView = new PodcastView({
+		this.podcastView = mount(PodcastView, {
 			target: this.contentEl,
 		});
 	}
 
 	protected override async onClose(): Promise<void> {
-		this.podcastView?.$destroy();
+		if (this.podcastView) {
+			await unmount(this.podcastView);
+			this.podcastView = null;
+		}
 
 		this.contentEl.empty();
 	}
diff --git a/src/ui/common/Image.svelte b/src/ui/common/Image.svelte
index fbcfb6c..7b76f54 100644
--- a/src/ui/common/Image.svelte
+++ b/src/ui/common/Image.svelte
@@ -6,11 +6,12 @@
 	export let fadeIn: boolean = false;
 	export let opacity: number = 0; // Falsey value so condition isn't triggered if not set.
 	export let interactive: boolean = false;
+	export let loading: "lazy" | "eager" | null | undefined = "lazy";
 	export {_class as class};
 	let _class = "";
 
 	let loaded = false;
-	let loading = true;
+	let isLoading = true;
 	let failed = false;
 
 	const dispatcher = createEventDispatcher();
@@ -20,7 +21,7 @@
 	}
 </script>
 
-{#if loading || loaded}
+{#if isLoading || loaded}
 	{#if interactive}
 		<button
 			type="button"
@@ -31,11 +32,12 @@
 				draggable="false"
 				{src} 
 				{alt} 
+				{loading}
 				class={_class}
 				style:opacity={opacity ? opacity : !fadeIn ? 1 : loaded ? 1 : 0}
 				style:transition={fadeIn ? "opacity 0.5s ease-out" : ""}
-				on:load={() => {loaded = true; loading = false;}}
-				on:error={() => {failed = true; loading = false;}}
+				on:load={() => {loaded = true; isLoading = false;}}
+				on:error={() => {failed = true; isLoading = false;}}
 			/>
 		</button>
 	{:else}
@@ -44,11 +46,12 @@
 				draggable="false"
 				{src} 
 				{alt} 
+				{loading}
 				class={_class}
 				style:opacity={opacity ? opacity : !fadeIn ? 1 : loaded ? 1 : 0}
 				style:transition={fadeIn ? "opacity 0.5s ease-out" : ""}
-				on:load={() => {loaded = true; loading = false;}}
-				on:error={() => {failed = true; loading = false;}}
+				on:load={() => {loaded = true; isLoading = false;}}
+				on:error={() => {failed = true; isLoading = false;}}
 			/>
 		</div>
 	{/if}
diff --git a/src/ui/common/ImageLoader.svelte b/src/ui/common/ImageLoader.svelte
index 5ea1908..d08bcb3 100644
--- a/src/ui/common/ImageLoader.svelte
+++ b/src/ui/common/ImageLoader.svelte
@@ -1,29 +1,49 @@
 <script lang="ts">
-	// https://css-tricks.com/lazy-loading-images-in-svelte/
 	export let src: string;
 	export let alt: string;
 	export let fadeIn: boolean = false;
 	export let interactive: boolean = false;
+	export let width: string | number | undefined;
+	export let height: string | number | undefined;
+	export let aspectRatio: string | undefined = "1 / 1";
+	export let loading: "lazy" | "eager" | null | undefined = "lazy";
 	export { _class as class };
 
 	let _class: string = "";
 
-	import IntersectionObserver from "./IntersectionObserver.svelte";
 	import Image from "./Image.svelte";
 	import { createEventDispatcher } from "svelte";
 
 	const dispatcher = createEventDispatcher();
+
+	const toDimension = (value?: string | number) =>
+		typeof value === "number" ? `${value}px` : value;
+
+	$: resolvedWidth = toDimension(width);
+	$: resolvedHeight = toDimension(height);
+	$: resolvedAspectRatio = resolvedHeight ? undefined : aspectRatio;
 </script>
 
-<IntersectionObserver once={true} let:intersecting>
-	{#if intersecting}
-		<Image
-			{alt} 
-			{src} 
-			{fadeIn}
-			{interactive}
-			on:click={event => dispatcher('click', { event })} 
-			class={_class}
-		/>
-	{/if}
-</IntersectionObserver>
+<div
+	class="image-loader"
+	style:width={resolvedWidth}
+	style:height={resolvedHeight}
+	style:aspect-ratio={resolvedAspectRatio}
+>
+	<Image
+		{alt} 
+		{src} 
+		{fadeIn}
+		{interactive}
+		{loading}
+		on:click={event => dispatcher('click', { event })} 
+		class={_class}
+	/>
+</div>
+
+<style>
+	.image-loader {
+		position: relative;
+		width: 100%;
+	}
+</style>
diff --git a/src/ui/common/IntersectionObserver.svelte b/src/ui/common/IntersectionObserver.svelte
deleted file mode 100644
index 1ebc769..0000000
--- a/src/ui/common/IntersectionObserver.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	// https://css-tricks.com/lazy-loading-images-in-svelte/
-  import { onMount } from 'svelte';
-
-  export let once = false;
-  export let top = 0;
-  export let bottom = 0;
-  export let left = 0;
-  export let right = 0;
-
-  let intersecting = false;
-  let container: HTMLDivElement;
-
-  onMount(() => {
-    if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-
-      const observer = new IntersectionObserver(entries => {
-        intersecting = entries[0].isIntersecting;
-        if (intersecting && once) {
-          observer.unobserve(container);
-        }
-      }, {
-        rootMargin
-      });
-
-      observer.observe(container);
-      return () => observer.unobserve(container);
-    }
-
-    // The following is a fallback for older browsers
-    function handler() {
-      const bcr = container.getBoundingClientRect();
-
-      intersecting = (
-        (bcr.bottom + bottom) > 0 &&
-        (bcr.right + right) > 0 &&
-        (bcr.top - top) < window.innerHeight &&
-        (bcr.left - left) < window.innerWidth
-      );
-
-      if (intersecting && once) {
-        window.removeEventListener('scroll', handler);
-      }
-    }
-
-    window.addEventListener('scroll', handler);
-    return () => window.removeEventListener('scroll', handler);
-  });
-</script>
-
-<style>
-  div {
-    width: 100%;
-    height: 100%;
-  }
-</style>
-
-<div bind:this={container}>
-  <slot {intersecting} />
-</div>
diff --git a/src/ui/obsidian/Slider.svelte b/src/ui/obsidian/Slider.svelte
index 55aa9e2..6595534 100644
--- a/src/ui/obsidian/Slider.svelte
+++ b/src/ui/obsidian/Slider.svelte
@@ -2,7 +2,7 @@
     import { SliderComponent } from "obsidian";
     import type { CSSObject } from "src/types/CSSObject";
     import extractStylesFromObj from "src/utility/extractStylesFromObj";
-    import { afterUpdate, createEventDispatcher, onMount } from "svelte";
+    import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
     export let value: number;
     export let limits: [min: number, max: number] | [min: number, max: number, step: number];
@@ -13,36 +13,61 @@
     const dispatch = createEventDispatcher();
 
     let slider: SliderComponent;
-    let styles: CSSObject;
+    let styles: CSSObject = {};
+    let changeHandler: ((event: Event) => void) | null = null;
+    let isProgrammaticUpdate = false;
 
     // This is not a complete implementation. I implemented what I needed.
 
     onMount(() => {
         slider = new SliderComponent(sliderRef);
 
-        updateSliderAttributes(slider);
+        changeHandler = (event: Event) => {
+            if (isProgrammaticUpdate) return;
+
+            const newValue = Number((event.target as HTMLInputElement).value);
+            dispatch("change", { value: newValue });
+        };
+
+        slider.sliderEl.addEventListener("input", changeHandler);
     });
 
-    afterUpdate(() => {
-        updateSliderAttributes(slider);
+    onDestroy(() => {
+        if (slider?.sliderEl && changeHandler) {
+            slider.sliderEl.removeEventListener("input", changeHandler);
+        }
     });
 
-    function updateSliderAttributes(sldr: SliderComponent) {
-        if (value) sldr.setValue(value);
-        if (limits) {
-            if (limits.length === 2) {
-                sldr.setLimits(limits[0], limits[1], 1);
+    $: if (slider) {
+        updateSliderAttributes(slider, value, limits, styles);
+    }
+
+    function updateSliderAttributes(
+        sldr: SliderComponent,
+        currentValue: number,
+        currentLimits: [min: number, max: number] | [min: number, max: number, step: number],
+        currentStyles: CSSObject
+    ) {
+        const sliderValue =
+            typeof sldr.getValue === "function"
+                ? sldr.getValue()
+                : Number(sldr.sliderEl?.value);
+
+        if (currentValue !== undefined && sliderValue !== currentValue) {
+            isProgrammaticUpdate = true;
+            sldr.setValue(currentValue);
+            isProgrammaticUpdate = false;
+        }
+        if (currentLimits) {
+            if (currentLimits.length === 2) {
+                sldr.setLimits(currentLimits[0], currentLimits[1], 1);
             } else {
-                sldr.setLimits(limits[0], limits[1], limits[2]);
+                sldr.setLimits(currentLimits[0], currentLimits[1], currentLimits[2]);
             }
         }
-        if (styles) {
-            sldr.sliderEl.setAttr("style", extractStylesFromObj(styles));
+        if (currentStyles) {
+            sldr.sliderEl.setAttr("style", extractStylesFromObj(currentStyles));
         }
-
-        sldr.onChange((value: number) => {
-            dispatch("change", { value });
-        });
     }
 </script>
 
diff --git a/src/ui/obsidian/Text.svelte b/src/ui/obsidian/Text.svelte
index ecd4bbb..d30dec5 100644
--- a/src/ui/obsidian/Text.svelte
+++ b/src/ui/obsidian/Text.svelte
@@ -2,7 +2,7 @@
     import { TextComponent } from "obsidian";
     import type { CSSObject } from "src/types/CSSObject";
     import extractStylesFromObj from "src/utility/extractStylesFromObj";
-    import { afterUpdate, createEventDispatcher, onMount } from "svelte";
+    import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
     export let value: string = "";
     export let disabled: boolean = false;
@@ -17,33 +17,96 @@
 
     let text: TextComponent;
     let styles: CSSObject = {};
+    let inputHandler: ((event: Event) => void) | null = null;
+    let changeHandler: ((value: string) => void) | null = null;
+    let isProgrammaticUpdate = false;
 
     onMount(() => {
         text = new TextComponent(textRef);
-
-        updateTextComponentAttributes(text);
     });
 
-    afterUpdate(() => {
-        updateTextComponentAttributes(text);
+    onDestroy(() => {
+        if (text?.inputEl && inputHandler) {
+            text.inputEl.removeEventListener("input", inputHandler);
+        }
     });
 
-    function updateTextComponentAttributes(component: TextComponent) {
-        if (value !== undefined) component.setValue(value);
-        if (disabled) component.setDisabled(disabled);
-        if (placeholder) component.setPlaceholder(placeholder);
-        if (type) component.inputEl.type = type;
-        if (styles) {
-            text.inputEl.setAttr("style", extractStylesFromObj(styles));
+    $: if (text) {
+        attachEventListeners(text);
+        updateTextComponentAttributes(text, value, disabled, placeholder, type, styles);
+    }
+
+    function handleInput(event: Event) {
+        if (isProgrammaticUpdate) return;
+
+        const input = event.target as HTMLInputElement | null;
+        const newValue = input?.value ?? "";
+
+        value = newValue;
+        dispatch("input", { value: newValue });
+    }
+
+    function handleChange(newValue: string) {
+        if (isProgrammaticUpdate) return;
+
+        value = newValue;
+        dispatch("change", { value: newValue });
+    }
+
+    function attachEventListeners(component: TextComponent) {
+        if (!component?.inputEl || inputHandler) return;
+
+        changeHandler = handleChange;
+        component.onChange(changeHandler);
+
+        inputHandler = handleInput;
+        component.inputEl.addEventListener("input", inputHandler);
+    }
+
+    function updateTextComponentAttributes(
+        component: TextComponent,
+        currentValue: string,
+        isDisabled: boolean,
+        currentPlaceholder: string,
+        currentType: "text" | "password" | "email" | "number" | "tel" | "url",
+        currentStyles: CSSObject
+    ) {
+        const componentValue =
+            typeof component.getValue === "function"
+                ? component.getValue()
+                : component.inputEl?.value;
+
+        if (currentValue !== undefined && componentValue !== currentValue) {
+            isProgrammaticUpdate = true;
+            component.setValue(currentValue);
+            isProgrammaticUpdate = false;
         }
+
         if (component?.inputEl) {
+            if (component.inputEl.disabled !== isDisabled) {
+                component.setDisabled(isDisabled);
+            }
+
+            if (
+                currentPlaceholder &&
+                component.inputEl.placeholder !== currentPlaceholder
+            ) {
+                component.setPlaceholder(currentPlaceholder);
+            }
+
+            if (component.inputEl.type !== currentType) {
+                component.inputEl.type = currentType;
+            }
+
+            if (currentStyles) {
+                component.inputEl.setAttr(
+                    "style",
+                    extractStylesFromObj(currentStyles),
+                );
+            }
+
             el = component.inputEl;
         }
-
-        component.onChange((newValue: string) => {
-            value = newValue;
-            dispatch("change", { value: newValue });
-        });
     }
 </script>
 
diff --git a/src/ui/settings/PodNotesSettingsTab.ts b/src/ui/settings/PodNotesSettingsTab.ts
index 2336f87..d163cee 100644
--- a/src/ui/settings/PodNotesSettingsTab.ts
+++ b/src/ui/settings/PodNotesSettingsTab.ts
@@ -9,6 +9,7 @@ import {
 import type PodNotes from "../../main";
 import PodcastQueryGrid from "./PodcastQueryGrid.svelte";
 import PlaylistManager from "./PlaylistManager.svelte";
+import { mount, unmount } from "svelte";
 import {
 	DownloadPathTemplateEngine,
 	FilePathTemplateEngine,
@@ -23,8 +24,8 @@ import { clearFeedCache } from "src/services/FeedCacheService";
 export class PodNotesSettingsTab extends PluginSettingTab {
 	plugin: PodNotes;
 
-	private podcastQueryGrid!: PodcastQueryGrid;
-	private playlistManager!: PlaylistManager;
+	private podcastQueryGrid: Record<string, unknown> | null = null;
+	private playlistManager: Record<string, unknown> | null = null;
 
 	private settingsTab: PodNotesSettingsTab;
 
@@ -51,7 +52,7 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 			.setDesc("Search for podcasts by name or custom feed URL.");
 
 		const queryGridContainer = settingsContainer.createDiv();
-		this.podcastQueryGrid = new PodcastQueryGrid({
+		this.podcastQueryGrid = mount(PodcastQueryGrid, {
 			target: queryGridContainer,
 		});
 
@@ -61,11 +62,12 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 			.setDesc("Add playlists to gather podcast episodes.");
 
 		const playlistManagerContainer = settingsContainer.createDiv();
-		this.playlistManager = new PlaylistManager({
+		this.playlistManager = mount(PlaylistManager, {
 			target: playlistManagerContainer,
 		});
 
 		this.addDefaultPlaybackRateSetting(settingsContainer);
+		this.addDefaultVolumeSetting(settingsContainer);
 		this.addSkipLengthSettings(settingsContainer);
 		this.addNoteSettings(settingsContainer);
 		this.addDownloadSettings(settingsContainer);
@@ -75,8 +77,15 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 	}
 
 	override hide(): void {
-		this.podcastQueryGrid?.$destroy();
-		this.playlistManager?.$destroy();
+		if (this.podcastQueryGrid) {
+			void unmount(this.podcastQueryGrid);
+			this.podcastQueryGrid = null;
+		}
+
+		if (this.playlistManager) {
+			void unmount(this.playlistManager);
+			this.playlistManager = null;
+		}
 	}
 
 	private addDefaultPlaybackRateSetting(container: HTMLElement): void {
@@ -94,6 +103,22 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 			);
 	}
 
+	private addDefaultVolumeSetting(container: HTMLElement): void {
+		new Setting(container)
+			.setName("Default Volume")
+			.setDesc("Set the default playback volume.")
+			.addSlider((slider) =>
+				slider
+					.setLimits(0, 1, 0.05)
+					.setValue(this.plugin.settings.defaultVolume)
+					.onChange((value) => {
+						this.plugin.settings.defaultVolume = value;
+						this.plugin.saveSettings();
+					})
+					.setDynamicTooltip(),
+			);
+	}
+
 	private addSkipLengthSettings(container: HTMLElement): void {
 		new Setting(container)
 			.setName("Skip backward length (s)")
diff --git a/src/utility/searchEpisodes.ts b/src/utility/searchEpisodes.ts
index d6c537b..ba10a12 100644
--- a/src/utility/searchEpisodes.ts
+++ b/src/utility/searchEpisodes.ts
@@ -1,21 +1,37 @@
 import Fuse from "fuse.js";
 import type { Episode } from "src/types/Episode";
 
+const fuseOptions = {
+    shouldSort: true,
+    findAllMatches: true,
+    threshold: 0.4,
+    isCaseSensitive: false,
+    keys: ["title"],
+};
+
+const fuseCache = new WeakMap<Episode[], { fuse: Fuse<Episode>; size: number }>();
+
+function getFuse(episodes: Episode[]): Fuse<Episode> {
+    const cached = fuseCache.get(episodes);
+
+    if (cached && cached.size === episodes.length) {
+        return cached.fuse;
+    }
+
+    const newFuse = new Fuse(episodes, fuseOptions);
+    fuseCache.set(episodes, { fuse: newFuse, size: episodes.length });
+
+    return newFuse;
+}
+
 export default function searchEpisodes(query: string, episodes: Episode[]): Episode[] {
-	if (episodes.length === 0) return [];
+    if (episodes.length === 0) return [];
 
     if (query.length === 0) {
         return episodes;
-    } 
-
-    const fuse = new Fuse(episodes, {
-        shouldSort: true,
-        findAllMatches: true,
-        threshold: 0.4,
-        isCaseSensitive: false,
-        keys: ['title'],
-    });
-    
+    }
+
+    const fuse = getFuse(episodes);
     const searchResults = fuse.search(query);
     return searchResults.map(resItem => resItem.item);
 }