diff --git a/Makefile b/Makefile
index 76ff492..2059686 100644
--- a/Makefile
+++ b/Makefile
@@ -28,7 +28,7 @@ BACKEND_FOLDER=$(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))
 ifdef PLONE_VERSION
 PLONE_VERSION := $(PLONE_VERSION)
 else
-PLONE_VERSION := 6.1.2
+PLONE_VERSION := 6.1.4
 endif
 
 VENV_FOLDER=$(BACKEND_FOLDER)/.venv
diff --git a/news/+style.bugfix b/news/+style.bugfix
new file mode 100644
index 0000000..f21455e
--- /dev/null
+++ b/news/+style.bugfix
@@ -0,0 +1 @@
+Minor styling fixes @libargutxi
diff --git a/src/cs_dynamicpages/locales/cs_dynamicpages.pot b/src/cs_dynamicpages/locales/cs_dynamicpages.pot
index 4256101..2bbedc8 100644
--- a/src/cs_dynamicpages/locales/cs_dynamicpages.pot
+++ b/src/cs_dynamicpages/locales/cs_dynamicpages.pot
@@ -4,7 +4,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2026-03-12 08:02+0000\n"
+"POT-Creation-Date: 2026-04-14 15:35+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI +ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -57,7 +57,7 @@ msgstr ""
 msgid "Apply this template"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:79
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:80
 #: cs_dynamicpages/views/dynamic_view.pt:480
 msgid "Are you sure you want to delete this item? This action cannot be undone."
 msgstr ""
@@ -70,12 +70,12 @@ msgstr ""
 msgid "CSS class for the spacer"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:82
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:83
 #: cs_dynamicpages/views/dynamic_view.pt:483
 msgid "Cancel"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:71
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:72
 #: cs_dynamicpages/views/dynamic_view.pt:372
 msgid "Close"
 msgstr ""
@@ -84,7 +84,7 @@ msgstr ""
 msgid "Column count"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:66
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:67
 #: cs_dynamicpages/views/dynamic_view.pt:468
 msgid "Confirm Deletion"
 msgstr ""
@@ -198,7 +198,7 @@ msgstr ""
 msgid "If selected a 'Add featured' button will be added in the edit interface. This is useful for rows that have content pieces inside them. For example in a slider row, there are slider items. This button will be used to add those items."
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:56
+#: cs_dynamicpages/behaviors/related_image.py:65
 msgid "Image position"
 msgstr ""
 
@@ -238,7 +238,7 @@ msgstr ""
 msgid "Package to configure a new cs_dynamicpages site"
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:37
+#: cs_dynamicpages/behaviors/related_image.py:51
 msgid "Related image"
 msgstr ""
 
@@ -343,11 +343,11 @@ msgstr ""
 msgid "Select the padding top that this row will have"
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:57
+#: cs_dynamicpages/behaviors/related_image.py:66
 msgid "Select the position of this image"
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:38
+#: cs_dynamicpages/behaviors/related_image.py:52
 msgid "Select the related image that will be shown in this row"
 msgstr ""
 
diff --git a/src/cs_dynamicpages/locales/en/LC_MESSAGES/cs_dynamicpages.po b/src/cs_dynamicpages/locales/en/LC_MESSAGES/cs_dynamicpages.po
index b29f74c..e25ce53 100644
--- a/src/cs_dynamicpages/locales/en/LC_MESSAGES/cs_dynamicpages.po
+++ b/src/cs_dynamicpages/locales/en/LC_MESSAGES/cs_dynamicpages.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2026-03-12 08:02+0000\n"
+"POT-Creation-Date: 2026-04-14 15:35+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI +ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -54,7 +54,7 @@ msgstr ""
 msgid "Apply this template"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:79
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:80
 #: cs_dynamicpages/views/dynamic_view.pt:480
 msgid "Are you sure you want to delete this item? This action cannot be undone."
 msgstr ""
@@ -67,12 +67,12 @@ msgstr ""
 msgid "CSS class for the spacer"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:82
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:83
 #: cs_dynamicpages/views/dynamic_view.pt:483
 msgid "Cancel"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:71
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:72
 #: cs_dynamicpages/views/dynamic_view.pt:372
 msgid "Close"
 msgstr ""
@@ -81,7 +81,7 @@ msgstr ""
 msgid "Column count"
 msgstr ""
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:66
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:67
 #: cs_dynamicpages/views/dynamic_view.pt:468
 msgid "Confirm Deletion"
 msgstr ""
@@ -195,7 +195,7 @@ msgstr ""
 msgid "If selected a 'Add featured' button will be added in the edit interface. This is useful for rows that have content pieces inside them. For example in a slider row, there are slider items. This button will be used to add those items."
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:56
+#: cs_dynamicpages/behaviors/related_image.py:65
 msgid "Image position"
 msgstr ""
 
