diff --git a/__pycache__/app.cpython-313.pyc b/__pycache__/app.cpython-313.pyc
index 0ab4170..ea3dfa2 100644
Binary files a/__pycache__/app.cpython-313.pyc and b/__pycache__/app.cpython-313.pyc differ
diff --git a/app.py b/app.py
index 772ca58..f83a3f4 100644
--- a/app.py
+++ b/app.py
@@ -78,20 +78,20 @@ def info():
 def serve_pages(path):
     return send_from_directory('pages', path)
 
-
-
 @app.route('/search', methods=['POST'])
 def search():
     query = request.form['query']
     print(query)
-#    articles = (p for p in pages if 'published' in p.meta and query.lower() in metastr= lambda m : [item.lower() for item in list(p.meta.values())])
-    articles = (p for p in pages if 'published' in p.meta and any(isinstance(value,str) and query.lower() in value.lower() for value in p.meta.values()))
-    imgDict ={}
+    
+    articles = list(p for p in pages if 'published' in p.meta and 
+                    any(isinstance(value, str) and query.lower() in value.lower() 
+                        for value in p.meta.values()))
+    imgDict = {}
     for a in articles:
         g_path, imgs = imagelist(a.path)
-        imgDict[a.path]=imgs
-    return render_template('index.html', articles=articles ,imgDict=imgDict)
-
+        imgDict[a.path] = imgs
+    
+    return render_template('index.html', articles=articles, imgDict=imgDict)
 
 
 
diff --git a/pages/028_IER.md b/pages/028_IER.md
new file mode 100644
index 0000000..2da3428
--- /dev/null
+++ b/pages/028_IER.md
@@ -0,0 +1,15 @@
+
+upper: IER
+title : Ilot d'Eau Le Retour
+published: 2017-01-01
+location: Forest, Brussels-Capital Region, Belgium
+type: research, workshop, co-design, installation
+fund: Innoviris Co-Create
+network: Arkipel, Bruxelles Environnement, Casablanco, Celine de Vos, Forest Municipality, Ecotechnic, Etats Généraux de l’Eau à Bruxelles (EGEB), Faculté d'Architecture La Cambre Horta (Université Libre de Bruxelles), HYDR Lab (Vrije Universiteit Brussels), Jardin Essentiel, Jette Municipality, Le Début des Haricots, Maison de Quartier Saint-Antoine, Niccolò Masini, Potager de l’Imprimerie, Quartier Wiels Wijk, Verte Berthelot
+desc: 
+author: Andrea Aragone, Davide Cauciello, Simone Conz, Romina Cornejo Escudero, Bruno Dias Ventura, Marta Finotello, Alessandra Marcon, Octavio Piñeiro Aramburu, Ana Moura Bastos, Marco Ranzato
+
+
+...
+
+
diff --git a/pages/030_ESC.md b/pages/030_ESC.md
index b5e35bc..71d2171 100644
--- a/pages/030_ESC.md
+++ b/pages/030_ESC.md
@@ -1,13 +1,13 @@
+upper: ESC
 title : Every Space Counts
-author: Andrea Aragone, Lina Bentaleb, Davide Cauciello, Marta De Marchi, Octavio Piñeiro Aramburu, Marco Ranzato
 published: 2018-01-01
 location: BOZAR Centre for fine arts
 type: exhibition
-fund: .
-upper: ESC
+fund: 
 network: Architecture Workroom Brussels, Bureau Bas Smets, JNC International, Taktyk
-cat: miaou
-desc: ws
+cat: 
+desc: 
+author: Andrea Aragone, Lina Bentaleb, Davide Cauciello, Marta De Marchi, Octavio Piñeiro Aramburu, Marco Ranzato
 
 ...
 
diff --git a/pages/034_GWG.md b/pages/034_GWG.md
index d1e8d9e..b43a1ba 100644
--- a/pages/034_GWG.md
+++ b/pages/034_GWG.md
@@ -1,12 +1,15 @@
+upper: GWG
 title : Green With Grey | Groen Met Grijs
