diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index 6940bd8..2404b10 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -37,6 +37,9 @@ export const TabloPage = () => {
   const [editingFolderId, setEditingFolderId] = useState<string | null>(null);
   const [editingFolderName, setEditingFolderName] = useState("");
 
+  // Folder modal state
+  const [openFolderId, setOpenFolderId] = useState<string | null>(null);
+
   // Sample tablo data - in a real app this would come from an API
   const [tablos, setTablos] = useState<Tablo[]>([
     { id: 1, name: "Projet Alpha", color: "bg-blue-500" },
@@ -248,11 +251,7 @@ export const TabloPage = () => {
   };
 
   const toggleFolder = (folderId: string) => {
-    setFolders(
-      folders.map((folder) =>
-        folder.id === folderId ? { ...folder, isOpen: !folder.isOpen } : folder
-      )
-    );
+    setOpenFolderId(openFolderId === folderId ? null : folderId);
   };
 
   const removeTabloFromFolder = (folderId: string, tabloId: number) => {
@@ -385,31 +384,36 @@ export const TabloPage = () => {
         {/* Contextual Menu */}
         {hoveredTablo === tablo.id && (
           <div className="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-10">
-            {!inFolder &&
-              menuItems.map((item, index) => (
-                <button
-                  key={index}
-                  className="w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    console.log(`${item.name} clicked for ${tablo.name}`);
-                  }}
-                >
-                  <span>{item.icon}</span>
-                  <span>{item.name}</span>
-                </button>
-              ))}
-            {inFolder && folderId && (
+            {/* Regular menu items - always show */}
+            {menuItems.map((item, index) => (
               <button
-                className="w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                key={index}
+                className="w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
                 onClick={(e) => {
                   e.stopPropagation();
-                  removeTabloFromFolder(folderId, tablo.id);
+                  console.log(`${item.name} clicked for ${tablo.name}`);
                 }}
               >
-                <span>📤</span>
-                <span>Sortir du dossier</span>
+                <span>{item.icon}</span>
+                <span>{item.name}</span>
               </button>
+            ))}
+
+            {/* Additional option for tablos in folders */}
+            {inFolder && folderId && (
+              <>
+                <div className="border-t border-gray-200 dark:border-gray-600 my-1"></div>
+                <button
+                  className="w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeTabloFromFolder(folderId, tablo.id);
+                  }}
+                >
+                  <span>📤</span>
+                  <span>Sortir du dossier</span>
+                </button>
+              </>
             )}
           </div>
         )}
@@ -445,113 +449,68 @@ export const TabloPage = () => {
         {isDragOver && dragOverPosition === "after" && (
           <div className="absolute -right-1 top-0 bottom-0 w-1 bg-blue-400 rounded-full z-20" />
         )}
-        {!folder.isOpen ? (
-          // Closed folder view
-          <div
-            className={`bg-gray-600 dark:bg-gray-700 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer aspect-square flex flex-col items-center justify-center relative ${
-              draggedItem?.type === "folder" && draggedItem?.id === folder.id
-                ? "opacity-50 scale-95"
-                : ""
-            }`}
-            onClick={() => toggleFolder(folder.id)}
-          >
-            {/* Mini preview of tablos in folder */}
-            <div className="absolute inset-0 p-4 grid grid-cols-2 gap-1">
-              {folder.tablos.slice(0, 4).map((tablo, index) => (
-                <div
-                  key={tablo.id}
-                  className={`${tablo.color} rounded opacity-80 aspect-square`}
-                  style={{
-                    transform: `scale(${0.8 - index * 0.05}) translateZ(${
-                      index * 10
-                    }px)`,
-                    zIndex: 4 - index,
-                  }}
-                />
-              ))}
-            </div>
 
-            <div className="relative z-10 text-center p-2">
-              <div className="text-4xl mb-2">📁</div>
-              {editingFolderId === folder.id ? (
-                <input
-                  type="text"
-                  value={editingFolderName}
-                  onChange={(e) => setEditingFolderName(e.target.value)}
-                  onBlur={saveEditingFolder}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      saveEditingFolder();
-                    } else if (e.key === "Escape") {
-                      cancelEditingFolder();
-                    }
-                  }}
-                  className="bg-white dark:bg-gray-600 text-gray-900 dark:text-white text-sm font-semibold px-2 py-1 rounded border-none outline-none focus:ring-2 focus:ring-blue-400 text-center"
-                  autoFocus
-                  onClick={(e) => e.stopPropagation()}
-                />
-              ) : (
-                <h3
-                  className="text-white text-sm font-semibold truncate cursor-text"
-                  onDoubleClick={(e) => {
-                    e.stopPropagation();
-                    startEditingFolder(folder.id, folder.name);
-                  }}
-                >
-                  {folder.name}
-                </h3>
-              )}
-              <p className="text-white text-xs opacity-75">
-                {folder.tablos.length} tablo
-                {folder.tablos.length !== 1 ? "s" : ""}
-              </p>
-            </div>
+        {/* Folder view - always shows as closed since modal handles open state */}
+        <div
+          className={`bg-gray-600 dark:bg-gray-700 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer aspect-square flex flex-col items-center justify-center relative ${
+            draggedItem?.type === "folder" && draggedItem?.id === folder.id
+              ? "opacity-50 scale-95"
+              : ""
+          }`}
+          onClick={() => toggleFolder(folder.id)}
+        >
+          {/* Mini preview of tablos in folder */}
+          <div className="absolute inset-0 p-4 grid grid-cols-2 gap-1">
+            {folder.tablos.slice(0, 4).map((tablo, index) => (
+              <div
+                key={tablo.id}
+                className={`${tablo.color} rounded opacity-80 aspect-square`}
+                style={{
+                  transform: `scale(${0.8 - index * 0.05}) translateZ(${
+                    index * 10
+                  }px)`,
+                  zIndex: 4 - index,
+                }}
+              />
+            ))}
           </div>
-        ) : (
-          // Open folder view
-          <div className="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-4 min-h-[200px]">
-            <div className="flex items-center justify-between mb-4">
-              {editingFolderId === folder.id ? (
-                <input
-                  type="text"
-                  value={editingFolderName}
-                  onChange={(e) => setEditingFolderName(e.target.value)}
-                  onBlur={saveEditingFolder}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      saveEditingFolder();
-                    } else if (e.key === "Escape") {
-                      cancelEditingFolder();
-                    }
-                  }}
-                  className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-lg font-semibold px-3 py-1 rounded border border-gray-300 dark:border-gray-600 outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 flex-1 mr-2"
-                  autoFocus
-                />
-              ) : (
-                <h3
-                  className="text-lg font-semibold text-gray-900 dark:text-white cursor-text"
-                  onDoubleClick={() =>
-                    startEditingFolder(folder.id, folder.name)
+
+          <div className="relative z-10 text-center p-2">
+            <div className="text-4xl mb-2">📁</div>
+            {editingFolderId === folder.id ? (
+              <input
+                type="text"
+                value={editingFolderName}
+                onChange={(e) => setEditingFolderName(e.target.value)}
+                onBlur={saveEditingFolder}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    saveEditingFolder();
+                  } else if (e.key === "Escape") {
+                    cancelEditingFolder();
                   }
-                >
-                  {folder.name}
-                </h3>
-              )}
-              <button
-                onClick={() => toggleFolder(folder.id)}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 ml-2"
+                }}
+                className="bg-white dark:bg-gray-600 text-gray-900 dark:text-white text-sm font-semibold px-2 py-1 rounded border-none outline-none focus:ring-2 focus:ring-blue-400 text-center"
+                autoFocus
+                onClick={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <h3
+                className="text-white text-sm font-semibold truncate cursor-text"
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  startEditingFolder(folder.id, folder.name);
+                }}
               >