@@ -235,7 +235,7 @@ msgstr ""
 msgid "Package to configure a new cs_dynamicpages site"
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:37
+#: cs_dynamicpages/behaviors/related_image.py:51
 msgid "Related image"
 msgstr ""
 
@@ -340,11 +340,11 @@ msgstr ""
 msgid "Select the padding top that this row will have"
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:57
+#: cs_dynamicpages/behaviors/related_image.py:66
 msgid "Select the position of this image"
 msgstr ""
 
-#: cs_dynamicpages/behaviors/related_image.py:38
+#: cs_dynamicpages/behaviors/related_image.py:52
 msgid "Select the related image that will be shown in this row"
 msgstr ""
 
diff --git a/src/cs_dynamicpages/locales/es/LC_MESSAGES/cs_dynamicpages.po b/src/cs_dynamicpages/locales/es/LC_MESSAGES/cs_dynamicpages.po
index e278c7e..3b6eec3 100644
--- a/src/cs_dynamicpages/locales/es/LC_MESSAGES/cs_dynamicpages.po
+++ b/src/cs_dynamicpages/locales/es/LC_MESSAGES/cs_dynamicpages.po
@@ -1,11 +1,10 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
-"POT-Creation-Date: 2026-03-12 08:02+0000\n"
+"POT-Creation-Date: 2026-04-14 15:35+0000\n"
 "PO-Revision-Date: 2026-03-12 09:05+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
-"Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -14,6 +13,7 @@ msgstr ""
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8 latin1\n"
 "Domain: cs_dynamicpages\n"
+"Language: es\n"
 "X-Generator: Poedit 3.4.2\n"
 
 #: cs_dynamicpages/vocabularies/row_columns.py:25
@@ -56,7 +56,7 @@ msgstr "Añadir plantilla"
 msgid "Apply this template"
 msgstr "Aplicar esta plantilla"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:79
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:80
 #: cs_dynamicpages/views/dynamic_view.pt:480
 msgid "Are you sure you want to delete this item? This action cannot be undone."
 msgstr "¿Estás seguro de que quieres eliminar este elemento? Esta acción no se puede deshacer."
@@ -69,12 +69,12 @@ msgstr "Clase CSS para el ancho de la fila"
 msgid "CSS class for the spacer"
 msgstr "Clase CSS para el espaciador"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:82
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:83
 #: cs_dynamicpages/views/dynamic_view.pt:483
 msgid "Cancel"
 msgstr "Cancelar"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:71
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:72
 #: cs_dynamicpages/views/dynamic_view.pt:372
 msgid "Close"
 msgstr "Cerrar"
@@ -83,7 +83,7 @@ msgstr "Cerrar"
 msgid "Column count"
 msgstr "Número de columnas"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:66
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:67
 #: cs_dynamicpages/views/dynamic_view.pt:468
 msgid "Confirm Deletion"
 msgstr "Confirmar eliminado"
@@ -197,7 +197,7 @@ msgstr "Nombre de icono de la fila (utilizar nombres de iconos de bootstrap)"
 msgid "If selected a 'Add featured' button will be added in the edit interface. This is useful for rows that have content pieces inside them. For example in a slider row, there are slider items. This button will be used to add those items."
 msgstr "Si está seleccionado se mostrará un botón \"Añadir destacado\" en la interfaz de edición. Esto es útil para filas que tiene elementos de contenido dentro de ellas. Por ejemplo en un slider de imágenes, cada una de las imágenes será un \"destacado\". Este botón se utiliza para añadir este tipo de elementos."
 
-#: cs_dynamicpages/behaviors/related_image.py:56
+#: cs_dynamicpages/behaviors/related_image.py:65
 msgid "Image position"
 msgstr "Posición de la imagen"
 
@@ -237,7 +237,7 @@ msgstr "Notificación"
 msgid "Package to configure a new cs_dynamicpages site"
 msgstr "Paquete para configurar cs_dynamicpages"
 
-#: cs_dynamicpages/behaviors/related_image.py:37
+#: cs_dynamicpages/behaviors/related_image.py:51
 msgid "Related image"
 msgstr "Imagen relacionada"
 
@@ -342,11 +342,11 @@ msgstr "Seleccione el padding inferior que tendrá esta fila"
 msgid "Select the padding top that this row will have"
 msgstr "Seleccione el padding superior que tendrá esta fila"
 
-#: cs_dynamicpages/behaviors/related_image.py:57
+#: cs_dynamicpages/behaviors/related_image.py:66
 msgid "Select the position of this image"
 msgstr "Seleccione la posición de esta imagen"
 
