diff --git a/frontend/index.html b/frontend/index.html
index a8ca635..c3d1007 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PDL L3 - Galerie</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>PDL L3 - Galerie</title>
+	</head>
+
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/pom.xml b/frontend/pom.xml
index a6aedf5..f2706fa 100644
--- a/frontend/pom.xml
+++ b/frontend/pom.xml
@@ -1,23 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-  <modelVersion>4.0.0</modelVersion>
-  <artifactId>frontend</artifactId>
+	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+	<modelVersion>4.0.0</modelVersion>
+	<artifactId>frontend</artifactId>
 
-  <parent>
-    <groupId>pdl</groupId>
-    <artifactId>client-serveur</artifactId>
-    <version>0.0.1-SNAPSHOT</version>
-  </parent>
+	<parent>
+		<groupId>pdl</groupId>
+		<artifactId>client-serveur</artifactId>
+		<version>0.0.1-SNAPSHOT</version>
+	</parent>
 
-  <build>
-    <plugins>
-      <plugin>
+	<build>
+		<plugins>
+			<plugin>
 				<groupId>org.codehaus.mojo</groupId>
 				<artifactId>exec-maven-plugin</artifactId>
 				<version>1.3.2</version>
 				<executions>
-          <!-- Required: The following will ensure `npm install` is called
+					<!-- Required: The following will ensure `npm install` is called
 					     before anything else during the 'Default Lifecycle' -->
 					<execution>
 						<id>npm install (initialize)</id>
@@ -47,7 +48,7 @@
 							</arguments>
 						</configuration>
 					</execution>
-          <!-- Required: This following calls `npm run build` where 'build' is
+					<!-- Required: This following calls `npm run build` where 'build' is
 					     the script name I used in my project, change this if yours is
 							 different -->
 					<execution>
@@ -64,7 +65,7 @@
 							</arguments>
 						</configuration>
 					</execution>
-          <!-- <execution>
+					<!-- <execution>
 						<id>npm run clean (clean)</id>
 						<goals>
 							<goal>exec</goal>
@@ -78,8 +79,8 @@
 							</arguments>
 						</configuration>
 					</execution> -->
-        </executions>
-      </plugin>
-    </plugins>
-  </build>
+				</executions>
+			</plugin>
+		</plugins>
+	</build>
 </project>
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0006d53..14508e4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,55 +2,59 @@
 </script>
 
 <template>
-  <div id="app">
-    <nav>
-      <ul>
-        <li>
-          <router-link to="/">Home</router-link>
-        </li>
-        <li>
-          <router-link to="/gallery">Gallery</router-link>
-        </li>
-        <li>
-          <router-link to="/upload">Upload</router-link>
-        </li>
-      </ul>
-    </nav>
+	<div id="app">
+		<nav>
+			<ul>
+				<li>
+					<router-link to="/">Home</router-link>
+				</li>
+				<li>
+					<router-link to="/gallery">Gallery</router-link>
+				</li>
+				<li>
+					<router-link to="/upload">Upload</router-link>
+				</li>
+			</ul>
+		</nav>
 
-    <div>
-      <h1>PDL - L3</h1>
-      <router-view />
-    </div>
-  </div>
+		<div>
+			<h1>PDL - L3</h1>
+			<router-view />
+		</div>
+	</div>
 </template>
 
 <style>
 #app {
-  text-align: center;
-  font-family: Arial, Helvetica, sans-serif;
-  color: #2c3e50;
+	text-align: center;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #2c3e50;
 }
+
 ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  background-color: #333;
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: #333;
 }
+
 li {
-  float: left;
+	float: left;
 }
+
 li a {
-  display: block;
-  color: white;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
+	display: block;
+	color: white;
+	text-align: center;
+	padding: 14px 16px;
+	text-decoration: none;
 }
+
 .error {
-  color: red;
-  font-weight: bold;
-  list-style-type: none;
-  margin-top: 1em;
+	color: red;
+	font-weight: bold;
+	list-style-type: none;
+	margin-top: 1em;
 }
 </style>
