diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index e643f389..0cd5d4c7 100755
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -195,8 +195,11 @@ body {
         width: 100%;
         padding-right: 10px;
     }
-    .col-sm-6 {
-        width: 50%;
+    .left-col {
+        width: 70%;
+    }
+    .right-col {
+        width: 30%;
     }
     .uni-card {
         width: 98%;
@@ -231,8 +234,11 @@ body {
         width: 100%;
         padding-right: 10px;
     }
-    .col-sm-6 {
-        width: 50%;
+    .left-col {
+        width: 70%;
+    }
+    .right-col {
+        width: 30%;
     }
 }
 
@@ -253,9 +259,12 @@ body {
       float: left;
       padding-right: 10px;
     }
-  .col-sm-6 {
-      width: 50%;
-  }
+  .left-col {
+        width: 70%;
+    }
+  .right-col {
+        width: 30%;
+    }
   .uni-card {
       margin: 10px;
       width: 100%;
diff --git a/app/templates/app/institutions.html b/app/templates/app/institutions.html
index bbdff528..378a9783 100644
--- a/app/templates/app/institutions.html
+++ b/app/templates/app/institutions.html
@@ -8,7 +8,7 @@
     <div class="all-cards section">
         <div class="card uni-card">
             <div class="row">
-                <div class="col-sm-6">
+                <div class="col-sm-6 left-col">
                     <h5 class="card-title">{{ institution.name }}</h5>
                     <p class="card-text">
                         {{ institution.abbreviation }}
@@ -18,7 +18,7 @@ <h5 class="card-title">{{ institution.name }}</h5>
                     </p>
                     <br>
                 </div>
-                <div class="col-sm-6">
+                <div class="col-sm-6 right-col">
                     <p class="card-text">Profile completion:</p>
                     <div class="profile-icons">
                       <i class="bi-star-fill"></i>