-#: cs_dynamicpages/behaviors/related_image.py:38
+#: cs_dynamicpages/behaviors/related_image.py:52
 msgid "Select the related image that will be shown in this row"
 msgstr "Seleccione la imagen relaconada que se mostrará en esta fila"
 
diff --git a/src/cs_dynamicpages/locales/eu/LC_MESSAGES/cs_dynamicpages.po b/src/cs_dynamicpages/locales/eu/LC_MESSAGES/cs_dynamicpages.po
index 5ad0eb8..37f658c 100644
--- a/src/cs_dynamicpages/locales/eu/LC_MESSAGES/cs_dynamicpages.po
+++ b/src/cs_dynamicpages/locales/eu/LC_MESSAGES/cs_dynamicpages.po
@@ -1,11 +1,10 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
-"POT-Creation-Date: 2026-03-12 08:02+0000\n"
+"POT-Creation-Date: 2026-04-14 15:35+0000\n"
 "PO-Revision-Date: 2026-03-12 09:06+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
-"Language: eu\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -14,6 +13,7 @@ msgstr ""
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8 latin1\n"
 "Domain: cs_dynamicpages\n"
+"Language: eu\n"
 "X-Generator: Poedit 3.4.2\n"
 
 #: cs_dynamicpages/vocabularies/row_columns.py:25
@@ -56,7 +56,7 @@ msgstr "Gehitu txantiloia"
 msgid "Apply this template"
 msgstr "Aplikatu txantiloi hau"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:79
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:80
 #: cs_dynamicpages/views/dynamic_view.pt:480
 msgid "Are you sure you want to delete this item? This action cannot be undone."
 msgstr "Ziur zaude elementu hau ezabatu nahi duzula? Ekintza hau ezin da desegin."
@@ -69,12 +69,12 @@ msgstr "Lerroaren zabaleraren CSS klasea"
 msgid "CSS class for the spacer"
 msgstr "Espazioa ematen duen elementuaren CSS klasea"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:82
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:83
 #: cs_dynamicpages/views/dynamic_view.pt:483
 msgid "Cancel"
 msgstr "Utzi"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:71
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:72
 #: cs_dynamicpages/views/dynamic_view.pt:372
 msgid "Close"
 msgstr "Itxi"
@@ -83,7 +83,7 @@ msgstr "Itxi"
 msgid "Column count"
 msgstr "Zutabe kopurua"
 
-#: cs_dynamicpages/views/dynamic_pages_template_management.pt:66
+#: cs_dynamicpages/views/dynamic_pages_template_management.pt:67
 #: cs_dynamicpages/views/dynamic_view.pt:468
 msgid "Confirm Deletion"
 msgstr "Baieztatu ezabatzea"
@@ -197,7 +197,7 @@ msgstr "Lerroaren ikonoa"
 msgid "If selected a 'Add featured' button will be added in the edit interface. This is useful for rows that have content pieces inside them. For example in a slider row, there are slider items. This button will be used to add those items."
 msgstr "Aukeratuta badago, edizio interfazean \"Gehitu elementu destakatua\" botoia agertuko da. Eduki elementuak dituzten lerroentzat da hau erabilgarria. Adibidez, karrusel bat adierazten duen lerro baten, elementu destakatua karruseleko elementuetako bakoitza izango da. Botoi hau elementu horiek gehitzeko erabiliko da."
 
-#: cs_dynamicpages/behaviors/related_image.py:56
+#: cs_dynamicpages/behaviors/related_image.py:65
 msgid "Image position"
 msgstr "Irudiaren posizioa"
 
@@ -237,7 +237,7 @@ msgstr "Jakinarazpena"
 msgid "Package to configure a new cs_dynamicpages site"
 msgstr "cs_dynamicpages konfiguratzeko paketea"
 
-#: cs_dynamicpages/behaviors/related_image.py:37
+#: cs_dynamicpages/behaviors/related_image.py:51
 msgid "Related image"
 msgstr "Irudi erlazionatua"
 
@@ -342,11 +342,11 @@ msgstr "Aukeratu lerro honen azpiko paddinga"
 msgid "Select the padding top that this row will have"
 msgstr "Aukeratu lerro honen gaineko paddinga"
 
-#: cs_dynamicpages/behaviors/related_image.py:57
+#: cs_dynamicpages/behaviors/related_image.py:66
 msgid "Select the position of this image"
 msgstr "Aukeratu irudiaren posizioa"
 
-#: cs_dynamicpages/behaviors/related_image.py:38
+#: cs_dynamicpages/behaviors/related_image.py:52
 msgid "Select the related image that will be shown in this row"
 msgstr "Aukeratu lerro honetan agertuko den erlazionatutako irudia"
 
