diff --git a/GraphGallery.qmd b/GraphGallery.qmd
index eb039b728..900b5e8db 100644
--- a/GraphGallery.qmd
+++ b/GraphGallery.qmd
@@ -1,5 +1,24 @@
 ---
 title: Graph Gallery
+comments: false
+title-block-style: none
+listing:
+  - id: distribution
+    type: grid
+    image-height: 100%
+    contents: Distribution/*!(.zh).qmd
+    sort-ui: true
+    filter-ui: true
+    categories: true
+    fields: [title, date, image, categories]
+  - id: correlation
+    type: grid
+    image-height: 100%
+    contents: Correlation/*!(.zh).qmd
+    sort-ui: true
+    filter-ui: true
+    categories: true
+    fields: [title, date, image, categories]
 ---
 
 👋 **Bizard** is a comprehensive repository of advanced visualization codes tailored for biomedical research.
@@ -28,75 +47,13 @@ data <- read.csv("files/gallery_data.csv")
 
 ### Distribution Gallery
 
-```{r}
-#| echo: false
-data_Distribution <- data[data$Level2=="Distribution",]
-
-tbl <- reactable(
-  data_Distribution,
-  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
-  columns = list(
-    Id = colDef(
-      name = "Id", align = "center", minWidth = 70, maxWidth = 90
-    ),
-    Name = colDef(
-      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
-    ),
-    Image_url = colDef(show = FALSE),
-    Tutorial_url = colDef(show = FALSE),
-    Description =colDef(show = FALSE),
-    Type = colDef(name = "Type"),
-    Level1 =colDef(show = FALSE),
-    Level2 =colDef(show = FALSE)
-  ), 
-  searchable = TRUE
-)
-
-div(
-  class = "movies",
-  tbl,
-  div(id = "modal",  class="modal", onclick="hideModal()",
-      img(
-        id="modal-image", class="modal-image"
-      ))
-)
-```
+:::{#distribution}
+:::
 
 ### Correlation Gallery
 
-```{r}
-#| echo: false
-data_Correlation <- data[data$Level2=="Correlation",]
-
-tbl <- reactable(
-  data_Correlation,
-  defaultColDef = colDef(vAlign = "center", headerClass = "header"),
-  columns = list(
-    Id = colDef(
-      name = "Id", align = "center", minWidth = 70, maxWidth = 90
-    ),
-    Name = colDef(
-      name = "Graph", cell = JS("renderGraph"), html = TRUE, minWidth = 250
-    ),
-    Image_url = colDef(show = FALSE),
-    Tutorial_url = colDef(show = FALSE),
-    Description =colDef(show = FALSE),
-    Type = colDef(name = "Type"),
-    Level1 =colDef(show = FALSE),
-    Level2 =colDef(show = FALSE)
-  ), 
-  searchable = TRUE
-)
-
-div(
-  class = "movies",
-  tbl,
-  div(id = "modal",  class="modal", onclick="hideModal()",
-      img(
-        id="modal-image", class="modal-image"
-      ))
-)
-```
+:::{#correlation}
+:::
 
 ### Ranking Gallery