diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 2188d66..d524ecf 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -102,3 +102,6 @@ body {
 ::-webkit-scrollbar-thumb:hover {
 	background: #555;
 }
+
+@custom-variant floating (&:where([data-design="floating"] *));
+@custom-variant pwa (&:where([data-pwa="true"] *));
diff --git a/app/components/Nav/HorizontalNav.vue b/app/components/Nav/HorizontalNav.vue
index 1b1866d..116ef16 100644
--- a/app/components/Nav/HorizontalNav.vue
+++ b/app/components/Nav/HorizontalNav.vue
@@ -5,33 +5,56 @@
 	const isFilterSheetOpen = defineModel<boolean>("isFilterSheetOpen");
 	const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
 
-	const { standalone } = useIsPwa();
+	const isPwa = useIsPwa();
 	const { settings } = useSettings();
 </script>
 
 <template>
-	<div class="flex justify-center">
+	<div
+		class="flex justify-center"
+		:data-design="settings.design"
+		:data-pwa="isPwa"
+	>
 		<div
-			class="bg-surface fixed bottom-0 flex h-12 w-dvw justify-between"
-			:class="{
-        'bottom-6 max-w-[90vw] h-18 px-2 flex items-center rounded-4xl border border-white/10 shadow-2xl': settings.design === 'modern',
-        'bottom-12 bg-transparent': standalone && !(settings.design === 'modern')
-      }"
+			class="
+			bg-surface fixed bottom-0 flex h-12 w-dvw justify-between
+
+			floating:bottom-6
+			floating:max-w-[90vw]
+			floating:h-18
+			floating:items-center
+			floating:rounded-4xl
+			floating:border
+			floating:border-white/10
+			floating:px-2
+			floating:shadow-2xl
+
+			pwa:bottom-12
+			pwa:bg-transparent
+
+			floating:pwa:bottom-6
+			"
 		>
 			<div class="relativ -z-10 flex">
 				<button
 					type="button"
 					data-testid="settings-button"
-					class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
-					:class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}"
+					class="
+					bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors
+					floating:rounded-3xl
+					floating:h-12
+					"
 					@click="() => isSettingsSheetOpen = true"
 				>
 					<Icon name="material-symbols:settings-outline-rounded" size="24" />
 				</button>
 				<button
 					type="button"
-					class="bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
-					:class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}"
+					class="
+					bg-secondary hover:bg-secondary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors
+					floating:rounded-3xl
+					floating:h-12
+					"
 					@click="() => isFilterSheetOpen = true"
 				>
 					<Icon
@@ -44,8 +67,11 @@
 			</div>
 			<button
 				type="button"
-				class="bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
-				:class="{'rounded-3xl': settings.design === 'modern', 'h-12': settings.design === 'modern'}"
+				class="
+				bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors
+				floating:rounded-3xl
+				floating:h-12
+				"
 				@click="() => isNewSheetOpen = true"
 			>
 				<Icon name="material-symbols:add-2-rounded" size="24" />
diff --git a/app/components/Settings/SettingsSheet.vue b/app/components/Settings/SettingsSheet.vue
index ceefbd6..2ebe5d6 100644
--- a/app/components/Settings/SettingsSheet.vue
+++ b/app/components/Settings/SettingsSheet.vue
@@ -96,7 +96,7 @@
 						class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
 					>
 						<option value="classic">{{ t(`classic`) }}</option>
-						<option value="modern">{{ t(`modern`) }}</option>
+						<option value="floating">{{ t(`floating`) }}</option>
 					</select>
 				</div>
 
diff --git a/app/components/Utils/Sheet.vue b/app/components/Utils/Sheet.vue
index 92e62bd..c5d6769 100644
--- a/app/components/Utils/Sheet.vue
+++ b/app/components/Utils/Sheet.vue
@@ -23,7 +23,7 @@
 
 	const useModal = useMediaQuery("(min-width: 40rem)");
 
-	const { standalone } = useIsPwa();
+	const isPwa = useIsPwa();
 </script>
 
 <template>
@@ -37,15 +37,16 @@
 				<DrawerContent
 					class="bg-surface fixed bottom-0 z-30 flex h-106 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
 				>
-					<div class="h-full">
+					<div class="h-full" :data-pwa="isPwa">
 						<VisuallyHidden>
 							<DrawerTitle>{{ title }}</DrawerTitle>
 							<DrawerDescription>{{ title }}</DrawerDescription>
 						</VisuallyHidden>
 						<DrawerHandle class="my-2" />
 						<div
-							class="h-full overflow-auto px-2 pb-7"
-							:class="{'pb-17': standalone}"
+							class="
+							h-full overflow-auto px-2 pb-7
+					        pwa:pb-17"
 						>
 							<slot />
 						</div>
diff --git a/app/composables/useIsPwa.ts b/app/composables/useIsPwa.ts
index 1e454c4..3922110 100644
--- a/app/composables/useIsPwa.ts
+++ b/app/composables/useIsPwa.ts
@@ -5,13 +5,13 @@ interface NavigatorStandalone extends Navigator {
 }
 
 export function useIsPwa() {
-	const standalone = ref(false);
+	const isPwa = ref(false);
 
 	onMounted(() => {
-		standalone.value =
+		isPwa.value =
 			window.matchMedia("(display-mode: standalone)").matches ||
-			(window.navigator as NavigatorStandalone).standalone!;
+			(window.navigator as NavigatorStandalone).standalone === true;
 	});
 
-	return { standalone };
+	return isPwa;
 }
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 1406593..a25c191 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -1,6 +1,6 @@
 type Settings = {
 	insertionPoint: "top" | "bottom";
-	design: "classic" | "modern";
+	design: "classic" | "floating";
 };
 
 export function useSettings() {
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index dcc2507..732eb5a 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -37,5 +37,5 @@
 	"push": "Webpush",
 	"design": "Design",
 	"classic": "Klassisch",
-	"modern": "Modern"
+	"floating": "Schwebend"
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 32096f0..6882fde 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -36,6 +36,6 @@
 		"notUsedYet": "Not used yet"
 	},
 	"design": "Design",
-	"classic": "Klassisch",
-	"modern": "Modern"
+	"classic": "Classic",
+	"floating": "Floating"
 }