diff --git a/src/cs_dynamicpages/tests/test_view_featured_view.py b/src/cs_dynamicpages/tests/test_view_featured_view.py
index 8394303..0074d1e 100644
--- a/src/cs_dynamicpages/tests/test_view_featured_view.py
+++ b/src/cs_dynamicpages/tests/test_view_featured_view.py
@@ -98,7 +98,7 @@ def test_featured_view_renders_row_structure(self):
             name="cs_dynamicpages-featured-view",
         )
         html = view()
-        self.assertIn('class="row"', html)
+        self.assertIn('class="row ', html)
         self.assertIn("col-md-6", html)
 
     def test_featured_view_renders_title(self):
diff --git a/src/cs_dynamicpages/views/accordion_view.pt b/src/cs_dynamicpages/views/accordion_view.pt
index 39bcb08..1fa37a5 100644
--- a/src/cs_dynamicpages/views/accordion_view.pt
+++ b/src/cs_dynamicpages/views/accordion_view.pt
@@ -2,18 +2,18 @@
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
-     class="accordion accordion-flush"
+     class="accordion shadow-sm mb-4"
      id="accordionDynamicPage-${context/id}"
      tal:define="
        elements view/elements;
      "
      tal:condition="elements"
 >
-  <div class="accordion-item"
+  <div class="accordion-item border-0 border-bottom"
        tal:repeat="brain elements"
   >
-    <div class="accordion-header h3">
-      <button class="accordion-button collapsed"
+    <div class="accordion-header h3 m-0">
+      <button class="accordion-button collapsed fw-bold fs-5 bg-white text-dark"
               aria-controls="accordionDynamicPage-${context/id}-${brain/id}"
               aria-expanded="false"
               type="button"
@@ -27,7 +27,7 @@
          id="accordionDynamicPage-${context/id}-${brain/id}"
          data-bs-parent="#accordionDynamicPage-${context/id}"
     >
-      <div class="accordion-body"
+      <div class="accordion-body bg-light"
            tal:define="
              element brain/getObject;
            "
diff --git a/src/cs_dynamicpages/views/dynamic_pages_template_management.pt b/src/cs_dynamicpages/views/dynamic_pages_template_management.pt
index a713a0e..be2a9cb 100644
--- a/src/cs_dynamicpages/views/dynamic_pages_template_management.pt
+++ b/src/cs_dynamicpages/views/dynamic_pages_template_management.pt
@@ -63,6 +63,7 @@
               <div class="modal-dialog">
                 <div class="modal-content">
                   <div class="modal-header">
+
                     <h5 class="modal-title"
                         id="deleteElementModalLabel-${repeat/template/number}"
                         i18n:translate=""
@@ -92,8 +93,8 @@
                   </div>
                 </div>
               </div>
-            </div>
-          </li>
+
+            </div></li>
         </ul>
       </metal:block>
     </metal:content-core>
diff --git a/src/cs_dynamicpages/views/dynamic_title_description_view.pt b/src/cs_dynamicpages/views/dynamic_title_description_view.pt
index 77dd8fd..b104572 100644
--- a/src/cs_dynamicpages/views/dynamic_title_description_view.pt
+++ b/src/cs_dynamicpages/views/dynamic_title_description_view.pt
@@ -1,7 +1,9 @@
-<h1 class="documentFirstHeading"
-    tal:content="context/title"
-></h1>
-<p class="documentDescription"
-   tal:condition="context/description"
-   tal:content="context/description"
-></p>
+<div class="mb-5 pb-4 border-bottom">
+  <h1 class="documentFirstHeading mb-3"
+      tal:content="context/title"
+  ></h1>
+  <p class="documentDescription lead mb-0"
+     tal:condition="context/description"
+     tal:content="context/description"
+  ></p>
+</div>
diff --git a/src/cs_dynamicpages/views/dynamic_view.pt b/src/cs_dynamicpages/views/dynamic_view.pt
index 4c7811e..e8f85ce 100644
--- a/src/cs_dynamicpages/views/dynamic_view.pt
+++ b/src/cs_dynamicpages/views/dynamic_view.pt
@@ -229,9 +229,9 @@
                                 >Edit</a>
                               </li>
                               <li>
-                                <h5 class="dropdown-header"
+                                <h2 class="dropdown-header"
                                     i18n:translate=""
-                                >State</h5>
+                                >State</h2>
                               </li>
                               <tal:define tal:define="
                                             featured_transitions python:context.portal_workflow.getTransitionsFor(featured_obj);
@@ -244,9 +244,9 @@
                                 </tal:featured_transitions>
                               </tal:define>
                               <li>
-                                <h5 class="dropdown-header"
+                                <h2 class="dropdown-header"
                                     i18n:translate=""
-                                >Move actions</h5>
+                                >Move actions</h2>
                               </li>
                               <li><a class="dropdown-item"
                                    href="#"