diff --git a/frontend/src/components/Gallery.vue b/frontend/src/components/Gallery.vue
index 396c054..b5aa03f 100644
--- a/frontend/src/components/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@@ -7,20 +7,19 @@ import Image from './Image.vue';
 const imageList = ref<ImageType[]>([]);
 
 api.getImageList()
-  .then((data) => {
-    imageList.value = data;
-  })
-  .catch(e => {
-    console.log(e.message);
-  });
+	.then((data) => {
+		imageList.value = data;
+	})
+	.catch(e => {
+		console.log(e.message);
+	});
 </script>
 
 <template>
-  <div>
-    <h3>Gallery</h3>
-    <Image v-for="image in imageList" :id="image.id" />
-  </div>
+	<div>
+		<h3>Gallery</h3>
+		<Image v-for="image in imageList" :id="image.id" />
+	</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 0cf45d1..f301dcc 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -9,28 +9,27 @@ const imageList = ref<ImageType[]>([]);
 getImageList();
 
 function getImageList() {
-  api.getImageList().then((data) => {
-    imageList.value = data;
-  }).catch(e => {
-    console.log(e.message);
-  });
+	api.getImageList().then((data) => {
+		imageList.value = data;
+	}).catch(e => {
+		console.log(e.message);
+	});
 }
 
 function showImage() {
-  router.push({ name: 'image', params: { id: selectedId.value } })
+	router.push({ name: 'image', params: { id: selectedId.value } })
 }
 </script>
 
 <template>
-  <div>
-    <h3>Choose an image</h3>
-    <div>
-      <select v-model="selectedId" @change="showImage">
-        <option v-for="image in imageList" :value="image.id" :key="image.id">{{ image.name }}</option>
-      </select>
-    </div>
-  </div>
+	<div>
+		<h3>Choose an image</h3>
+		<div>
+			<select v-model="selectedId" @change="showImage">
+				<option v-for="image in imageList" :value="image.id" :key="image.id">{{ image.name }}</option>
+			</select>
+		</div>
+	</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/Image.vue b/frontend/src/components/Image.vue
index 1a54811..3464527 100644
--- a/frontend/src/components/Image.vue
+++ b/frontend/src/components/Image.vue
@@ -5,27 +5,27 @@ import { api } from '@/http-api';
 const props = defineProps<{ id: number }>()
 
 api.getImage(props.id)
-  .then((data: Blob) => {
-    const reader = new window.FileReader();
-    reader.readAsDataURL(data);
-    reader.onload = () => {
-      const galleryElt = document.getElementById("gallery-"+props.id);
-      if (galleryElt !== null) {
-        const imgElt = document.createElement("img");
-        galleryElt.appendChild(imgElt);
-        if (imgElt !== null && reader.result as string) {
-          imgElt.setAttribute("src", (reader.result as string));
-        }
-      }
-    };
-  })
-  .catch(e => {
-    console.log(e.message);
-  });
+	.then((data: Blob) => {
+		const reader = new window.FileReader();
+		reader.readAsDataURL(data);
+		reader.onload = () => {
+			const galleryElt = document.getElementById("gallery-" + props.id);
+			if (galleryElt !== null) {
+				const imgElt = document.createElement("img");
+				galleryElt.appendChild(imgElt);
+				if (imgElt !== null && reader.result as string) {
+					imgElt.setAttribute("src", (reader.result as string));
+				}
+			}
+		};
+	})
+	.catch(e => {
+		console.log(e.message);
+	});
 </script>
 
 <template>
-  <figure :id="'gallery-'+id"></figure>  
+	<figure :id="'gallery-' + id"></figure>
 </template>
 
 <style></style>
