diff --git a/src/pages/governance/governance.module.scss b/src/pages/governance/governance.module.scss
index 255c8026f..bb79f13b8 100644
--- a/src/pages/governance/governance.module.scss
+++ b/src/pages/governance/governance.module.scss
@@ -34,6 +34,7 @@
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 0.2em;
+  white-space:nowrap; 
 }
 
 .cardSubtitle {
@@ -122,3 +123,30 @@
 .hidden {
   visibility: hidden;
 }
+
+
+@media  (min-width: 1701px)  {
+  .cardDescriptionBody {
+    min-height: 3em;
+  }
+}
+
+@media(max-width: 1700px) and (min-width: 1501px)  {
+  .cardDescriptionBody {
+    min-height: 4em;
+
+  }
+}
+
+@media(max-width: 1500px) and (min-width: 1301px)  {
+  .cardDescriptionBody {
+    min-height: 6em; 
+  }
+}
+
+@media(max-width: 1300px) and (min-width: 997px)  {
+  .cardDescriptionBody {
+    min-height: 7em;
+  }
+}
+
diff --git a/src/pages/governance/index.jsx b/src/pages/governance/index.jsx
index 62c26f2d4..8f25cd7db 100644
--- a/src/pages/governance/index.jsx
+++ b/src/pages/governance/index.jsx
@@ -29,7 +29,7 @@ export default function GovernancePage() {
             </Translate>
           </p>
         </header>
-        <div className="row">
+        <div className="row" style={{ alignItems: 'flex-start' }}>
           {data.map((group) => (
             <div
               key={group.name}
@@ -74,7 +74,9 @@ const GroupCard = ({ group }) => {
               </a>
             </div>
             <p className={clsx('avatar_description', styles.cardDescription)}>
-              {group.description}
+              <div className={styles.cardDescriptionBody}>
+                {group.description}
+              </div>
             </p>
           </div>
         </div>