@@ -365,10 +365,10 @@
                  "
             >
               <div class="offcanvas-header">
-                <h5 class="offcanvas-title"
+                <h2 class="offcanvas-title h5"
                     id="offcanvasRightLabel"
                     i18n:translate=""
-                >Add new row</h5>
+                >Add new row</h2>
                 <button class="btn-close"
                         aria-label="Close"
                         type="button"
@@ -380,9 +380,9 @@
                 <div class="templates-listing"
                      tal:condition="python: empty_rows and templates"
                 >
-                  <h6 class="mb-3"
+                  <h2 class="mb-3 h6"
                       i18n:translate=""
-                  >Reuse existing templates</h6>
+                  >Reuse existing templates</h2>
                   <div class="accordion"
                        id="templateAccordion"
                   >
@@ -430,9 +430,9 @@
                   <div class="my-5"
                        tal:condition="templates"
                   ></div>
-                  <h6 class="mb-3"
+                  <h2 class="mb-3 h6"
                       i18n:translate=""
-                  >Add block</h6>
+                  >Add block</h2>
                 </tal:conditionrows>
                 <ul class="list-unstyled row">
                   <li class="mb-2 col-4"
@@ -465,10 +465,10 @@
             <div class="modal-dialog">
               <div class="modal-content">
                 <div class="modal-header">
-                  <h5 class="modal-title"
+                  <h2 class="modal-title h5"
                       id="deleteElementModalLabel"
                       i18n:translate=""
-                  >Confirm Deletion</h5>
+                  >Confirm Deletion</h2>
                   <button class="btn-close"
                           aria-label="Close"
                           type="button"
@@ -534,10 +534,10 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
-                <h1 class="modal-title fs-5"
+                <h2 class="modal-title fs-5"
                     id="addTemplateModal"
                     i18n:translate=""
-                >Add template</h1>
+                >Add template</h2>
                 <button class="btn-close"
                         aria-label="Close"
                         type="button"
@@ -588,10 +588,10 @@
           <div class="modal-dialog modal-xl modal-dialog-scrollable">
             <div class="modal-content border-0 shadow-lg">
               <div class="modal-header bg-white border-bottom">
-                <h5 class="modal-title text-primary fw-semibold"
+                <h2 class="modal-title h5 text-primary fw-semibold"
                     id="previewTemplateModalLabel"
                     i18n:translate=""
-                >Template Preview</h5>
+                >Template Preview</h2>
                 <button class="btn-close"
                         aria-label="Close"
                         type="button"
diff --git a/src/cs_dynamicpages/views/featured_overlay_view.pt b/src/cs_dynamicpages/views/featured_overlay_view.pt
index 76b19f3..48cac02 100644
--- a/src/cs_dynamicpages/views/featured_overlay_view.pt
+++ b/src/cs_dynamicpages/views/featured_overlay_view.pt
@@ -1,25 +1,27 @@
-<div class="card">
+<div class="card border-0 shadow-sm rounded overflow-hidden">
 
   <tal:image tal:define="
                image view/related_image;
              "
              tal:condition="image"
   >
-    <img class="rounded"
-         tal:define="
-           images image/@@images;
-           fetchpriority_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'high' or 'auto') or 'auto';
-           loading_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'eager' or 'lazy') or 'lazy';
-         "
-         tal:replace="structure python:images.srcset(fieldname='image',
-                                      scale_in_src='huge',
-                                      sizes='(min-width: 1400px) 1400px, 100vw',
-                                      alt=image.Title() ,
-                                      title=image.Title(),
-                                      fetchpriority=fetchpriority_image_value,
-                                      loading=loading_image_value,
-                                      css_class='rounded')"
-    />
+    <div class="ratio ratio-21x9 bg-dark">
+      <img class="object-fit-cover w-100 h-100 opacity-50"
+           tal:define="
+             images image/@@images;
+             fetchpriority_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'high' or 'auto') or 'auto';
+             loading_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'eager' or 'lazy') or 'lazy';
+           "
+           tal:replace="structure python:images.srcset(fieldname='image',
+                                        scale_in_src='huge',
+                                        sizes='(min-width: 1400px) 1400px, 100vw',
+                                        alt=image.Title() ,
+                                        title=image.Title(),
+                                        fetchpriority=fetchpriority_image_value,
+                                        loading=loading_image_value,
+                                        css_class='object-fit-cover w-100 h-100 opacity-50')"
+      />
+    </div>
   </tal:image>
   <!-- We will make it a flex-column to send the text-content to the bottom -->
   <div class="card-img-overlay d-flex flex-column justify-content-end p-0">
@@ -29,7 +31,7 @@
       <p class="card-text text-white-50"
          tal:condition="context/Description"
       >${context/Description}</p>
