diff --git a/hrms/templates/generators/job_opening.html b/hrms/templates/generators/job_opening.html
index 34e40a74b3..485171977a 100644
--- a/hrms/templates/generators/job_opening.html
+++ b/hrms/templates/generators/job_opening.html
@@ -2,9 +2,9 @@
 {% block page_content %}
     <div class="py-12">
         <div class="flex">
-            <div class="mb-4 mr-32">
-                <h2 class="mt-0">{{ job_title }}</h2>
-                <div class="flex align-items-center">
+            <div class="mb-8 mr-40">
+                <h1 class="mt-0 mb-3" style="font-size: 3rem">{{ job_title }}</h1>
+                <div class="flex align-items-center" style="font-size: 18px">
                     <div>
                         <b>{{ company }}</b>
                         {{ " · " }}{{ posted_on }}
@@ -21,31 +21,62 @@ <h2 class="mt-0">{{ job_title }}</h2>
                 {% endif %}
             </div>
         </div>
-        <div class="mb-8">
-            <hr>
-            <div class="row px-4" style="font-size: 15px">
-                <div class="col-3">
-                    <div class="text-secondary">Location</div>
-                    <div class="font-weight-bold">{{ location }}</div>
-                </div>
-                <div class="col-3">
-                    <div class="text-secondary">Department</div>
-                    <div class="font-weight-bold">{{ department }}</div>
-                </div>
-                <div class="col-3">
-                    <div class="text-secondary">Employment Type</div>
-                    <div class="font-weight-bold">{{ employment_type }}</div>
-                </div>
-                <div class="col-3">
-                    <div class="text-secondary">Salary Range</div>
-                    <div class="font-weight-bold">
-                        {{ frappe.format_value(frappe.utils.flt(lower_range) ,
-                        currency=currency) }} - {{ frappe.format_value(frappe.utils.flt(upper_range) ,
-                        currency=currency) }} / {{ salary_per.lower() }}
+        <div class="mb-16">
+            <div class="my-4">
+                <div class="row" style="--icon-stroke: var(--gray-700); font-size: 17px">
+                    <div class="col-4">
+                        <div class="card p-6 border flex flex-row align-items-center">
+                            <div class="rounded-circle p-4" style="background: var(--blue-50)">
+                                <svg class="icon"
+                                     style="height: 28px;
+                                            width: 28px"
+                                     xmlns="http://www.w3.org/2000/svg"
+                                     viewBox="0 0 16 16">
+                                    <g stroke="var(--gray-700)" 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>
+                            </div>
+                            <div class="ml-5">
+                                <div class="text-secondary" style="font-size: 13px">Location</div>
+                                <div class="font-weight-bold">{{ location }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-4">
+                        <div class="card p-6 border flex flex-row align-items-center">
+                            <div class="rounded-circle p-4" style="background: var(--purple-50)">
+                                <svg class="icon" style="height: 28px; width: 28px;">
+                                    <use href="#icon-branch" style="height: 28px; width: 28px"></use>
+                                </svg>
+                            </div>
+                            <div class="ml-5">
+                                <div class="text-secondary" style="font-size: 13px">Department</div>
+                                <div class="font-weight-bold">{{ department }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-4">
+                        <div class="card p-6 border flex flex-row align-items-center">
+                            <div class="rounded-circle p-4" style="background: var(--green-50)">
+                                <svg class="icon" style="height: 28px; width: 28px;">
+                                    <use href="#icon-income" style="height: 28px; width: 28px"></use>
+                                </svg>
+                            </div>
+                            <div class="ml-5">
+                                <div class="text-secondary" style="font-size: 14px">Salary Range</div>
+                                <div class="font-weight-bold">
+                                    {{ frappe.format_value(frappe.utils.flt(lower_range) ,
+                                    currency=currency) }} - {{ frappe.format_value(frappe.utils.flt(upper_range) ,
+                                    currency=currency) }} / {{ salary_per.lower() }}
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-            <hr>
         </div>
         {%- if description -%}<p>{{ description }}</p>{% endif %}
     </div>