-author: Andrea Aragone, Federico Broggini, Davide Cauciello, Alexander Colson, Bruno Dias Ventura,  Federico Gobbato Liva, Ciel Grommen, Marco Ranzato, Octavio Piñeiro Aramburu; (Alessandra Marcon for Asiat Depave workshop) 
 published: 2019-01-01
 location: Flanders, Belgium
 type: research, workshop
-upper: GWG
+fund: Department Omgeving, Vlaamse Overheid
 network: Aquafin, Architecture Workroom Brussels, Asiat Site, Cargovil vzw, David Giacomelli, Departement Omgeving, Katholische Universität Leuven, Loop Studio, Onkruid, Plant en Houtgoed, POM Vlaams-Brabant, Université Catholique de Louvain, Vilvoorde Municipality, VLAIO, VLM, VMM, 51N4E, 1010au
-cat: miaou
-desc: ws
+cat: 
+desc: 
+author: Andrea Aragone, Federico Broggini, Davide Cauciello, Alexander Colson, Bruno Dias Ventura,  Federico Gobbato Liva, Ciel Grommen, Marco Ranzato, Octavio Piñeiro Aramburu; (Alessandra Marcon for Asiat Depave workshop) 
+
+
 
 ...
 
diff --git a/pages/037_PAD.md b/pages/037_PAD.md
index 587ad07..af456bf 100644
--- a/pages/037_PAD.md
+++ b/pages/037_PAD.md
@@ -1,18 +1,17 @@
+upper: PAD
 title : PAD Bordet
-author: Andrea Aragone, Davide Cauciello, Federico Gobbato Liva, Alessandra Marcon, Octavio Piñeiro Aramburu, Marco Ranzato, Riccardo Ruggeri
 published: 2019-01-01
 location: City of Brussels and Evere, Brussels-Capital Region, Belgium
 type: urbanism
-upper: PAD
+fund: Perspective.brussels
 network: Anyways, Aries, Idea Consult, Karbon architecture urbanisme, Urban Species
-cat: miaou
-desc: ws
+cat: 
+desc: 
+author: Andrea Aragone, Davide Cauciello, Federico Gobbato Liva, Alessandra Marcon, Octavio Piñeiro Aramburu, Marco Ranzato, Riccardo Ruggeri
 
 ...
 
 
-
-
 Project type: Masterplan
 Location: Brussels, Belgium
 Project time: 2020-ongoing
diff --git a/pages/038_VNM.md b/pages/038_VNM.md
index ee8a352..61fa8f5 100644
--- a/pages/038_VNM.md
+++ b/pages/038_VNM.md
@@ -1,16 +1,16 @@
+upper: VMN
 title : Place Van Meenen
-author: Andrea Aragone, Alessandra Marcon, Octavio Piñeiro Aramburu, Fabio Vanin
 published: 2019-01-01
 location: Saint-Gilles, Brussels-Capital Region, Belgium
 type: feasibility study, co-design, installation
-upper: VMN
+fund: Department Omgeving, Vlaamse Overheid
 network: Anyways, Collectif Dallas, Loop Studio
-cat: miaou
-desc: ws
-
-...
+cat: 
+desc: 
+author: Andrea Aragone, Alessandra Marcon, Octavio Piñeiro Aramburu, Fabio Vanin
 
 
+...
 
 
 Project type: 
diff --git a/pages/042_VHB.md b/pages/042_VHB.md
new file mode 100644
index 0000000..3a12e2c
--- /dev/null
+++ b/pages/042_VHB.md
@@ -0,0 +1,14 @@
+
+upper: VHB
+title : Ville Haute Basse
+published: 2021-01-01
+location: City of Brussels, Brussels-Capital Region, Belgium
+type: competition
+fund: City of Brussels
+network: a practice
+desc: 
+author: Federico Broggini, Marco Ranzato, Andrea Bortolotti, Andrea Aragone, Alessandra Marcon, Federico Gobbato Liva
+
+...
+
+
diff --git a/pages/045_EDC.md b/pages/045_EDC.md
index 75d04d3..47a7178 100644
--- a/pages/045_EDC.md
+++ b/pages/045_EDC.md
@@ -1,18 +1,17 @@
+upper: EDC
 title : Eau de Couture