-      <a class="btn btn-outline-light btn-sm mt-2"
+      <a class="btn btn-primary shadow-sm"
          href="${context/url}"
          tal:condition="context/url"
       >${context/link_text}</a>
diff --git a/src/cs_dynamicpages/views/featured_view.pt b/src/cs_dynamicpages/views/featured_view.pt
index 155627d..696d97d 100644
--- a/src/cs_dynamicpages/views/featured_view.pt
+++ b/src/cs_dynamicpages/views/featured_view.pt
@@ -1,39 +1,48 @@
-<div class="row">
+<div class="row g-4 align-items-center">
   <div class="col-md-6">
     <tal:image tal:define="
                  image view/related_image;
                "
                tal:condition="image"
     >
-      <img tal:define="
-             images image/@@images;
-             fetchpriority_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'high' or 'auto') or 'auto';
-             loading_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'eager' or 'lazy') or 'lazy';
-           "
-           tal:replace="structure python:images.srcset(fieldname='image',
-                                          scale_in_src='huge',
-                                          sizes='(min-width: 1400px) 1400px, 100vw',
-                                          alt=image.Title() ,
-                                          title=image.Title(),
-                                          fetchpriority=fetchpriority_image_value,
-                                          loading=loading_image_value)"
-      />
+      <div class="ratio ratio-4x3 bg-light rounded overflow-hidden shadow-sm">
+        <img tal:define="
+               images image/@@images;
+               fetchpriority_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'high' or 'auto') or 'auto';
+               loading_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'eager' or 'lazy') or 'lazy';
+             "
+             tal:replace="structure python:images.srcset(fieldname='image',
+                                            scale_in_src='huge',
+                                            sizes='(min-width: 1400px) 1400px, 100vw',
+                                            alt=image.Title() ,
+                                            title=image.Title(),
+                                            fetchpriority=fetchpriority_image_value,
+                                            loading=loading_image_value,
+                                            css_class='object-fit-cover w-100 h-100')"
+        />
+      </div>
     </tal:image>
   </div>
-  <div class="col-md-6"
+  <div class="col-md-6 d-flex flex-column justify-content-center"
        tal:attributes="
-         class python:context.image_position=='right' and 'col-md-6 order-first' or 'col-md-6';
+         class python:context.image_position=='right' and 'col-md-6 order-first d-flex flex-column justify-content-center' or 'col-md-6 d-flex flex-column justify-content-center';
        "
   >
     <h3>${context/Title}</h3>
-    <p tal:condition="context/Description">${context/Description}</p>
-    <tal:replace tal:condition="context/text"
-                 replace="structure context/text/output"
-    >
-    </tal:replace>
-    <a class="btn btn-primary"
-       href="${context/url}"
-       tal:condition="context/url"
-    >${context/link_text}</a>
+    <p class="lead"
+       tal:condition="context/Description"
+    >${context/Description}</p>
+    <div>
+      <tal:replace tal:condition="context/text"
+                   replace="structure context/text/output"
+      >
+      </tal:replace>
+    </div>
+    <div>
+      <a class="btn btn-primary px-4 shadow-sm"
+         href="${context/url}"
+         tal:condition="context/url"
+      >${context/link_text}</a>
+    </div>
   </div>
 </div>
diff --git a/src/cs_dynamicpages/views/features_view.pt b/src/cs_dynamicpages/views/features_view.pt
index 5465bd6..33a4a19 100644
--- a/src/cs_dynamicpages/views/features_view.pt
+++ b/src/cs_dynamicpages/views/features_view.pt
@@ -1,10 +1,10 @@
-<div class="row features-view"
+<div class="row g-4 features-view"
      tal:define="
        elements view/elements;
      "
      tal:condition="elements"
 >
-  <div class="${context/columns} mb-5"
+  <div class="${context/columns}"
        tal:define="
          fetchpriority_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'high' or 'auto') or 'auto';
          loading_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'eager' or 'lazy') or 'lazy';
@@ -15,41 +15,48 @@
                   element brain/getObject;
                 ">
 
-      <div class="card">
+      <div class="card h-100 border-0 shadow rounded overflow-hidden">
         <tal:image tal:define="
                      image element/related_image_object;
                    "
                    tal:condition="image"
                    tal:on-error="nothing"
         >
-          <img tal:define="
-                 images image/@@images;
-               "
-               tal:replace="structure python:images.srcset(fieldname='image',
-                                                                  scale_in_src='huge',
-                                                                  sizes='(min-width: 1400px) 400px, 100vw',
-                                                                  alt=element.Title() ,
-                                                                  title=element.Title(),
-                                                                  fetchpriority=fetchpriority_image_value,
-                                                                  loading=loading_image_value,
-                                                                  css_class='rounded-top')"
-          />
+          <div class="ratio ratio-16x9 bg-light">
+            <img tal:define="
+                   images image/@@images;
+                 "
+                 tal:replace="structure python:images.srcset(fieldname='image',
+                                                                    scale_in_src='huge',
+                                                                    sizes='(min-width: 1400px) 400px, 100vw',
+                                                                    alt=element.Title() ,
+                                                                    title=element.Title(),
+                                                                    fetchpriority=fetchpriority_image_value,
+                                                                    loading=loading_image_value,
+                                                                    css_class='object-fit-cover w-100 h-100')"
+            />
+          </div>
         </tal:image>