\ No newline at end of file
diff --git a/frontend/src/components/Upload.vue b/frontend/src/components/Upload.vue
index 0c60aea..63eb7d3 100644
--- a/frontend/src/components/Upload.vue
+++ b/frontend/src/components/Upload.vue
@@ -5,37 +5,36 @@ import { api } from '@/http-api';
 const target = ref<HTMLInputElement>();
 
 function submitFile() {
-  if (target.value !== null && target.value !== undefined && target.value.files !== null) {
-    const file = target.value.files[0];
-    if (file === undefined)
-      return;
-    let formData = new FormData();
-    formData.append("file", file);
-    api.createImage(formData).then(() => {
-      if (target.value !== undefined)
-        target.value.value = '';
-    }).catch(e => {
-      console.log(e.message);
-    });
-  }
+	if (target.value !== null && target.value !== undefined && target.value.files !== null) {
+		const file = target.value.files[0];
+		if (file === undefined)
+			return;
+		let formData = new FormData();
+		formData.append("file", file);
+		api.createImage(formData).then(() => {
+			if (target.value !== undefined)
+				target.value.value = '';
+		}).catch(e => {
+			console.log(e.message);
+		});
+	}
 }
 
 function handleFileUpload(event: Event) {
-  target.value = (event.target as HTMLInputElement);
+	target.value = (event.target as HTMLInputElement);
 }
 </script>
 
 <template>
-  <div>
-    <h3>Upload an image</h3>
-    <div>
-      <input type="file" id="file" ref="file" @change="handleFileUpload" />
-    </div>
-    <div>
-      <button @click="submitFile">Submit</button>
-    </div>
-  </div>
+	<div>
+		<h3>Upload an image</h3>
+		<div>
+			<input type="file" id="file" ref="file" @change="handleFileUpload" />
+		</div>
+		<div>
+			<button @click="submitFile">Submit</button>
+		</div>
+	</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts
index d27eb5a..aaa4d2b 100644
--- a/frontend/src/env.d.ts
+++ b/frontend/src/env.d.ts
@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+	import { DefineComponent } from 'vue'
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+	const component: DefineComponent<{}, {}, any>
+	export default component
 }
diff --git a/frontend/src/http-api.ts b/frontend/src/http-api.ts
index c6e90c5..1c4db58 100644
--- a/frontend/src/http-api.ts
+++ b/frontend/src/http-api.ts
@@ -2,22 +2,22 @@ import axios, { AxiosResponse, AxiosError } from 'axios';
 import { ImageType } from '@/image';
 
 const instance = axios.create({
-  baseURL: "/",
-  timeout: 15000,
+	baseURL: "/",
+	timeout: 15000,
 });
 
 const responseBody = (response: AxiosResponse) => response.data;
 
 const requests = {
-  get: (url: string, param: {}) => instance.get(url, param).then(responseBody),
-  post: (url: string, body: {}) => instance.post(url, body, { headers: { "Content-Type": "multipart/form-data" }, }).then(responseBody),
-  put: (url: string, body: {}) => instance.put(url, body).then(responseBody),
-  delete: (url: string) => instance.delete(url).then(responseBody)
+	get: (url: string, param: {}) => instance.get(url, param).then(responseBody),
+	post: (url: string, body: {}) => instance.post(url, body, { headers: { "Content-Type": "multipart/form-data" }, }).then(responseBody),
+	put: (url: string, body: {}) => instance.put(url, body).then(responseBody),
+	delete: (url: string) => instance.delete(url).then(responseBody)
 };
 
 export const api = {
-  getImageList: (): Promise<ImageType[]> => requests.get('images', {}),
-  getImage: (id: number): Promise<Blob> => requests.get(`images/${id}`, { responseType: "blob" }),
-  createImage: (form: FormData): Promise<ImageType> => requests.post('images', form),
-  deleteImage: (id: number): Promise<void> => requests.delete(`images/${id}`),
+	getImageList: (): Promise<ImageType[]> => requests.get('images', {}),
+	getImage: (id: number): Promise<Blob> => requests.get(`images/${id}`, { responseType: "blob" }),
+	createImage: (form: FormData): Promise<ImageType> => requests.post('images', form),
+	deleteImage: (id: number): Promise<void> => requests.delete(`images/${id}`),
 };
