diff --git a/src/api/solver.ts b/src/api/solver.ts
index dbbf6d9..3ca9394 100644
--- a/src/api/solver.ts
+++ b/src/api/solver.ts
@@ -18,7 +18,13 @@ export default class Solver {
 		if (equation.includes(variable) === false) return [];
 
 		// Trouve les solutions de l'équation
-		var rawSolutions = nerdamer.solveEquations(equation + ' = ' + y, variable);
+		while (equation.startsWith(')')) equation = equation.slice(1);
+
+		try {
+			var rawSolutions = nerdamer.solveEquations(equation + ' = ' + y, variable);
+		} catch {
+			return [];
+		}
 
 		// Transforme les solutions en array
 		const solutionsArray = this.stringToArray(rawSolutions.toString());
@@ -141,6 +147,8 @@ export default class Solver {
 			if (variableValue.toString() === '0') return NaN;
 		}
 
+		if (x === undefined) return NaN;
+
 		return this.toInteger(x.toString());
 	}
 }
diff --git a/src/components/Designer.svelte b/src/components/Designer.svelte
index 7967237..432d9be 100644
--- a/src/components/Designer.svelte
+++ b/src/components/Designer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { afterUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import MathsExt from '../extensions/mathsExt';
 	import Choix from '../models/choix';
-	import SaisieFonction from './SaisieFormule.svelte';
+	import SaisieFormule from './saisie/SaisieFormule.svelte';
 	import TableauDeSigne from './tds/Tableau.svelte';
 	//@ts-ignore
 	import DomToImage from 'dom-to-image';
@@ -26,6 +26,9 @@
 	// Taille du tableau
 	let scale: number = 1;
 
+	// Utile pour cacher certaines icones
+	export let isInfoShown: boolean = false;
+
 	/**
 	 * Trigger lorsque la taille de la fenêtre change
 	 * Permet de montrer la zone de configuration après être passé sur une fenêtre plus
@@ -71,7 +74,11 @@
 	 */
 	const functionChanged = (e: CustomEvent<any>) => {
 		// Remplace la formule par la nouvelle
+		choix = Choix.Tableau;
 		formula = e.detail;
+		setTimeout(() => {
+			choix = Choix.Variation;
+		}, 100);
 	};
 
 	/**
@@ -107,7 +114,9 @@
 
 	// Désigne la formule utilisé dans le tableau (tout sauf le tableau de variation),
 	// Si on veut étudier des variations, on dérive la formule de base
-	$: formuleTableau = choix === Choix.Tableau ? formula : MathsExt.Deriver(formula, variableName);
+	$: formuleTableau =
+		choix === Choix.Tableau ? formula : MathsExt.Deriver(formula, variableName)[0];
+	$: deriverTex = choix === Choix.Tableau ? formula : MathsExt.Deriver(formula, variableName)[1];
 
 	/**
 	 * Télécharge le tableau en format image
@@ -154,7 +163,7 @@
 		<form class="px-3 flex flex-col w-full">
 			<fieldset id="group" class="w-full">
 				<div class="w-full">
-					<div>
+					<div class="mt-3">
 						<input
 							type="radio"
 							id="variations"
@@ -190,7 +199,7 @@
 					</div>
 
 					<div class="md:max-w-[270px]">
-						<SaisieFonction
+						<SaisieFormule
 							on:handleFunctionNameChanged={functionNameChanged}
 							on:handleVariableNameChanged={variableNameChanged}
 							on:handleFunctionChanged={functionChanged}
@@ -213,10 +222,10 @@
 					{#if choix === Choix.Variation}
 						<div class="opacity-70 mt-3 md:max-w-[280px]">
 							<p class="italic -mb-3 cursor-default">Dérivée de f(x)</p>
-							<SaisieFonction
+							<SaisieFormule
 								{variableName}
 								functionName={functionName + "'"}
-								formula={formuleTableau}
+								formula={deriverTex}
 								isDisabled={true}
 							/>
 						</div>
@@ -225,7 +234,7 @@
 			</fieldset>
 		</form>
 
-		<label class="mx-5 mt-0 md:mt-3 mb-1 md:mb-2" for="scale"> Taille du tableau </label>
+		<label class="mx-5 mt-3 mb-1 md:mb-2" for="scale"> Taille du tableau </label>
 
 		<input type="range" class="mx-5" bind:value={scale} min="1" max="3" step="0.05" id="scale" />
 
@@ -257,31 +266,33 @@
 
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<!-- Bouton pour toggle la visibilité de la configuration -->
-	<div
-		class="absolute right-1 mt-1 visible md:hidden cursor-pointer opacity-60 z-50 flex flex-col items-center justify-center"
-		on:mousedown={() => {
-			toggleConfigVisibility = !toggleConfigVisibility;
-		}}
-	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke-width="1.5"
-			stroke="black"
-			class="w-8 h-8"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d={toggleConfigVisibility
-					? 'M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
-					: 'M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75'}
-			/>
-		</svg>
-		<p class="-mt-1 text-sm">{toggleConfigVisibility ? 'hide' : 'show'}</p>
-	</div>
 
+	{#if !isInfoShown}
+		<div
+			class="absolute right-1 mt-1 visible md:hidden cursor-pointer opacity-60 z-50 flex flex-col items-center justify-center"
+			on:mousedown={() => {
+				toggleConfigVisibility = !toggleConfigVisibility;
+			}}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="black"
+				class="w-8 h-8"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d={toggleConfigVisibility
+						? 'M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+						: 'M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75'}
+				/>
+			</svg>
+			<p class="-mt-1 text-sm">{toggleConfigVisibility ? 'hide' : 'show'}</p>
+		</div>
+	{/if}
 	<div
 		class="pt-5 w-full h-full overflow-y-auto overflow-x-hidden mb-5 flex flex-col justify-center items-center relative"
 	>
@@ -306,7 +317,7 @@
 
 		{#if toggleConfigVisibility === false}
 			<div class="w-8/12 absolute -top-1.5 self-center">
-				<SaisieFonction
+				<SaisieFormule
 					on:handleFunctionNameChanged={functionNameChanged}
 					on:handleVariableNameChanged={variableNameChanged}
 					on:handleFunctionChanged={functionChanged}
@@ -316,24 +327,27 @@
 				/>
 			</div>
 		{/if}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke-width="1.5"
-			stroke="darkblue"
-			class={'w-8 h-8 absolute top-1.5 mt-1 left-2 md:left-auto md:right-2 opacity-50 cursor-pointer z-50 '}
-			on:click={() => {
-				dispatch('showInfo');
-			}}
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-			/>
-		</svg>
+
+		{#if !isInfoShown}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="darkblue"
+				class={'w-8 h-8 absolute top-1.5 mt-1 left-2 md:left-auto md:right-2 opacity-50 cursor-pointer z-50 '}
+				on:click={() => {
+					dispatch('showInfo');
+				}}
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+				/>
+			</svg>
+		{/if}
 	</div>
 </div>
diff --git a/src/components/SaisieFormule.svelte b/src/components/SaisieFormule.svelte
index bbc23c7..cb9927a 100644
--- a/src/components/SaisieFormule.svelte
+++ b/src/components/SaisieFormule.svelte
@@ -9,7 +9,7 @@
 	export let isDisabled: boolean = false;
 </script>
 
-<div class="w-full mt-3 flex flex-row items-center rounded-lg bg-white overflow-auto">
+<div class="mt-3 flex flex-row items-center rounded-lg bg-white">
 	<SaisieFonction
 		{functionName}
 		{variableName}
diff --git a/src/components/SaisieMath.svelte b/src/components/SaisieMath.svelte
index cd86296..a29e9fa 100644
--- a/src/components/SaisieMath.svelte
+++ b/src/components/SaisieMath.svelte
@@ -62,7 +62,7 @@
 	 * mis par défaut
 	 */
 	onMount(() => {
-		dispatch(eventName, value.trim());
+		dispatch(eventName, value);
 	});
 
 	/**
@@ -91,7 +91,7 @@
 
 {#if isEditing}
 	<textarea
-		class={`bg-transparent text-xs md:text-xs lg:text-lg mt-7 outline-none placeholder:text-opacity-50 resize-none ${classes} ${classesInput} ${
+		class={`bg-transparent text-xl mt-7 outline-none placeholder:text-opacity-50 resize-none ${classes} ${classesInput} ${
 			!isFormulaValid ? 'text-red-500' : ''
 		}`}
 		spellcheck="false"
@@ -127,8 +127,13 @@
 	/>
 {:else}
 	<div
-		class={`pb-2 pt-2.5 select-none text-xs md:text-xs lg:text-lg ${classes} ` +
-			(isDisabled ? 'cursor-default ' : 'cursor-text hover:font-bold hover:text-blue-700 ')}
+		class={`  pb-2 pt-2.5 select-none text-xs md:text-xs lg:text-lg ${classes} ` +
+			(isDisabled ? 'cursor-default ' : 'cursor-text hover:font-bold hover:text-blue-700 ') +
+			(value.length > 10 && value.length < 15
+				? 'lg:text-lg '
+				: value.length > 15
+				? 'lg:text-xs '
+				: '')}
 		on:mousedown={() => {
 			if (!isDisabled) {
 				isEditing = true;
diff --git a/src/components/Tableau.svelte b/src/components/Tableau.svelte
new file mode 100644
index 0000000..1d2d4d9
--- /dev/null
+++ b/src/components/Tableau.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import Sheller from '../api/sheller';
+	import Solver from '../api/solver';
+	import Choix from '../models/choix';
+	import ExpressionElement from '../models/expression';
+	import type Solution from '../models/solution';
+	import FunctionRow from './tds/FunctionRow.svelte';
+	import Header from './tds/Header.svelte';
+	import Row from './tds/Row.svelte';
+	import Variation from './tds/Variation.svelte';
+
+	export let functionName: string = 'f';
+	export let variableName: string = 'x';
+	export let formula: string = 'x^2 - 4x';
+
+	export let borneMin: string = '-inf';
+	export let borneMax: string = '+inf';
+
+	// La formule de base écrite par l'utilisateur,
+	// qui est différente de celle dérivée
+	export let formulaBase: string = 'x^2 - 4x';
+
+	// Permet d'afficher ce que l'utilisateur veut
+	export let choix: Choix = Choix.Variation;
+
+	// Shell la fonction et la décompose en plusieurs parties à chaque fois que la formule est modifié
+	$: lignes = Sheller.ShellFunction(formula);
+
+	let solutions: Solution[] = [];
+
+	// Calcul des solutions
+	$: {
+		solutions = [];
+		lignes.forEach((line) => {
+			let lineSolutions = Solver.solveEquation(line.toString(), variableName);
+
+			// Ajoute les solutions qui n'ont pas déjà été ajoutées
+			lineSolutions.forEach((solution) => {
+				if (solutions.some((s) => s.value === solution.value) === false) {
+					solution.associatedEquations.push(line.toString());
+					solutions.push(solution);
+				} else {
+					// Il existe déjà: on ajoute la formule qui a aussi sa solution associé
+					const existingSolution = solutions.find((s) => s.value === solution.value)!;
+
+					// Vérifie quand même que la solution associé n'existe pas déjà non plus
+					if (existingSolution.associatedEquations.some((s) => s === line.toString()) === false) {
+						existingSolution.associatedEquations.push(line.toString());
+					}
+				}
+			});
+		});
+
+		// Order les solutions par valeur (ordre croissat)
+		solutions.sort((a, b) => {
+			return a.integer - b.integer;
+		});
+	}
+
+	// Prend uniquement les solutions dans l'interval demandé
+	let inRangeSolutions: Solution[] = [];
+	$: {
+		solutions;
+		inRangeSolutions = solutions.filter((solution) => {
+			return (
+				solution.integer >= Solver.toInteger(borneMin) &&
+				solution.integer <= Solver.toInteger(borneMax)
+			);
+		});
+	}
+
+	// Tableau contenant le signe final de la fonction
+	let signs: string[] = [];
+	$: {
+		signs = [];
+
+		// Signe entre bornMin et la première solution
+		// s'il n'y a pas de solution on prend 0
+		const compareTo = inRangeSolutions.length > 0 ? inRangeSolutions[0].integer - 0.0000001 : 0;
+		const resultat = Solver.formulaToInt(
+			new ExpressionElement(true, false, formula, ''),
+			variableName,
+			compareTo
+		);
+
+		signs.push(resultat < 0 ? '-' : '+');
+
+		// Signe entre chaque autres solution
+		inRangeSolutions.forEach((solution) => {
+			let signe = '';
+
+			// Si c'est une valeur interdite on l'écrit dans le signe
+			// le component FunctionRow va ensuite l'interpreter pour y mettre une double barre
+			if (lignes.some((x) => x.Interdite && solution.associatedEquations.includes(x.Expression))) {
+				signe += '|';
+			}
+
+			const resultat = Solver.formulaToInt(
+				new ExpressionElement(true, false, formula, ''),
+				variableName,
+				solution.integer + 0.0000001
+			);
+
+			signs.push(resultat < 0 ? signe + '-' : signe + '+');
+		});
+	}
+</script>
+
+<div class="w-full h-full flex items-center justify-center flex-col">
+	<div class="w-11/12 md:w-10/12" id="tableau-de-signe">
+		<Header
+			{variableName}
+			{borneMax}
+			{borneMin}
+			{inRangeSolutions}
+			on:handleVariableNameChanged
+			on:handleBorneMaxChanged
+			on:handleBorneMinChanged
+		/>
+
+		{#each lignes as line}
+			<Row expression={line} {inRangeSolutions} {variableName} />
+		{/each}
+
+		<FunctionRow
+			{inRangeSolutions}
+			{functionName}
+			{signs}
+			{variableName}
+			{choix}
+			on:handleFunctionNameChanged
+			on:handleVariableNameChanged
+		/>
+
+		{#if choix === Choix.Variation}
+			<Variation
+				{inRangeSolutions}
+				{functionName}
+				{signs}
+				{variableName}
+				{borneMax}
+				{borneMin}
+				formula={formulaBase}
+				on:handleFunctionNameChanged
+				on:handleVariableNameChanged
+			/>
+		{/if}
+	</div>
+</div>
diff --git a/src/components/saisie/SaisieFonction.svelte b/src/components/saisie/SaisieFonction.svelte
new file mode 100644
index 0000000..464bed8
--- /dev/null
+++ b/src/components/saisie/SaisieFonction.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import SaisieMath from './SaisieMath.svelte';
+
+	export let functionName: string = 'f';
+	export let variableName: string = 'x';
+
+	export let isDisabled: boolean = false;
+</script>
+
+<SaisieMath
+	on:handleFunctionNameChanged
+	eventName="handleFunctionNameChanged"
+	classes="text-center text-right pl-2 rounded-l-lg"
+	classesInput="w-10"
+	value={functionName}
+	maxLength={3}
+	{isDisabled}
+/>
+<SaisieMath classes="pl-1" classesInput="w-3" value={'('} maxLength={1} isDisabled />
+<SaisieMath
+	on:handleVariableNameChanged
+	eventName="handleVariableNameChanged"
+	classes="pl-0.5"
+	classesInput="w-4"
+	value={variableName}
+	forbidden="e"
+	maxLength={1}
+	{isDisabled}
+/>
+
+<SaisieMath classesInput="w-7" classes="pr-1" value={')'} maxLength={1} isDisabled />
diff --git a/src/components/saisie/SaisieFormule.svelte b/src/components/saisie/SaisieFormule.svelte
new file mode 100644
index 0000000..bbc23c7
--- /dev/null
+++ b/src/components/saisie/SaisieFormule.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import SaisieFonction from './SaisieFonction.svelte';
+	import SaisieMath from './SaisieMath.svelte';
+
+	export let variableName: string = 'x';
+	export let functionName: string = 'f';
+	export let formula: string = 'x^2 - 4x';
+
+	export let isDisabled: boolean = false;
+</script>
+
+<div class="w-full mt-3 flex flex-row items-center rounded-lg bg-white overflow-auto">
+	<SaisieFonction
+		{functionName}
+		{variableName}
+		on:handleFunctionNameChanged
+		on:handleVariableNameChanged
+		{isDisabled}
+	/>
+
+	<SaisieMath classes="w-7 " value={' = '} maxLength={1} isDisabled />
+	<SaisieMath
+		on:handleFunctionChanged
+		eventName="handleFunctionChanged"
+		classes="w-full pl-1 rounded-r-lg"
+		value={formula}
+		maxLength={999}
+		isFormula={true}
+		{variableName}
+		{isDisabled}
+	/>
+</div>
diff --git a/src/components/saisie/SaisieMath.svelte b/src/components/saisie/SaisieMath.svelte
new file mode 100644
index 0000000..cd86296
--- /dev/null
+++ b/src/components/saisie/SaisieMath.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	import Katex from 'svelte-katex';
+	import { parse } from 'mathjs';
+
+	// Style
+	export let classes = '';
+	export let classesInput = '';
+	// Valeur par défaut de l'input (txt et katex)
+	export let value = '';
+	// Placeholder de la zone de saisie (valeur par défaut)
+	export let placeholder = value;
+	// Longueur maximale de la zone de saisie
+	export let maxLength = 255;
+	// Est-ce que l'utilisateur peut changer la formule ?
+	export let isDisabled = false;
+	// Le nom de l'event associé à l'envoie de la nouvelle formule
+	export let eventName = '';
+	// Nom de la variable
+	export let variableName = 'x';
+	// Est-ce que on rentre une formule ici ? (influence la validité)
+	export let isFormula = false;
+	// Valeur interdite
+	export let forbidden = '';
+
+	// Est-ce que l'utilisateur est en train d'éditer la formule ?
+	let isEditing = false;
+
+	// Prevent de trigger l'event associé à l'envoie de la nouvelle
+	// saisie de l'utilisateur.
+	let hasFormulaInputChanged = false;
+
+	// La formule saisie par l'utilisateur mais au format Katex
+	let katexFormula: string = value;
+
+	// Est-ce que la formule saisie par l'utilisateur est valide ?
+	let isFormulaValid: boolean = true;
+
+	// Ref de la textarea faisant office de saisie pour la formule
+	let ref: HTMLTextAreaElement;
+
+	// A chaque fois que l'utilisateur entre une nouvelle saisie,
+	// on vérifie si elle est valide en la transformant en Katex.
+	// Si non, alors le texte est mis en rouge.
+	$: try {
+		// Converti la saisie en format Katex
+		katexFormula = !isDisabled ? parse(value).toTex({ parenthesis: 'auto' }) : value;
+		// Vérifie que la variable est présente
+		if ((value.includes(variableName) || !isFormula) && value !== forbidden) {
+			isFormulaValid = true;
+		} else {
+			isFormulaValid = false;
+		}
+	} catch {
+		// La formule entrée est incorrecte
+		isFormulaValid = false;
+	}
+
+	/**
+	 * Envoie une première fois la formule
+	 * Afin de dresser le tableau de signe de la formule
+	 * mis par défaut
+	 */
+	onMount(() => {
+		dispatch(eventName, value.trim());
+	});
+
+	/**
+	 * Affiche la saisie Katex après validation
+	 * Vérifie si la saisie est vide et que la formule entrée est correcte; le
+	 * cas échéant on laisse la saisie éditable pour avoir le placeholder
+	 */
+	const dispatch = createEventDispatcher();
+	const validateInput = (e: FocusEvent | KeyboardEvent) => {
+		// Permet de ne pas faire de saut de ligne
+		e.preventDefault();
+
+		// Si la saisie n'est pas vide et que la formule entrée est correcte
+		if (ref.value.trim().length !== 0 && isFormulaValid) {
+			isEditing = false;
+
+			// Pas la peine d'envoyer la même saisie deux fois
+			if (hasFormulaInputChanged) {
+				dispatch(eventName, value);
+			}
+		}
+		// else : le placeholder est affiché vu qu'il n'y a pas de texte
+		// dans l'input
+	};
+</script>
+
+{#if isEditing}
+	<textarea
+		class={`bg-transparent text-xs md:text-xs lg:text-lg mt-7 outline-none placeholder:text-opacity-50 resize-none ${classes} ${classesInput} ${
+			!isFormulaValid ? 'text-red-500' : ''
+		}`}
+		spellcheck="false"
+		bind:value
+		maxlength={maxLength}
+		disabled={isDisabled}
+		{placeholder}
+		on:mouseup={() => {
+			// Permet d'auto focus l'input lorsqu'on clique sur la div Katex
+			ref.focus();
+		}}
+		on:focusin={() => {
+			// Permet de sélectionner le contenu de l'input si elle ne contient
+			// qu'une variable ou un nom de fonction
+			if (maxLength <= 3) {
+				ref.setSelectionRange(0, 1);
+			}
+		}}
+		on:blur={(e) => {
+			validateInput(e);
+		}}
+		on:keydown={(e) => {
+			// Valide l'entrée de l'utilisateur
+			if (e.key === 'Enter') {
+				validateInput(e);
+			}
+			// Indique que l'utilisateur a changé la formule
+			else {
+				hasFormulaInputChanged = true;
+			}
+		}}
+		bind:this={ref}
+	/>
+{:else}
+	<div
+		class={`pb-2 pt-2.5 select-none text-xs md:text-xs lg:text-lg ${classes} ` +
+			(isDisabled ? 'cursor-default ' : 'cursor-text hover:font-bold hover:text-blue-700 ')}
+		on:mousedown={() => {
+			if (!isDisabled) {
+				isEditing = true;
+				// reset la variable hasFormulaInputChanged
+				// dès qu'elle passera en true ça voudrait dire que
+				// l'utilisateur a changé la formule
+				hasFormulaInputChanged = false;
+
+				// Attend 20ms le temps que l'input se créé, puis lui bring le focus
+				setTimeout(() => {
+					if (ref) ref.focus();
+				}, 20);
+			}
+		}}
+		role="button"
+		tabindex="0"
+	>
+		<Katex>{katexFormula}</Katex>
+	</div>
+{/if}
diff --git a/src/components/tds/FunctionRow.svelte b/src/components/tds/FunctionRow.svelte
index 63191a4..0a9154a 100644
--- a/src/components/tds/FunctionRow.svelte
+++ b/src/components/tds/FunctionRow.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Choix from '../../models/choix';
 	import type Solution from '../../models/solution';
-	import SaisieFonction from '../SaisieFonction.svelte';
+	import SaisieFonction from '../saisie/SaisieFonction.svelte';
 
 	export let functionName: string = 'f';
 	export let variableName: string = 'x';
@@ -25,36 +25,38 @@
 		/>
 	</section>
 
-	<div
-		class={'w-full flex flex-row text-md text-center ' +
-			(signs.some((x) => x.length > 3)
-				? '' /* Message d'intervalle de définition */
-				: 'lg:text-3xl')}
-	>
-		<div class="w-full select-none flex justify-center items-center">{signs[0]}</div>
-
-		{#each inRangeSolutions as _, i}
-			<div class="w-full h-full relative">
-				<div
-					class="h-full border-l border-black select-none flex justify-center items-center text-center"
-				>
-					{signs[i + 1].replace('|', '')}
-				</div>
+	{#if signs.length > inRangeSolutions.length}
+		<div
+			class={'w-full flex flex-row text-md text-center ' +
+				(signs.some((x) => x.length > 3)
+					? '' /* Message d'intervalle de définition */
+					: 'lg:text-3xl')}
+		>
+			<div class="w-full select-none flex justify-center items-center">{signs[0]}</div>
 
-				<!-- Met un trait avec un 0 pour la colonne à gauche du signe si l'expression s'annule en 0 à la solution -->
-				<!-- C'est une valeur interdite si dans le signe il y a une barre -->
-				{#if signs[i + 1].includes('|') === false}
-					<!-- Annulation en 0 -->
-					<p
-						class="absolute select-none -translate-y-1/2 top-1/2 -translate-x-1/2 left-[0.05rem] md:left-[0.02rem] lg:left-[0.01rem] w-fit font-normal text-lg lg:text-3xl"
+			{#each inRangeSolutions as _, i}
+				<div class="w-full h-full relative">
+					<div
+						class="h-full border-l border-black select-none flex justify-center items-center text-center"
 					>
-						0
-					</p>
-				{:else}
-					<!-- Valeur interdite : double barre -->
-					<div class="w-full h-full top-0 absolute -left-1 border-l border-black" />
-				{/if}
-			</div>
-		{/each}
-	</div>
+						{signs[i + 1].replace('|', '')}
+					</div>
+
+					<!-- Met un trait avec un 0 pour la colonne à gauche du signe si l'expression s'annule en 0 à la solution -->
+					<!-- C'est une valeur interdite si dans le signe il y a une barre -->
+					{#if signs[i + 1].includes('|') === false}
+						<!-- Annulation en 0 -->
+						<p
+							class="absolute select-none -translate-y-1/2 top-1/2 -translate-x-1/2 left-[0.05rem] md:left-[0.02rem] lg:left-[0.01rem] w-fit font-normal text-lg lg:text-3xl"
+						>
+							0
+						</p>
+					{:else}
+						<!-- Valeur interdite : double barre -->
+						<div class="w-full h-full top-0 absolute -left-1 border-l border-black" />
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
 </div>
diff --git a/src/components/tds/Header.svelte b/src/components/tds/Header.svelte
index e0351bb..cd2b81b 100644
--- a/src/components/tds/Header.svelte
+++ b/src/components/tds/Header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Katex from 'svelte-katex';
 	import type Solution from '../../models/solution';
-	import SaisieMath from '../SaisieMath.svelte';
+	import SaisieMath from '../saisie/SaisieMath.svelte';
 
 	export let inRangeSolutions: Solution[];
 	export let variableName: string = 'x';
diff --git a/src/components/tds/Row.svelte b/src/components/tds/Row.svelte
new file mode 100644
index 0000000..3c0ada5
--- /dev/null
+++ b/src/components/tds/Row.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import Katex from 'svelte-katex';
+	import type ExpressionElement from '../../models/expression';
+	import type Solution from '../../models/solution';
+	import SaisieMath from '../SaisieMath.svelte';
+	import Solver from '../../api/solver';
+
+	export let expression: ExpressionElement;
+	export let variableName: string = 'x';
+	export let inRangeSolutions: Solution[];
+
+	const expressionChanged = (e: CustomEvent<any>) => {
+		expression.Expression = e.detail;
+	};
+
+	// Tableau contenant les signes des solutions, par ordre des colonnes du tableau
+	let signs: string[] = [];
+	// A chaque fois que les solutions changent on recalcule les signes
+	$: {
+		expression; // Pour que ça soit trigger lorsque l'expression change aussi
+
+		signs = [];
+		// Le premier signe se trouve entre borneMin et la première solution
+		signs.push(getSign(0));
+		signs.push(
+			...inRangeSolutions.map((solution, i) => {
+				return getSign(i + 1);
+			})
+		);
+	}
+
+	/**
+	 * Calcul le signe d'une cellule du tableau (d'index index)
+	 * @param index L'index de la cellule
+	 */
+	function getSign(index: number) {
+		let resultat = 0;
+
+		if (inRangeSolutions.length === 0) {
+			// signe constant
+			resultat = Solver.formulaToInt(expression, variableName, 0);
+		} else if (index === 0) {
+			// entre borneMin et la premiere solution
+			// (donc en gros juste avant la premiere solution)
+			resultat = Solver.formulaToInt(
+				expression,
+				variableName,
+				inRangeSolutions[0].integer - 0.0000001
+			);
+		} else {
+			// entre la solution précédente et la suivante
+			// (donc en gros juste apres la solution précédente)
+			resultat = Solver.formulaToInt(
+				expression,
+				variableName,
+				inRangeSolutions[index - 1].integer + 0.0000001
+			);
+		}
+
+		return resultat < 0 ? '-' : '+';
+	}
+
+	/**
+	 * Est-ce que l'expression se cancel en 0 à la solution précédente ?
+	 * @param index L'index de la solution
+	 */
+	function doesCancelOnZero(index: number): boolean {
+		const solution = inRangeSolutions[index];
+		return solution.associatedEquations.includes(expression.Expression);
+	}
+</script>
+
+<div class="h-12 lg:h-16 w-full bg-white border-b border-x border-black flex flex-row relative">
+	<!-- Nom de la variable -->
+	<section
+		class="w-2/12 overflow-x-auto overflow-y-hidden h-full border-r border-black flex items-center justify-center text-lg lg:text-xl"
+	>
+		<SaisieMath
+			value={expression.Expression}
+			maxLength={999}
+			placeholder={(' ' + expression.Expression).slice(1)}
+			eventName="handleExpressionChanged"
+			on:handleExpressionChanged={expressionChanged}
+			classes="text-center w-full"
+		/>
+	</section>
+
+	<div class={'w-full flex flex-row text-md lg:text-3xl '}>
+		<div class="w-full select-none flex justify-center items-center">{signs[0]}</div>
+
+		{#if signs.length > inRangeSolutions.length}
+			{#each inRangeSolutions as _, i}
+				<div class="w-full h-full relative">
+					<div class="h-full border-l border-black select-none flex justify-center items-center">
+						{signs[i + 1]}
+					</div>
+
+					<!-- Met un trait avec un 0 pour la colonne à gauche du signe si l'expression s'annule en 0 à la solution -->
+					{#if doesCancelOnZero(i)}
+						<!-- Annulation en 0 -->
+						<p
+							class="absolute select-none -translate-y-1/2 top-1/2 -translate-x-1/2 left-[0.05rem] md:left-[0.02rem] lg:left-[0.01rem] w-fit font-normal text-lg lg:text-3xl"
+						>
+							0
+						</p>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: #ddbdbd; /* Change the color of the scrollbar thumb */
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		background-color: #968686; /* Change the color on hover */
+	}
+
+	::-webkit-scrollbar-thumb:active {
+		background-color: #4d4444; /* Change the color on hover */
+	}
+</style>
diff --git a/src/components/tds/Variation.svelte b/src/components/tds/Variation.svelte
new file mode 100644
index 0000000..c1aaef5
--- /dev/null
+++ b/src/components/tds/Variation.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import Solver from '../../api/solver';
+	import MathsExt from '../../extensions/mathsExt';
+	import ExpressionElement from '../../models/expression';
+	import type Solution from '../../models/solution';
+	import SaisieFonction from '../SaisieFonction.svelte';
+	import ArrowDown from './assets/arrow_down.png';
+	import ArrowUp from './assets/arrow_up.png';
+
+	export let functionName: string = 'f';
+	export let variableName: string = 'x';
+	export let formula: string = 'x^2 - 4x';
+
+	export let inRangeSolutions: Solution[];
+	export let signs: string[] = [];
+
+	export let borneMax: string = '+inf';
+	export let borneMin: string = '-inf';
+</script>
+
+<div class="h-20 lg:h-52 w-full bg-white border-b border-x border-black flex flex-row relative">
+	<!-- Nom de la variable -->
+	<section
+		class="w-2/12 h-full border-r border-black flex items-center justify-center text-lg lg:text-xl"
+	>
+		<SaisieFonction
+			on:handleFunctionNameChanged
+			on:handleVariableNameChanged
+			{functionName}
+			{variableName}
+		/>
+	</section>
+
+	<div class={'w-full flex flex-row text-md lg:text-3xl relative'}>
+		<div class="w-full select-none flex justify-center items-center">
+			<img
+				src={signs[0].replace('|', '') === '+' ? ArrowUp : ArrowDown}
+				alt={'Flèche vers le ' + signs[0]}
+				class="w-full transform h-full object-fill"
+			/>
+		</div>
+
+		<!-- Si la borneMin !== -inf, alors on calcul sa solution -->
+		{#if borneMin !== '-inf'}
+			<div
+				class={'absolute left-0 ' +
+					(signs[0].replace('|', '') === '-' ? 'top-2 md:top-7' : 'bottom-2 md:bottom-7')}
+			>
+				<p class="w-fit bg-white rounded-full px-3 bg-opacity-50 text-xs md:text-xs lg:text-xl">
+					{MathsExt.roundNumber(
+						Solver.formulaToInt(
+							new ExpressionElement(true, false, formula, ''),
+							variableName,
+							borneMin
+						)
+					)}
+				</p>
+			</div>
+		{/if}
+
+		{#if signs.length > inRangeSolutions.length}
+			{#each inRangeSolutions as _, i}
+				<!-- On cache la flèche là si la dernière flèche est du même signe, et que ce n'est pas
+                une valeur interdite (flèche continue)-->
+				<div class="w-full h-full relative">
+					<div class="h-full select-none flex justify-center items-center relative">
+						<img
+							src={signs[i + 1].includes('+') ? ArrowUp : ArrowDown}
+							alt={'Flèche vers le ' + signs[i + 1]}
+							class="w-full transform h-full object-fill"
+						/>
+
+						<!-- Calcul la valeur de la solution -->
+						{#if signs[i + 1].includes('|') === false}
+							<div
+								class={'absolute left-0 ' +
+									(signs[i + 1].replace('|', '') === '-'
+										? 'top-2 md:top-7'
+										: 'bottom-2 md:bottom-7')}
+							>
+								<p
+									class="w-fit rounded-full bg-white px-3 bg-opacity-50 -translate-x-1/2 text-xs md:text-xs lg:text-xl"
+								>
+									{MathsExt.roundNumber(
+										Solver.formulaToInt(
+											new ExpressionElement(true, false, formula, ''),
+											variableName,
+											inRangeSolutions[i].value
+										)
+									)}
+								</p>
+							</div>
+						{/if}
+
+						<!-- Bordure de valeur interdite -->
+						{#if signs[i + 1].includes('|')}
+							<div class="absolute left-0 w-32 h-full border-l border-black" />
+							<div class="absolute -left-1 w-32 h-full border-l border-black" />
+						{/if}
+
+						<!-- Si la borneMax !== +inf, alors on calcul sa solution -->
+						{#if i === inRangeSolutions.length - 1 && borneMax !== '+inf'}
+							<div
+								class={'absolute right-0 ' +
+									(signs[0].replace('|', '') === '+' ? 'top-2 md:top-7' : 'bottom-2 md:bottom-7')}
+							>
+								<p
+									class="w-fit bg-white px-3 bg-opacity-50 rounded-full text-xs md:text-xs lg:text-xl"
+								>
+									{MathsExt.roundNumber(
+										Solver.formulaToInt(
+											new ExpressionElement(true, false, formula, ''),
+											variableName,
+											borneMax
+										)
+									)}
+								</p>
+							</div>{/if}
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/src/components/tds/row/ExpressionCell.svelte b/src/components/tds/row/ExpressionCell.svelte
index dd63aa8..42f6d49 100644
--- a/src/components/tds/row/ExpressionCell.svelte
+++ b/src/components/tds/row/ExpressionCell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type ExpressionElement from '../../../models/expression';
-	import SaisieMath from '../../SaisieMath.svelte';
+	import SaisieMath from '../../saisie/SaisieMath.svelte';
 
 	export let expression: ExpressionElement;
 </script>
diff --git a/src/components/tds/row/Row.svelte b/src/components/tds/row/Row.svelte
index 02c1391..76c8ca2 100644
--- a/src/components/tds/row/Row.svelte
+++ b/src/components/tds/row/Row.svelte
@@ -5,7 +5,7 @@
 	import ExpressionCell from './ExpressionCell.svelte';
 	import type Cellule from '../../../models/cellule';
 	import Solver from '../../../api/solver';
-	import RowSigns from '../RowSigns.svelte';
+	import RowSigns from './RowSigns.svelte';
 	import AddRowHover from './AddRowHover.svelte';
 
 	export let expression: ExpressionElement;
diff --git a/src/components/tds/row/RowSigns.svelte b/src/components/tds/row/RowSigns.svelte
new file mode 100644
index 0000000..b57a7a3
--- /dev/null
+++ b/src/components/tds/row/RowSigns.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type Cellule from '../../../models/cellule';
+	import CellSign from './CellSign.svelte';
+
+	export let cellules: Cellule[];
+</script>
+
+<div
+	class={'w-full flex flex-row text-md text-center ' +
+		(cellules.some((x) => x.sign.length > 3)
+			? '' /* Message d'intervalle de définition, taille du texte réduit */
+			: 'lg:text-3xl')}
+>
+	{#each cellules as cellule, index}
+		<CellSign {cellule} {index} />
+	{/each}
+</div>
+
+<style>
+	::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: #ddbdbd; /* Change the color of the scrollbar thumb */
+	}
+
+	::-webkit-scrollbar-thumb:hover {
+		background-color: #968686; /* Change the color on hover */
+	}
+
+	::-webkit-scrollbar-thumb:active {
+		background-color: #4d4444; /* Change the color on hover */
+	}
+</style>
diff --git a/src/components/tds/tdv/CalculatedValue.svelte b/src/components/tds/tdv/CalculatedValue.svelte
new file mode 100644
index 0000000..0c533c8
--- /dev/null
+++ b/src/components/tds/tdv/CalculatedValue.svelte
@@ -0,0 +1,26 @@
+<!--
+    Component contenant une valeur du tableau de variations
+    Cette valeur doit être placé dans le tableau de variations en fonction
+    de la direction de la flèche, de s'il y a une valeur à cette position etc
+-->
+
+<script lang="ts">
+	export let value: number = 0;
+	export let sign: string = '+';
+	export let position: 'borneMax' | 'borneMin' | 'centre' = 'centre';
+</script>
+
+<div
+	class={'absolute ' +
+		(sign.includes('+') ? ' top-2 lg:top-4 ' : ' bottom-2 lg:bottom-4 ') +
+		' ' +
+		(position === 'borneMax'
+			? 'right-0'
+			: position === 'centre'
+			? '-left-0.5 transform -translate-x-1/2 '
+			: 'left-0')}
+>
+	<p class="w-fit bg-white px-3 bg-opacity-50 rounded-full text-xs md:text-xs lg:text-xl">
+		{value}
+	</p>
+</div>
diff --git a/src/components/tds/tdv/Variation.svelte b/src/components/tds/tdv/Variation.svelte
index 0d75778..265254a 100644
--- a/src/components/tds/tdv/Variation.svelte
+++ b/src/components/tds/tdv/Variation.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import VariationCalculatedValue from './VariationCalculatedValue.svelte';
+	import VariationCalculatedValue from './CalculatedValue.svelte';
 
 	import Solver from '../../../api/solver';
 	import MathsExt from '../../../extensions/mathsExt';
 	import ExpressionElement from '../../../models/expression';
 	import type Solution from '../../../models/solution';
-	import SaisieFonction from '../../SaisieFonction.svelte';
+	import SaisieFonction from '../../saisie/SaisieFonction.svelte';
 	import ArrowDown from '../assets/arrow_down.png';
 	import ArrowUp from '../assets/arrow_up.png';
 
diff --git a/src/extensions/mathsExt.ts b/src/extensions/mathsExt.ts
index 802de42..4927998 100644
--- a/src/extensions/mathsExt.ts
+++ b/src/extensions/mathsExt.ts
@@ -1,10 +1,14 @@
+// @ts-ignore
+import nerdamer from 'nerdamer/all';
 import * as math from 'mathjs';
 
 export default class MathsExt {
-	static Deriver(formula: string, variableName: string): string {
-		return math
-			.derivative(formula, variableName, { simplify: formula.includes('sqrt') ? false : true })
-			.toString();
+	static Deriver(formula: string, variableName: string): any {
+		const deriver = nerdamer(
+			'simplify(' + nerdamer('diff(' + formula + ', ' + variableName + ')').toString() + ')'
+		).toString();
+
+		return [deriver, nerdamer.convertToLaTeX(deriver)];
 	}
 	static roundNumber(num: number) {
 		return Math.round((num + Number.EPSILON) * 100) / 100;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8f2c0d4..ce168c0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,7 +40,7 @@
 <Toaster />
 
 <div class="w-screen h-full bg-[#f6effa] overflow-hidden">
-	<Designer on:showInfo={toggleShowInfo} />
+	<Designer on:showInfo={toggleShowInfo} {isInfoShown} />
 
 	<div
 		class={'absolute top-0 left-0 w-full h-full bg-black duration-200 ' +