-author: Andrea Aragone, Federico Broggini, Ana Dresler, Octavio Piñeiro Aramburu, Fabio Vanin
 published: 2021-01-01
 location: City of Brussels, Brussels-Capital Region, Belgium
 type: installation
-upper: EDC
+fund: City of Brussels
 network: Collectif Dallas, Bruno Dias Ventura, Habitat & Rénovation, Loop Studio
-cat: miaou
-desc: ws
+cat: 
+desc: 
+author: Andrea Aragone, Federico Broggini, Ana Dresler, Octavio Piñeiro Aramburu, Fabio Vanin
 
 ...
 
 
-
-
 Project Type: Action project
 
 Location: Marolles neighbourhood, Bruxelles, Belgium 
diff --git a/pages/test.md b/pages/test.md
index c4b9d4b..612ec3b 100644
--- a/pages/test.md
+++ b/pages/test.md
@@ -1,13 +1,15 @@
-title : Mayen Reverier
-author: zvevqx
+
 upper: MNR
+title : Mayen Reverier - test
 published: 2021-11-22
 location: Reverier, Italy
 type: Architecture
-fund:
-network:
-cat: miaou
-desc: ws
+fund: world
+network: Anyways, Collectif Dallas, Loop Studio
+cat: 
+desc: 
+author: zvevqx
+
 
 ...
 
