diff --git a/app/src/lib/components/input/vertical-slider.svelte b/app/src/lib/components/input/VerticalSlider.svelte
similarity index 100%
rename from app/src/lib/components/input/vertical-slider.svelte
rename to app/src/lib/components/input/VerticalSlider.svelte
diff --git a/app/src/lib/components/input/index.ts b/app/src/lib/components/input/index.ts
new file mode 100644
index 0000000..eb527c5
--- /dev/null
+++ b/app/src/lib/components/input/index.ts
@@ -0,0 +1,2 @@
+export { default as PasswordInput } from './InputPassword.svelte';
+export { default as VerticalSlider } from './VerticalSlider.svelte';
diff --git a/app/src/lib/components/login.svelte b/app/src/lib/components/login.svelte
index 020a0bd..49c5372 100644
--- a/app/src/lib/components/login.svelte
+++ b/app/src/lib/components/login.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import logo from '$lib/assets/logo512.png';
-	import InputPassword from '$lib/components/input/InputPassword.svelte';
+	import { PasswordInput } from '$lib/components/input';
 	import { user } from '$lib/stores/user';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import { fade, fly } from 'svelte/transition';
@@ -64,7 +64,7 @@
 				<label class="label" for="pwd">
 					<span class="label-text text-md">Password</span>
 				</label>
-				<InputPassword id="pwd" bind:value={password} />
+				<PasswordInput id="pwd" bind:value={password} />
 
 				<div class="card-actions mt-4 justify-end">
 					<button
diff --git a/app/src/routes/connections/ntp/NTP.svelte b/app/src/routes/connections/ntp/NTP.svelte
index f5423f5..fcb4034 100644
--- a/app/src/routes/connections/ntp/NTP.svelte
+++ b/app/src/routes/connections/ntp/NTP.svelte
@@ -5,13 +5,11 @@
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import Collapsible from '$lib/components/Collapsible.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
-	import { user } from '$lib/stores/user';
-	import { page } from '$app/stores';
+	import { user, useFeatureFlags } from '$lib/stores';
 	import { notifications } from '$lib/components/toasts/notifications';
 	import { TIME_ZONES } from './timezones';
 	import type { NTPSettings, NTPStatus } from '$lib/types/models';
 	import { api } from '$lib/api';
-	import { useFeatureFlags } from '$lib/stores/featureFlags';
 	import { NTP, UTC, Stopwatch, Clock, Server } from '$lib/components/icons';
 
     const features = useFeatureFlags();
diff --git a/app/src/routes/controller/Controls.svelte b/app/src/routes/controller/Controls.svelte
index c7a0b07..44f0485 100644
--- a/app/src/routes/controller/Controls.svelte
+++ b/app/src/routes/controller/Controls.svelte
@@ -2,16 +2,9 @@
 	import nipplejs from 'nipplejs';
 	import { onMount } from 'svelte';
 	import { capitalize, throttler, toInt8 } from '$lib/utilities';
-	import {
-		input,
-		outControllerData,
-		mode,
-		modes,
-		type Modes,
-		ModesEnum
-	} from '$lib/stores';
+	import { input, outControllerData, mode, modes, type Modes, ModesEnum } from '$lib/stores';
 	import type { vector } from '$lib/types/models';
-	import VerticalSlider from '$lib/components/input/vertical-slider.svelte';
+	import { VerticalSlider } from '$lib/components/input';
 
 	let throttle = new throttler();
 	let left: nipplejs.JoystickManager;
diff --git a/app/src/routes/user/+page.svelte b/app/src/routes/user/+page.svelte
index 3a08e1c..fe9ee17 100644
--- a/app/src/routes/user/+page.svelte
+++ b/app/src/routes/user/+page.svelte
@@ -5,7 +5,7 @@
 	import { cubicOut } from 'svelte/easing';
 	import { user } from '$lib/stores/user';
 	import { notifications } from '$lib/components/toasts/notifications';
-	import InputPassword from '$lib/components/input/InputPassword.svelte';
+	import { PasswordInput } from '$lib/components/input';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import EditUser from './EditUser.svelte';
@@ -181,7 +181,7 @@
 				<label class="label" for="secret">
 					<span class="label-text text-md">JWT Secret</span>
 				</label>
-				<InputPassword bind:value={securitySettings.jwt_secret} id="secret" />
+				<PasswordInput bind:value={securitySettings.jwt_secret} id="secret" />
 				<div class="mt-6 flex justify-end">
 					<button class="btn btn-primary" on:click={() => postSecuritySettings(securitySettings)}
 						>Apply Settings</button
diff --git a/app/src/routes/user/EditUser.svelte b/app/src/routes/user/EditUser.svelte
index 79e84e3..f85204a 100644
--- a/app/src/routes/user/EditUser.svelte
+++ b/app/src/routes/user/EditUser.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { closeModal } from 'svelte-modals';
 	import { fly } from 'svelte/transition';
-	import InputPassword from '$lib/components/input/InputPassword.svelte';
+	import { PasswordInput } from '$lib/components/input';
 	import { Cancel, Save } from '$lib/components/icons';
 
 	// provided by <Modals />
@@ -76,7 +76,7 @@
 				<label class="label" for="pwd">
 					<span class="label-text text-md">Password</span>
 				</label>
-				<InputPassword bind:value={user.password} id="pwd" />
+				<PasswordInput bind:value={user.password} id="pwd" />
 				<label class="label my-auto cursor-pointer justify-start gap-4">
 					<input type="checkbox" bind:checked={user.admin} class="checkbox checkbox-primary" />
 					<span class="">Is Admin?</span>
diff --git a/app/src/routes/wifi/ap/Accesspoint.svelte b/app/src/routes/wifi/ap/Accesspoint.svelte
index e749fcf..56aee6a 100644
--- a/app/src/routes/wifi/ap/Accesspoint.svelte
+++ b/app/src/routes/wifi/ap/Accesspoint.svelte
@@ -2,7 +2,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import InputPassword from '$lib/components/input/InputPassword.svelte';
+	import { PasswordInput } from '$lib/components/input';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
 	import { user } from '$lib/stores/user';
 	import { page } from '$app/stores';
@@ -283,7 +283,7 @@
 							<label class="label" for="pwd">
 								<span class="label-text text-md">Password</span>
 							</label>
-							<InputPassword bind:value={apSettings.password} id="pwd" />
+							<PasswordInput bind:value={apSettings.password} id="pwd" />
 						</div>
 						<div>
 							<label class="label" for="channel">
diff --git a/app/src/routes/wifi/sta/Wifi.svelte b/app/src/routes/wifi/sta/Wifi.svelte
index 449314c..f7dbf64 100644
--- a/app/src/routes/wifi/sta/Wifi.svelte
+++ b/app/src/routes/wifi/sta/Wifi.svelte
@@ -10,7 +10,7 @@
 	import { notifications } from '$lib/components/toasts/notifications';
 	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import InputPassword from '$lib/components/input/InputPassword.svelte';
+	import { PasswordInput } from '$lib/components/input';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import ScanNetworks from './Scan.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
@@ -593,7 +593,7 @@
 									<label class="label" for="pwd">
 										<span class="label-text text-md">Password</span>
 									</label>
-									<InputPassword bind:value={networkEditable.password} id="pwd" />
+									<PasswordInput bind:value={networkEditable.password} id="pwd" />
 								</div>
 								<label
 									class="label inline-flex cursor-pointer content-end justify-start gap-4 mt-2 sm:mb-4"