diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3dafe85..2dfdff8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -55,12 +55,7 @@ export default defineComponent({
 	<RouterView :images="images" @delete="deleteFile" @updateImageList="updateImageList()" />
 </template>
 <style scoped>
-.navi {
-	/* reduce size of children */
-	display: flex;
-	flex-direction: row-reverse;
-	pointer-events: none;
-}
+@import url("@/navi.css");
 
 header {
 	display: block;
@@ -72,17 +67,6 @@ header {
 	pointer-events: none;
 }
 
-ul>li+li {
-	margin-left: 30px;
-}
-
-ul>li {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 .router-link-active {
 	background-color: #646cff;
 }
@@ -90,31 +74,4 @@ ul>li {
 .router-link-active>a {
 	color: rgb(205, 201, 194);
 }
-
-a {
-	padding: 5px 15px;
-	border-radius: 60px;
-	color: rgb(172, 165, 154);
-	text-decoration: none;
-	font-family: "Aeonik", sans-serif;
-}
-
-nav {
-	display: flex;
-	justify-content: center;
-	padding-left: 20px;
-	height: 60px;
-	padding-right: 20px;
-	border-radius: 60px;
-	background-color: rgb(24, 26, 27);
-	margin-right: 20px;
-	pointer-events: auto;
-}
-
-
-ul {
-	display: flex;
-	list-style: none;
-	padding-inline-start: 0;
-}
 </style>
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index d5cf97a..be3f3fb 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -22,7 +22,6 @@ export default defineComponent({
 	data() {
 		return {
 			imageSelectedId: -1,
-			timer: null as ReturnType<typeof setTimeout> | null,
 			editor: false,
 			filter: undefined as Filter | undefined,
 		}
@@ -47,35 +46,29 @@ export default defineComponent({
 				this.imageSelectedId = id;
 			else
 				this.imageSelectedId = this.images.keys().next().value;
-		},
-		startTimer() {
-			if (this.timer !== null)
-				clearTimeout(this.timer);
-			this.timer = setTimeout(() => {
-				this.editor = !this.editor;
-			}, 1900);
-		},
-		clearTimer() {
-			if (this.timer !== null) {
-				clearTimeout(this.timer);
-				this.timer = null;
-			}
 		}
 	}
 })
 </script>
 <template>
 	<div class="flex" v-if="images.size > 0">
-		<h1 v-if="!editor">MODE SÉLECTION</h1>
-		<h1 v-else>MODE ÉDITEUR</h1>
+		<div class="navi">
+			<nav>
+				<ul>
+					<li>
+						<h3 :class="{ active: !editor }" @click="editor = false">Mode selection</h3>
+					</li>
+					<li>
+						<h3 :class="{ active: editor }" @click="editor = true">Mode editeur</h3>
+					</li>
+				</ul>
+			</nav>
+		</div>
 		<HomeSelect v-if="!editor" :images="images" :image-selected-id="imageSelectedId" @delete="id => $emit('delete', id)"
 			@updateImageSelectedId="id => updateImageSelectedId(id)"></HomeSelect>
 		<HomeEditor v-else @apply-filter="(newFilter) => filter = newFilter"></HomeEditor>
-		<h5 v-if="!editor">Restez sur l'image pour passer en mode éditeur</h5>
-		<h5 v-else>Restez sur l'image pour passer en mode selection</h5>
-		<Image @mouseleave="clearTimer()" @mouseenter="startTimer()" class="home"
-			v-if="imageSelectedId !== undefined && imageSelectedId !== -1" :id="imageSelectedId" :images="images"
-			:filter="filter">
+		<Image class="home" v-if="imageSelectedId !== undefined && imageSelectedId !== -1" :id="imageSelectedId"
+			:images="images" :filter="filter">
 		</Image>
 		<a class="button" :href="images.get(imageSelectedId)?.data"
 			:download="images.get(imageSelectedId)?.name">Télécharger {{ images.get(imageSelectedId)?.name }}</a>
@@ -83,16 +76,13 @@ export default defineComponent({
 	<h1 v-else>Aucune image trouvée</h1>
 </template>
 <style scoped>
+@import url("@/navi.css");
+
 h1 {
 	color: white;
 	margin: 0;
 }
 
-h5 {
-	color: white;
-	margin: 1vw 0 0 0;
-}
-
 a {
 	text-decoration: none;
 }
@@ -106,6 +96,19 @@ html {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	gap: 4vh;
+}
+
+.active {
+	background-color: #646cff;
+}
+
+.active a {
+	color: rgb(205, 201, 194);
+}
+
+.navi h3 {
+	cursor: pointer;
 }
 </style>
 <style>
@@ -114,29 +117,5 @@ html {
 	width: auto;
 	height: auto;
 	max-height: 60vh;
-	margin: 0 0 2vw 0;
-}
-
-div.home.imageContainer:hover {
-	animation: zoom-in-zoom-out 2s cubic-bezier(1, 0, 0.51, 1.01);
-	transform: none;
-}
-
-@keyframes zoom-in-zoom-out {
-	0% {
-		transform: scale(1);
-	}
-
-	60% {
-		transform: scale(1.5);
-	}
-
-	75% {
-		transform: scale(10);
-	}
-
-	100% {
-		transform: none;
-	}
 }
 </style>
diff --git a/frontend/src/components/HomeEditor.vue b/frontend/src/components/HomeEditor.vue
index a5b8275..473625f 100644
--- a/frontend/src/components/HomeEditor.vue
+++ b/frontend/src/components/HomeEditor.vue
@@ -17,7 +17,7 @@ export default defineComponent({
 			filterSelectId: 0,
 			open: false,
 			filters: [] as Filter[],
-			error: false,
+			error: "",
 		}
 	},
 	created() {
@@ -27,6 +27,8 @@ export default defineComponent({
 	},
 	methods: {
 		applyFilter() {
+			if (this.error !== "")
+				return;
 			if (this.filterSelectId === 0) {
 				this.$emit("applyFilter", undefined);
 				return;
@@ -34,11 +36,37 @@ export default defineComponent({
 			const filter = clone(this.filters[this.filterSelectId - 1]);
 			for (const arg of filter.parameters) {
 				if (arg.value === undefined) {
-					this.error = true;
+					this.error = "";
 					return;
 				}
 			}
 			this.$emit("applyFilter", filter);
+		},
+		areInputValid() {
+			if (this.filterSelectId === 0)
+				return "";
+			for (const p of this.filters[this.filterSelectId - 1].parameters) {
+				const input = document.getElementById(p.name) as HTMLInputElement;
+				if (input === null)
+					return "";
+				if (!input.checkValidity())
+					return "Paramètre(s) du filtre invalide(s)";
+			}
+			return "";
+		}
+	},
+	watch: {
+		filters: {
+			handler() {
+				for (const f of this.filters) {
+					for (const p of f.parameters) {
+						if (p.value === undefined)
+							p.value = Math.round((p.max - Math.abs(p.min)) / 2);
+					}
+				}
+				this.error = this.areInputValid();
+			},
+			deep: true
 		}
 	}
 })
@@ -62,12 +90,17 @@ export default defineComponent({
 		</div>
 		<div v-if="filters.length != 0 && filterSelectId !== 0" v-for="parameter in filters[filterSelectId - 1].parameters"
 			class="rangeInput">
-			<label>{{ parameter.name }}: ({{ parameter.value }}) </label>
+			<div class="labelInput">
+				<label>{{ parameter.name }}</label>
+				<input type="number" :min="parameter.min" :max="parameter.max" :step="parameter.step"
+					v-model.number="parameter.value" :id="parameter.name" />
+			</div>
 			<input type="range" :min="parameter.min" :max="parameter.max" :step="parameter.step"
 				v-model.number="parameter.value" />
 		</div>
-		<button @mouseleave="error = false" class="button" :class="{ erreurClass: error }" @click="applyFilter()">
-			{{ error ? "Erreur" : "Appliquer le filtre" }}</button>
+		<button @mouseenter="error = areInputValid()" @mouseleave="error = areInputValid()" class="button"
+			:class="{ errorClass: error !== '' }" @click="applyFilter()">
+			{{ error !== "" ? error : "Appliquer le filtre" }}</button>
 	</div>
 </template>
 
@@ -90,7 +123,7 @@ label {
 	gap: 10px;
 }
 
-.erreurClass {
+.errorClass {
 	background-color: red;
 	color: white;
 }
diff --git a/frontend/src/navi.css b/frontend/src/navi.css
new file mode 100644
index 0000000..35e037f
--- /dev/null
+++ b/frontend/src/navi.css
@@ -0,0 +1,43 @@
+.navi {
+	/* reduce size of children */
+	display: flex;
+	flex-direction: row-reverse;
+	pointer-events: none;
+	gap: 3vw;
+}
+
+.navi ul>li {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.navi h3,
+.navi a {
+	min-width: 90px;
+	padding: 5px 15px;
+	border-radius: 60px;
+	color: rgb(172, 165, 154);
+	text-decoration: none;
+	font-family: "Aeonik", sans-serif;
+}
+
+.navi nav {
+	display: flex;
+	justify-content: center;
+	padding-left: 20px;
+	height: 60px;
+	padding-right: 20px;
+	border-radius: 60px;
+	background-color: rgb(24, 26, 27);
+	margin-right: 20px;
+	pointer-events: auto;
+}
+
+
+.navi ul {
+	display: flex;
+	list-style: none;
+	padding-inline-start: 0;
+}
\ No newline at end of file