diff --git a/src/main.css b/src/main.css
index d65f2ab..009958c 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,4 +1,4 @@
-/* index.css */
+/* main.css */
 html {
   font-size: 12px;
   font-family: 'Poppins', sans-serif;
@@ -18,6 +18,11 @@ html {
   --main-bg-color: #050816;
   --text-color: white;
   --text-color-black: black;
+  --input-bg-color: #44475a;
+  --input-border-color: #6272a4;
+  --button-bg-color: #50fa7b;
+  --button-text-color: #282a36;
+  --button-bg-color-hover: #8be9fd;
 }
 
 body {
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index 2b286af..07fcd69 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -81,6 +81,13 @@ const DashboardPage = ({ user }) => {
     }
   };
 
+  const handleCopyAddress = () => {
+    const address = `${subdomain}.servii.fr`;
+    navigator.clipboard.writeText(address)
+      .then(() => {
+      })
+  };
+
   if (loading) {
     return (
       <div className={styles.dashboardContainer}>
@@ -102,7 +109,10 @@ const DashboardPage = ({ user }) => {
           ) : (
             <div>
               <div className={styles.iptitle}>
-                Adresse de connexion à vos serveurs : <span>{subdomain}.servii.fr</span>
+                Adresse de connexion à vos serveurs : 
+                <span onClick={handleCopyAddress}>
+                  {" " + subdomain}.servii.fr
+                </span>
               </div>
               <button
                 className={styles.btncreate}
diff --git a/src/pages/DashboardPage/DashboardPage.module.scss b/src/pages/DashboardPage/DashboardPage.module.scss
index 55b587b..bf8697a 100644
--- a/src/pages/DashboardPage/DashboardPage.module.scss
+++ b/src/pages/DashboardPage/DashboardPage.module.scss
@@ -35,6 +35,7 @@ html, body {
 
 .iptitle span {
   color: violet;
+  cursor: pointer;
 }
 
 .btncreate{
diff --git a/src/pages/ServerDetails/ServerDetails.jsx b/src/pages/ServerDetails/ServerDetails.jsx
index 3520b71..ece7bc7 100644
--- a/src/pages/ServerDetails/ServerDetails.jsx
+++ b/src/pages/ServerDetails/ServerDetails.jsx
@@ -35,6 +35,35 @@ const ServerDetails = ({ user }) => {
     fetchServer();
   }, [serverName]);
 
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setServer({ ...server, [name]: value });
+  };
+
+  const handleSave = async () => {
+    try {
+      const props = [
+        ['max-players', server.maxPlayers.toString()],
+        ['motd', server.motd],
+        ['difficulty', server.difficulty],
+        ['enableCommandBlock', server.enableCommandBlock.toString()],
+        ['gamemode', server.gamemode],
+        ['hardcore', server.hardcore.toString()],
+        ['onlineMode', server.onlineMode.toString()],
+        ['pvp', server.pvp.toString()]
+      ];
+      
+      await serviiApi.updateProperties(server.name, props); 
+    } catch (error) {
+      console.error('Error updating server:', error);
+      alert('Error updating server');
+    }
+  };
+
+  const handleQuit = () => {
+    navigate('/dashboard');
+  }
+
   if (loading) {
     return <Loading />;
   }
@@ -55,11 +84,66 @@ const ServerDetails = ({ user }) => {
     <div className={styles.serverDetailsContainer}>
       <Navbar user={user} />
       <div className={styles.details}>
-        <h1>{server.name}</h1>
-        <h1>{server.difficulty}</h1>
+        <h1>Détails du serveur {server.name}</h1>
+        <div className={styles.formGroup}>
+          <label htmlFor="difficulty">Difficultée:</label>
+          <select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}>
+            <option value="easy">Facile</option>
+            <option value="normal">Normal</option>
+            <option value="hard">Difficile</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="enableCommandBlock">Activation des commandes block:</label>
+          <select id="enableCommandBlock" name="enableCommandBlock" value={server.enableCommandBlock} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="gamemode">Gamemode:</label>
+          <select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}>
+            <option value="survival">Survie</option>
+            <option value="creative">Créatif</option>
+            <option value="adventure">Aventure</option>
+            <option value="spectator">Spectateur</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="hardcore">Hardcore:</label>
+          <select id="hardcore" name="hardcore" value={server.hardcore} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="maxPlayers">Max de joueurs:</label>
+          <input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} />
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="motd">Description du serveur:</label>
+          <input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} />
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="onlineMode">Mode en ligne:</label>
+          <select id="onlineMode" name="onlineMode" value={server.onlineMode} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="pvp">PVP:</label>
+          <select id="pvp" name="pvp" value={server.pvp} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <button className={styles.saveButton} onClick={handleSave}>Sauvegarder et quitter</button>
+        <button className={styles.quitButton} onClick={handleQuit}>Retour</button>
       </div>
     </div>
   );
