diff --git a/src/components/ColorSchemeSwitcher.svelte b/src/lib/components/ColorSchemeSwitcher.svelte
similarity index 100%
rename from src/components/ColorSchemeSwitcher.svelte
rename to src/lib/components/ColorSchemeSwitcher.svelte
diff --git a/src/components/SettingsInput.svelte b/src/lib/components/SettingsInput.svelte
similarity index 100%
rename from src/components/SettingsInput.svelte
rename to src/lib/components/SettingsInput.svelte
diff --git a/src/components/SettingsSelect.svelte b/src/lib/components/SettingsSelect.svelte
similarity index 100%
rename from src/components/SettingsSelect.svelte
rename to src/lib/components/SettingsSelect.svelte
diff --git a/src/components/SettingsSwitch.svelte b/src/lib/components/SettingsSwitch.svelte
similarity index 100%
rename from src/components/SettingsSwitch.svelte
rename to src/lib/components/SettingsSwitch.svelte
diff --git a/src/components/ToggleHeader.svelte b/src/lib/components/ToggleHeader.svelte
similarity index 100%
rename from src/components/ToggleHeader.svelte
rename to src/lib/components/ToggleHeader.svelte
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..53338a1
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1,5 @@
+export { default as SettingsSwitch } from './SettingsSwitch.svelte';
+export { default as SettingsInput } from './SettingsInput.svelte';
+export { default as SettingsSelect } from './SettingsSelect.svelte';
+export { default as ToggleHeader } from './ToggleHeader.svelte';
+export { default as ColorSchemeSwitcher } from './ColorSchemeSwitcher.svelte';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e421f5a..ae01278 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,7 +16,7 @@
 
 	import { page } from '$app/stores';
 	import { locale, locales, isLoading } from 'svelte-i18n';
-	import ColorSchemeSwitcher from '../components/ColorSchemeSwitcher.svelte';
+	import { ColorSchemeSwitcher } from '$lib/components';
 
 	export const setLocale = (lang: string) => () => {
 		locale.set(lang);
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index fe8a084..4c551ee 100644
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@@ -3,8 +3,6 @@
 	import { PUBLIC_BASE_URL } from '$lib/config';
 	import { uiSettings } from '$lib/uiSettings';
 	import { createEventDispatcher } from 'svelte';
-	import SettingsSwitch from '../components/SettingsSwitch.svelte';
-
 	import { _ } from 'svelte-i18n';
 	import {
 		Button,
@@ -16,14 +14,10 @@
 		Form,
 		Row
 	} from '@sveltestrap/sveltestrap';
-
 	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
 	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
-
 	import { derived } from 'svelte/store';
-	import ToggleHeader from '../components/ToggleHeader.svelte';
-	import SettingsInput from '../components/SettingsInput.svelte';
-	import SettingsSelect from '../components/SettingsSelect.svelte';
+	import { SettingsSwitch, SettingsInput, SettingsSelect, ToggleHeader } from '$lib/components';
 
 	export let settings;