diff --git a/app/Legacy/V1/Controllers/Administration/SettingsController.php b/app/Legacy/V1/Controllers/Administration/SettingsController.php
index 02897c02fd2..df82fe38bfe 100644
--- a/app/Legacy/V1/Controllers/Administration/SettingsController.php
+++ b/app/Legacy/V1/Controllers/Administration/SettingsController.php
@@ -33,6 +33,7 @@
 use App\SmartAlbums\BaseSmartAlbum;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Storage;
 use Symfony\Component\HttpFoundation\Exception\BadRequestException;
 
@@ -403,6 +404,9 @@ public function getAll(GetSetAllSettingsRequest $request): Collection
 		return Configs::query()
 			->orderBy('cat')
 			->orderBy('id')
+			// Only display settings which are not part of SE
+			->where('level', '=', 0)
+			->whereNotIn('key', ['email'])
 			->get();
 	}
 
@@ -419,7 +423,16 @@ public function getAll(GetSetAllSettingsRequest $request): Collection
 	public function saveAll(GetSetAllSettingsRequest $request): void
 	{
 		$lastException = null;
-		foreach ($request->except(['_token', 'function', '/api/Settings::saveAll']) as $key => $value) {
+		// Select all the SE settings.
+		$except = DB::table('configs')
+			->select('key')
+			->where('level', '=', '1')
+			->pluck('key')
+			// Concat bunch of things coming from the POST request.
+			->concat(['_token', 'function', '/api/Settings::saveAll'])
+			// Convert to array.
+			->all();
+		foreach ($request->except($except) as $key => $value) {
 			$value ??= '';
 			try {
 				Configs::set($key, $value);
diff --git a/config/log-viewer.php b/config/log-viewer.php
index dc34e7406d9..00118ba58f3 100644
--- a/config/log-viewer.php
+++ b/config/log-viewer.php
@@ -66,7 +66,7 @@ function renv_cond(string $cst): string
 	|
 	*/
 
-	'back_to_system_url' => renv('APP_URL', 'http://localhost') . renv_cond('APP_DIR'),
+	'back_to_system_url' => renv('APP_URL', 'http://localhost') . renv_cond('APP_DIR') . '/gallery',
 
 	'back_to_system_label' => null, // Displayed by default: "Back to {{ app.name }}"
 
diff --git a/database/migrations/2024_10_23_222857_change_header.php b/database/migrations/2024_10_23_222857_change_header.php
new file mode 100644
index 00000000000..932abcc15d0
--- /dev/null
+++ b/database/migrations/2024_10_23_222857_change_header.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+return new class() extends Migration {
+	/**
+	 * Run the migrations.
+	 */
+	public function up(): void
+	{
+		DB::table('configs')->where('value', '=', 'Lychee v5')->update(['value' => 'Lychee v6']);
+	}
+
+	/**
+	 * Reverse the migrations.
+	 */
+	public function down(): void
+	{
+		DB::table('configs')->where('value', '=', 'Lychee v6')->update(['value' => 'Lychee v5']);
+	}
+};
diff --git a/database/migrations/2024_10_23_225332_warning_html_content.php b/database/migrations/2024_10_23_225332_warning_html_content.php
new file mode 100644
index 00000000000..b658bd0fb90
--- /dev/null
+++ b/database/migrations/2024_10_23_225332_warning_html_content.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+
+return new class() extends Migration {
+	/**
+	 * Run the migrations.
+	 */
+	public function up(): void
+	{
+		DB::table('configs')->whereIn('key', ['nsfw_banner_override', 'footer_additional_text'])->update(['details' => '<span class="pi pi-exclamation-triangle text-orange-500"></span> Unsanitized html field.']);
+	}
+
+	/**
+	 * Reverse the migrations.
+	 */
+	public function down(): void
+	{
+		DB::table('configs')->whereIn('key', ['nsfw_banner_override', 'footer_additional_text'])->update(['details' => '']);
+	}
+};
diff --git a/resources/js/components/forms/album/AlbumCreateDialog.vue b/resources/js/components/forms/album/AlbumCreateDialog.vue
index cde263c3fe8..21af97ddfd5 100644
--- a/resources/js/components/forms/album/AlbumCreateDialog.vue
+++ b/resources/js/components/forms/album/AlbumCreateDialog.vue
@@ -13,7 +13,7 @@
 					<Button @click="closeCallback" severity="secondary" class="w-full font-bold border-none rounded-bl-xl">
 						{{ $t("lychee.CANCEL") }}
 					</Button>
-					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl">
+					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl" :disabled="!isValid">
 						{{ $t("lychee.CREATE_ALBUM") }}
 					</Button>
 				</div>
@@ -25,10 +25,11 @@
 import AlbumService from "@/services/album-service";
 import Dialog from "primevue/dialog";
 import InputText from "@/components/forms/basic/InputText.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";
+import { useToast } from "primevue/usetoast";
 
 const props = defineProps<{
 	parentId: string | null;
@@ -37,24 +38,31 @@ const props = defineProps<{
 const visible = defineModel("visible", { default: false });
 const parentId = ref(props.parentId);
 
+const toast = useToast();
 const router = useRouter();
 
 const title = ref(undefined as undefined | string);
 
+const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
+
 function create() {
-	if (!title.value) {
+	if (!isValid.value) {
 		return;
 	}
 
 	AlbumService.createAlbum({
-		title: title.value,
+		title: title.value as string,
 		parent_id: parentId.value,
-	}).then((response) => {
-		title.value = undefined;
-		visible.value = false;
-		AlbumService.clearCache(parentId.value);
-		router.push(`/gallery/${response.data}`);
-	});
+	})
+		.then((response) => {
+			title.value = undefined;
+			visible.value = false;
+			AlbumService.clearCache(parentId.value);
+			router.push(`/gallery/${response.data}`);
+		})
+		.catch((error) => {
+			toast.add({ severity: "error", summary: "Oups", detail: error.message });
+		});
 }
 
 watch(
diff --git a/resources/js/components/forms/album/AlbumCreateTagDialog.vue b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
index 71461eadce3..d030506ba36 100644
--- a/resources/js/components/forms/album/AlbumCreateTagDialog.vue
+++ b/resources/js/components/forms/album/AlbumCreateTagDialog.vue
@@ -24,7 +24,7 @@
 					<Button @click="closeCallback" severity="secondary" class="w-full font-bold border-none rounded-bl-xl">
 						{{ $t("lychee.CANCEL") }}
 					</Button>
-					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl">
+					<Button @click="create" severity="contrast" class="font-bold w-full border-none rounded-none rounded-br-xl" :disabled="!isValid">
 						{{ $t("lychee.CREATE_TAG_ALBUM") }}
 					</Button>
 				</div>
@@ -36,34 +36,42 @@
 import AlbumService from "@/services/album-service";
 import Dialog from "primevue/dialog";
 import FloatLabel from "primevue/floatlabel";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import InputText from "@/components/forms/basic/InputText.vue";
 import Button from "primevue/button";
 import AutoComplete from "primevue/autocomplete";
+import { useToast } from "primevue/usetoast";
 
 const props = defineProps<{
 	visible: boolean;
 }>();
 
+const toast = useToast();
 const router = useRouter();
 const visible = ref(props.visible);
 
 const title = ref(undefined as undefined | string);
 const tags = ref([] as string[]);
 
+const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
+
 function create() {
-	if (!title.value || tags.value.length === 0) {
+	if (!isValid.value) {
 		return;
 	}
 
 	AlbumService.createTag({
-		title: title.value,
+		title: title.value as string,
 		tags: tags.value,
-	}).then((response) => {
-		AlbumService.clearAlbums();
-		router.push(`/gallery/${response.data}`);
-	});
+	})
+		.then((response) => {
+			AlbumService.clearAlbums();
+			router.push(`/gallery/${response.data}`);
+		})
+		.catch((error) => {
+			toast.add({ severity: "error", summary: "Oups", detail: error.message });
+		});
 }
 
 watch(
diff --git a/resources/js/components/forms/album/AlbumShare.vue b/resources/js/components/forms/album/AlbumShare.vue
index 87cd6664c1d..9692db199c6 100644
--- a/resources/js/components/forms/album/AlbumShare.vue
+++ b/resources/js/components/forms/album/AlbumShare.vue
@@ -1,7 +1,7 @@
 <template>
 	<Card class="sm:p-4 xl:px-9 max-w-3xl w-full" v-if="perms !== undefined">
 		<template #content>
-			<div class="flex text-muted-color">
+			<div class="flex text-muted-color-emphasis">
 				<div class="w-5/12 flex">
 					<span class="w-full">{{ $t("lychee.USERNAME") }}</span>
 				</div>
diff --git a/resources/js/components/forms/search/SearchBox.vue b/resources/js/components/forms/search/SearchBox.vue
index 5adcd49a605..ab3ce22ac0a 100644
--- a/resources/js/components/forms/search/SearchBox.vue
+++ b/resources/js/components/forms/search/SearchBox.vue
@@ -33,6 +33,7 @@ const search = defineModel<string>("search", { required: true });
 
 const emits = defineEmits<{
 	search: [terms: string];
+	clear: [];
 }>();
 
 const isValid = computed<boolean>(() => {
@@ -40,6 +41,13 @@ const isValid = computed<boolean>(() => {
 });
 
 const debouncedFn = useDebounceFn(() => {
-	emits("search", search.value);
+	if (search.value === "" || !isValid.value) {
+		emits("clear");
+		return;
+	}
+
+	if (search.value !== undefined && search.value.length >= props.searchMinimumLengh) {
+		emits("search", search.value);
+	}
 }, 1000);
 </script>
diff --git a/resources/js/components/forms/settings/VersionField.vue b/resources/js/components/forms/settings/VersionField.vue
deleted file mode 100644
index 5154a50fa9b..00000000000
--- a/resources/js/components/forms/settings/VersionField.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-	<div class="flex justify-between gap-4">
-		<span class="mr-4 text-muted-color-emphasis">{{ props.config.documentation }}:</span>
-		<Inplace style="--p-inplace-padding: 0">
-			<template #display>{{ computedVersion }}</template>
-			<template #content>
-				<InputOtp v-model="val" :length="6" style="gap: 0" integerOnly @update:modelValue="update">
-					<template #default="{ attrs, events, index }">
-						<input type="text" v-bind="attrs" v-on="events" class="h-4 w-3 text-center border-b border-primary-500" />
-						<div v-if="index === 2 || index === 4" class="">.</div>
-					</template>
-				</InputOtp>
-			</template>
-		</Inplace>
-		<i
-			class="ml-4 pi pi-exclamation-triangle text-danger-700 mt-1 cursor-pointer"
-			v-tooltip="'Click me to reset!'"
-			v-if="changed"
-			@click="reset"
-		></i>
-	</div>
-	<Message v-if="changed" severity="error">We strongly recommend you do not modify this value.</Message>
-</template>
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import InputOtp from "primevue/inputotp";
-import Inplace from "primevue/inplace";
-import Message from "primevue/message";
-
-const props = defineProps<{
-	config: App.Http.Resources.Models.ConfigResource;
-}>();
-
-const val = ref(props.config.value);
-
-const changed = computed(() => val.value !== props.config.value);
-
-const computedVersion = computed(() => {
-	const value = val.value;
-	let version = "";
-	for (let i = 0; i < 6; i += 2) {
-		if (version !== "") {
-			version += ".";
-		}
-		if (value[i] !== "0") {
-			version += value[i];
-		}
-		version += value[i + 1];
-	}
-	return version;
-});
-
-const emits = defineEmits<{
-	filled: [key: string, value: string];
-	reset: [key: string];
-}>();
-
-function update() {
-	emits("filled", props.config.key, val.value);
-}
-
-function reset() {
-	emits("reset", props.config.key);
-	val.value = props.config.value;
-}
-
-// We watch props in case of updates.
-watch(
-	() => props.config,
-	(newValue, _oldValue) => (val.value = newValue.value),
-);
-</script>
diff --git a/resources/js/components/forms/sharing/ShareLine.vue b/resources/js/components/forms/sharing/ShareLine.vue
index 7ed144ae55f..08f1a2924c7 100644
--- a/resources/js/components/forms/sharing/ShareLine.vue
+++ b/resources/js/components/forms/sharing/ShareLine.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex">
-		<div class="w-5/12 flex items-center">
+		<div class="w-5/12 flex items-center text-muted-color">
 			<span v-if="props.withAlbum" class="w-full">{{ props.perm.album_title }}</span>
 			<span class="w-full">{{ props.perm.username }}</span>
 		</div>
diff --git a/resources/js/components/forms/upload/UploadingLine.vue b/resources/js/components/forms/upload/UploadingLine.vue
index 2f33be7997f..1d766b9e652 100644
--- a/resources/js/components/forms/upload/UploadingLine.vue
+++ b/resources/js/components/forms/upload/UploadingLine.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="w-full flex flex-col" :id="'upload' + index">
 		<div class="flex gap-x-4 justify-between relative" :class="errorFlexClass">
-			<span class="text-ellipsis min-w-0 w-full overflow-hidden text-nowrap">{{ file.name }}</span>
+			<span class="text-ellipsis min-w-0 w-full overflow-hidden text-nowrap text-muted-color">{{ file.name }}</span>
 			<span :class="statusClass" v-if="progress < 100 && progress > 0">{{ progress }}%</span>
 			<span :class="statusClass">{{ statusMessage }}</span>
 		</div>
diff --git a/resources/js/components/headers/AlbumsHeader.vue b/resources/js/components/headers/AlbumsHeader.vue
index bbe5a7b7836..20e5048843e 100644
--- a/resources/js/components/headers/AlbumsHeader.vue
+++ b/resources/js/components/headers/AlbumsHeader.vue
@@ -24,7 +24,7 @@
 				@click="lycheeStore.toggleLogin()"
 			/>
 			<!-- Logged in. -->
-			<Button v-if="user.id" @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+			<OpenLeftMenu v-if="user.id" />
 		</template>
 
 		<template #center>
@@ -106,6 +106,7 @@ import { useGalleryModals } from "@/composables/modalsTriggers/galleryModals";
 import WebAuthnService from "@/services/webauthn-service";
 import { useRouter } from "vue-router";
 import DropBox from "../modals/DropBox.vue";
+import OpenLeftMenu from "./OpenLeftMenu.vue";
 
 const props = defineProps<{
 	user: App.Http.Resources.Models.UserResource;
diff --git a/resources/js/components/headers/OpenLeftMenu.vue b/resources/js/components/headers/OpenLeftMenu.vue
new file mode 100644
index 00000000000..670b4622554
--- /dev/null
+++ b/resources/js/components/headers/OpenLeftMenu.vue
@@ -0,0 +1,12 @@
+<template>
+	<Button @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+</template>
+<script setup lang="ts">
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+import Button from "primevue/button";
+
+const lycheeStore = useLycheeStateStore();
+const { left_menu_open } = storeToRefs(lycheeStore);
+const openLeftMenu = () => (left_menu_open.value = !left_menu_open.value);
+</script>
diff --git a/resources/js/components/maintenance/MaintenanceCleaning.vue b/resources/js/components/maintenance/MaintenanceCleaning.vue
index fac6706391d..399b889f57b 100644
--- a/resources/js/components/maintenance/MaintenanceCleaning.vue
+++ b/resources/js/components/maintenance/MaintenanceCleaning.vue
@@ -51,10 +51,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.cleaningDo(props.path).then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		loading.value = false;
-	});
+	MaintenanceService.cleaningDo(props.path)
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceFilesize.vue b/resources/js/components/maintenance/MaintenanceFilesize.vue
index 9d09fdaabfb..3fa32d862b9 100644
--- a/resources/js/components/maintenance/MaintenanceFilesize.vue
+++ b/resources/js/components/maintenance/MaintenanceFilesize.vue
@@ -46,10 +46,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.missingFileSizesDo().then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		loading.value = false;
-	});
+	MaintenanceService.missingFileSizesDo()
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceFixJobs.vue b/resources/js/components/maintenance/MaintenanceFixJobs.vue
index 0a9d6ecce84..e2ce88eeec9 100644
--- a/resources/js/components/maintenance/MaintenanceFixJobs.vue
+++ b/resources/js/components/maintenance/MaintenanceFixJobs.vue
@@ -46,10 +46,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.jobsDo().then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		loading.value = false;
-	});
+	MaintenanceService.jobsDo()
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceFixTree.vue b/resources/js/components/maintenance/MaintenanceFixTree.vue
index 8381c601bfa..78ac777977e 100644
--- a/resources/js/components/maintenance/MaintenanceFixTree.vue
+++ b/resources/js/components/maintenance/MaintenanceFixTree.vue
@@ -51,6 +51,9 @@ function load() {
 // 	MaintenanceService.treeDo().then((response) => {
 // 		toast.add({ severity: "success", summary: "Success", life: 3000 });
 // 		loading.value = false;
+// 	}).catch((e) => {
+// 		toast.add({ severity: "error", summary: "Error", detail: e.response.data.message,  life: 3000 });
+// 		loading.value = false;
 // 	});
 // }
 
diff --git a/resources/js/components/maintenance/MaintenanceGenSizevariants.vue b/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
index 9725694319b..7acf0a1c8c9 100644
--- a/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
+++ b/resources/js/components/maintenance/MaintenanceGenSizevariants.vue
@@ -73,10 +73,15 @@ function load() {
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.genSizeVariantsDo(props.sv).then((response) => {
-		toast.add({ severity: "success", summary: "Success", life: 3000 });
-		load();
-	});
+	MaintenanceService.genSizeVariantsDo(props.sv)
+		.then((response) => {
+			toast.add({ severity: "success", summary: "Success", life: 3000 });
+			load();
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/maintenance/MaintenanceOptimize.vue b/resources/js/components/maintenance/MaintenanceOptimize.vue
index cfbc6b53499..b86aad2d5d4 100644
--- a/resources/js/components/maintenance/MaintenanceOptimize.vue
+++ b/resources/js/components/maintenance/MaintenanceOptimize.vue
@@ -27,15 +27,22 @@ import Card from "primevue/card";
 import ProgressSpinner from "primevue/progressspinner";
 import ScrollPanel from "primevue/scrollpanel";
 import MaintenanceService from "@/services/maintenance-service";
+import { useToast } from "primevue/usetoast";
 
 const data = ref([] as string[]);
 const loading = ref(false);
+const toast = useToast();
 
 function exec() {
 	loading.value = true;
-	MaintenanceService.optimizeDo().then((response) => {
-		data.value = response.data;
-	});
+	MaintenanceService.optimizeDo()
+		.then((response) => {
+			data.value = response.data;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 </script>
 
diff --git a/resources/js/components/maintenance/MaintenanceUpdate.vue b/resources/js/components/maintenance/MaintenanceUpdate.vue
index 2b3c4fbf5f3..41c1e33e87c 100644
--- a/resources/js/components/maintenance/MaintenanceUpdate.vue
+++ b/resources/js/components/maintenance/MaintenanceUpdate.vue
@@ -30,11 +30,13 @@ import Button from "primevue/button";
 import Card from "primevue/card";
 import ScrollPanel from "primevue/scrollpanel";
 import MaintenanceService from "@/services/maintenance-service";
+import { useToast } from "primevue/usetoast";
 
 const data = ref(undefined as App.Http.Resources.Diagnostics.UpdateInfo | undefined);
 const canCheck = ref(true);
 const canUpdate = ref(false);
 const loading = ref(false);
+const toast = useToast();
 
 function load() {
 	MaintenanceService.updateGet().then((response) => {
@@ -49,11 +51,16 @@ function check() {
 	loading.value = true;
 	canCheck.value = false;
 
-	MaintenanceService.updateCheck().then((response) => {
-		(data.value as App.Http.Resources.Diagnostics.UpdateInfo).extra = response.data.extra;
-		canUpdate.value = response.data.can_update;
-		loading.value = false;
-	});
+	MaintenanceService.updateCheck()
+		.then((response) => {
+			(data.value as App.Http.Resources.Diagnostics.UpdateInfo).extra = response.data.extra;
+			canUpdate.value = response.data.can_update;
+			loading.value = false;
+		})
+		.catch((e) => {
+			toast.add({ severity: "error", summary: "Error", detail: e.response.data.message, life: 3000 });
+			loading.value = false;
+		});
 }
 
 load();
diff --git a/resources/js/components/modals/UploadPanel.vue b/resources/js/components/modals/UploadPanel.vue
index 745ae66c43a..9b9a1229a6d 100644
--- a/resources/js/components/modals/UploadPanel.vue
+++ b/resources/js/components/modals/UploadPanel.vue
@@ -3,12 +3,14 @@
 		<template #container="{ closeCallback }">
 			<div v-if="setup">
 				<div v-if="counts.files > 0" class="m-4 flex flex-wrap justify-center">
-					<span class="w-full text-center">Completed: {{ counts.completed }} / {{ counts.files }}</span>
+					<span v-if="counts.completed === counts.files" class="w-full text-center text-muted-color-emphasis font-bold">Completed</span>
+					<span v-else class="w-full text-center">Uploaded: {{ counts.completed }} / {{ counts.files }}</span>
 					<ProgressBar
-						:class="'w-full'"
+						class="w-full"
 						:value="Math.round((counts.completed * 100) / counts.files)"
 						:show-value="false"
 						:pt:value:class="'duration-300'"
+						:class="counts.completed === counts.files ? 'successProgressBarSeverity' : ''"
 					></ProgressBar>
 				</div>
 				<ScrollPanel v-if="counts.files > 0" class="w-96 h-48 m-4 p-1 mr-5" :pt:scrollbar:class="'opacity-100'">
@@ -149,12 +151,9 @@ function uploadNext(searchIndex = 0, max_processing_limit: number | undefined =
 			break;
 		}
 	}
-	console.log("searchIndex", searchIndex);
-	console.log("offset", offset);
 
 	// Compute processing limit : min between the provided max and the number of waiting.
 	const processing_limit = Math.min(max_processing_limit ?? setup.value?.upload_processing_limit ?? 1, counts.value.waiting);
-	console.log("processing limit", processing_limit);
 
 	// Start uploading chunks.
 	for (let i = 0; i < processing_limit; i++) {
diff --git a/resources/js/components/settings/AllSettings.vue b/resources/js/components/settings/AllSettings.vue
index 38b3b04933c..da80e941081 100644
--- a/resources/js/components/settings/AllSettings.vue
+++ b/resources/js/components/settings/AllSettings.vue
@@ -14,6 +14,7 @@
 					<a
 						:href="item.link"
 						class="nav-link block hover:text-primary-400 border-l border-solid border-surface-700 hover:border-primary-400 px-4 capitalize"
+						@click.prevent="goto(item.link)"
 					>
 						<span>{{ item.label }}</span>
 					</a>
@@ -37,7 +38,9 @@
 								</template>
 								<template v-else>
 									<!-- Special keys -->
-									<VersionField v-if="config.key === 'version'" :config="config" />
+									<template v-if="config.key === 'version'">
+										<!-- version is not modifiable in easy settings. -->
+									</template>
 									<ZipSliderField v-else-if="config.key === 'zip_deflate_level'" :config="config" @filled="update" @reset="reset" />
 									<SelectOptionsField
 										v-else-if="config.key === 'default_license'"
@@ -175,7 +178,6 @@ import { useToast } from "primevue/usetoast";
 import StringField from "@/components/forms/settings/StringField.vue";
 import BoolField from "@/components/forms/settings/BoolField.vue";
 import NumberField from "@/components/forms/settings/NumberField.vue";
-import VersionField from "@/components/forms/settings/VersionField.vue";
 import SliderField from "@/components/forms/settings/SliderField.vue";
 import SelectField from "@/components/forms/settings/SelectField.vue";
 import SelectOptionsField from "@/components/forms/settings/SelectOptionsField.vue";
@@ -255,6 +257,13 @@ function save() {
 		});
 }
 
+function goto(section: string) {
+	const el = document.getElementById(section.slice(1));
+	if (el) {
+		el.scrollIntoView({ behavior: "smooth" });
+	}
+}
+
 load();
 
 function show(config: App.Http.Resources.Editable.EditableConfigResource) {
diff --git a/resources/js/components/settings/EasySettings.vue b/resources/js/components/settings/EasySettings.vue
index 39c1889207a..4df7a6c0648 100644
--- a/resources/js/components/settings/EasySettings.vue
+++ b/resources/js/components/settings/EasySettings.vue
@@ -302,7 +302,6 @@ function load() {
 		const configurations = [] as App.Http.Resources.Models.ConfigResource[];
 		Object.values(decapsulated.configs).forEach((value) => Object.values(value).forEach((value) => configurations.push(value)));
 
-		// console.log(configurations);
 		lang.value = configurations.find((config) => config.key === "lang");
 
 		dark_mode_enabled.value = configurations.find((config) => config.key === "dark_mode_enabled");
diff --git a/resources/js/components/statistics/SizeVariantMeter.vue b/resources/js/components/statistics/SizeVariantMeter.vue
index 2c7aa02d91f..855fe888c5c 100644
--- a/resources/js/components/statistics/SizeVariantMeter.vue
+++ b/resources/js/components/statistics/SizeVariantMeter.vue
@@ -32,7 +32,7 @@ import Card from "primevue/card";
 import MeterGroup from "primevue/metergroup";
 import { ref } from "vue";
 
-type SizeVairantData = {
+type SizeVariantData = {
 	label: string;
 	value: number;
 	size: string;
@@ -46,7 +46,7 @@ const props = defineProps<{
 
 const lycheeStore = useLycheeStateStore();
 const sizeVariantSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Sizes[]);
-const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVairantData[]);
+const sizeVariantSpaceMeter = ref(undefined as undefined | SizeVariantData[]);
 
 const { is_se_preview_enabled } = storeToRefs(lycheeStore);
 
diff --git a/resources/js/composables/album/searchRefresher.ts b/resources/js/composables/album/searchRefresher.ts
index 98587b52810..27af286fb29 100644
--- a/resources/js/composables/album/searchRefresher.ts
+++ b/resources/js/composables/album/searchRefresher.ts
@@ -59,6 +59,14 @@ export function useSearch(albumid: Ref<string>, lycheeStore: LycheeStateStore, s
 		});
 	}
 
+	function clear() {
+		albums.value = [];
+		photos.value = [];
+		from.value = 0;
+		per_page.value = 0;
+		total.value = 0;
+	}
+
 	return {
 		albums,
 		photos,
@@ -72,6 +80,7 @@ export function useSearch(albumid: Ref<string>, lycheeStore: LycheeStateStore, s
 		albumHeader,
 		searchInit,
 		search,
+		clear,
 		refresh,
 	};
 }
diff --git a/resources/js/composables/album/uploadEvents.ts b/resources/js/composables/album/uploadEvents.ts
index 1cc84c2d725..c9f7d0bf945 100644
--- a/resources/js/composables/album/uploadEvents.ts
+++ b/resources/js/composables/album/uploadEvents.ts
@@ -16,7 +16,7 @@ export function useMouseEvents(
 	}
 
 	function dropUpload(e: DragEvent) {
-		console.log("dropUpload");
+		// console.log("dropUpload");
 		if (rights.value?.can_upload !== true) {
 			return;
 		}
@@ -26,7 +26,7 @@ export function useMouseEvents(
 		if (e.dataTransfer === null) {
 			return;
 		}
-		console.log(e.dataTransfer.files.length);
+		// console.log(e.dataTransfer.files.length);
 
 		if (e.dataTransfer.files.length > 0) {
 			for (let i = 0; i < e.dataTransfer.files.length; i++) {
@@ -41,7 +41,7 @@ export function useMouseEvents(
 	}
 
 	function onPaste(e: ClipboardEvent) {
-		console.log("onPaste");
+		// console.log("onPaste");
 		if (shouldIgnoreKeystroke()) {
 			return;
 		}
diff --git a/resources/js/menus/LeftMenu.vue b/resources/js/menus/LeftMenu.vue
index 67b8269263b..412ea99c242 100644
--- a/resources/js/menus/LeftMenu.vue
+++ b/resources/js/menus/LeftMenu.vue
@@ -1,5 +1,14 @@
 <template>
-	<Drawer v-model:visible="left_menu_open">
+	<Drawer v-model:visible="left_menu_open" :pt:content:class="'flex flex-col justify-start gap-10'">
+		<template #header>
+			<div class="flex items-center gap-2 text-muted-color hover:text-primary-400">
+				<router-link v-if="!isGallery" v-slot="{ href, navigate }" to="/gallery" custom>
+					<a v-ripple :href="href" @click="navigate">
+						<span class="text-lg font-bold pl-3">Back to Gallery</span>
+					</a>
+				</router-link>
+			</div>
+		</template>
 		<Menu :model="items" v-if="initData" class="!border-none">
 			<template #submenuheader="{ item }">
 				<span class="text-primary-emphasis font-bold" :class="item.access !== false ? '' : 'hidden'">
@@ -55,6 +64,7 @@ import { useLycheeStateStore } from "@/stores/LycheeState";
 import AlbumService from "@/services/album-service";
 import SETag from "@/components/icons/SETag.vue";
 import Constants from "@/services/constants";
+import { useRoute } from "vue-router";
 
 type MenyType =
 	| {
@@ -74,14 +84,14 @@ type MenyType =
 
 const initData = ref(undefined) as Ref<undefined | App.Http.Resources.Rights.GlobalRightsResource>;
 const openLycheeAbout = ref(false);
-const items = ref([] as MenyType[]);
 const logsEnabled = ref(true);
 
+const route = useRoute();
 const authStore = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 
-const { left_menu_open, clockwork_url, is_se_enabled, is_se_preview_enabled } = storeToRefs(lycheeStore);
+const { left_menu_open, clockwork_url, is_se_enabled, is_se_preview_enabled, is_se_info_hidden } = storeToRefs(lycheeStore);
 const { user } = storeToRefs(authStore);
 authStore.getUser();
 
@@ -104,7 +114,6 @@ function load() {
 	InitService.fetchGlobalRights()
 		.then((data) => {
 			initData.value = data.data;
-			loadMenu();
 		})
 		.catch((error) => {
 			console.error(error);
@@ -131,12 +140,16 @@ const canSeeAdmin = computed(() => {
 	);
 });
 
-function loadMenu() {
+const isGallery = computed(() => {
+	return route.name === "gallery";
+});
+
+const items = computed<MenyType[]>(() => {
 	if (!initData.value) {
-		return;
+		return [];
 	}
 
-	items.value = [
+	return [
 		{
 			label: "Admin",
 			access: canSeeAdmin.value,
@@ -182,6 +195,12 @@ function loadMenu() {
 					route: "/jobs",
 					access: initData.value.settings.can_see_logs ?? false,
 				},
+				{
+					label: "Clockwork App",
+					icon: "telescope",
+					url: clockwork_url.value ?? "",
+					access: clockwork_url.value !== null && (initData.value.settings.can_access_dev_tools ?? false),
+				},
 			],
 		},
 		{
@@ -203,13 +222,13 @@ function loadMenu() {
 					label: "Statistics",
 					icon: "bar-chart",
 					route: "/statistics",
-					access: is_se_enabled.value,
+					access: is_se_enabled.value === true,
 				},
 				{
 					label: "Statistics",
 					icon: "bar-chart",
 					route: "/statistics",
-					access: is_se_preview_enabled.value,
+					access: is_se_preview_enabled.value === true,
 					seTag: true,
 				},
 				{
@@ -220,22 +239,29 @@ function loadMenu() {
 				},
 			],
 		},
-
 		{
-			label: "lychee.ABOUT_LYCHEE",
-			icon: "info",
-			access: true,
-			command: () => (openLycheeAbout.value = true),
+			label: "Lychee",
+			items: [
+				{
+					label: "About",
+					icon: "info",
+					access: true,
+					command: () => (openLycheeAbout.value = true),
+				},
+				{
+					label: "Source",
+					icon: "book",
+					access: is_se_info_hidden.value === false,
+					url: "https://github.com/LycheeOrg/Lychee",
+				},
+				{
+					label: "Support",
+					icon: "heart",
+					access: is_se_info_hidden.value === false,
+					url: "https://lycheeorg.github.io/get-supporter-edition/",
+				},
+			],
 		},
 	];
-
-	if (clockwork_url.value && initData.value.settings.can_access_dev_tools) {
-		items.value.push({
-			label: "Clockwork App",
-			icon: "telescope",
-			url: clockwork_url.value,
-			access: initData.value.settings.can_edit ?? false,
-		});
-	}
-}
+});
 </script>
diff --git a/resources/js/views/Diagnostics.vue b/resources/js/views/Diagnostics.vue
index 56f2dd6047d..17cc656c998 100644
--- a/resources/js/views/Diagnostics.vue
+++ b/resources/js/views/Diagnostics.vue
@@ -1,9 +1,10 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
+			<Button @click="openLeftMenu" icon="pi pi-bars" class="mr-2 border-none" severity="secondary" text />
+			<!-- <router-link :to="{ name: 'gallery' }">
 				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			</router-link> -->
 		</template>
 
 		<template #center>
@@ -26,8 +27,13 @@ import ErrorsDiagnotics from "@/components/diagnostics/ErrorsDiagnostics.vue";
 import SpaceDiagnostics from "@/components/diagnostics/SpaceDiagnostics.vue";
 import { useAuthStore } from "@/stores/Auth";
 import { storeToRefs } from "pinia";
+import { useLycheeStateStore } from "@/stores/LycheeState";
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
 authStore.getUser();
+
+const lycheeStore = useLycheeStateStore();
+const { left_menu_open } = storeToRefs(lycheeStore);
+const openLeftMenu = () => (left_menu_open.value = !left_menu_open.value);
 </script>
diff --git a/resources/js/views/Jobs.vue b/resources/js/views/Jobs.vue
index bc3a3f9c80e..26268a97884 100644
--- a/resources/js/views/Jobs.vue
+++ b/resources/js/views/Jobs.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -25,10 +23,10 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import Button from "primevue/button";
 import Panel from "primevue/panel";
 import Toolbar from "primevue/toolbar";
 import JobService from "@/services/jobs-service";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 
 const jobs = ref([] as App.Http.Resources.Models.JobHistoryResource[]);
 function load() {
diff --git a/resources/js/views/Landing.vue b/resources/js/views/Landing.vue
index 98ffa111c71..d0fe1d757b6 100644
--- a/resources/js/views/Landing.vue
+++ b/resources/js/views/Landing.vue
@@ -68,18 +68,23 @@
 </template>
 <script setup lang="ts">
 import { Ref, ref } from "vue";
-import { RouterLink } from "vue-router";
+import { RouterLink, useRouter } from "vue-router";
 import InitService from "@/services/init-service";
 import LandingFooter from "@/components/footers/LandingFooter.vue";
 
 const introVisible = ref(true);
 
 const initdata = ref(undefined) as Ref<undefined | App.Http.Resources.GalleryConfigs.LandingPageResource>;
+const router = useRouter();
 
 InitService.fetchLandingData()
 	.then((data) => {
-		initdata.value = data.data;
-		setTimeout(() => (introVisible.value = false), 4000);
+		if (data.data.landing_page_enable === false) {
+			router.push("/gallery");
+		} else {
+			initdata.value = data.data;
+			setTimeout(() => (introVisible.value = false), 4000);
+		}
 	})
 	.catch((error) => {
 		console.error(error);
diff --git a/resources/js/views/Maintenance.vue b/resources/js/views/Maintenance.vue
index 513b60999c8..38ae0d3688c 100644
--- a/resources/js/views/Maintenance.vue
+++ b/resources/js/views/Maintenance.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -33,7 +31,6 @@
 	</div>
 </template>
 <script setup lang="ts">
-import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
 import MaintenanceCleaning from "@/components/maintenance/MaintenanceCleaning.vue";
 import MaintenanceFilesize from "@/components/maintenance/MaintenanceFilesize.vue";
@@ -42,4 +39,5 @@ import MaintenanceFixTree from "@/components/maintenance/MaintenanceFixTree.vue"
 import MaintenanceGenSizevariants from "@/components/maintenance/MaintenanceGenSizevariants.vue";
 import MaintenanceOptimize from "@/components/maintenance/MaintenanceOptimize.vue";
 import MaintenanceUpdate from "@/components/maintenance/MaintenanceUpdate.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 </script>
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 90067606366..edb81d274d8 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -2,9 +2,7 @@
 	<div class="h-svh overflow-y-auto">
 		<Toolbar class="w-full border-0 h-14">
 			<template #start>
-				<router-link :to="{ name: 'gallery' }">
-					<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-				</router-link>
+				<OpenLeftMenu />
 			</template>
 
 			<template #center>
@@ -24,4 +22,5 @@ import Toolbar from "primevue/toolbar";
 import SetLogin from "@/components/forms/profile/SetLogin.vue";
 import SetSecondFactor from "@/components/forms/profile/SetSecondFactor.vue";
 import SetOauth from "@/components/forms/profile/SetOauth.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 </script>
diff --git a/resources/js/views/Settings.vue b/resources/js/views/Settings.vue
index 847dabd3f6f..c4c5ce53c64 100644
--- a/resources/js/views/Settings.vue
+++ b/resources/js/views/Settings.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -19,7 +17,7 @@
 	<Tabs value="0" class="max-w-5xl mx-auto">
 		<TabList>
 			<Tab value="0">Basic</Tab>
-			<Tab value="1"><i class="pi pi-exclamation-triangle mr-2" />{{ $t("lychee.MORE") }}</Tab>
+			<Tab value="1"><i class="pi pi-exclamation-triangle mr-2 text-orange-500" />All settings</Tab>
 		</TabList>
 		<TabPanels :pt:root:class="'px-0'">
 			<TabPanel value="0">
@@ -33,7 +31,6 @@
 	</Tabs>
 </template>
 <script setup lang="ts">
-import Button from "primevue/button";
 import Tabs from "primevue/tabs";
 import TabList from "primevue/tablist";
 import Tab from "primevue/tab";
@@ -42,4 +39,5 @@ import TabPanel from "primevue/tabpanel";
 import Toolbar from "primevue/toolbar";
 import AllSettings from "@/components/settings/AllSettings.vue";
 import EasySettings from "@/components/settings/EasySettings.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 </script>
diff --git a/resources/js/views/Sharing.vue b/resources/js/views/Sharing.vue
index 29a68bc1bb8..78b8e00d1cf 100644
--- a/resources/js/views/Sharing.vue
+++ b/resources/js/views/Sharing.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 		<template #center>
 			{{ $t("lychee.SHARING") }}
@@ -11,28 +9,24 @@
 		<template #end> </template>
 	</Toolbar>
 	<Panel class="border-none p-9 mx-auto max-w-3xl" v-if="perms !== undefined" pt:header:class="hidden">
-		<div class="w-full mb-9 text-center">This page gives an overview and edit the sharing rights associated with albums.</div>
-		<div class="flex flex-col">
-			<div class="flex text-muted-color items-center">
+		<div class="w-full mb-9 text-center text-muted-color-emphasis">
+			This page gives an overview of and the ability to edit the sharing rights associated with albums.
+		</div>
+		<div class="flex flex-col text-muted-color-emphasis">
+			<div class="flex items-center">
 				<div class="w-5/12 flex items-center">
 					<span class="w-full">{{ $t("lychee.ALBUM_TITLE") }}</span>
 					<span class="w-full">{{ $t("lychee.USERNAME") }}</span>
 				</div>
-				<div class="w-1/12 flex justify-center items-center">
+				<div class="w-1/2 flex items-center justify-around">
+					<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
 					<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-download" v-tooltip.top="'Grants download'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
-				</div>
-				<div class="w-1/12 flex justify-center items-center">
 					<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />
 				</div>
+				<div class="w-1/6"></div>
 			</div>
 			<template v-if="perms?.length > 0">
 				<ShareLine v-for="perm in perms" :perm="perm" @delete="deletePermission" :with-album="true" />
@@ -43,8 +37,8 @@
 </template>
 <script setup lang="ts">
 import ShareLine from "@/components/forms/sharing/ShareLine.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 import SharingService from "@/services/sharing-service";
-import Button from "primevue/button";
 import Panel from "primevue/panel";
 import Toolbar from "primevue/toolbar";
 import { useToast } from "primevue/usetoast";
diff --git a/resources/js/views/Statistics.vue b/resources/js/views/Statistics.vue
index c24ec6b8709..8cb4a3d083b 100644
--- a/resources/js/views/Statistics.vue
+++ b/resources/js/views/Statistics.vue
@@ -1,9 +1,7 @@
 <template>
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -43,6 +41,7 @@ import { shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
 import SizeVariantMeter from "@/components/statistics/SizeVariantMeter.vue";
 import TotalCard, { TotalAlbum } from "@/components/statistics/TotalCard.vue";
 import AlbumsTable from "@/components/statistics/AlbumsTable.vue";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 
 const router = useRouter();
 const user = ref(undefined as undefined | App.Http.Resources.Models.UserResource);
diff --git a/resources/js/views/Users.vue b/resources/js/views/Users.vue
index b0e02b86c37..2976141d2f7 100644
--- a/resources/js/views/Users.vue
+++ b/resources/js/views/Users.vue
@@ -2,9 +2,7 @@
 	<CreateEditUser class="mt-10" @refresh="load" v-model:visible="isCreateUserVisible" :user="selectedUser" :is-edit="isEdit" />
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
-			<router-link :to="{ name: 'gallery' }">
-				<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text />
-			</router-link>
+			<OpenLeftMenu />
 		</template>
 
 		<template #center>
@@ -74,6 +72,7 @@ import ListUser from "@/components/forms/users/ListUser.vue";
 import { useToast } from "primevue/usetoast";
 import { storeToRefs } from "pinia";
 import { useLycheeStateStore } from "@/stores/LycheeState";
+import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
 
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
diff --git a/resources/js/views/gallery-panels/Map.vue b/resources/js/views/gallery-panels/Map.vue
index da2144f1176..a02e4d4157c 100644
--- a/resources/js/views/gallery-panels/Map.vue
+++ b/resources/js/views/gallery-panels/Map.vue
@@ -182,7 +182,6 @@ function addContentsToMap() {
 
 	data.value.photos.forEach(function (element: App.Http.Resources.Models.PhotoResource) {
 		if (element.latitude || element.longitude) {
-			// console.log(element);
 			photos.push({
 				lat: element.latitude,
 				lng: element.longitude,
diff --git a/resources/js/views/gallery-panels/Search.vue b/resources/js/views/gallery-panels/Search.vue
index 1131125a424..2b34a82bc0b 100644
--- a/resources/js/views/gallery-panels/Search.vue
+++ b/resources/js/views/gallery-panels/Search.vue
@@ -15,15 +15,21 @@
 				<template #end> </template>
 			</Toolbar>
 		</Collapse>
-		<SearchBox v-if="searchMinimumLengh !== undefined" :search-minimum-lengh="searchMinimumLengh" v-model:search="search_term" @search="search" />
-		<template v-if="isSearching">
+		<SearchBox
+			v-if="searchMinimumLengh !== undefined"
+			:search-minimum-lengh="searchMinimumLengh"
+			v-model:search="search_term"
+			@search="search"
+			@clear="clear"
+		/>
+		<template v-if="isSearching === true">
 			<div class="flex w-full h-full items-center justify-center text-xl text-muted-color">
 				<span class="block">
 					{{ "Searching..." }}
 				</span>
 			</div>
 		</template>
-		<template v-if="noData">
+		<template v-if="isSearching === false && noData">
 			<div class="flex w-full h-full items-center justify-center text-xl text-muted-color">
 				<span class="block">
 					{{ "Nothing to see here" }}
@@ -137,9 +143,9 @@ import { storeToRefs } from "pinia";
 import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
 import Paginator from "primevue/paginator";
-import { computed, Ref, ref } from "vue";
+import { computed, ref } from "vue";
 import { Collapse } from "vue-collapsed";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { useSearch } from "@/composables/album/searchRefresher";
 import { trans } from "laravel-vue-i18n";
 import Divider from "primevue/divider";
@@ -171,8 +177,22 @@ const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 const { are_nsfw_visible, is_full_screen, search_page, search_term, is_login_open, nsfw_consented, is_upload_visible } = storeToRefs(lycheeStore);
-const { albums, photos, noData, searchMinimumLengh, isSearching, from, per_page, total, photoHeader, albumHeader, searchInit, search, refresh } =
-	useSearch(albumid, lycheeStore, search_term, search_page);
+const {
+	albums,
+	photos,
+	noData,
+	searchMinimumLengh,
+	isSearching,
+	from,
+	per_page,
+	total,
+	photoHeader,
+	albumHeader,
+	searchInit,
+	search,
+	clear,
+	refresh,
+} = useSearch(albumid, lycheeStore, search_term, search_page);
 const { album, config, layout, loadAlbum, loadLayout } = useAlbumRefresher(albumid, auth, is_login_open, nsfw_consented);
 
 const configForMenu = computed<App.Http.Resources.GalleryConfigs.AlbumConfig>(() => {