-        <div class="card-body">
-          <a class="h5 card-title stretched-link mb-3"
-             href="${element/url}"
-             tal:condition="element/url"
-          >${element/Title}</a>
-          <p class="h5 card-title mb-3"
-             tal:condition="not:element/url"
-          >${element/Title}</p>
-          <p class="card-text"
+        <div class="card-body p-4 d-flex flex-column">
+          <h2 class="h5 card-title mb-3"
+              tal:condition="element/url"
+          >
+            <a class="text-dark no-underline stretched-link fw-bold"
+               href="${element/url}"
+            >${element/Title}</a>
+          </h2>
+          <h2 class="h5 card-title fw-bold text-dark mb-3"
+              tal:condition="not:element/url"
+          >${element/Title}</h2>
+          <p class="card-text text-secondary"
              tal:condition="element/Description"
           >${element/Description}</p>
-          <tal:replace tal:condition="element/text"
-                       replace="structure element/text/output"
-          >
-          </tal:replace>
+          <div class="mt-auto text-muted">
+            <tal:replace tal:condition="element/text"
+                         replace="structure element/text/output"
+            >
+            </tal:replace>
+          </div>
         </div>
       </div>
     </tal:define>
diff --git a/src/cs_dynamicpages/views/query_columns_view.pt b/src/cs_dynamicpages/views/query_columns_view.pt
index 42ca4df..da494b5 100644
--- a/src/cs_dynamicpages/views/query_columns_view.pt
+++ b/src/cs_dynamicpages/views/query_columns_view.pt
@@ -1,57 +1,85 @@
 <tal:define tal:define="
+              icons python:context.restrictedTraverse('@@iconresolver');
               batch view/results;
               fetchpriority_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'high' or 'auto') or 'auto';
               loading_image_value python:hasattr(context, 'fetchpriority_image') and (context.fetchpriority_image and 'eager' or 'lazy') or 'lazy';
             ">
-  <h2 class="mb-5">${context/Title}</h2>
-  <div class="row">
+  <h2>${context/Title}</h2>
+  <div class="row g-4">
     <tal:repeat tal:repeat="brain batch">
       <tal:define tal:define="
                     element brain/getObject;
                   ">
-        <div class="${context/columns} mb-5">
-          <div class="card">
+        <div class="${context/columns}">
+          <div class="card h-100 border-0 shadow rounded overflow-hidden">
             <tal:image tal:define="
                          image element/image;
                        "
                        tal:condition="image"
                        tal:on-error="nothing"
             >
-              <img tal:define="
-                     images element/@@images;
-                   "
-                   tal:replace="structure python:images.srcset(fieldname='image',
-                                                              scale_in_src='huge',
-                                                              sizes='(min-width: 1400px) 400px, 100vw',
-                                                              alt=element.Title() ,
-                                                              title=element.Title(),
-                                                              fetchpriority=fetchpriority_image_value,
-                                                              loading=loading_image_value,
-                                                              css_class='rounded-top')"
-              />
+              <div class="ratio ratio-16x9 bg-light">
+                <img tal:define="
+                       images element/@@images;
+                     "
+                     tal:replace="structure python:images.srcset(fieldname='image',
+                                                                scale_in_src='huge',
+                                                                sizes='(min-width: 1400px) 400px, 100vw',
+                                                                alt=element.Title() ,
+                                                                title=element.Title(),
+                                                                fetchpriority=fetchpriority_image_value,
+                                                                loading=loading_image_value,
+                                                                css_class='object-fit-cover w-100 h-100')"
+                />
+              </div>
             </tal:image>
-            <div class="card-body">
-              <a class="h5 card-title stretched-link"
-                 href="${element/absolute_url}"
-              >${element/Title}</a>
-              <p class="mb-3 fw-light"
+            <div class="card-body p-4 d-flex flex-column">
+              <h2 class="h5 card-title mb-3">
+                <a class="text-dark no-underline stretched-link fw-bold"
+                   href="${element/absolute_url}"
+                >${element/Title}</a>
+              </h2>
+              <p class="mb-3 fw-medium text-muted small"
                  tal:condition="python:element.portal_type == 'News Item'"
                  tal:content="python:element.toLocalizedTime(element.EffectiveDate())"
               ></p>