-                ✕
-              </button>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              {folder.tablos.map((tablo) =>
-                renderTablo(tablo, true, folder.id)
-              )}
-            </div>
+                {folder.name}
+              </h3>
+            )}
+            <p className="text-white text-xs opacity-75">
+              {folder.tablos.length} tablo
+              {folder.tablos.length !== 1 ? "s" : ""}
+            </p>
           </div>
-        )}
+        </div>
       </div>
     );
   };
@@ -677,6 +636,85 @@ export const TabloPage = () => {
           </div>
         </div>
       )}
+
+      {/* Folder Modal */}
+      {openFolderId && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[80vh] overflow-hidden">
+            {(() => {
+              const currentFolder = folders.find((f) => f.id === openFolderId);
+              if (!currentFolder) return null;
+
+              return (
+                <>
+                  {/* Header */}
+                  <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+                    {editingFolderId === openFolderId ? (
+                      <input
+                        type="text"
+                        value={editingFolderName}
+                        onChange={(e) => setEditingFolderName(e.target.value)}
+                        onBlur={saveEditingFolder}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            saveEditingFolder();
+                          } else if (e.key === "Escape") {
+                            cancelEditingFolder();
+                          }
+                        }}
+                        className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-2xl font-bold px-3 py-1 rounded border border-gray-300 dark:border-gray-600 outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 flex-1 mr-4"
+                        autoFocus
+                      />
+                    ) : (
+                      <h2
+                        className="text-2xl font-bold text-gray-900 dark:text-white cursor-text"
+                        onDoubleClick={() =>
+                          startEditingFolder(openFolderId, currentFolder.name)
+                        }
+                      >
+                        📁 {currentFolder.name}
+                      </h2>
+                    )}
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-gray-500 dark:text-gray-400">
+                        {currentFolder.tablos.length} tablo
+                        {currentFolder.tablos.length !== 1 ? "s" : ""}
+                      </span>
+                      <button
+                        onClick={() => setOpenFolderId(null)}
+                        className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 p-2"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Content */}
+                  <div className="p-6 overflow-y-auto max-h-[60vh]">
+                    {currentFolder.tablos.length === 0 ? (
+                      <div className="text-center py-12">
+                        <div className="text-6xl mb-4">📂</div>
+                        <p className="text-gray-500 dark:text-gray-400 text-lg">
+                          Ce dossier est vide
+                        </p>
+                        <p className="text-gray-400 dark:text-gray-500 text-sm mt-2">
+                          Glissez des tablos ici pour les organiser
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                        {currentFolder.tablos.map((tablo) =>
+                          renderTablo(tablo, true, openFolderId)
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </>
+              );
+            })()}
+          </div>
+        </div>
+      )}
     </div>
   );
 };