diff --git a/employee/templates/employee/profile/profile_view.html b/employee/templates/employee/profile/profile_view.html
index 36d4ff33d..2c798b800 100644
--- a/employee/templates/employee/profile/profile_view.html
+++ b/employee/templates/employee/profile/profile_view.html
@@ -1,5 +1,6 @@
 {% extends 'index.html' %}
 {% load i18n %}
+{% load static %}
 {% block content %}
 <div class="oh-wrapper">
     <div class="oh-card mt-4 mb-5">
@@ -98,6 +99,15 @@
                 >{% trans "Leave" %}</a
               >
             </li>
+            <li class="oh-general__tab">
+              <a
+                href="#"
+                class="oh-general__tab-link"
+                data-action="general-tab"
+                data-target="#payroll"
+                >{% trans "Payroll" %}</a
+              >
+            </li>
             <li class="oh-general__tab">
               <a
                 href="#"
@@ -486,6 +496,12 @@
         >
           {% include 'leave-tab.html' %}
         </div>
+        <div
+        class="oh-general__tab-target oh-profile__info-tab  mb-4 d-none"
+        id="payroll"
+      >
+      {% include 'payroll-tab.html' %}
+      </div>
         <div
           class="oh-general__tab-target oh-profile__info-tab  mb-4 d-none"
           id="team"
@@ -504,5 +520,6 @@
       </div>
     </div>
   </div>
+  <script src="{% static 'employee/search.js' %}"></script>
 
   {% endblock content %}
\ No newline at end of file
diff --git a/employee/templates/employee/view/individual.html b/employee/templates/employee/view/individual.html
index f02f06a38..2920aa7a9 100644
--- a/employee/templates/employee/view/individual.html
+++ b/employee/templates/employee/view/individual.html
@@ -1,6 +1,7 @@
 {% extends 'index.html' %}{% load static %}
 {% block content %}
 {% load i18n %}
+{% load static %}
       
 {% comment %} {% include 'employee_nav.html' %} {% endcomment %}
 
@@ -103,6 +104,15 @@
                 >{% trans "Leave" %}</a
               >
             </li>
+            <li class="oh-general__tab">
+              <a
+                href="#"
+                class="oh-general__tab-link"
+                data-action="general-tab"
+                data-target="#payroll"
+                >{% trans "Payroll" %}</a
+              >
+            </li>
             <li class="oh-general__tab">
               <a
                 href="#"
@@ -490,6 +500,12 @@
         >
         {% include "leave-tab.html" %}
         </div>
+        <div
+        class="oh-general__tab-target oh-profile__info-tab  mb-4 d-none"
+        id="payroll"
+      >
+      {% include "payroll-tab.html" %}
+      </div>
         <div
           class="oh-general__tab-target oh-profile__info-tab  mb-4 d-none"
           id="team"
@@ -508,5 +524,6 @@
       </div>
     </div>
   </div>
+<script src="{% static 'employee/search.js' %}"></script>
 
   {% endblock content %}
\ No newline at end of file
diff --git a/employee/templates/payroll-tab.html b/employee/templates/payroll-tab.html
new file mode 100644
index 000000000..1b6f35211
--- /dev/null
+++ b/employee/templates/payroll-tab.html
@@ -0,0 +1,76 @@
+{% load i18n %}
+
+<style>
+    .row-status--orange {
+      border-left: 4px solid orange;
+      border-radius: 5px;
+    }
+    .row-status--gray {
+      border-left: 4px solid gray;
+      border-radius: 5px;
+    }
+    .row-status--yellow {
+      border-left: 4px solid yellowgreen;
+      border-radius: 5px;
+    }
+    .row-status--blue {
+        border-left: 4px solid rgb(103, 171, 238);
+        border-radius: 5px;
+      }
+    a:hover {
+        text-decoration: none;
+    }
+  </style>
+
+  <div class="oh-sticky-table mt-4">
+    <div class="oh-sticky-table__table oh-table--sortable">
+        <div class="oh-sticky-table__thead">
+            <div class="oh-sticky-table__tr">
+                <div class="oh-sticky-table__th">{% trans "employee" %}</div>
+                <div class="oh-sticky-table__th">{% trans "period" %}</div>
+                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
+                <div class="oh-sticky-table__th">{% trans "Gross Pay" %}</div>
+                <div class="oh-sticky-table__th">{% trans "Deduction" %}</div>
+                <div class="oh-sticky-table__th">{% trans "Net Pay" %}</div>
+            </div>
+        </div>
+        <div class="oh-sticky-table__tbody">
+            {% for payslip in employee.payslip_set.all %}
+            
+            <a href="{% url 'view-created-payslip' payslip.id %}" class="oh-sticky-table__tr" >
+                <div class="oh-sticky-table__sd {% if payslip.status == "review_ongoing" %}row-status--orange {% elif payslip.status == "confirmed" %} row-status--blue {% elif payslip.status == "paid" %} row-status--yellow {% elif payslip.status == "draft" %} row-status--gray{% endif %}">
+                  <div class="d-flex">
+                  <div class="oh-profile oh-profile--md">
+                    <div class="oh-profile__avatar mr-1">
+                      <img
+                        src="https://ui-avatars.com/api/?name={{payslip.employee_id.employee_first_name}}+{{payslip.employee_id.employee_last_name}}&background=random"
+                        class="oh-profile__image"
+                        alt=""
+                      />
+                    </div>
+                    <span class="oh-profile__name oh-text--dark">{{payslip.employee_id}}</span>
+                  </div>
+                
+                </div>
+                  
+                </div>
+                <div class="oh-sticky-table__td">
+                  {{payslip.start_date}} - {{payslip.end_date}}
+                </div>
+                <div class="oh-sticky-table__td">
+                  {{payslip.get_status_display}}
+                </div>
+                <div class="oh-sticky-table__td">
+                  {{currency}} {{payslip.gross_pay|floatformat:2}}
+                </div>
+                <div class="oh-sticky-table__td">
+                  {{currency}} {{payslip.deduction|floatformat:2}}
+                </div>
+                <div class="oh-sticky-table__td">
+                  {{currency}} {{payslip.net_pay|floatformat:2}}
+                </div>
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+</div>
\ No newline at end of file