diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index 63bfd1f5..62f1fa4b 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -1105,14 +1105,19 @@ pre {
 }
 
 .job-card {
-  display: flex;
-  align-items: center;
-  position: relative;
+    position: relative;
+    padding: 1rem;
 }
 
 .company-logo {
-  background-position: center;
-  background-size: 42px;
+    background-position: center;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: var(--border-radius-sm);
+    width: 50px;
+    height: 50px;
+    margin-right: 0.5rem;
 }
 
 .job-card-parent {
@@ -1121,11 +1126,9 @@ pre {
 }
 
 .job-card-logo-section {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-left: auto;
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;
 }
 
 .job-detail-card {
@@ -1138,11 +1141,6 @@ pre {
   margin-bottom: 1.875rem;
 }
 
-.job-list-card {
-  padding: 1.25rem 1.56rem;
-  flex-direction: column;
-}
-
 .job-card-heading {
   font-weight: 600;
   color: var(--gray-900);
@@ -1451,3 +1449,35 @@ li {
 .discussions-parent .empty-state {
     background-color: var(--gray-200);
 }
+
+.job-cards-parent {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+    -moz-column-gap: 40px;
+    grid-gap: 1rem;
+    align-items: center;
+}
+
+.job-company {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 600px) {
+    .job-company {
+        flex-direction: column;
+        align-items: inherit;
+    }
+}
+
+@media (max-width: 1200px) {
+    .job-cards-parent {
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    }
+}
+
+@media (max-width: 500px) {
+    .job-cards-parent {
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
+}
diff --git a/lms/www/jobs/index.html b/lms/www/jobs/index.html
index 49b19138..fea346ff 100644
--- a/lms/www/jobs/index.html
+++ b/lms/www/jobs/index.html
@@ -8,63 +8,60 @@
 {% block content %}
 <div class="common-page-style">
 
-  <div class="container">
-    {% if allow_posting and jobs | length %}
-    <a class="button is-primary pull-right mt-5" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
-    {% endif %}
+    <div class="container">
+        {% if allow_posting and jobs | length %}
+        <a class="button is-primary pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
+        {% endif %}
 
-    <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
-    <div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
+        <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
+        <div class="job-subtitle">{{ _("{0}").format(subtitle) }}</div>
 
-    {% if jobs | length %}
-    <div class="common-card-style job-list-card">
-    {% for job in jobs %}
-      <div class="job-card">
-        <div class="avatar avatar-medium mr-3" title="{{ job.company_name}}">
-          <span class="avatar-frame company-logo" style="background-image: url( {{ job.company_logo | urlencode }} );"></span>
-        </div>
-        <div class="job-card-info">
-          <div class="job-card-heading">{{ _(job.job_title) }}</div>
-          <div class="vertically-center course-meta">
-            <div class="mr-5">{{ job.company_name }}</div>
-            <div class="vertically-center">
-              <svg class="icon icon-sm">
-                <use class="" href="#icon-location">
-              </svg>
-              {{ job.location }}
+        {% if jobs | length %}
+        <div class="job-cards-parent">
+        {% for job in jobs %}
+            <div class="common-card-style job-card">
+                <span title="{{ job.company_name}}" style="background-image: url( {{ job.company_logo | urlencode }} );"
+                class="company-logo"></span>
+                <div class="job-card-info">
+                    <div class="job-card-heading">{{ _(job.job_title) }}</div>
+
+                    <div class="job-company course-meta">
+                        <div class="mr-5">{{ job.company_name }}</div>
+                        <div class="vertically-center">
+                            <svg class="icon icon-sm">
+                                <use class="" href="#icon-location">
+                            </svg>
+                            {{ job.location }}
+                        </div>
+                    </div>
+
+                    <div class="job-card-logo-section course-meta">
+                        <div class="indicator-pill green mr-5"> {{ job.type }} </div>
+                        <div class="text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
+                    </div>
+                </div>
+                <a class="stretched-link" href="/jobs/{{ job.name }}"></a>
             </div>
-         </div>
+        {% endfor %}
         </div>
-
-        <div class="job-card-logo-section course-meta">
-          <div class="indicator-pill green ml-3"> {{ job.type }} </div>
-          <div class="mt-2 text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
-        </div>
-        <a class="stretched-link" href="/jobs/{{ job.name }}"></a>
-      </div>
-      {% if loop.index != jobs | length %}
-      <div class="card-divider mt-5"></div>
-      {% endif %}
-    {% endfor %}
     </div>
-      </div>
     {% else %}
 
     <div class="empty-state">
-      <div>
-        <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
-      </div>
-      <div class="empty-state-text">
-        <div class="empty-state-heading">{{ _("No open jobs") }}</div>
-        <div class="course-meta">{{ _("There are no job openings at present.") }}</div>
-      </div>
-      <div>
-        {% if allow_posting %}
-        <a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
-        {% endif %}
-      </div>
+        <div>
+            <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
+        </div>
+        <div class="empty-state-text">
+            <div class="empty-state-heading">{{ _("No open jobs") }}</div>
+            <div class="course-meta">{{ _("There are no job openings at present.") }}</div>
+        </div>
+        <div>
+            {% if allow_posting %}
+            <a class="button is-secondary dark-links m-auto" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
+            {% endif %}
+        </div>
     </div>
     {% endif %}
-  </div>
+    </div>
 </div>
 {% endblock %}