diff --git a/src/pages/CreateServer/modpack/modpack.jsx b/src/pages/CreateServer/modpack/modpack.jsx
index 57e8345..485816b 100644
--- a/src/pages/CreateServer/modpack/modpack.jsx
+++ b/src/pages/CreateServer/modpack/modpack.jsx
@@ -1,13 +1,39 @@
+import React, { useEffect, useState } from 'react';
 import styles from './modpack.module.scss';
 import PropTypes from "prop-types";
 import Navbar from '../../../components/navbar/Navbar';
 import { useNavigate } from 'react-router-dom'; 
-
+import serviiApi from '../../../service/api';
 
 const Modpack = ({ user }) => {
   const navigate = useNavigate();
+  const [modpacks, setModpacks] = useState([]);
+  const [error, setError] = 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); 
+        } else {
+          setError(response.message);
+        }
+      } catch (error) {
+        console.error(error);
+        setError("Erreur lors du chargement des modpacks.");
+      }
+    };
+
+    fetchModpacks();
+  }, [user]);
 
- 
   return (
     <div className={styles.Container}>
       <Navbar 
@@ -17,9 +43,15 @@ const Modpack = ({ user }) => {
         backButtonText="Retour"
         onBackClick={() => navigate('/CreateServer')}
       />
-        <div className={styles.hey}>
-            <h1>Prochainement disponible</h1>
-        </div>
+      <div className={styles.hey}>
+        {error ? <h2>{error}</h2> : (
+          <ul>
+            {modpacks.map((modpack, index) => (
+              <li key={index}>{modpack.name}</li> 
+            ))}
+          </ul>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/service/api.tsx b/src/service/api.tsx
index 810def7..0786875 100644
--- a/src/service/api.tsx
+++ b/src/service/api.tsx
@@ -88,7 +88,23 @@ function toast_status(status: number, message: string) {
   });
 }
 
+
+
 class serviiApi {
+
+    public static async fetchModpacks(): Promise<ApiResponse> {
+    try {
+      const response = await fetch(`${apiUrl}/modpacks`, {
+        method: 'GET',
+      });
+      const json = await response.json();
+      return { return_code: response.status, message: json };
+    } catch (error) {
+      toast_status(666, "Couldn't fetch modpacks");
+      console.error(error);
+      return { return_code: 503, message: "Couldn't fetch modpacks" };
+    }
+  }
   private static async call<T extends BaseRequest>(endpoint: serviiRequest, body: T, token: string): Promise<ApiResponse> {
     const unreachable: string = "Couldn't find an available API";
     try {