diff --git a/src/components/kangaroo/kangaroo.js b/src/components/kangaroo/kangaroo.js
index d00dd6566f..c8bb3885cc 100644
--- a/src/components/kangaroo/kangaroo.js
+++ b/src/components/kangaroo/kangaroo.js
@@ -5,6 +5,7 @@ import Icon from "../icon/icon";
 import Chip from "../chip/chip";
 import Dropdown from "../dropdown/dropdown";
 import NavPosition from "../nav-position/nav-position";
+import MetaCollapse from "../meta-collapse/meta-collapse";
 
 function Kangaroo({
   id,
@@ -24,7 +25,6 @@ function Kangaroo({
 }) {
   const styles = classNames("kangaroo px-3", { "px-lg-5": !noPadding });
   const colorStyle = classNames({ [`text-${color}`]: color });
-
   const tagsLabelStyle = classNames(
     "text-uppercase tag-small-size",
     colorStyle,
@@ -37,8 +37,15 @@ function Kangaroo({
           {titleSr}
         </h2>
       )}
-      <div className="kangaroo-wrapper py-4 d-lg-flex justify-content-between align-items-top">
-        <div className="left-zone">
+      <div className="kangaroo-wrapper row py-4 d-lg-flex justify-content-between align-items-center">
+        {dropdown && (
+          <div className="left-zone d-flex col-12 col-lg-4 mb-4 mb-lg-0">
+            <div className="dropdown-zone mt-4 mt-lg-0">
+              <Dropdown {...dropdown} />
+            </div>
+          </div>
+        )}
+        <div className="right-zone d-flex flex-column col-12 col-lg-8">
           {navposition && (
             <div className="navposition-wrapper">
               <NavPosition {...navposition} />
@@ -54,29 +61,58 @@ function Kangaroo({
               <NavPosition {...eventInfo} />
             </div>
           )}
-          {otherInfo && (
-            <div className="other-info-wrapper">
-              <NavPosition {...otherInfo} />
+          {personalInfo || eventInfo || (otherInfo && tagsLabel) ? (
+            <div>
+              <MetaCollapse label="Più informazioni" labelClose="Chiudi">
+                {otherInfo && (
+                  <div className="other-info-wrapper">
+                    <NavPosition {...otherInfo} />
+                  </div>
+                )}
+                {tagsLabel && tags && tags.length > 0 && (
+                  <div className="pills-wrapper d-md-flex align-items-start pt-3 pt-md-2">
+                    <div className="d-flex title-wrapper align-items-center mb-2 mb-lg-0 text-uppercase flex-shrink-0">
+                      <Icon {...icon} addonClasses="me-3" />
+                      <span className={tagsLabelStyle}>
+                        <strong>{tagsLabel}</strong>
+                      </span>
+                    </div>
+                    <div className="chips ms-md-3 mb-2 mb-lg-0">
+                      {tags.map((tag, index) => (
+                        <Chip
+                          key={`chip-${index}`}
+                          label={tag}
+                          size="lg"
+                          color="primary"
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </MetaCollapse>
             </div>
-          )}
-          {tagsLabel && tags && tags.length > 0 && (
-            <div className="pills-wrapper d-md-flex align-items-start pt-3 pt-md-2">
-              <div className="d-flex title-wrapper align-items-center mb-2 mb-lg-0 text-uppercase flex-shrink-0">
-                <Icon {...icon} addonClasses="me-3" />
-                <span className={tagsLabelStyle}>
-                  <strong>{tagsLabel}</strong>
-                </span>
-              </div>
-              <div className="chips ms-md-3 mb-2 mb-lg-0">
-                {tags.map((tag, index) => (
-                  <Chip
-                    key={`chip-${index}`}
-                    label={tag}
-                    size="lg"
-                    color="primary"
-                  />
-                ))}
-              </div>
+          ) : (
+            <div>
+              {tagsLabel && tags && tags.length > 0 && (
+                <div className="pills-wrapper d-md-flex align-items-start pt-3 pt-md-2">
+                  <div className="d-flex title-wrapper align-items-center mb-2 mb-lg-0 text-uppercase flex-shrink-0">
+                    <Icon {...icon} addonClasses="me-3" />
+                    <span className={tagsLabelStyle}>
+                      <strong>{tagsLabel}</strong>
+                    </span>
+                  </div>
+                  <div className="chips ms-md-3 mb-2 mb-lg-0">
+                    {tags.map((tag, index) => (
+                      <Chip
+                        key={`chip-${index}`}
+                        label={tag}
+                        size="lg"
+                        color="primary"
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
           )}
           {tagsDesignSystemLabel &&
@@ -103,13 +139,6 @@ function Kangaroo({
               </div>
             )}
         </div>
-        {dropdown && (
-          <div className="right-zone col-12 col-lg-4 d-flex flex-lg-row-reverse pt-3 pb-4">
-            <div className="dropdwon-zone mt-4 mt-lg-0">
-              <Dropdown {...dropdown} />
-            </div>
-          </div>
-        )}
       </div>
     </section>
   );
diff --git a/src/components/kangaroo/kangaroo.scss b/src/components/kangaroo/kangaroo.scss
index 8c27799dcc..82b4658d50 100644
--- a/src/components/kangaroo/kangaroo.scss
+++ b/src/components/kangaroo/kangaroo.scss
@@ -1,51 +1,65 @@
 @import "../../scss/bootstrap-breakpoints";
 
 .kangaroo {
-	.title-wrapper {
+  .title-wrapper {
     h2 {
       font-size: var(--kangaroo-title-font-size);
       font-weight: 600;
       margin-bottom: 0;
     }
-	}
-	.dropdwon-zone {
-		.btn {
-			font-size: var(--kangaroo-title-font-size);
-			text-transform: uppercase;
-		}
-	}
+  }
+
+  .dropdown-zone {
+    .btn-dropdown {
+      padding: 12px 24px;
+      box-shadow: inset 0 0 0 2px hsl(210, 100%, 40%);
+      // border-width: 2px;
+      // border-style: solid;
+      border-radius: 4px;
+      font-size: var(--kangaroo-title-font-size);
+      // text-transform: uppercase;
+    }
+  }
+
   .nav-position {
     .container-xxl {
       padding-left: 0;
       padding-right: 0;
     }
   }
+
   .chip.chip-lg {
     min-width: 66px;
   }
+
   .tag-small-size {
     font-size: 1rem;
   }
 }
 
 .bg-primary {
-	.kangaroo {
-		.chip.chip-primary {
-			border-color: var(--kangaroo-negative-element-color);
-			&:active {
-				border-color: var(--kangaroo-negative-element-color);
-			}
+  .kangaroo {
+    .chip.chip-primary {
+      border-color: var(--kangaroo-negative-element-color);
+
+      &:active {
+        border-color: var(--kangaroo-negative-element-color);
+      }
+
       &:hover {
         background-color: var(--kangaroo-tags-hover-color);
       }
-			.chip-label {
-				color: var(--kangaroo-negative-element-color)
-			}
-		}
-		.btn-dropdown {
-			color: var(--kangaroo-negative-element-color)
-		}
-	}
+
+      .chip-label {
+        color: var(--kangaroo-negative-element-color);
+      }
+    }
+
+    .btn-dropdown {
+      color: var(--kangaroo-negative-element-color);
+      box-shadow: inset 0 0 0 2px white;
+    }
+  }
 }
 
 
@@ -61,10 +75,9 @@
   // }
 
 }
-//Small tablet ------------------------------------------------------------------------------------------
-@include media-breakpoint-up(sm) {
 
-}
+//Small tablet ------------------------------------------------------------------------------------------
+@include media-breakpoint-up(sm) {}
 
 //Tablet portrait ---------------------------------------------------------------------------------------
 @include media-breakpoint-up(md) {
@@ -78,12 +91,10 @@
 //Tablet landscape --------------------------------------------------------------------------------------
 @include media-breakpoint-up(lg) {
   .kangaroo {
-    .right-zone {
-      // text-align: right;
-      // width:33.33%
+    .kangaroo {
       .dropdown-menu {
-        width:14rem;
-
+        min-width: 14rem;
+        max-width: 16rem;
       }
     }
   }
@@ -99,20 +110,13 @@
 }
 
 //Laptop ------------------------------------------------------------------------------------------------
-@include media-breakpoint-up(xl) {
-  
-
-}
+@include media-breakpoint-up(xl) {}
 
 //Desktop -----------------------------------------------------------------------------------------------
-@include media-breakpoint-up(xxl) {
-
-}
+@include media-breakpoint-up(xxl) {}
 
 //Hover states ------------------------------------------------------------------------------------------
-@media (hover: hover) {
-}
+@media (hover: hover) {}
 
 //Transitions (A11y reduced motion disabled) ------------------------------------------------------------
-@media screen and (prefers-reduced-motion: no-preference) {
-}
+@media screen and (prefers-reduced-motion: no-preference) {}
\ No newline at end of file
diff --git a/src/components/meta-collapse/meta-collapse.js b/src/components/meta-collapse/meta-collapse.js
new file mode 100644
index 0000000000..bc4ba0bd70
--- /dev/null
+++ b/src/components/meta-collapse/meta-collapse.js
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect, useState } from "react";
+import { Collapse } from "bootstrap-italia";
+import Icon from "../icon/icon";
+import "./meta-collapse.scss";
+
+function MetaCollapse({ label, labelClose, children }) {
+  const icon = {
+    icon: "sprites.svg#it-expand",
+    size: "sm",
+    align: "middle",
+    color: "primary",
+    hidden: true,
+    addonClasses: "ms-2",
+  };
+
+  const collRef = useRef(null);
+  const collObjRef = useRef(null);
+
+  const [id, setId] = useState("meta-collapse-");
+
+  const toggleAria = (element) => {
+    const ariaAttr = element.getAttribute("aria-expanded");
+    let newVal = "true";
+    if (ariaAttr === "true") {
+      newVal = "false";
+    }
+    element.setAttribute("aria-expanded", newVal);
+  };
+  const collapseToggle = (evt) => {
+    evt.preventDefault();
+    if (collObjRef.current) {
+      collObjRef.current.toggle();
+      toggleAria(evt.currentTarget);
+    }
+  };
+
+  useEffect(() => {
+    collObjRef.current = new Collapse(collRef.current, { toggle: false });
+    setId(`meta-collapse-${new Date().getTime()}`);
+  }, []);
+
+  return (
+    <div className="meta-collapse">
+      <button
+        href="#"
+        type="button"
+        onClick={collapseToggle}
+        className="read-more mt-3 mb-3 d-inline-flex p-0 btn btn-dropdown dropdown-toggle"
+        aria-expanded="false"
+        aria-controls={id}
+      >
+        <span className="more-text">{label}</span>
+        <span className="less-text">{labelClose}</span>
+        <Icon {...icon} />
+      </button>
+      <div ref={collRef} className="collapse" id={id}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default MetaCollapse;
diff --git a/src/components/meta-collapse/meta-collapse.scss b/src/components/meta-collapse/meta-collapse.scss
new file mode 100644
index 0000000000..bf19d6b064
--- /dev/null
+++ b/src/components/meta-collapse/meta-collapse.scss
@@ -0,0 +1,26 @@
+.meta-collapse {
+  .read-more {
+    text-transform: none;
+    letter-spacing: 0;
+    font-size: 1rem;
+    .less-text {
+      display: none;
+    }
+    .icon {
+      transition: transform 0.3s;
+      width: 24px !important;
+      height: 24px !important;
+    }
+    &[aria-expanded="true"] {
+      .icon {
+        transform: scaleY(-1);
+      }
+      .less-text {
+        display: inline;
+      }
+      .more-text {
+        display: none;
+      }
+    }
+  }
+}