diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index f1e0fa6..c9fed39 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { Camera, Upload, Trash2, Play, Maximize2 } from "lucide-react";
@@ -56,8 +57,6 @@ export default function PortfolioPage() {
   >([]);
   const [uploadError, setUploadError] = useState("");
   const [uploadSuccess, setUploadSuccess] = useState(false);
-  const [selectedMedia, setSelectedMedia] = useState<string | null>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
 
   const handleMediaUpload = (
     e: React.ChangeEvent<HTMLInputElement>,
@@ -103,12 +102,14 @@ export default function PortfolioPage() {
 
   const handleDeleteMedia = (id: string) => {
     setUploadedMedia((prev) => prev.filter((media) => media.id !== id));
-    if (selectedMedia === id) {
-      setSelectedMedia(null);
-    }
   };
 
-  const selectedMediaItem = uploadedMedia.find((m) => m.id === selectedMedia);
+  const featureItems = uploadedMedia.map((media) => ({
+    id: media.id,
+    title: media.name,
+    description: media.type === "photo" ? "📷 Photo du projet" : "🎥 Vidéo du projet",    imageSrc: media.src,
+    imageAlt: media.name,
+  }));
 
   return (
     <ThemeProvider
@@ -133,8 +134,8 @@ export default function PortfolioPage() {
         />
       </div>
 
-      {/* Large Format Media Gallery Section */}
-      <div id="media-gallery" data-section="media-gallery">
+      {/* Media Upload Section */}
+      <div id="media-upload" data-section="media-upload">
         <div className="w-full py-20 px-4 md:px-8">
           <div className="max-w-7xl mx-auto">
             {/* Header */}
@@ -152,71 +153,7 @@ export default function PortfolioPage() {
             </div>
 
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-              {/* Large Format Viewer - Takes 2 columns on desktop */}
-              <div className="lg:col-span-2">
-                <div className="bg-[var(--card)] rounded-3xl p-8 border border-[var(--accent)] border-opacity-20 shadow-lg overflow-hidden">
-                  {selectedMediaItem ? (
-                    <div className="relative">
-                      {/* Large Format Display */}
-                      <div className="relative w-full bg-[var(--background)] rounded-2xl overflow-hidden">
-                        <div className="relative w-full" style={{ paddingBottom: "75%" }}>
-                          {selectedMediaItem.type === "photo" ? (
-                            <img
-                              src={selectedMediaItem.src}
-                              alt={selectedMediaItem.name}
-                              className="absolute inset-0 w-full h-full object-cover"
-                            />
-                          ) : (
-                            <video
-                              src={selectedMediaItem.src}
-                              controls
-                              className="absolute inset-0 w-full h-full object-contain bg-black"
-                              aria-label={selectedMediaItem.name}
-                            />
-                          )}
-                        </div>
-                      </div>
-
-                      {/* Media Info */}
-                      <div className="mt-6 p-6 bg-[var(--background)] rounded-xl border border-[var(--accent)] border-opacity-20">
-                        <div className="flex items-start justify-between mb-4">
-                          <div>
-                            <div className="flex items-center gap-2 mb-2">
-                              <span className="px-3 py-1 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] text-xs font-semibold rounded-full">
-                                {selectedMediaItem.type === "photo" ? "📷 Photo" : "🎥 Vidéo"}
-                              </span>
-                            </div>
-                            <h3 className="text-xl font-bold text-[var(--foreground)]">
-                              {selectedMediaItem.name}
-                            </h3>
-                            <p className="text-sm text-[var(--foreground)] opacity-60 mt-1">
-                              {selectedMediaItem.type === "photo" ? "Photo de projet" : "Vidéo de projet"}
-                            </p>
-                          </div>
-                          <button
-                            onClick={() => handleDeleteMedia(selectedMediaItem.id)}
-                            className="p-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
-                            aria-label="Supprimer ce média"
-                          >
-                            <Trash2 size={20} />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="flex items-center justify-center" style={{ minHeight: "600px" }}>
-                      <div className="text-center">
-                        <Camera size={64} className="mx-auto text-[var(--accent)] opacity-20 mb-4" />
-                        <p className="text-[var(--foreground)] opacity-60 text-lg">
-                          Sélectionnez une photo ou vidéo à partir de la liste ci-dessous
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Sidebar - Media List and Upload Controls */}
+              {/* Upload Controls - Sidebar */}
               <div className="lg:col-span-1 space-y-6">
                 {/* Upload Controls */}
                 <div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg space-y-4">
@@ -274,67 +211,48 @@ export default function PortfolioPage() {
                   )}
                 </div>
 
-                {/* Media List */}
+                {/* Media Count */}
                 <div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg">
-                  <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-bold text-[var(--foreground)]">
-                      Galerie ({uploadedMedia.length})
-                    </h3>
+                  <div className="text-center">
+                    <p className="text-3xl font-bold text-[var(--primary-cta)] mb-2">
+                      {uploadedMedia.length}
+                    </p>
+                    <p className="text-sm text-[var(--foreground)] opacity-60">
+                      {uploadedMedia.length === 1 ? "Média" : "Médias"} ajoutés
+                    </p>
                     {uploadedMedia.length > 0 && (
-                      <span className="text-xs text-[var(--foreground)] opacity-60 bg-[var(--background)] px-2 py-1 rounded">
+                      <p className="text-xs text-[var(--foreground)] opacity-40 mt-3">
                         {uploadedMedia.filter((m) => m.type === "photo").length}📷 {uploadedMedia.filter((m) => m.type === "video").length}🎥
-                      </span>
+                      </p>
                     )}
                   </div>
-
-                  {uploadedMedia.length === 0 ? (
-                    <div className="text-center py-12">
-                      <Camera size={32} className="mx-auto text-[var(--accent)] opacity-20 mb-2" />
-                      <p className="text-sm text-[var(--foreground)] opacity-60">
-                        Aucun média ajouté
-                      </p>
-                    </div>
-                  ) : (
-                    <div className="space-y-2 max-h-96 overflow-y-auto">
-                      {uploadedMedia.map((media) => (
-                        <button
-                          key={media.id}
-                          onClick={() => setSelectedMedia(media.id)}
-                          className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-all ${
-                            selectedMedia === media.id
-                              ? "bg-[var(--primary-cta)] bg-opacity-10 border-[var(--primary-cta)]"
-                              : "border-[var(--accent)] border-opacity-20 hover:border-opacity-40"
-                          }`}
-                        >
-                          {/* Thumbnail */}
-                          <div className="w-12 h-12 rounded overflow-hidden flex-shrink-0 bg-[var(--background)]">
-                            {media.type === "photo" ? (
-                              <img
-                                src={media.src}
-                                alt={media.name}
-                                className="w-full h-full object-cover"
-                              />
-                            ) : (
-                              <div className="w-full h-full flex items-center justify-center bg-black bg-opacity-20">
-                                <Play size={16} className="text-white" />
-                              </div>
-                            )}
-                          </div>
-                          {/* Info */}
-                          <div className="min-w-0 flex-1 text-left">
-                            <p className="text-xs font-semibold text-[var(--foreground)] truncate">
-                              {media.name}
-                            </p>
-                            <p className="text-xs text-[var(--foreground)] opacity-60">
-                              {media.type === "photo" ? "Photo" : "Vidéo"}
-                            </p>
-                          </div>
-                        </button>
-                      ))}
-                    </div>
-                  )}
                 </div>
               </div>
+
+              {/* Feature Card Gallery - Takes 2 columns */}
+              <div className="lg:col-span-2">
+                {featureItems.length > 0 ? (
+                  <FeatureCardOne
+                    features={featureItems}
+                    title="Vos Réalisations"
+                    description="Galerie complète de vos projets de construction et rénovation"
+                    tag="Projets"
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                  />
+                ) : (
+                  <div className="bg-[var(--card)] rounded-3xl p-12 border border-[var(--accent)] border-opacity-20 shadow-lg text-center">
+                    <Camera size={48} className="mx-auto text-[var(--accent)] opacity-20 mb-4" />
+                    <p className="text-[var(--foreground)] opacity-60 text-lg">
+                      Aucun média ajouté pour le moment
+                    </p>
+                    <p className="text-[var(--foreground)] opacity-40 text-sm mt-2">
+                      Commencez à ajouter des photos et vidéos de vos projets ci-contre
+                    </p>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>