diff --git a/src/components/PluginManager.svelte b/src/components/PluginManager.svelte
index 36fc8f60..e8fbe5be 100644
--- a/src/components/PluginManager.svelte
+++ b/src/components/PluginManager.svelte
@@ -237,10 +237,12 @@
 />
 
 <Popup show={showPopup} label={$t("plugin_manager.title")}>
-	<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
-	<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("plugin_manager.title")}</h2>
+	<svelte:fragment slot="header">
+		<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
+		<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("plugin_manager.title")}</h2>
+	</svelte:fragment>
 
-	<h2 class="mx-2 mt-6 mb-2 text-lg text-neutral-400">{$t("plugin_manager.installed")}</h2>
+	<h2 class="mx-2 mt-4 mb-2 text-lg text-neutral-400">{$t("plugin_manager.installed")}</h2>
 	<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 		<!-- prettier-ignore -->
 		{#each installed.sort((a, b) =>
diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte
index ddb772e7..9a51f208 100644
--- a/src/components/Popup.svelte
+++ b/src/components/Popup.svelte
@@ -21,11 +21,26 @@
 {#if show}
 	<div
 		bind:this={popupEl}
-		class="absolute top-0 left-0 m-2 p-4 w-[calc(100%-1rem)] h-[calc(100%-1rem)] bg-neutral-800 border border-neutral-700 rounded-lg overflow-auto z-30"
+		class="absolute top-0 left-0 m-2 p-4 w-[calc(100%-1rem)] h-[calc(100%-1rem)] bg-neutral-800 border border-neutral-700 rounded-lg z-30"
+		class:flex={$$slots.header || $$slots.footer}
+		class:flex-col={$$slots.header || $$slots.footer}
+		class:overflow-auto={!$$slots.header && !$$slots.footer}
 		role="dialog"
 		tabindex="-1"
 		aria-label={label}
 	>
-		<slot />
+		{#if $$slots.header}
+			<div class="shrink-0">
+				<slot name="header" />
+			</div>
+		{/if}
+		<div class="flex-1" class:overflow-auto={$$slots.header || $$slots.footer}>
+			<slot />
+		</div>
+		{#if $$slots.footer}
+			<div class="shrink-0">
+				<slot name="footer" />
+			</div>
+		{/if}
 	</div>
 {/if}
diff --git a/src/components/ProfileManager.svelte b/src/components/ProfileManager.svelte
index 9511ac17..1f8fa4ab 100644
--- a/src/components/ProfileManager.svelte
+++ b/src/components/ProfileManager.svelte
@@ -220,8 +220,10 @@
 />
 
 <Popup show={showPopup} label="{device.name} {$t('profile_manager.profiles')}">
-	<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
-	<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
+	<svelte:fragment slot="header">
+		<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
+		<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
+	</svelte:fragment>
 
 	<div class="flex flex-row mt-2 mb-1">
 		<input
@@ -305,10 +307,12 @@
 </Popup>
 
 <Popup show={showApplicationManager} label={$t("profile_manager.application_profiles")}>
-	<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showApplicationManager = false)} aria-label={$t("settings.close")}>✕</button>
-	<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
-	<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.1")}</span>
-	<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.2")}</span>
+	<svelte:fragment slot="header">
+		<button class="mr-1 float-right text-xl text-neutral-300" on:click={() => (showApplicationManager = false)} aria-label={$t("settings.close")}>✕</button>
+		<h2 class="text-xl font-semibold text-neutral-300">{device.name}</h2>
+		<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.1")}</span>
+		<span class="text-sm text-neutral-400">{$t("profile_manager.application_profiles.hint.2")}</span>
+	</svelte:fragment>
 
 	<table class="w-full text-neutral-300 divide-y divide-neutral-500!">
 		{#each Object.entries(applicationProfiles).sort( (a, b) => (a[0] == "opendeck_default" ? -1 : b[0] == "opendeck_default" ? 1 : a[0].localeCompare(b[0])), ) as [appName, devices]}
diff --git a/src/components/SettingsView.svelte b/src/components/SettingsView.svelte
index 9b8a2d03..455be3f6 100644
--- a/src/components/SettingsView.svelte
+++ b/src/components/SettingsView.svelte
@@ -64,10 +64,13 @@
 />
 
 <Popup show={showPopup} label={$t("settings.button")}>
-	<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
-	<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("settings.button")}</h2>
+	<svelte:fragment slot="header">
+		<button class="mr-2 my-1 float-right text-xl text-neutral-300" on:click={() => (showPopup = false)} aria-label={$t("settings.close")}>✕</button>
+		<h2 class="m-2 font-semibold text-xl text-neutral-300">{$t("settings.button")}</h2>
+	</svelte:fragment>
+
 	{#if $settings}
-		<div class="flex flex-row items-center m-2 space-x-2">
+		<div class="flex flex-row items-center mx-2 mb-2 space-x-2">
 			<label for="settings-language" class="text-neutral-400">{$t("settings.language")}</label>
 			<div class="select-wrapper">
 				<select bind:value={$settings.language} class="w-auto pr-10!" id="settings-language">
@@ -205,7 +208,10 @@
 		<span class="text-xs text-neutral-400">
 			{@html buildInfo}
 		</span>
-		<div class="absolute bottom-6 flex flex-row items-center text-sm text-neutral-400">
+	</div>
+
+	<svelte:fragment slot="footer">
+		<div class="flex flex-row items-center mt-4 text-sm text-neutral-400">
 			<span class="mr-1">
 				{$t("settings.footer.1")}
 				<button on:click={() => invoke("open_url", { url: "https://github.com/nekename/OpenDeck" })} class="underline">{$t("settings.footer.2")}</button>
@@ -218,5 +224,5 @@
 			<Heart weight="fill" fill="fuchsia" />
 			<span class="ml-1">{$t("settings.footer.5")}</span>
 		</div>
-	</div>
+	</svelte:fragment>
 </Popup>