diff --git a/app/Competences/page.jsx b/app/Competences/page.jsx
index 490f291..29cd3b5 100644
--- a/app/Competences/page.jsx
+++ b/app/Competences/page.jsx
@@ -21,27 +21,32 @@ export default async function Page() {
 
   return (
     <main className="w-full p-6">
-      <h1 className="text-3xl mb-6 font-bold text-gray-700">Mes Compétences</h1>
+      <h1 className="text-3xl mb-6 font-bold text-gray-700 text-center">Mes Compétences</h1>
 
-      {/* Grille dynamique pour un affichage équilibré */}
-      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
+      {/* Grille améliorée avec une meilleure gestion de l'espace */}
+      <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(300px,1fr))] max-w-7xl mx-auto">
         {competences.map((competence) => {
-          const picture = competence.picture?.[0]; // Récupère la première image si elle existe
+          const picture = competence.picture?.[0];
           const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
 
           return (
-            <div key={competence.id} className="bg-white rounded-lg shadow-md overflow-hidden w-72 h-96 flex flex-col">
+            <div 
+              key={competence.id} 
+              className="bg-white rounded-lg shadow-md overflow-hidden w-80 h-96 flex flex-col transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
+            >
               <Link href={`/competences/${competence.slug}`}>
                 <div className="overflow-hidden w-full h-48">
                   <img
                     src={imageUrl}
                     alt={picture?.name || "Competence image"}
-                    className="w-full h-full object-cover object-center"
+                    className="w-full h-full object-cover"
                   />
                 </div>
                 <div className="p-4 flex-grow">
                   <p className="font-bold text-xl mb-2">{competence.name}</p>
-                  <p className="text-gray-700 text-sm line-clamp-3">{competence.description}</p>
+                  <p className="text-gray-700 text-sm hover:text-base transition-all duration-200 ease-in-out">
+                    {competence.description}
+                  </p>
                 </div>
               </Link>
             </div>
diff --git a/app/assets/images/minishell/u6113228922_A_futuristic_AI_system_visualized_as_a_glowing_cybe_2545ce40-e410-4b52-b157-2511b656cd07.png b/app/assets/images/minishell/u6113228922_A_futuristic_AI_system_visualized_as_a_glowing_cybe_2545ce40-e410-4b52-b157-2511b656cd07.png
new file mode 100644
index 0000000..e467167
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_futuristic_AI_system_visualized_as_a_glowing_cybe_2545ce40-e410-4b52-b157-2511b656cd07.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_futuristic_AI_system_visualized_as_a_glowing_cybe_852a3e25-acde-4b9e-a648-5ffedb56446b.png b/app/assets/images/minishell/u6113228922_A_futuristic_AI_system_visualized_as_a_glowing_cybe_852a3e25-acde-4b9e-a648-5ffedb56446b.png
new file mode 100644
index 0000000..9a1dc5a
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_futuristic_AI_system_visualized_as_a_glowing_cybe_852a3e25-acde-4b9e-a648-5ffedb56446b.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_programmer_intensely_focused_on_a_terminal_debugg_dd53696b-5a5c-41a2-9ed2-26df205f416e.png b/app/assets/images/minishell/u6113228922_A_programmer_intensely_focused_on_a_terminal_debugg_dd53696b-5a5c-41a2-9ed2-26df205f416e.png
new file mode 100644
index 0000000..d2ac15d
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_programmer_intensely_focused_on_a_terminal_debugg_dd53696b-5a5c-41a2-9ed2-26df205f416e.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_structured_and_modern_infographic_visually_explai_0785ccb8-5a4e-4441-ae6b-bb72d78e4367.png b/app/assets/images/minishell/u6113228922_A_structured_and_modern_infographic_visually_explai_0785ccb8-5a4e-4441-ae6b-bb72d78e4367.png
new file mode 100644
index 0000000..69b9685
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_structured_and_modern_infographic_visually_explai_0785ccb8-5a4e-4441-ae6b-bb72d78e4367.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_35a27eeb-7fe5-41c6-83f7-e3ad3519b701.png b/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_35a27eeb-7fe5-41c6-83f7-e3ad3519b701.png
new file mode 100644
index 0000000..5c0bc94
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_35a27eeb-7fe5-41c6-83f7-e3ad3519b701.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_429b166a-018d-48bb-abea-d7da3e66b547.png b/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_429b166a-018d-48bb-abea-d7da3e66b547.png
new file mode 100644
index 0000000..f8ecc3b
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_429b166a-018d-48bb-abea-d7da3e66b547.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_a65577b3-30b9-4e7c-9dd5-3615867dbcef.png b/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_a65577b3-30b9-4e7c-9dd5-3615867dbcef.png
new file mode 100644
index 0000000..f170f72
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_surreal_artistic_interpretation_of_an_interactive_a65577b3-30b9-4e7c-9dd5-3615867dbcef.png differ
diff --git a/app/assets/images/minishell/u6113228922_A_vintage_UNIX_terminal_with_a_developer_testing_th_2b6c9389-db62-44f5-b368-8e8e4a796a82.png b/app/assets/images/minishell/u6113228922_A_vintage_UNIX_terminal_with_a_developer_testing_th_2b6c9389-db62-44f5-b368-8e8e4a796a82.png
new file mode 100644
index 0000000..5d3e445
Binary files /dev/null and b/app/assets/images/minishell/u6113228922_A_vintage_UNIX_terminal_with_a_developer_testing_th_2b6c9389-db62-44f5-b368-8e8e4a796a82.png differ
diff --git a/app/layout.tsx b/app/layout.tsx
index 06480a6..0a374c2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({ children }) {
           </header>
 
           {/* Ne pas forcer de largeur ici, chaque page gère son `main` */}
-          <main className="w-full mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300">
+          <main >
             {children}
           </main>
 
diff --git a/app/page.tsx b/app/page.tsx
index 036f39f..dd4a1ef 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -30,13 +30,13 @@ export default async function HomePage() {
   const imageUrl = photo?.url ? `${baseUrl}${photo.url}` : null;
 
   return (
-    <main className="max-w-3xl mx-auto flex flex-col items-center justify-center p-6">
+    <main className="max-w-3xl w-full mx-auto flex flex-col items-center justify-center p-6 bg-white/30 rounded-lg mt-3 mb-3">
       {/* Texte court (title) */}
       <h1 className="text-3xl font-bold text-gray-800 mb-4">{title}</h1>
 
       {/* Photo en cadre ovale avec effet hover */}
       {imageUrl ? (
-        <div className="relative w-64 h-64 rounded-full overflow-hidden shadow-lg border-4 border-gray-300 transition-transform duration-300 hover:scale-110">
+        <div className="relative w-64 h-64 rounded-full overflow-hidden shadow-lg border-4 border-gray-300 transition-transform duration-300 hover:scale-110 hover:rotate-3">
           <img src={imageUrl} alt="Photo de profil" className="w-full h-full object-cover object-center" />
         </div>
       ) : (
@@ -46,7 +46,7 @@ export default async function HomePage() {
       )}
 
       {/* Texte riche en Markdown */}
-      <div className="mt-6 text-lg text-black-700 max-w-2xl p-4 text-center">
+      <div className="mt-6 text-lg text-black-700 max-w-2xl px-6 text-center">
         <ReactMarkdown>{cv}</ReactMarkdown>
       </div>
     </main>
diff --git a/app/portfolio/page.jsx b/app/portfolio/page.jsx
index 4446267..418d633 100644
--- a/app/portfolio/page.jsx
+++ b/app/portfolio/page.jsx
@@ -22,16 +22,19 @@ export default async function Page() {
   return (
     <main className="w-full p-6">
       {/* Titre de la page */}
-      <h1 className="text-3xl mb-6 font-bold text-gray-700">Portfolio formation 42</h1>
+      <h1 className="text-3xl mb-6 font-bold text-gray-700 text-center">Portfolio formation 42</h1>
 
-      {/* Grille dynamique pour afficher les projets */}
-      <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(280px,1fr))] max-w-6xl mx-auto">
+      {/* Grille améliorée avec une meilleure largeur et des colonnes plus équilibrées */}
+      <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(300px,1fr))] max-w-7xl mx-auto">
         {projects.map((project) => {
-          const picture = project.picture?.[0]; // Récupère la première image si elle existe
+          const picture = project.picture?.[0];
           const imageUrl = picture?.url ? `http://localhost:1337${picture.url}` : "/placeholder.jpg";
 
           return (
-            <div key={project.id} className="bg-white rounded-lg shadow-md overflow-hidden w-72 h-96 flex flex-col">
+            <div 
+              key={project.id} 
+              className="bg-white rounded-lg shadow-md overflow-hidden w-80 h-96 flex flex-col transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
+            >
               {/* Lien vers la page de détail du projet */}
               <Link href={`/portfolio/${project.slug}`}>
                 <div className="overflow-hidden w-full h-48">
@@ -43,7 +46,9 @@ export default async function Page() {
                 </div>
                 <div className="p-4 flex-grow">
                   <p className="font-bold text-xl mb-2">{project.name}</p>
-                  <p className="text-gray-700 text-sm line-clamp-3">{project.description}</p>
+                  <p className="text-gray-700 text-sm hover:text-base transition-all duration-200 ease-in-out">
+                    {project.description}
+                  </p>
                 </div>
               </Link>
             </div>