+  
 };
 
 export default ServerDetails;
diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss
index 87d3df9..81dcf6f 100644
--- a/src/pages/ServerDetails/ServerDetails.module.scss
+++ b/src/pages/ServerDetails/ServerDetails.module.scss
@@ -1,9 +1,4 @@
-html, body {
-    margin: 0;
-    padding: 0;
-    color: white;
-}
-
+/* ServerDetails.module.scss */
 .serverDetailsContainer {
     padding-top: var(--navbar-height);
     background-color: var(--main-bg-color);
@@ -11,5 +6,78 @@ html, body {
     flex-direction: column;
     align-items: center;
     color: var(--text-color);
-}
+  }
+  
+  .details {
+    margin-top: 5rem;
+    padding: 3rem;
+    padding-top: 0rem;
+    background-color: var(--card-bg-color);
+    width: 60rem;
+    border-radius: 1rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  .formGroup {
+    margin-bottom: 2.5rem; 
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .formGroup label {
+    font-weight: bold;
+    margin-bottom: 1.2rem;
+    font-size: 1.4rem;
+  }
+  
+  .formGroup input,
+  .formGroup select {
+    width: calc(100% - 2px); 
+    padding: 1.2rem; 
+    height: 3.5rem; 
+    background-color: var(--input-bg-color);
+    border: 1px solid var(--input-border-color);
+    border-radius: 0.5rem;
+    color: var(--text-color);
+    font-size: 1.2rem; 
+    box-sizing: border-box; 
+  }
+  
+  .saveButton {
+    padding: 1.2rem 2.5rem; 
+    background-color: var(--button-bg-color);
+    color: var(--button-text-color);
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-size: 1.2rem; 
+    align-self: flex-start; 
+  }
+  
+  .quitButton{
+    padding: 1.2rem 2.5rem; 
+    background-color: gray;
+    color: var(--button-text-color);
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-size: 1.2rem; 
+    align-self: flex-start; 
+    margin-left: 3rem;
+  }
 
+  .saveButton:hover {
+    background-color: var(--button-bg-hover-color);
+  }
+  
+  .error {
+    color: red;
+    font-size: 1.2rem; 
+  }
+  
+  .details h1 {
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+  }
\ No newline at end of file
diff --git a/src/service/api.tsx b/src/service/api.tsx
index a711930..08506ac 100644
--- a/src/service/api.tsx
+++ b/src/service/api.tsx
@@ -1,5 +1,4 @@
-// src/services/serverService.ts
-import {getAuth} from 'firebase/auth';
+import { getAuth } from 'firebase/auth';
 
 const apiUrl: string = 'https://www.servii.fr/api';
 
@@ -8,37 +7,30 @@ interface ApiResponse {
   message: string;
 }
 
-//fetchServers, accountCreate, accountDelete,
 interface BaseRequest {
   token: string;
 }
-//setSubdomain
-interface SubdomainRequest {
-  token: string;
+
+interface SubdomainRequest extends BaseRequest {
   subdomain: string;
 }
-//serverDelete, serverRun, serverStop
-interface ServerRequest {
-  token: string;
+
+interface ServerRequest extends BaseRequest {
   name: string;
 }
-//serverCreate
-interface ServerCreationRequest {
-  token: string;
+
+interface ServerCreationRequest extends BaseRequest {
   name: string;
   version: string;
   framework: string;
 }
-//updateProperty
-interface UpdatePropertyRequest {
-  token: string;
+
+interface UpdatePropertiesRequest extends BaseRequest {
   name: string;
-  prop: string;
-  value: string;
+  props: [string, string][];
 }
-//command
-interface CommandRequest {
-  token: string;
+
+interface CommandRequest extends BaseRequest {
   command: string;
   name: string;
 }
@@ -52,14 +44,14 @@ enum serviiRequest {
   accountDelete = 'AccountDelete',
   serverRun = 'ServerRun',
   serverStop = 'ServerStop',
-  updateProperty = 'UpdateProperty',
+  updateProperty = 'UpdateProperties', 
   command = 'Command',
 }
 
 class serviiApi {
   constructor() {}
 
-  private static async call<T extends BaseRequest>(endpoint: serviiRequest, body: T):Promise<ApiResponse>{
+  private static async call<T extends BaseRequest>(endpoint: serviiRequest, body: T): Promise<ApiResponse> {
     const response = await fetch(`${apiUrl}/${endpoint}`, {
       method: 'POST',
       headers: {
@@ -67,62 +59,77 @@ class serviiApi {
       },
       body: JSON.stringify(body),
     });
-    const status: number = response.status
+    const status: number = response.status;
     const json = await response.json();
 
     if (json.message === undefined) {
-      if (!(endpoint === serviiRequest.fetchServers)){
-        return {return_code: status, message: "Couldn't find an available API, we're sorry for the inconvenience."};
+      if (!(endpoint === serviiRequest.fetchServers)) {
+        return { return_code: status, message: "Couldn't find an available API, we're sorry for the inconvenience." };
       }
-      return {return_code: status, message: json};
+      return { return_code: status, message: json };
     }
-    return {return_code: status, message: json.message};
+    return { return_code: status, message: json.message };
   }
 
   private static token(): string {
     const currentUser = getAuth().currentUser;
-    if (!currentUser) {throw new Error('No user is currently logged in.');}
+    if (!currentUser) {
+      throw new Error('No user is currently logged in.');
+    }
     return currentUser.uid;
   }
 
   public static async setSubdomain(subdomain: string): Promise<ApiResponse> {
-    const payload : SubdomainRequest = {token: this.token(), subdomain: subdomain}
+    const payload: SubdomainRequest = { token: this.token(), subdomain: subdomain };
     return this.call(serviiRequest.setSubdomain, payload);
   }
+
   public static async fetchServers(): Promise<ApiResponse> {
-    const payload : BaseRequest = {token: this.token()}
+    const payload: BaseRequest = { token: this.token() };
     return this.call(serviiRequest.fetchServers, payload);
   }
+
   public static async accountCreate(): Promise<ApiResponse> {
-    const payload : BaseRequest = {token: this.token()}
+    const payload: BaseRequest = { token: this.token() };
     return this.call(serviiRequest.accountCreate, payload);
   }
+
   public static async serverCreate(name: string, version: string, framework: string): Promise<ApiResponse> {
-    const payload : ServerCreationRequest = {token: this.token(), name: name, version: version, framework: framework};
+    const payload: ServerCreationRequest = { token: this.token(), name: name, version: version, framework: framework };
     return this.call(serviiRequest.serverCreate, payload);
   }
+
   public static async serverDelete(name: string): Promise<ApiResponse> {
-    const payload : ServerRequest = {token: this.token(), name: name}
+    const payload: ServerRequest = { token: this.token(), name: name };
     return this.call(serviiRequest.serverDelete, payload);
   }
+
   public static async accountDelete(): Promise<ApiResponse> {
-    const payload : BaseRequest = {token: this.token()}
+    const payload: BaseRequest = { token: this.token() };
     return this.call(serviiRequest.accountDelete, payload);
   }
+
   public static async serverRun(name: string): Promise<ApiResponse> {
-    const payload : ServerRequest = {token: this.token(), name: name}
+    const payload: ServerRequest = { token: this.token(), name: name };
     return this.call(serviiRequest.serverRun, payload);
   }
+
   public static async serverStop(name: string): Promise<ApiResponse> {
-    const payload : ServerRequest = {token: this.token(), name: name}
+    const payload: ServerRequest = { token: this.token(), name: name };
     return this.call(serviiRequest.serverStop, payload);
   }
-  public static async updateProperty(name: string, prop: string, value: string): Promise<ApiResponse> {
-    const payload : UpdatePropertyRequest = {token: this.token(), name: name, prop: prop, value: value}
-    return this.call(serviiRequest.updateProperty, payload);
+
+  public static async updateProperties(name: string, props: [string, string][]): Promise<ApiResponse> {
+    const payload: UpdatePropertiesRequest = {
+      token: this.token(),
+      name: name,
+      props: props,
+    };
+    return this.call(serviiRequest.updateProperty, payload); // Correct usage here
   }
+
   public static async command(command: string, name: string): Promise<ApiResponse> {
-    const payload : CommandRequest = {token: this.token(), command: command, name: name};
+    const payload: CommandRequest = { token: this.token(), command: command, name: name };
     return this.call(serviiRequest.command, payload);
   }
 }