diff --git a/src/components/CreateServer/CreateServer.jsx b/src/components/CreateServer/CreateServer.jsx
index 58bf520..17ca1f1 100644
--- a/src/components/CreateServer/CreateServer.jsx
+++ b/src/components/CreateServer/CreateServer.jsx
@@ -1,16 +1,70 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './CreateServer.module.scss';
+import { getUserSubdomain } from "../../service/firebase";
+import { saveSubdomain } from "../../service/serverService";
+
+const CreateServer = ({ user, onCreateServer }) => {
+  const [subdomain, setSubdomain] = useState(null);
+  const [subdomainInput, setSubdomainInput] = useState('');
+
+  const loadSubdomain = async () => {
+    try {
+      if (user && user.uid) {
+        const userSubdomain = await getUserSubdomain(user.uid);
+        setSubdomain(userSubdomain);
+      } else {
+        console.error('User or user.uid is undefined');
+      }
+    } catch (error) {
+      console.error('Error fetching subdomain:', error);
+    }
+  };
+
+  useEffect(() => {
+    loadSubdomain();
+  }, [user]);
+
+  const handleSaveSubdomain = async () => {
+    try {
+      await saveSubdomain(subdomainInput);
+      setSubdomain(subdomainInput);
+    } catch (error) {
+      console.error('Error setting subdomain:', error);
+    }
+  };
 
-const CreateServer  = ({ onCreateServer }) => {
   return (
-    <div className={styles.container}>
-      <div className={styles.mainCard}>
-        <div className={styles.SubTitle}>Création du serveur</div>
-        <input className={styles.Input} type="text" placeholder="Nom du serveur" />
-        <button className={styles.btnServCreate} onClick={() => onCreateServer()}>Créer</button>
-      </div>
-    </div>
+    <>
+      {subdomain === null ? (
+        <div className={styles.container}>
+          <div className={styles.mainCardSubdomain}>
+            <div className={styles.Title}>Ecrivez votre sous domaine</div>
+            <div className={styles.SubTitlesdomain}>
+              Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il n'est pas facilement modifiable !
+            </div>
+            <input
+              type="text"
+              value={subdomainInput}
+              onChange={(e) => setSubdomainInput(e.target.value)}
+            />
+            <button className={styles.btnSubCreate} onClick={handleSaveSubdomain}>
+              Envoyer
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.container}>
+          <div className={styles.mainCard}>
+            <div className={styles.SubTitle}>Création du serveur</div>
+            <input className={styles.Input} type="text" placeholder="Nom du serveur" />
+            <button className={styles.btnServCreate} onClick={onCreateServer}> {/* Utilisation de onCreateServer ici */}
+              Créer
+            </button>
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
-export default CreateServer ;
+export default CreateServer;
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index f434f0e..bff93f4 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -3,7 +3,7 @@ import ServerCard from '../../components/serverCard/serverCard';
 import Navbar from '../../components/navbar/Navbar';
 import styles from './DashboardPage.module.scss';
 import NoServer from '../NoServer/NoServer';
-import {getUserSubdomain} from "../../service/firebase";
+import { getUserSubdomain } from "../../service/firebase";
 import { fetchServers, createServer, runServer, stopServer, deleteServer } from '../../service/serverService';
 
 const DashboardPage = ({ user }) => {
@@ -14,9 +14,8 @@ const DashboardPage = ({ user }) => {
     try {
       const data = await fetchServers();
       setServers(data);
-      const subdomain = await getUserSubdomain(user.uid);
-      setSubdomain(subdomain);
-      console.log(subdomain);
+      const userSubdomain = await getUserSubdomain(user.uid);
+      setSubdomain(userSubdomain);
     } catch (error) {
       console.error('Error fetching data:', error);
     }
@@ -67,7 +66,7 @@ const DashboardPage = ({ user }) => {
       <Navbar user={user} />
       <div className={styles.cardsContainer}>
         {servers.length === 0 ? (
-          <NoServer onCreateServer={handleCreateServer} />
+          <NoServer user={user} onCreateServer={handleCreateServer} />
         ) : (
           servers.map((server, index) => (
             <ServerCard
diff --git a/src/pages/NoServer/NoServer.jsx b/src/pages/NoServer/NoServer.jsx
index 28659e7..7aea1f8 100644
--- a/src/pages/NoServer/NoServer.jsx
+++ b/src/pages/NoServer/NoServer.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styles from './NoServer.module.scss';
 import CreateServer from '../../components/CreateServer/CreateServer';
 
-const NoServer = ({ onCreateServer }) => {
+const NoServer = ({ user, onCreateServer }) => {
   const [isCreating, setIsCreating] = useState(false);
 
   return (
@@ -15,9 +15,9 @@ const NoServer = ({ onCreateServer }) => {
             <button className={styles.btnServCreate} onClick={() => setIsCreating(true)}>Créer un nouveau serveur</button>
           </>
         ) : (
-            <>
-                <CreateServer></CreateServer>
-            </>
+          <>
+            <CreateServer user={user} onCreateServer={onCreateServer} /> {}
+          </>
         )}
       </div>
     </div>
diff --git a/src/service/serverService.jsx b/src/service/serverService.jsx
index 860fee6..6612155 100644
--- a/src/service/serverService.jsx
+++ b/src/service/serverService.jsx
@@ -120,4 +120,27 @@ const deleteServer = async (serverName) => {
   }
 };
 
-export { fetchServers, createServer, runServer, stopServer, deleteServer };
+const saveSubdomain = async (subdomain) => {
+  const auth = getAuth();
+  const currentUser = auth.currentUser;
+  if (!currentUser) {
+    throw new Error('No current user found');
+  }
+  const userId = currentUser.uid;
+
+  const response = await fetch(`${apiUrl}/SetSubdomain`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${userId}`,
+    },
+    body: JSON.stringify({ subdomain, token: userId }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to save subdomain: ${errorText}`);
+  }
+};
+
+export { fetchServers, createServer, runServer, stopServer, deleteServer, saveSubdomain };