diff --git a/hrms/www/jobs/index.css b/hrms/www/jobs/index.css
index 48f0f928ad..ffa831bbfd 100644
--- a/hrms/www/jobs/index.css
+++ b/hrms/www/jobs/index.css
@@ -10,10 +10,6 @@ p {
 	margin-bottom: 0;
 }
 
-.primary-stroke {
-	--icon-stroke: var(--primary);
-}
-
 .text-18 {
 	font-size: 18px;
 }
@@ -63,3 +59,7 @@ p {
 .zoom:hover {
 	transform: scale(1.01);
 }
+
+.light-stroke {
+	--icon-stroke: var(--gray-500);
+}
diff --git a/hrms/www/jobs/index.html b/hrms/www/jobs/index.html
index 60c7921822..4b5fc99fb1 100644
--- a/hrms/www/jobs/index.html
+++ b/hrms/www/jobs/index.html
@@ -9,10 +9,11 @@ <h3 class="mt-0 mb-10">{{ _("Job Openings") }}</h3>
     <meta id="data" data-filters="{{ all_filters }}">
     <div class="row">
         <div class="col-3 text-15">
-            <div class="mb-8 flex align-items-center">
+            <div class="flex align-items-center">
                 <p class="text-18 font-weight-bold">{{ _("Filters") }}</p>
-                <a id="clear-filters" class="ml-auto text-12" role="button">{{ _("Clear All") }}</a>
+                <a id="clear-filters" class="ml-auto" role="button">{{ _("Clear All") }}</a>
             </div>
+            <hr class="mb-8">
             {% for name, values in all_filters.items() %}
                 <div class="mb-8">
                     <p class="font-weight-bold mb-4">{{ name.title() | replace('_', ' ') }}</p>
@@ -91,15 +92,26 @@ <h3 class="mt-0 mb-10">{{ _("Job Openings") }}</h3>
                 Showing {{ job_openings|length }} {{ "result" if job_openings|length == 1 else "results" }}
             </p>
             {% for jo in job_openings %}
-                <div name="card" id="{{ jo.route }}" class="mb-8 card border p-6 zoom" role="button">
+                <div name="card"
+                     id="{{ jo.route }}"
+                     class="mb-8 card border p-6 zoom"
+                     role="button">
                     <div class="flex">
                         <h3 class="mt-0 mr-20">{{ jo.job_title }}</h3>
-                        <div class="ml-auto text-nowrap text-secondary text-14">
-                            <p>{{ jo.posted_on }}</p>
+                        <div class="ml-auto font-weight-bold text-nowrap text-12">
+                            {%- if jo.employment_type -%}
+                                {%- if jo.employment_type == "Full-time" -%}
+                                    <div class="py-2 px-3 full-time-badge">• {{ jo.employment_type }}</div>
+                                {%- elif jo.employment_type == "Part-time" -%}
+                                    <div class="py-2 px-3 part-time-badge">• {{ jo.employment_type }}</div>
+                                {%- else -%}
+                                    <div class="py-2 px-3 other-badge">• {{ jo.employment_type }}</div>
+                                {% endif %}
+                            {% endif %}
                         </div>
                     </div>
                     <div class="mb-10">
-                        <div class="flex mb-2 align-items-center primary-stroke text-secondary">
+                        <div class="flex mb-2 align-items-center light-stroke">
                             <svg class="icon icon-md ml-0 mr-1">
                                 <use href="#icon-organization"></use>
                             </svg>
@@ -114,25 +126,15 @@ <h3 class="mt-0 mr-20">{{ jo.job_title }}</h3>
                                 <svg class="icon icon-md ml-0 mr-1"
                                      xmlns="http://www.w3.org/2000/svg"
                                      viewBox="0 0 16 16">
-                                    <g stroke="var(--primary)" stroke-miterlimit="10">
+                                    <g stroke="var(--gray-500)" stroke-miterlimit="10">
                                     <path d="M11.467 3.458c1.958 1.957 1.958 5.088.027 7.02L7.97 14l-3.523-3.523a4.945 4.945 0 010-6.993l.026-.026a4.922 4.922 0 016.993 0zm0 0c-.026-.026-.026-.026 0 0z">
                                     </path>
                                     <path d="M7.971 8.259a1.305 1.305 0 100-2.61 1.305 1.305 0 000 2.61z"></path>
                                     </g>
                                 </svg>
-                                <p class="mr-3">{{ jo.location }}</p>
+                                <p>{{ jo.location }}</p>
                             {% endif %}
                         </div>
-                        <p class="text-secondary font-italic">
-                            {%- if jo.closes_on -%}{{ _("Closes on " + frappe.format_date(jo.closes_on, "d MMM, YYYY") ) }}{% endif %}
-                            {%- if jo.no_of_applications and jo.closes_on -%}{{ " · " }}{% endif %}
-                            {%- if jo.no_of_applications -%}
-                                {{ jo.no_of_applications }}
-                                {{ _(" applicant" if jo.no_of_applications == 1 else " applicants") }}
-                            {% endif %}
-                        </p>
-                    </div>
-                    <div class="flex align-items-end">
                         {%- if jo.publish_salary_range -%}
                             <p>
                                 <span class="font-weight-bold text-18">
@@ -143,17 +145,17 @@ <h3 class="mt-0 mr-20">{{ jo.job_title }}</h3>
                                 <span class="text-secondary">{{ jo.salary_type.lower() }}</span>
                             </p>
                         {% endif %}
-                        <div class="ml-auto font-weight-bold">
-                            {%- if jo.employment_type -%}
-                                {%- if jo.employment_type == "Full-time" -%}
-                                    <span class="text-14 py-2 px-3 full-time-badge">• {{ jo.employment_type }}</span>
-                                {%- elif jo.employment_type == "Part-time" -%}
-                                    <span class="text-14 py-2 px-4 part-time-badge">• {{ jo.employment_type }}</span>
-                                {%- else -%}
-                                    <span class="text-14 py-2 px-4 other-badge">• {{ jo.employment_type }}</span>
-                                {% endif %}
+                    </div>
+                    <div class="flex align-items-center text-14 text-secondary">
+                        <p>
+                            {%- if jo.closes_on -%}{{ _("Closes on " + frappe.format_date(jo.closes_on, "d MMM, YYYY") ) }}{% endif %}
+                            {%- if jo.no_of_applications and jo.closes_on -%}{{ " · " }}{% endif %}
+                            {%- if jo.no_of_applications -%}
+                                {{ jo.no_of_applications }}
+                                {{ _(" applicant" if jo.no_of_applications == 1 else " applicants") }}
                             {% endif %}
-                        </div>
+                        </p>
+                        <p class="ml-auto">{{ _("Posted ") + jo.posted_on }}</p>
                     </div>
                 </div>
             {% endfor %}