diff --git a/css/forms_helper.css b/css/forms_helper.css
index da3443a4e2cc61d50de0ce41da3a8b75341c1b06..89698f52de6cb294dadd320c50b39be6aead6bfe 100644
--- a/css/forms_helper.css
+++ b/css/forms_helper.css
@@ -3,17 +3,17 @@
 }
 
 .path-frontend-editing .layout-node-form__actions {
-  display: block;
   z-index: 2;
+  display: block;
 }
 
 .path-frontend-editing .layout-node-form__actions .gin-sticky {
   position: fixed;
   bottom: 0;
-  background: white;
-  border: 1px solid gray;
   padding: 0 15px;
+  border: 1px solid gray;
   border-radius: 8px;
+  background: white;
 }
 
 body.gin--vertical-toolbar.path-frontend-editing,
@@ -24,23 +24,25 @@ body.path-frontend-editing {
 }
 
 .path-frontend-editing > h1 {
-  align-items: center;
+  position: fixed;
+  z-index: 2;
   display: flex;
-  font-size: 1.125em;
-  font-weight: 500;
-  height: 80px;
+  align-items: center;
   justify-content: center;
-  margin: 0;
-  position: fixed;
   width: 100%;
-  z-index: 2;
+  height: 80px;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
   background-color: #f5f7fb;
+  font-size: 1.125em;
+  font-weight: 500;
 }
 
 .path-frontend-editing .block-system-main-block > form {
-  border-radius: 0;
-  border: 0;
   position: relative;
+  border: 0;
+  border-radius: 0;
 }
 
 .path-frontend-editing .dialog-off-canvas-main-canvas {
@@ -68,3 +70,68 @@ body.frontend-editing-hide-sidebar.gin--horizontal-toolbar,
 body.frontend-editing-hide-sidebar.gin--classic-toolbar {
   padding-inline-start: 0 !important;
 }
+
+.path-frontend-editing .paragraphs-add-dialog-list {
+  padding: 0 20px;
+  column-count: 1;
+  list-style: none;
+}
+
+@media (min-width: 48em) {
+  .path-frontend-editing .paragraphs-add-dialog-list {
+    column-count: 3;
+    column-gap: 14px;
+  }
+}
+
+.path-frontend-editing .paragraphs-add-dialog-row {
+  position: relative;
+}
+
+.path-frontend-editing .paragraphs-add-dialog-row .paragraph-type-icon {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: block;
+  box-sizing: border-box;
+  border: none;
+  box-shadow: none;
+}
+
+.path-frontend-editing .paragraphs-add-dialog-row img {
+  width: 50px;
+  height: 50px;
+  object-fit: contain;
+  border-radius: 5px;
+  background: #fff;
+}
+
+.path-frontend-editing ul.paragraphs-add-dialog-list li {
+  width: 100%;
+  margin: 0 0 10px 0;
+  list-style: none;
+  text-align: left;
+}
+
+.path-frontend-editing ul.paragraphs-add-dialog-list li a {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 70px;
+  margin: 0;
+  text-align: left;
+  line-height: 45px;
+}
+
+.path-frontend-editing ul.paragraphs-add-dialog-list li.with-icon a {
+  padding-left: 75px;
+}
+
+.path-frontend-editing .field-add-more-submit:hover a {
+  color: #fff;
+}
+
+.path-frontend-editing ul.paragraphs-add-dialog-list .button.button--small {
+  padding-left: unset;
+  border: unset;
+}
diff --git a/css/frontend_editing.css b/css/frontend_editing.css
index 4bd208a3747b7ddaf26a1dfbcacfe4d4d962b739..bf4b9d1c0af355e35ac024a13b31b03d0532a9ec 100644
--- a/css/frontend_editing.css
+++ b/css/frontend_editing.css
@@ -5,29 +5,29 @@ body.path-frontend-editing {
 }
 
 .editing-container {
-  height: 100%;
   position: fixed;
+  z-index: 1000;
   top: 0;
   right: 0;
-  z-index: 1000;
-  background-color: white;
-  box-shadow: -0.2rem 0 1rem rgb(116 116 116 / 40%);
+  overflow: auto;
   width: 30%;
   min-width: 300px;
+  height: 100%;
   transition: width 0.5s;
-  overflow: auto;
+  background-color: white;
+  box-shadow: -0.2rem 0 1rem rgb(116, 116, 116, 0.4);
 }
 .editing-container--wide {
   width: 80%;
 }
 .editing-container--loading {
-  animation-duration: 1.8s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
   animation-name: placeholder-shimmer;
+  animation-duration: 1.8s;
   animation-timing-function: linear;
+  animation-iteration-count: infinite;
   background: linear-gradient(to right, #f5f7fb 8%, #e7e7e7 38%, #f5f7fb 54%);
   background-size: 1000px 640px;
+  animation-fill-mode: forwards;
 }
 @keyframes placeholder-shimmer {
   0% {
@@ -40,14 +40,14 @@ body.path-frontend-editing {
 
 /* Styles for action buttons */
 .editing-container__actions {
+  position: absolute;
   display: flex;
-  height: 0;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1rem;
-  position: absolute;
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
+  height: 0;
+  padding: 0 1rem;
 }
 
 .editing-container__actions button {
@@ -61,7 +61,8 @@ button.editing-container__close {
   height: 24px;
   cursor: pointer;
   border: none;
-  background: url('data:image/svg+xml,%3Csvg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17 1L9 9l8 8M1 1l8 8-8 8" stroke="%23222330" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center no-repeat;
+  background: url('data:image/svg+xml,%3Csvg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17 1L9 9l8 8M1 1l8 8-8 8" stroke="%23222330" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')
+    center no-repeat;
 }
 
 /* Styles for width button */
@@ -70,28 +71,30 @@ button.editing-container__toggle {
   height: 24px;
   cursor: pointer;
   border: none;
-  background: url('data:image/svg+xml,%3Csvg width="10" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9 1L1 9l8 8" stroke="%23222330" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center no-repeat;
+  background: url('data:image/svg+xml,%3Csvg width="10" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9 1L1 9l8 8" stroke="%23222330" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')
+    center no-repeat;
 }
 
 .editing-container--wide .editing-container__toggle {
-  background: url('data:image/svg+xml,%3Csvg width="10" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9 1L1 9l8 8" stroke="%23222330" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" transform="rotate(180 5 9)"/%3E%3C/svg%3E') center no-repeat;
+  background: url('data:image/svg+xml,%3Csvg width="10" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M9 1L1 9l8 8" stroke="%23222330" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" transform="rotate(180 5 9)"/%3E%3C/svg%3E')
+    center no-repeat;
 }
 
-/* Styles for iframe*/
+/* Styles for iframe */
 #editing-container iframe {
+  width: 100%;
   height: 100%;
   border: none;
-  width: 100%;
 }
 
 .frontend-editing-preview-content,
 .frontend-editing-update-content {
+  visibility: hidden;
   overflow: hidden;
-  text-indent: -9999rem;
+  order: 100;
   width: 32px;
   height: 32px;
-  visibility: hidden;
-  order: 100;
+  text-indent: -9999rem;
 }
 
 /* Style container of editable elements */
@@ -99,7 +102,9 @@ button.editing-container__toggle {
   position: relative;
 }
 
-.frontend-editing:has(.frontend-editing:hover) > .frontend-editing-actions .add-paragraphs {
+.frontend-editing:has(.frontend-editing:hover)
+  > .frontend-editing-actions
+  .add-paragraphs {
   display: none;
 }
 
@@ -107,20 +112,23 @@ button.editing-container__toggle {
   display: none;
 }
 
-body:not(.frontend-editing--hidden) .frontend-editing:has(.add-paragraphs.hover-highlight) {
+body:not(.frontend-editing--hidden)
+  .frontend-editing:has(.add-paragraphs.hover-highlight) {
   transition: padding ease-in-out 0.4s;
 }
 
-body:not(.frontend-editing--hidden) .frontend-editing:has(.add-paragraphs.hover-highlight):hover {
+body:not(.frontend-editing--hidden)
+  .frontend-editing:has(.add-paragraphs.hover-highlight):hover {
   padding: 25px 0;
 }
 
 body:not(.frontend-editing--hidden) .frontend-editing:hover {
-  outline: 3px solid rgba(var(--fe-editing-primary-color), 0.8);
   z-index: 10;
+  outline: 3px solid rgba(var(--fe-editing-primary-color), 0.8);
 }
 
-body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hover) {
+body:not(.frontend-editing--hidden)
+  .frontend-editing:has(.frontend-editing:hover) {
   outline: 3px solid rgba(var(--fe-editing-primary-color), 0.2);
 }
 
@@ -128,40 +136,42 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
   display: none;
 }
 
-.frontend-editing:hover .frontend-editing:not(:hover) .frontend-editing-actions {
+.frontend-editing:hover
+  .frontend-editing:not(:hover)
+  .frontend-editing-actions {
   display: none;
 }
 
 /* Styled for editing action */
 .common-actions-container {
-  display: flex;
   position: absolute;
+  z-index: 2;
   top: 10px;
   left: 0;
+  display: flex;
   width: auto;
-  z-index: 2;
 }
 
 .title-edit-container,
 .icons-container {
-  margin-left: 0.5rem;
   margin-right: 0.5rem;
+  margin-left: 0.5rem;
 }
 
 .action-title {
-  opacity: 0;
   display: block;
+  align-self: center;
   width: 100%;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 15px;
+  white-space: nowrap;
   letter-spacing: 0.2em;
   pointer-events: none;
-  font-weight: 500;
-  font-size: 0.75rem;
+  opacity: 0;
   color: #222330;
-  white-space: nowrap;
-  align-self: center;
-  padding-left: 15px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
 .frontend-editing:hover .frontend-editing__action,
@@ -172,23 +182,23 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
 .frontend-editing:hover .title-edit-container,
 .frontend-editing:hover .icons-container {
   display: flex;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border: 1px solid #d3d3d3;
+  border-radius: 8px;
   background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .frontend-editing-actions .ajax-progress {
   display: inline-flex;
   justify-content: center;
+  /* Ensure AJAX throbber is always last item */
+  order: 6;
   width: 32px;
   height: 32px;
   padding: 0;
-  /* Ensure AJAX throbber is always last item */
-  order: 6;
   opacity: 1;
-  background: #e8e8e8;
   border-left: 1px solid #dddcdc;
+  background: #e8e8e8;
 }
 
 .frontend-editing-actions .ajax-progress .throbber {
@@ -197,28 +207,28 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
   padding: 0;
   opacity: 0.4;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cstyle%3E@keyframes spinner%7Bto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M12 4a8 8 0 0 1 7.89 6.7 1.53 1.53 0 0 0 1.49 1.3 1.5 1.5 0 0 0 1.48-1.75 11 11 0 0 0-21.72 0A1.5 1.5 0 0 0 2.62 12a1.53 1.53 0 0 0 1.49-1.3A8 8 0 0 1 12 4Z' style='transform-origin:center;animation:spinner .75s infinite linear'/%3E%3C/svg%3E");
-  background-size: 18px;
   background-position: center;
+  background-size: 18px;
 }
 
-.frontend-editing--outline:hover .frontend-editing-actions:before {
+.frontend-editing--outline:hover .frontend-editing-actions::before {
   opacity: 1;
 }
 
 /* Style editing icon */
 .frontend-editing__action {
+  z-index: 1;
   display: inline-block;
+  overflow: hidden;
   width: 37px;
   height: 32px;
-  z-index: 1;
-  opacity: 0;
   transition-duration: 0s;
-  background-position: center;
-  overflow: hidden;
   text-indent: -9999rem;
-  font-size: 0px;
+  opacity: 0;
   color: transparent;
   border-right: 1px solid #dddcdc;
+  background-position: center;
+  font-size: 0;
 }
 
 .frontend-editing__action--edit {
@@ -239,23 +249,25 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
 
 .frontend-editing__action--edit:hover,
 .frontend-editing__action--down:hover {
-  background-color: rgba(var(--fe-editing-primary-color), 0.25);
   border-top-right-radius: 7px;
   border-bottom-right-radius: 7px;
+  background-color: rgba(var(--fe-editing-primary-color), 0.25);
 }
 
 .frontend-editing__action--up:hover {
-  background-color: rgba(var(--fe-editing-primary-color), 0.25);
   border-top-left-radius: 7px;
   border-bottom-left-radius: 7px;
+  background-color: rgba(var(--fe-editing-primary-color), 0.25);
 }
 
-.move-paragraphs.icons-container:not(:has(.frontend-editing__action--up)) .frontend-editing__action--down:hover {
+.move-paragraphs.icons-container:not(:has(.frontend-editing__action--up))
+  .frontend-editing__action--down:hover {
   border-top-left-radius: 7px;
   border-bottom-left-radius: 7px;
 }
 
-.move-paragraphs.icons-container:not(:has(.frontend-editing__action--down)) .frontend-editing__action--up:hover {
+.move-paragraphs.icons-container:not(:has(.frontend-editing__action--down))
+  .frontend-editing__action--up:hover {
   border-top-right-radius: 7px;
   border-bottom-right-radius: 7px;
 }
@@ -264,31 +276,31 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
   border-right-width: 0;
 }
 
-.frontend-editing__action:hover:before {
+.frontend-editing__action:hover::before {
   opacity: 1;
 }
 
 .add-paragraphs {
-  height: 0;
   width: 0;
+  height: 0;
 }
 
 .add-paragraphs a {
-  display: flex;
   position: absolute;
-  left: 0;
+  z-index: 1;
   right: 0;
+  left: 0;
+  display: flex;
+  overflow: visible;
   width: fit-content;
   height: 25px;
   margin: auto;
   border: 0;
-  overflow: visible;
-  z-index: 1;
 }
 
 .add-paragraphs.hover-highlight a {
-  background-color: rgba(var(--fe-editing-primary-color), 0.25);
   width: 100%;
+  background-color: rgba(var(--fe-editing-primary-color), 0.25);
 }
 
 .add-paragraphs a:hover {
@@ -296,7 +308,7 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
 }
 
 .frontend-editing:hover .add-paragraphs.icons-container {
-  border-width: 0px;
+  border-width: 0;
 }
 
 .frontend-editing .move-paragraphs.icons-container:not(:has(*)) {
@@ -315,26 +327,29 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
   pointer-events: none;
 }
 
-.frontend-editing__action:not(.frontend-editing__action--before):not(.frontend-editing__action--after):before {
+.frontend-editing__action:not(
+    .frontend-editing__action--before,
+    .frontend-editing__action--after
+  )::before {
   display: block;
-  content: '';
   width: 100%;
   height: 100%;
-  background-size: 16px;
+  content: "";
   background-repeat: no-repeat;
   background-position: center;
+  background-size: 16px;
 }
 
 .frontend-editing__action--before::before,
 .frontend-editing__action--after::before {
-  content: ' ';
+  position: absolute;
   z-index: 10;
-  width: 40px;
-  height: 40px;
-  left: 0;
   right: 0;
+  left: 0;
   display: block;
-  position: absolute;
+  width: 40px;
+  height: 40px;
+  content: " ";
 }
 
 .frontend-editing__action--before::before {
@@ -342,41 +357,41 @@ body:not(.frontend-editing--hidden) .frontend-editing:has(.frontend-editing:hove
 }
 
 .frontend-editing__action--before svg {
-  pointer-events: none;
   z-index: 10;
-  margin: -1.5rem auto 0 auto;
   width: 40px;
   height: 40px;
+  margin: -1.5rem auto 0 auto;
+  pointer-events: none;
   color: rgb(var(--fe-editing-primary-color));
 }
 
 .frontend-editing__action--after::before {
+  bottom: 0;
   margin: auto;
   margin-bottom: -1.5rem;
-  bottom: 0;
 }
 
 .frontend-editing__action--after svg {
-  pointer-events: none;
   z-index: 10;
-  margin: auto;
-  margin-bottom: -1.5rem;
   width: 40px;
   height: 40px;
+  margin: auto;
+  margin-bottom: -1.5rem;
+  pointer-events: none;
   color: rgb(var(--fe-editing-primary-color));
 }
 
-.frontend-editing__action--up:before {
+.frontend-editing__action--up::before {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgNGExIDEgMCAwIDEgLjcwNy4yOTNsNyA3YTEgMSAwIDAgMS0xLjQxNCAxLjQxNEwxMyA3LjQxNFYxOWExIDEgMCAxIDEtMiAwVjcuNDE0bC01LjI5MyA1LjI5M2ExIDEgMCAwIDEtMS40MTQtMS40MTRsNy03QTEgMSAwIDAgMSAxMiA0WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
   background-size: 20px;
 }
 
-.frontend-editing__action--down:before {
+.frontend-editing__action--down::before {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTMgNWExIDEgMCAxIDAtMiAwdjExLjU4NmwtNS4yOTMtNS4yOTNhMSAxIDAgMSAwLTEuNDE0IDEuNDE0bDYuOTk1IDYuOTk1QS45OTMuOTkzIDAgMCAwIDEyIDIwYS45OTcuOTk3IDAgMCAwIC43MTItLjI5OGw2Ljk5NS02Ljk5NWExIDEgMCAwIDAtMS40MTQtMS40MTRMMTMgMTYuNTg2VjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
   background-size: 20px;
 }
 
-.frontend-editing__action--edit:before {
+.frontend-editing__action--edit::before {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTkgMy4xNzFhMS44MjkgMS44MjkgMCAwIDAtMS4yOTMuNTM2TDQuMzk1IDE3LjAxOWwtLjk3IDMuNTU2IDMuNTU2LS45N0wyMC4yOTMgNi4yOTNBMS44MjkgMS44MjkgMCAwIDAgMTkgMy4xN1ptLTEuNDY1LTEuNzA4YTMuODI5IDMuODI5IDAgMCAxIDQuMTcyIDYuMjQ0bC0xMy41IDEzLjVhMSAxIDAgMCAxLS40NDQuMjU4bC01LjUgMS41YTEgMSAwIDAgMS0xLjIyOC0xLjIyOGwxLjUtNS41YTEgMSAwIDAgMSAuMjU4LS40NDRsMTMuNS0xMy41YTMuODI5IDMuODI5IDAgMCAxIDEuMjQyLS44M1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
 }
 
diff --git a/css/ui_toggle.css b/css/ui_toggle.css
index 687609d706bec3df44b7bb1948bc88cf1fb3318a..ab7bd6d9fedb3effd43febe0408bbed945e1ee95 100644
--- a/css/ui_toggle.css
+++ b/css/ui_toggle.css
@@ -1,17 +1,17 @@
 .frontend-editing-toggle {
   position: fixed;
+  z-index: 20;
   top: var(--fe-editing-toggle-top, auto);
   right: var(--fe-editing-toggle-right, auto);
   bottom: var(--fe-editing-toggle-bottom, auto);
   left: var(--fe-editing-toggle-left, auto);
-  z-index: 20;
-  border-radius: 9999px;
-  background-color: white;
   /*  Required to prevent the toggle's position from being affected by external styles. */
   width: fit-content !important;
   height: fit-content !important;
   margin: 0 !important;
   padding: 0 !important;
+  border-radius: 9999px;
+  background-color: white;
 }
 
 .frontend-editing-toggle *:not(.frontend-editing-toggle-link) {
@@ -19,40 +19,40 @@
 }
 
 .frontend-editing-toggle a {
-  background: rgba(var(--fe-editing-primary-color), 0.6);
+  position: relative;
+  display: block;
+  width: 5.5rem;
   padding: 0.5rem 0.75rem;
+  text-align: right;
   text-transform: uppercase;
   color: white;
-  display: block;
-  width: 5.5rem;
-  font-weight: 500;
   border-radius: 999px;
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-  position: relative;
-  text-align: right;
+  background: rgba(var(--fe-editing-primary-color), 0.6);
+  box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
+  font-weight: 500;
 }
 
 .frontend-editing-toggle a::before {
-  content: ' ';
   position: absolute;
   top: 0;
-  left: 0.5rem;
   bottom: 0;
+  left: 0.5rem;
   width: 1.75rem;
   height: 1.75rem;
-  margin-bottom: auto;
   margin-top: auto;
+  margin-bottom: auto;
+  content: " ";
+  border-radius: 999px;
   background-color: #fff;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTkgMy4xNzFhMS44MjkgMS44MjkgMCAwIDAtMS4yOTMuNTM2TDQuMzk1IDE3LjAxOWwtLjk3IDMuNTU2IDMuNTU2LS45N0wyMC4yOTMgNi4yOTNBMS44MjkgMS44MjkgMCAwIDAgMTkgMy4xN1ptLTEuNDY1LTEuNzA4YTMuODI5IDMuODI5IDAgMCAxIDQuMTcyIDYuMjQ0bC0xMy41IDEzLjVhMSAxIDAgMCAxLS40NDQuMjU4bC01LjUgMS41YTEgMSAwIDAgMS0xLjIyOC0xLjIyOGwxLjUtNS41YTEgMSAwIDAgMSAuMjU4LS40NDRsMTMuNS0xMy41YTMuODI5IDMuODI5IDAgMCAxIDEuMjQyLS44M1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
-  background-size: 16px;
   background-repeat: no-repeat;
   background-position: center;
-  border-radius: 999px;
+  background-size: 16px;
 }
 
 .frontend-editing-toggle a.frontend-editing--enabled {
-  background: rgb(var(--fe-editing-primary-color));
   text-align: left;
+  background: rgb(var(--fe-editing-primary-color));
 }
 
 .frontend-editing-toggle a.frontend-editing--enabled::before {
@@ -60,9 +60,9 @@
 }
 
 .frontend-editing-toggle-not-configured {
-  box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
   transform: scale(1);
   animation: pulse 2s infinite;
+  box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
 }
 
 @keyframes pulse {
diff --git a/src/Controller/FrontendEditingController.php b/src/Controller/FrontendEditingController.php
index b1dc981251afc65842eb492891172f34d5de9b65..41281c3aea32c333f56def3f240f07a2a23b750a 100644
--- a/src/Controller/FrontendEditingController.php
+++ b/src/Controller/FrontendEditingController.php
@@ -11,6 +11,7 @@ use Drupal\Core\Ajax\InvokeCommand;
 use Drupal\Core\Ajax\MessageCommand;
 use Drupal\Core\Controller\ControllerBase;
 use Drupal\Core\Entity\EntityFormBuilder;
+use Drupal\Core\Entity\EntityInterface;
 use Drupal\Core\Entity\EntityRepositoryInterface;
 use Drupal\Core\Render\Element;
 use Drupal\Core\Render\RendererInterface;
@@ -639,7 +640,19 @@ class FrontendEditingController extends ControllerBase {
       ->loadMultiple($allowed_paragraphs);
     $items = [];
     foreach ($allowed_paragraphs as $paragraphs_type) {
-      $items[$paragraphs_type->id()] = [
+      $item = [
+        '#wrapper_attributes' => [
+          'class' => [
+            'paragraphs-add-dialog-row',
+          ],
+        ],
+      ];
+      if (!empty($paragraphs_type->get('icon_default'))) {
+        $item['icon'] = $this->buildIconElement($paragraphs_type);
+        $item['#wrapper_attributes']['class'][] = 'with-icon';
+      }
+
+      $item['link'] = [
         '#type' => 'link',
         '#title' => $this->t('Add @type', ['@type' => $paragraphs_type->label()]),
         '#url' => Url::fromRoute('frontend_editing.paragraph_add', [
@@ -653,13 +666,17 @@ class FrontendEditingController extends ControllerBase {
           'query' => $request->query->all(),
         ]),
         '#attributes' => [
-          'class' => 'field-add-more-submit button--small button js-form-submit form-submit',
+          'class' => [
+            'js-form-submit',
+            'form-submit',
+            'button',
+            'button--large',
+            'field-add-more-submit',
+          ],
           'name' => $parent_field_name . '_' . $paragraphs_type->id() . '_add_more',
         ],
-        '#wrapper_attributes' => [
-          'class' => ['paragraphs-add-dialog-row'],
-        ],
       ];
+      $items[$paragraphs_type->id()] = $item;
     }
     if (!empty($settings['handler_settings']['target_bundles_drag_drop'])) {
       uasort($settings['handler_settings']['target_bundles_drag_drop'], function ($a, $b) {
@@ -693,4 +710,34 @@ class FrontendEditingController extends ControllerBase {
     ];
   }
 
+  /**
+   * Builds the icon element for a given Paragraphs type.
+   *
+   * This method generates a render array for the icon element using the value
+   * from the 'icon_default' field. It assumes that an icon is present and
+   * should only be called when an icon is defined.
+   *
+   * @param \Drupal\paragraphs\ParagraphsTypeInterface $paragraphs_type
+   *   The Paragraphs type entity.
+   *
+   * @return array
+   *   A render array for the icon element.
+   */
+  protected function buildIconElement(
+    EntityInterface $paragraphs_type,
+  ): array {
+    $icon = $paragraphs_type->get('icon_default');
+    return [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => ['paragraph-type-icon', $paragraphs_type->id()],
+      ],
+      'image' => [
+        '#theme' => 'image',
+        '#uri' => $icon,
+        '#alt' => $paragraphs_type->label(),
+      ],
+    ];
+  }
+
 }