-              <p class="mb-3 fw-light"
-                 tal:condition="python:element.portal_type == 'Event'"
-                 tal:content="python:element.toLocalizedTime(element.start)"
-              ></p>
+              <div class="mt-auto d-flex flex-column gap-2 text-muted small mb-3"
+                   tal:condition="python:element.portal_type == 'Event'"
+              >
+                <div class="d-flex align-items-center">
+                  <span class="text-primary me-2 d-flex align-items-center"
+                        tal:content="structure python:icons.tag('calendar')"
+                  ></span>
+                  <span class="fw-medium">
+                    <tal:replace define="
+                                   event_summary nocall:element/@@event_summary;
+                                 "
+                                 replace="structure python:event_summary.formatted_date(element)"
+                    />
+                  </span>
+                </div>
+                <div class="d-flex align-items-center"
+                     tal:condition="element/location"
+                >
+                  <span class="text-primary me-2 d-flex align-items-center"
+                        tal:content="structure python:icons.tag('geo-alt')"
+                  ></span>
+                  <span class="fw-medium text-truncate"
+                        tal:content="element/location"
+                  ></span>
+                </div>
+              </div>
 
-              <p class="card-text">${element/Description}</p>
+              <p class="card-text text-secondary">${element/Description}</p>
             </div>
           </div>
         </div>
       </tal:define>
     </tal:repeat>
   </div>
-  <div class="d-flex justify-content-end">
-    <a href="${context/link_url}"
+  <div class="d-flex justify-content-end mt-4">
+    <a class="btn btn-primary shadow-sm"
+       href="${context/link_url}"
        tal:condition="context/link_url"
     >${context/link_text}</a>
   </div>
diff --git a/src/cs_dynamicpages/views/slider_view.pt b/src/cs_dynamicpages/views/slider_view.pt
index ce55120..e847035 100644
--- a/src/cs_dynamicpages/views/slider_view.pt
+++ b/src/cs_dynamicpages/views/slider_view.pt
@@ -1,4 +1,4 @@
-<div class="carousel slide"
+<div class="carousel slide shadow-sm rounded overflow-hidden"
      id="DynamicPageSlider-${context/id}"
      tal:define="
        elements view/elements;
@@ -25,7 +25,7 @@
              element brain/getObject;
            "
            tal:attributes="
-             class python: repeat['brain'].index == 0 and 'carousel-item active' or 'carousel-item';
+             class python: repeat['brain'].index == 0 and 'carousel-item active bg-dark' or 'carousel-item bg-dark';
            "
       >
         <tal:image tal:define="
@@ -33,25 +33,31 @@
                    "
                    tal:condition="image"
         >
-          <img tal:define="
-                 images image/@@images;
-               "
-               tal:replace="structure python:images.srcset(fieldname='image',
-                                              scale_in_src='huge',
-                                              sizes='(min-width: 1400px) 1400px, 100vw',
-                                              alt=image.Title() ,
-                                              title=image.Title(),
-                                              fetchpriority=fetchpriority_image_value,
-                                              loading=loading_image_value)"
-          />
+          <div class="ratio ratio-21x9 w-100">
+            <img class="object-fit-cover w-100 h-100 opacity-50"
+                 tal:define="
+                   images image/@@images;
+                 "
+                 tal:replace="structure python:images.srcset(fieldname='image',
+                                                scale_in_src='huge',
+                                                sizes='(min-width: 1400px) 1400px, 100vw',
+                                                alt=image.Title() ,
+                                                title=image.Title(),
+                                                fetchpriority=fetchpriority_image_value,
+                                                loading=loading_image_value,
+                                                css_class='object-fit-cover w-100 h-100 opacity-50')"
+            />
+          </div>
         </tal:image>
-        <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75 rounded-3 p-4 mb-4 shadow">
-          <h5 class="text-white fw-bold mb-3">${element/Title}</h5>
-          <p class="text-white-50 mb-4">${element/Description}</p>
-          <a class="btn btn-outline-light px-4"
-             href="${element/url}"
-             tal:condition="element/url"
-          >${element/link_text}</a>
+        <div class="carousel-caption d-flex flex-column align-items-center justify-content-center h-100 top-0 bottom-0 p-4">
+          <div class="p-4 p-md-5 rounded bg-dark bg-opacity-50">
+            <h2 class="display-5 text-white fw-bold mb-3 shadow-sm">${element/Title}</h2>
+            <p class="lead text-white mb-4 d-none d-md-block shadow-sm">${element/Description}</p>
+            <a class="btn btn-primary btn-lg px-4 shadow-sm"
+               href="${element/url}"
+               tal:condition="element/url"
+            >${element/link_text}</a>
+          </div>
         </div>
       </div>
     </tal:slides>