diff --git a/banquise-website/src/App.tsx b/banquise-website/src/App.tsx
index e6ea4ea..1603d7c 100644
--- a/banquise-website/src/App.tsx
+++ b/banquise-website/src/App.tsx
@@ -1,103 +1,176 @@
 import React, { useState } from 'react';
 import { Navigation } from './components/layout/Navigation';
-import { Footer } from './components/layout/Footer';
 import { HeroSection } from './components/sections/HeroSection';
-import { TechFeaturesSection } from './components/sections/TechFeaturesSection';
 import { ServicesSection } from './components/sections/ServicesSection';
+import { TechFeaturesSection } from './components/sections/TechFeaturesSection';
 import { AboutSection } from './components/sections/AboutSection';
+import { Footer } from './components/layout/Footer';
 import { Popup } from './components/ui/Popup';
 import { ScrollToTopButton } from './components/ui/ScrollToTopButton';
+import { ParallaxBackground } from './components/ui/ParallaxBackground';
 import { URLS } from './config/constants';
 
-// Define Service interface directly in App
-interface Service {
-  name: string;
-  url: string;
-  image: string;
-  description: string;
-  features: string[];
-  icon: string;
-}
+const services = [
+  {
+    name: "Wiki",
+    url: URLS.services.wiki,
+    image: "/path/to/wiki-image.jpg",
+    icon: "📚",
+    description: "Plateforme collaborative de documentation technique et de partage de connaissances. Créez, modifiez et organisez vos guides, tutoriels et documentations en équipe avec un système de versioning intégré.",
+    features: [
+      "Éditeur markdown avancé avec prévisualisation en temps réel",
+      "Système de versioning pour suivre les modifications",
+      "Collaboration en temps réel avec plusieurs contributeurs",
+      "Recherche intelligente dans tous les documents",
+      "Templates prédéfinis pour différents types de documentation",
+      "Système de commentaires et de révisions",
+      "Export PDF et HTML pour partage externe",
+      "Intégration avec Git pour la sauvegarde"
+    ]
+  },
+  {
+    name: "Gitea",
+    url: URLS.services.gitea,
+    image: "/path/to/gitea-image.jpg",
+    icon: "🔧",
+    description: "Service Git auto-hébergé lightweight et performant pour vos projets de développement. Alternative open-source à GitHub avec toutes les fonctionnalités essentielles pour gérer vos repositories.",
+    features: [
+      "Repositories Git illimités publics et privés",
+      "Interface web intuitive pour la gestion des projets",
+      "Issues et pull requests avec système de review",
+      "Wiki intégré pour chaque projet",
+      "Actions CI/CD pour l'automatisation",
+      "Gestion fine des permissions et des équipes",
+      "API REST complète pour l'intégration",
+      "Webhooks pour les notifications externes"
+    ]
+  },
+  {
+    name: "Panel Gaming",
+    url: URLS.services.panel,
+    image: "/path/to/panel-image.jpg",
+    icon: "🎮",
+    description: "Interface de gestion centralisée pour tous vos serveurs de jeux. Déployez, configurez et surveillez facilement vos serveurs Minecraft, CS2, Garry's Mod et bien d'autres.",
+    features: [
+      "Support de 20+ jeux populaires (Minecraft, CS2, GMod...)",
+      "Déploiement en un clic avec templates préconfigurés",
+      "Console d'administration en temps réel",
+      "Gestion des fichiers avec éditeur intégré",
+      "Monitoring des performances et ressources",
+      "Système de sauvegarde automatique",
+      "Planificateur de tâches automatisées"
+    ]
+  },
+  {
+    name: "Pelican",
+    url: URLS.services.pelican,
+    image: "/path/to/pelican-image.jpg",
+    icon: "🐧",
+    description: "Générateur de sites statiques Python ultra-rapide et flexible. Créez des blogs, portfolios ou sites de documentation avec une performance optimale et un déploiement simplifié.",
+    features: [
+      "Gestion de serveurs de jeux avec serveurs dedies (Minecraft, CS2, Palworld...)",
+      "Déploiement en un clic avec templates préconfigurés",
+      "Console d'administration en temps réel",
+      "Gestion des fichiers avec éditeur intégré",
+      "Monitoring des performances et ressources",
+      "Système de sauvegarde automatique",
+      "Planificateur de tâches automatisées"         
+    ]
+  },
+  {
+    name: "Intranet",
+    url: URLS.services.intra,
+    image: "/path/to/intra-image.jpg",
+    icon: "🏢",
+    description: "Espace privé sécurisé de l'association pour centraliser les ressources internes, communications et outils de collaboration entre membres.",
+    features: [
+      "Tableau de bord personnalisé pour chaque membre",
+      "Calendrier des événements et réunions",
+      "Partage de fichiers sécurisé",
+      "Forums de discussion privés",
+      "Annuaire des membres avec profils",
+      "Système de notifications internes",
+      "Gestion des projets et tâches",
+      "Archive des décisions et procès-verbaux"
+    ]
+  },
+  {
+    name: "Mails",
+    url: URLS.services.mails,
+    image: "/path/to/mails-image.jpg",
+    icon: "📧",
+    description: "Service de messagerie électronique professionnel avec interface web moderne. Bénéficiez d'une adresse email personnalisée @la-banquise.fr avec toutes les fonctionnalités avancées.",
+    features: [
+      "Adresses email personnalisées @la-banquise.fr",
+      "Interface webmail moderne et responsive",
+      "Filtres anti-spam et antivirus intégrés",
+      "Contacts et calendrier synchronisés",
+      "Support IMAP/SMTP pour clients externes",
+      "Stockage généreux avec archivage",
+      "Chiffrement des communications",
+      "Sauvegarde automatique des données"
+    ]
+  },
+  {
+    name: "Password change",
+    url: URLS.services.ssp,
+    image: "/path/to/ssp-image.jpg",
+    icon: "📧",
+    description: "Service de messagerie électronique professionnel avec interface web moderne. Bénéficiez d'une adresse email personnalisée @la-banquise.fr avec toutes les fonctionnalités avancées.",
+    features: [
+      "Interface pour changer votre mot de passe"
+    ]
+  },
+  {
+    name: "OpenCloud",
+    url: URLS.services.opencloud,
+    image: "/path/to/opencloud-image.jpg",
+    icon: "☁️",
+    description: "Plateforme cloud collaborative open-source pour le stockage, le partage et la synchronisation de fichiers. Alternative libre à Google Drive avec contrôle total sur vos données.",
+    features: [
+      "Stockage cloud sécurisé et chiffré",
+      "Synchronisation multi-appareils",
+      "Partage de fichiers avec liens sécurisés",
+      "Édition collaborative de documents",
+      "Versioning automatique des fichiers",
+      "Applications mobiles natives",
+      "Intégration avec outils externes",
+      "Sauvegarde géoredondante des données"
+    ]
+  }
+];
 
 const App: React.FC = () => {
-  // Define services directly in the component with enhanced data
-  const services: Service[] = [
-    { 
-      name: "Wiki", 
-      url: URLS.services.wiki, 
-      image: "/src/assets/iceberg.png",
-      icon: "📚",
-      description: "Notre wiki collaboratif est votre centre de documentation technique. Accédez à des guides détaillés, des tutoriels et de la documentation API pour tous nos services.",
-      features: [
-        "Documentation collaborative en temps réel",
-        "Guides d'installation détaillés",
-        "API et références techniques",
-        "Tutoriels pas à pas",
-        "Base de connaissances communautaire",
-        "Recherche avancée intégrée"
-      ]
-    },
-    { 
-      name: "Gitea", 
-      url: URLS.services.gitea, 
-      image: "/src/assets/iceberg.png",
-      icon: "🔧",
-      description: "Instance Gitea auto-hébergée pour la gestion de vos dépôts Git. Collaborez sur vos projets avec un contrôle total sur votre code source.",
-      features: [
-        "Dépôts Git illimités",
-        "Issues et pull requests",
-        "Actions CI/CD intégrées",
-        "Gestion d'équipes et permissions",
-        "Interface web intuitive",
-        "Intégration avec outils externes"
-      ]
-    },
-    { 
-      name: "Panel", 
-      url: URLS.services.panel, 
-      image: "/src/assets/iceberg.png",
-      icon: "🎮",
-      description: "Interface de gestion centralisée pour vos serveurs de jeux. Déployez, configurez et surveillez vos serveurs gaming en quelques clics.",
-      features: [
-        "Déploiement automatisé de serveurs",
-        "Monitoring en temps réel",
-        "Gestion des ressources système",
-        "Interface d'administration web",
-        "Support multi-jeux",
-        "Sauvegarde automatique des données"
-      ]
-    }
-  ];
-
-  const [selectedService, setSelectedService] = useState<Service | null>(null);
-  
-  // Inline accordion logic
+  const [selectedService, setSelectedService] = useState<typeof services[0] | null>(null);
   const [openAccordion, setOpenAccordion] = useState<string | null>(null);
+
   const toggleAccordion = (title: string) => {
     setOpenAccordion(openAccordion === title ? null : title);
   };
 
   return (
-    <div className="flex flex-col min-h-screen w-full">
-      <Navigation />
+    <div className="min-h-screen bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark text-white overflow-x-hidden relative">
+      {/* Background Effects */}
+      <ParallaxBackground />
+      
+      {/* Main Content */}
+      <div className="relative z-10">
+        <Navigation />
+        <HeroSection />
+        <ServicesSection services={services} onServiceClick={setSelectedService} />
+        <TechFeaturesSection />
+        <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
+        <Footer />
+      </div>
 
-      <main className="flex-1 flex flex-col overflow-x-hidden overflow-y-auto">
-        <div className="relative flex-1 bg-ocean-gradient w-full min-h-screen flex flex-col justify-start items-center overflow-x-hidden">
-          
-          <HeroSection />
-          <TechFeaturesSection />
-          <ServicesSection services={services} onServiceClick={setSelectedService} />
-          <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
-        </div>
-      </main>
-
-      <Footer />
-
-      {/* Bouton de retour en haut */}
+      {/* UI Components */}
       <ScrollToTopButton />
-
+      
       {selectedService && (
-        <Popup service={selectedService} onClose={() => setSelectedService(null)} />
+        <Popup 
+          service={selectedService} 
+          onClose={() => setSelectedService(null)} 
+        />
       )}
     </div>
   );
diff --git a/banquise-website/src/components/layout/Footer.tsx b/banquise-website/src/components/layout/Footer.tsx
index 0072ea6..3d70705 100644
--- a/banquise-website/src/components/layout/Footer.tsx
+++ b/banquise-website/src/components/layout/Footer.tsx
@@ -24,6 +24,26 @@ export const Footer: React.FC = () => (
               Panel
             </a>
           </li>
+          <li>
+            <a href={URLS.services.pelican} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
+              Pelican
+            </a>
+          </li>
+          <li>
+            <a href={URLS.services.intra} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
+              Intranet
+            </a>
+          </li>
+          <li>
+            <a href={URLS.services.mails} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
+              Webmail
+            </a>
+          </li>
+          <li>
+            <a href={URLS.services.opencloud} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
+              OpenCloud
+            </a>
+          </li>
         </ul>
       </div>
       
diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx
index e71693f..5900f79 100644
--- a/banquise-website/src/components/sections/AboutSection.tsx
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -80,6 +80,38 @@ export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggl
                   <p className="text-banquise-gray/80 text-sm">Interface de gestion pour serveurs de jeux</p>
                 </div>
               </div>
+
+              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
+                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>🐧</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">Pelican</h4>
+                  <p className="text-banquise-gray/80 text-sm">Générateur de sites statiques</p>
+                </div>
+              </div>
+
+              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
+                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>🏢</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">Intranet</h4>
+                  <p className="text-banquise-gray/80 text-sm">Espace privé de l'association</p>
+                </div>
+              </div>
+
+              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
+                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>📧</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">Webmail</h4>
+                  <p className="text-banquise-gray/80 text-sm">Service de messagerie électronique</p>
+                </div>
+              </div>
+
+              <div className={`flex items-start space-x-4 p-4 ${commonStyles.gradients.card} rounded-xl ${commonStyles.cards.base}`}>
+                <div className={`${commonStyles.icons.small} ${commonStyles.gradients.primaryBr} font-bold`}>☁️</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">OpenCloud</h4>
+                  <p className="text-banquise-gray/80 text-sm">Plateforme cloud collaborative</p>
+                </div>
+              </div>
             </div>
             <p className={`${commonStyles.text.muted} mt-4`}>
               Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
diff --git a/banquise-website/src/config/constants.ts b/banquise-website/src/config/constants.ts
index 5a493bf..a09b7a1 100644
--- a/banquise-website/src/config/constants.ts
+++ b/banquise-website/src/config/constants.ts
@@ -3,7 +3,12 @@ export const URLS = {
     wiki: "https://wiki.la-banquise.fr",
     gitea: "https://git.la-banquise.fr",
     panel: "https://panel.la-banquise.fr",
-    auth: "https://auth.la-banquise.fr"
+    auth: "https://auth.la-banquise.fr",
+    pelican: "https://pelican.la-banquise.fr",
+    intra: "https://intra.la-banquise.fr",
+    mails: "https://mails.la-banquise.fr",
+    opencloud: "https://opencloud.la-banquise.fr"
+    ssp: "https://ssp.la-banquise.fr"
   },
   social: {
     discord: "https://discord.gg/labanquise"