diff --git a/static/main.bak2 b/static/main.bak2
new file mode 100644
index 0000000..d4226bc
--- /dev/null
+++ b/static/main.bak2
@@ -0,0 +1,69 @@
+$(document).ready(function() {
+    // Sorting state management
+    const sortState = {};
+
+    // Function to sort articles
+    function sortArticles(columnClass) {
+        const $list = $('.alist');
+        const $listItems = $list.children('li');
+
+        // Determine sort direction
+        if (!sortState[columnClass]) {
+            sortState[columnClass] = 'asc';
+        } else {
+            sortState[columnClass] = (sortState[columnClass] === 'asc') ? 'desc' : 'asc';
+        }
+
+        // Sort the list items based on the text of the specified column
+        $listItems.sort(function(a, b) {
+            const aText = $(a).find('.' + columnClass).text().trim().toLowerCase();
+            const bText = $(b).find('.' + columnClass).text().trim().toLowerCase();
+            
+            // Special handling for period (numeric sorting)
+            if (columnClass === 'period') {
+                const aNum = parseInt(aText);
+                const bNum = parseInt(bText);
+                return sortState[columnClass] === 'asc' 
+                    ? aNum - bNum 
+                    : bNum - aNum;
+            }
+            
+            // Default alphabetical sorting
+            return sortState[columnClass] === 'asc'
+                ? aText.localeCompare(bText)
+                : bText.localeCompare(aText);
+        });
+
+        // Detach and reappend sorted items to maintain DOM structure
+        $list.empty().append($listItems);
+
+        // Update sort direction indicators
+        $('.legend li').removeClass('sort-asc sort-desc');
+        $(`.legend li[data-sort="${columnClass}"]`).addClass(
+            sortState[columnClass] === 'asc' ? 'sort-asc' : 'sort-desc'
+        );
+    }
+
+    // Add click event to legend spans for sorting
+    $('.legend li').on('click', function() {
+        const columnClass = $(this).attr("data-sort");
+        
+        // If the column exists in the article items, sort by that column
+        if ($('.alist li').first().find('.' + columnClass).length > 0) {
+            sortArticles(columnClass);
+        }
+    });
+
+    // Toggle content visibility
+    $(".alist").on('click', 'li', function(e) {
+        // Prevent sorting when clicking on content
+        if (!$(e.target).closest('.legend').length) {
+            const $contentWrapper = $(this).find('.content-wrapper');
+            
+            // Ensure content-wrapper is not inside a link or legend
+            if (!$(e.target).closest('a, .legend').length) {
+                $contentWrapper.toggleClass("open");
+            }
+        }
+    });
+});
diff --git a/static/main.js b/static/main.js
index d4226bc..0d5163e 100644
--- a/static/main.js
+++ b/static/main.js
@@ -58,10 +58,9 @@ $(document).ready(function() {
     $(".alist").on('click', 'li', function(e) {
         // Prevent sorting when clicking on content
         if (!$(e.target).closest('.legend').length) {
-            const $contentWrapper = $(this).find('.content-wrapper');
-            
-            // Ensure content-wrapper is not inside a link or legend
-            if (!$(e.target).closest('a, .legend').length) {
+            // Check if click is outside content-wrapper and not on its child elements
+            if (!$(e.target).closest('.content-wrapper').length) {
+                const $contentWrapper = $(this).find('.content-wrapper');
                 $contentWrapper.toggleClass("open");
             }
         }
diff --git a/static/style.css b/static/style.css
index 476fcc4..02e946b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -175,6 +175,16 @@ a:hover{
 #articles ul li.noContent *{
     color:#aaa   
 }
+
+
+
+#articles ul li.noContent .content-wrapper.open{
+    color:#aaa;   
+    display: none;
+}
+
+
+
 #articles ul.alist li.noContent:hover {
     color:#aaa;
     background: #fff;
@@ -226,28 +236,6 @@ a:hover{
     display: none;  
 }
 
-
-
-
-
-
-/* #articles ul li a span{
-  max-height: 1em; 
-  line-height: 1em;
-   overflow: hidden;
-   position:relative;
-    word-wrap: break-word;
-
-}
- #articles ul li a span:after {
-  content: "...";
-  position: absolute;
-  right:0; 
-  bottom: 0px;
-}
-*/
-
-
 #articles ul.alist li .content-wrapper{
     height:0;
     max-height: 0;
@@ -274,13 +262,20 @@ a:hover{
     margin:auto ;
     font-size:1em!important;
     background:#fff;
+    display: grid;
+    grid-template-columns: 1fr 1fr ;
 
-}    
+}   
+
+
+.content-wrapper .content {
+    padding:10px;
+}
 
 #content-wrapper p{
     text-align:left;
-    margin-left:10px
-}    
+    margin-left:10px;
+    }    
 
 #content-wrapper pre{
   //  font-size:2em;
@@ -373,30 +368,35 @@ p{
     margin-top:1.5em;
     margin-bottom:1.5em;
     text-align:justify;
-//    font-size:2em;
+    font-size:1.3em;
 }
 
-#gal {
+.gal {
 	display : grid ;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr  ;
 	column-gap: 10px;
 	row-gap: 10px;
 }
 
-
 .img_container {
 	position: relative;
 	overflow: hidden;
-	height: auto;
-	display: grid;
-	align-content: center;
-	align-items: center;
-	justify-items: center;
-	justify-content: center;
-	align-items: center;
-	align-content: space-around;
+	//display: grid;
+	//align-content: center;
+	//align-items: center;
+	//justify-items: center;
+	//justify-content: center;
+	//align-items: center;
+	//align-content: space-around;
+}
+
+
+.img_container:last-of-type {
+    grid-column: 1 / span 5
 }
 
+
+
 .img_container img{
 	width:100%;
 }
diff --git a/templates/index.html b/templates/index.html
index ed58f98..6932b54 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,17 +36,18 @@
                </a> 
                 <div class="content-wrapper">
             {% if imgDict[article.path]   %}
-                    <div id="gal">
+                    <div class="gal">
 		        {% for img in imgDict[article.path] : %}
 		            <div class = "img_container">
                                 {% set img_url = article.path + '/' + img %}
-                                {{ img_url }}
                                     
 			        <img src="pages/{{article.path}}/{{img}}"/>
 		            </div>
 		        {% endfor %}
 	            </div>{%endif%} 
-                    {{article}}
+                    <div class="content">
+                        {{article}}
+                    </div>
                 </div>
             </li>
         {% endfor %}