\ No newline at end of file
diff --git a/frontend/src/image.ts b/frontend/src/image.ts
index 7950e45..98275af 100644
--- a/frontend/src/image.ts
+++ b/frontend/src/image.ts
@@ -1,4 +1,4 @@
 export interface ImageType {
-  id: number;
-  name: string;
+	id: number;
+	name: string;
 }
\ No newline at end of file
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index a3b2437..c3a82ff 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -2,35 +2,35 @@ import { createWebHistory, createRouter } from "vue-router";
 import { RouteRecordRaw } from "vue-router";
 
 const routes: Array<RouteRecordRaw> = [
-  {
-    path: "/",
-    name: "home",
-    component: () => import("./components/Home.vue"),
-    props: true
-  },
-  {
-    path: "/gallery",
-    name: "gallery",
-    component: () => import("./components/Gallery.vue"),
-    props: true
-  },
-  {
-    path: "/image/:id",
-    name: "image",
-    component: () => import("./components/Image.vue"),
-    props: ({ params }) => ({ id: Number(params.id) || 0 })
-  },
-  {
-    path: "/upload",
-    name: "upload",
-    component: () => import("./components/Upload.vue"),
-    props: true
-  }
+	{
+		path: "/",
+		name: "home",
+		component: () => import("./components/Home.vue"),
+		props: true
+	},
+	{
+		path: "/gallery",
+		name: "gallery",
+		component: () => import("./components/Gallery.vue"),
+		props: true
+	},
+	{
+		path: "/image/:id",
+		name: "image",
+		component: () => import("./components/Image.vue"),
+		props: ({ params }) => ({ id: Number(params.id) || 0 })
+	},
+	{
+		path: "/upload",
+		name: "upload",
+		component: () => import("./components/Upload.vue"),
+		props: true
+	}
 ];
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes,
+	history: createWebHistory(),
+	routes,
 });
 
 export default router;
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 2f0cbd7..18d6ee5 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,20 +1,28 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "paths": {
-      "@/*": [
-          "./src/*"
-      ]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-}
+	"compilerOptions": {
+		"target": "esnext",
+		"useDefineForClassFields": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"strict": true,
+		"jsx": "preserve",
+		"sourceMap": true,
+		"resolveJsonModule": true,
+		"esModuleInterop": true,
+		"lib": [
+			"esnext",
+			"dom"
+		],
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		}
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.d.ts",
+		"src/**/*.tsx",
+		"src/**/*.vue"
+	],
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 522b738..91fc911 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,21 +4,21 @@ import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  server: {
-    proxy: {
-      '^/images': {
-        target: 'http://localhost:8080' // Spring boot backend address
-      }
-    }
-  },
-  build: {
-    outDir: 'target/dist',
-    assetsDir: 'static'
-  }
+	plugins: [vue()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+		},
+	},
+	server: {
+		proxy: {
+			'^/images': {
+				target: 'http://localhost:8080' // Spring boot backend address
+			}
+		}
+	},
+	build: {
+		outDir: 'target/dist',
+		assetsDir: 'static'
+	}
 })
diff --git a/pom.xml b/pom.xml
index 2755b71..a9ab414 100644
--- a/pom.xml
+++ b/pom.xml
@@ -1,15 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
-    <modelVersion>4.0.0</modelVersion>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+	<modelVersion>4.0.0</modelVersion>
 
-    <groupId>pdl</groupId>
-    <artifactId>client-serveur</artifactId>
-    <version>0.0.1-SNAPSHOT</version>
-    <packaging>pom</packaging>
+	<groupId>pdl</groupId>
+	<artifactId>client-serveur</artifactId>
+	<version>0.0.1-SNAPSHOT</version>
+	<packaging>pom</packaging>
 
-    <modules>
-        <module>frontend</module>
-        <module>backend</module>
-    </modules>
+	<modules>
+		<module>frontend</module>
+		<module>backend</module>
+	</modules>
 </project>
\ No newline at end of file