diff --git a/src/App.jsx b/src/App.jsx
index 5d92b87..57d30ee 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,7 +9,7 @@ import Loading from './pages/Loading/loading';
 const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage'));
 const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails'));
 const CreatePage = lazy(() => import('./pages/CreateServer/CreateServer'));
-const Javapick = lazy(() => import('./pages/CreateServer/Javapick/java'));
+const Javapick = lazy(() => import('./pages/CreateServer/java/java'));
 const Modpack = lazy(() => import('./pages/CreateServer/modpack/modpack'));
 const Bedrock = lazy(() => import('./pages/CreateServer/bedrock/bedrock'));
 const DashboardPage = lazy(() => import('./pages/DashboardPage/DashboardPage'));
diff --git a/src/components/CreateServer/CreateServer.jsx b/src/components/CreateServer/CreateServer.jsx
deleted file mode 100644
index 8bfe9c5..0000000
--- a/src/components/CreateServer/CreateServer.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { useState, useEffect } from 'react';
-import styles from './CreateServer.module.scss';
-import { getUserSubdomain } from "../../service/firebase";
-import serviiApi from "../../service/api.tsx";
-import PropTypes from "prop-types";
-import { GoTag, GoCheck } from "react-icons/go";
-
-const versions = {
-  paper: [
-    "1.16.2",
-    "1.14.4",
-    "1.13.2",
-    "1.16.1",
-    "1.18.2",
-    "1.19",
-    "1.20.4",
-    "1.19.3",
-    "1.19.4",
-    "1.19.2",
-    "1.20.1",
-    "1.21.1",
-    "1.20.5",
-    "1.20.6",
-    "1.21",
-    "1.20.2",
-    "1.20",
-    "1.9.4",
-    "1.10.2",
-    "1.11.2",
-    "1.12.2",
-    "1.13.1",
-    "1.13.2",
-    "1.14.1",
-    "1.14.2",
-    "1.14.3",
-    "1.14.4",
-    "1.15.1",
-    "1.15.2",
-    "1.16.1",
-    "1.16.2",
-    "1.16.3",
-    "1.16.4",
-    "1.16.5",
-    "1.17.1",
-    "1.18.1"
-  ].sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
-};
-
-const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noServers }) => {
-  const [subdomain, setSubdomain] = useState(null);
-  const [subdomainInput, setSubdomainInput] = useState('');
-  const [serverName, setServerName] = useState('');
-  const [serverVersion, setServerVersion] = useState('1.21.1');
-  
-  const loadSubdomain = async () => {
-    try {
-      if (user && user.uid) {
-        const userSubdomain = await getUserSubdomain(user.uid);
-        setSubdomain(userSubdomain || '');
-        onSubdomainUpdate(userSubdomain || '');
-      } else {
-        console.error('User or user.uid is undefined');
-      }
-    } catch (error) {
-      console.error('Error fetching subdomain:', error);
-    }
-  };
-
-  useEffect(() => {
-        loadSubdomain().then(r => r);
-      },
-      [user]);
-
-  const handleSaveSubdomain = async () => {
-    try {
-      await serviiApi.setSubdomain(subdomainInput);
-      setSubdomain(subdomainInput);
-      onSubdomainUpdate(subdomainInput);
-    } catch (error) {
-      console.error('Error setting subdomain:', error);
-    }
-  };
-
-  const handleCreateServer = async () => {
-    try {
-        const frameworkToSend =  'paper';        
-        await onCreateServer(serverName, serverVersion, frameworkToSend);
-    } catch (error) {
-        console.error('Error creating server:', error);
-    }
-  };
-
-  const VersionChoice = (version) => {
-    return () => {
-      setServerVersion(version);
-    };
-  };
-
-  const validateInput = (input) => {
-    return input.replace(/[^a-zA-Z]/g, '');
-  };
-
-  return (
-    <div className={styles.container}>
-      {noServers ? (
-        <div className={styles.mainCardNoserveur}>
-          <div className={styles.nsSubTitle}>Bonjour</div>
-          <div className={styles.nsTitle}>Aucun serveur</div>
-          <button className={styles.btnnoServCreate} onClick={onCreateServer}>Créer un nouveau serveur</button>
-        </div>
-      ) : (
-        subdomain === null ? (
-          <div>Loading...</div>
-        ) : (
-          subdomain === '' ? (
-            <div className={styles.mainCardSubdomain}>
-              <div className={styles.title}>Ecrivez votre sous domaine</div>
-              <div className={styles.subtitle}>
-                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 nest pas facilement modifiable !
-              </div>
-              <input
-                className={styles.inputsubdomain}
-                type="text"
-                value={subdomainInput}
-                onChange={(e) => setSubdomainInput(validateInput(e.target.value))}
-                placeholder='Nom du sous domaine'
-              />
-              <button className={styles.btnSubCreate} onClick={handleSaveSubdomain}>
-                Envoyer
-              </button>
-              <button className={styles.btnSubCreate} onClick={onCancel}>
-                Annuler
-              </button>
-            </div>
-          ) : (
-            <div className={styles.GamesChoice}>
-              <div className={styles.title}>Création du serveur</div>
-              <div className={styles.subtitle}>Comment voulez vous jouer ?</div>
-              <div className={styles.GamesContainer}>dd</div>
-            </div>
-          )
-        )
-      )}
-    </div>
-  );
-};
-
-CreateServer.propTypes = {
-  user: PropTypes.oneOfType([
-    PropTypes.shape({
-      uid: PropTypes.string.isRequired,
-      displayName: PropTypes.string,
-      email: PropTypes.string,
-      photoURL: PropTypes.string,
-    }),
-  ]),
-  onCreateServer: PropTypes.func.isRequired,
-  onSubdomainUpdate: PropTypes.func.isRequired,
-  onCancel: PropTypes.func,
-  noServers: PropTypes.any
-};
-
-export default CreateServer;
diff --git a/src/components/CreateServer/CreateServer.module.scss b/src/components/CreateServer/CreateServer.module.scss
deleted file mode 100644
index 067dce3..0000000
--- a/src/components/CreateServer/CreateServer.module.scss
+++ /dev/null
@@ -1,296 +0,0 @@
-.mainCardCommon {
-  display: flex;
-  justify-content: start;
-  align-items: start;
-  flex-direction: column;
-  background-color: #1D1836;
-  border-radius: 1.5rem;
-}
-
-.title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-}
-
-.subtitle {
-  font-size: 1.2rem;
-  font-weight: 300;
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.input, .select {
-  width: 60rem;
-  padding: 1rem;
-  background-color: #090325;
-  border: none;
-  border-radius: 0.5rem;
-  color: white;
-  font-size: 1rem;
-}
-
-.btnSubCreate, .btnServCreate {
-  margin-top: 2rem;
-  padding: 1rem 2rem;
-  background-color: #090325;
-  color: white;
-  border: none;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.3s, transform 0.3s;
-  margin-right: 1rem;
-}
-
-.containerNoserveur {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mainCardNoserveur {
-  background-color: #1D1836;
-  padding: 3rem;
-  margin-top: 5rem;
-  border-radius: 1rem;
-}
-
-.nsTitle {
-  font-size: 3rem;
-  color: #F2F2F2;
-  font-weight: 900;
-}
-
-.nsSubTitle {
-  font-size: 1.8rem;
-  font-weight: 300;
-}
-
-.btnnoServCreate {
-  width: 40rem;
-  height: 5rem;
-  margin-top: 5rem;
-  font-size: 2rem;
-  font-weight: 900;
-  background-color: #090325;
-  border-radius: 1rem;
-  color: white;
-  border: none;
-  cursor: pointer;
-}
-
-.btnServCreate {
-  width: 15rem;
-  height: 3.5rem;
-  margin-top: 2.5rem;
-  font-size: 1.5rem;
-  font-weight: 900;
-  border-radius: 1rem;
-  background-color: #090325;
-}
-
-.GamesChoice {
-  margin-top: var(--navbar-height);
-  width: 50rem;
-  height: 10rem;
-  background-color: red;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.mainCardSubdomain {
-  background-color: #1D1836;
-  padding: 3rem;
-  margin-top: 5rem;
-  border-radius: 1rem;
-  width: 55rem;
-}
-
-.subtitle {
-  font-size: 1.2rem;
-  font-weight: 600;
-  text-align: start;
-  margin-bottom: 1.5rem;
-  margin-top: 2rem;
-
-}
-
-.inputsubdomain {
-  width: 50rem;
-  padding: 1rem;
-  margin-top: 1rem;
-  background-color: #090325;
-  border: none;
-  border-radius: 0.5rem;
-  color: white;
-  font-size: 1rem;
-}
-
-
-.carreContainer {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 100%;
-  height: 6rem; 
-}
-
-.carreWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.carre {
-  width: 5rem;
-  height: 5rem;
-  object-fit: cover;
-  display: block;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-.carre:hover {
-  transform: scale(1.1);
-}
-
-.selected {
-  border: 2px solid #fff;
-  transform: scale(1.2);
-}
-
-.adviced {
-  border: 2px solid violet;
-}
-
-.recommendationLabel {
-  margin-top: 0.5rem; 
-  font-size: 1rem;
-  color: violet; 
-  font-weight: 700;
-  text-align: center;
-}
-
-.VersionContainer {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr); 
-  justify-items: center;
-  align-items: center;
-  width: 100%;
-}
-
-.VersionCard{
-  height: 4rem;
-  width: 8rem;
-  background-color: #090325;
-  display: flex;
-  align-items: center;
-  justify-content: center ;
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  border-radius: .3rem;
-}
-
-.VersionCard svg {
-  margin-right: 0.5rem;
-}
-
-.VersionCard:hover{
-  background-color: #09032579;
-  cursor: pointer;
-}
-
-.selectedVersion {
-  border: .15rem solid #fff;
-  color: #fff;
-}
-
-
-
-
-@media (max-width: 800px) {
-
-  .VersionContainer {
-    grid-template-columns: repeat(3, 1fr); 
-  }
-
-  .buttonContainer{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-  }
-
-  .title {
-    font-size: 1.8rem;
-    margin-bottom: 1rem;
-  }
-
-  .subtitle {
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .input, .select {
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 0.875rem;
-  }
-
-  .btnSubCreate, .btnServCreate {
-    margin-top: 2rem;
-    padding: 1rem 2.5rem;
-    font-size: 1rem;
-    margin-right: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .mainCardNoserveur {
-    padding: 2rem;
-    margin-top: 3rem;
-  }
-
-  .nsTitle {
-    font-size: 2rem;
-  }
-
-  .nsSubTitle {
-    font-size: 1.2rem;
-  }
-
-  .btnnoServCreate {
-    width: 100%;
-    height: 3.5rem;
-    font-size: 1.5rem;
-    margin-top: 3rem;
-  }
-
-  .btnServCreate {
-    width: 100%;
-    height: 2.5rem;
-    font-size: 1.25rem;
-  }
-
-  .mainCardCreateServ {
-    margin-top: 3rem;
-    padding: 1.5rem;
-    width: 35rem;
-  }
-
-  .mainCardSubdomain {
-    padding: 2rem;
-    margin-top: 3rem;
-    width: 100%;
-  }
-
-  .inputsubdomain {
-    width: 100%;
-    padding: 0.75rem;
-    font-size: 0.875rem;
-  }
-}
diff --git a/src/components/serverCards/DefaultServerCard.module.scss b/src/components/serverCards/DefaultServerCard.module.scss
index 8f6ef1b..1f45f2e 100644
--- a/src/components/serverCards/DefaultServerCard.module.scss
+++ b/src/components/serverCards/DefaultServerCard.module.scss
@@ -105,6 +105,7 @@
 .startStopButton {
   padding: 1rem 1.5rem;
   border-radius: 0.5rem;
+  font-size: 1rem;
   border: none;
   color: white;
   cursor: pointer;
diff --git a/src/main.css b/src/main.css
index d1b4cd9..86da27f 100644
--- a/src/main.css
+++ b/src/main.css
@@ -54,7 +54,7 @@ body {
 
 @media (min-width: 2000px) {
   html {
-    font-size: 15px;
+    font-size: 20px;
   }
 }
 
diff --git a/src/pages/CreateServer/Javapick/java.jsx b/src/pages/CreateServer/java/java.jsx
similarity index 98%
rename from src/pages/CreateServer/Javapick/java.jsx
rename to src/pages/CreateServer/java/java.jsx
index 52dbc07..4b8e1fe 100644
--- a/src/pages/CreateServer/Javapick/java.jsx
+++ b/src/pages/CreateServer/java/java.jsx
@@ -3,7 +3,7 @@ import { GoTag, GoCheck } from "react-icons/go";
 import { useNavigate } from 'react-router-dom'; 
 import styles from './java.module.scss';
 import PropTypes from "prop-types";
-import Navbar from '../../../components/navbar/Navbar';
+import Navbar from '../../../components/navbar/Navbar.jsx';
 import serviiApi from "../../../service/api.tsx";
 
 const Javapick = ({ user }) => {
diff --git a/src/pages/CreateServer/Javapick/java.module.scss b/src/pages/CreateServer/java/java.module.scss
similarity index 100%
rename from src/pages/CreateServer/Javapick/java.module.scss
rename to src/pages/CreateServer/java/java.module.scss
diff --git a/src/pages/CreateServer/modpack/modpack.jsx b/src/pages/CreateServer/modpack/modpack.jsx
index 485816b..cbdea89 100644
--- a/src/pages/CreateServer/modpack/modpack.jsx
+++ b/src/pages/CreateServer/modpack/modpack.jsx
@@ -1,27 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './modpack.module.scss';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import Navbar from '../../../components/navbar/Navbar';
-import { useNavigate } from 'react-router-dom'; 
+import { useNavigate } from 'react-router-dom';
 import serviiApi from '../../../service/api';
 
 const Modpack = ({ user }) => {
   const navigate = useNavigate();
   const [modpacks, setModpacks] = useState([]);
+  const [selectedModpackIndex, setSelectedModpackIndex] = useState(null); 
   const [error, setError] = useState('');
+  const [serverShortName, setServerShortName] = useState(''); 
 
   useEffect(() => {
     const fetchModpacks = async () => {
-      if (!user) {
-        setError("Vous devez être connecté pour voir les modpacks.");
-        return;
-      }
-
       try {
         const response = await serviiApi.fetchModpacks();
-        console.log(response);
         if (response.return_code === 200) {
-          setModpacks(response.message); 
+          const fetchedModpacks = response.message;
+
+          setModpacks(fetchedModpacks);
         } else {
           setError(response.message);
         }
@@ -34,6 +32,28 @@ const Modpack = ({ user }) => {
     fetchModpacks();
   }, [user]);
 
+  const handleModpackClick = (index) => {
+    setSelectedModpackIndex(index); 
+  };
+
+
+  const handleCancel = () => {
+    setSelectedModpackIndex(null); 
+    console.log("dffdff");
+  };
+  
+
+  const handleCreate = async () => {
+    try {
+      const framework =  selectedModpackIndex.framework;        
+      await serviiApi.serverCreate(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
+      console.log(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
+      navigate('/Dashboard');
+  } catch (error) {
+      console.error('Error creating server:', error);
+  }
+  };
+
   return (
     <div className={styles.Container}>
       <Navbar 
@@ -43,13 +63,38 @@ const Modpack = ({ user }) => {
         backButtonText="Retour"
         onBackClick={() => navigate('/CreateServer')}
       />
-      <div className={styles.hey}>
+      <div className={styles.modpackGrid}>
         {error ? <h2>{error}</h2> : (
-          <ul>
-            {modpacks.map((modpack, index) => (
-              <li key={index}>{modpack.name}</li> 
-            ))}
-          </ul>
+          modpacks.map((modpack, index) => (
+            <div 
+              key={index} 
+              className={`${styles.modpackCard} ${selectedModpackIndex === index ? styles.selected : ''}`} 
+              onClick={() => handleModpackClick(index)}
+            >
+              <img src={`https://www.servii.fr/api/modpacks/image/${modpack.image}`} alt={modpack.name} className={styles.modpackImage} />
+              <h3>{modpack.name}</h3>
+              <p>{modpack.description}</p>
+              <div className={styles.tags}>
+                <span className={`${styles.tag} ${styles.adventure}`}>Aventure</span>
+                <span className={`${styles.tag} ${styles.combat}`}>Combat</span>
+                <span className={`${styles.tag} ${styles.pve}`}>PvE</span>
+                <span className={`${styles.tag} ${styles.forge}`}>{modpack.framework}</span>
+              </div>
+              <div className={styles.meta}>
+                <span>Version MC: {modpack.mcVersion}</span>
+                <span>Version Modpack: {modpack.version}</span>
+              </div>
+
+              {selectedModpackIndex === index && (
+                <div className={styles.overlay}>
+                  <div className={styles.shortNamtitle}>Créer le serveur {modpack.short_name} ?</div>
+                  <button className={styles.createButton} onClick={handleCreate}>Créer</button>
+                  <button className={styles.cancelButton} onClick={handleCancel}>Annuler</button>
+                  
+                </div>
+              )}
+            </div>
+          ))
         )}
       </div>
     </div>
diff --git a/src/pages/CreateServer/modpack/modpack.module.scss b/src/pages/CreateServer/modpack/modpack.module.scss
index 5ec5e9c..690f5f2 100644
--- a/src/pages/CreateServer/modpack/modpack.module.scss
+++ b/src/pages/CreateServer/modpack/modpack.module.scss
@@ -1,3 +1,155 @@
-.hey{
-    margin-top: 8em;
-}
\ No newline at end of file
+.Container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 6rem;
+  }
+  
+  .modpackGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
+    gap: 2rem;
+    width: 100%;
+    padding: 1.5rem;
+  }
+  
+  .modpackCard {
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: .7rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    width: 30rem;
+    text-align: center;
+    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
+    cursor: pointer;
+    position: relative;
+    
+    &:hover {
+      transform: translateY(-.2rem);
+    }
+  
+    .content {
+      transition: filter 0.2s ease-in-out;
+    }
+  
+    &.selected .content {
+        filter: blur(.8rem); 
+      }
+      
+    
+    h3 {
+      margin: .8rem 0;
+      font-size: 1.5em;
+      color: #333;
+    }
+  
+    p {
+      font-size: 1em;
+      color: #666;
+    }
+  
+    .modpackImage {
+      width: 100%;
+      height: auto;
+      margin-bottom: 1rem;
+    }
+  
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: .5rem;
+      margin: 2.5rem 0rem;
+  
+      .tag {
+        display: flex;
+        align-items: center;
+        padding: .4rem .8rem;
+        border-radius: 1.5rem;
+        font-size: 0.9em;
+        font-weight: 500;
+        color: #fff;
+  
+        &.adventure {
+          background-color: #4CAF50;
+        }
+  
+        &.combat {
+          background-color: #E91E63;
+        }
+  
+        &.pve {
+          background-color: #2196F3;
+        }
+  
+        &.forge {
+          background-color: #FFC107;
+        }
+      }
+    }
+  
+    .meta {
+      display: flex;
+      justify-content: space-between;
+      font-size: .9rem;
+      color: #999;
+    }
+  
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+      z-index: 10;
+    
+      h4 {
+        font-size: 1.8rem;
+        color: #333;
+        margin-bottom: 1rem;
+      }
+  
+      .createButton {
+        background-color: black;
+        color: white;
+        padding: 0.5rem 1.5rem;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 1.25rem;
+      }
+  
+      .createButton:hover {
+        background-color: #252525bb;
+      }
+  
+      .cancelButton {
+        background-color: gray;
+        color: white;
+        padding: 0.5rem 1.5rem;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 1.25rem;
+      }
+  
+      .cancelButton:hover {
+        background-color: rgba(95, 95, 95, 0.685);
+      }
+  
+      .shortNamtitle {
+        font-weight: 400;
+        font-size: 1.5rem;
+        color: #333;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/service/api.test.js b/src/service/api.test.js
deleted file mode 100644
index e69de29..0000000