diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 565eaaf2..240cd7a2 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useReducer, useState, useMemo } from "react";
+import { useParams } from "react-router-dom";
 
 import EditPayroll from "../Components/EditPayroll";
 import * as api from "../Components/EditPayroll/api";
@@ -19,10 +20,13 @@ export default function Payroll() {
   );
   const [vacancies, dispatchVacancies] = useReducer(
     vacanciesReducer,
-    initialPayrollState
+    initialVacanciesState
   );
   const [saveSuccess, setSaveSuccess] = useState(false);
 
+  const { cost_centre_code, financial_year } = useParams();
+  const addVacancyUrl = `edit/${cost_centre_code}/${financial_year}/vacancies/create`;
+
   useEffect(() => {
     const savedSuccessFlag = localStorage.getItem("saveSuccess");
     if (savedSuccessFlag === "true") {
@@ -98,6 +102,9 @@ export default function Payroll() {
         RowComponent={EmployeeRow}
       />
       <h2 className="govuk-heading-m">Vacancies</h2>
+      <a class="govuk-button" href={addVacancyUrl}>
+        Add Vacancy
+      </a>
       <EditPayroll
         payroll={vacancies}
         headers={vacancyHeaders}
diff --git a/payroll/templates/payroll/page/edit_payroll.html b/payroll/templates/payroll/page/edit_payroll.html
index 30508ae3..6e9d7bb7 100644
--- a/payroll/templates/payroll/page/edit_payroll.html
+++ b/payroll/templates/payroll/page/edit_payroll.html
@@ -48,39 +48,6 @@ <h2 class="govuk-heading-m">Payroll forecast</h2>
             {% endfor %}
         </tbody>
     </table>
-
-    <h2 class="govuk-heading-m">Vacancies</h2>
-    <table class="govuk-table">
-      <thead class="govuk-table__head">
-          <tr class="govuk-table__row">
-              <th scope="col" class="govuk-table__header">Recruitment Type</th>
-              <th scope="col" class="govuk-table__header">Grade</th>
-              <th scope="col" class="govuk-table__header">Programme</th>
-              <th scope="col" class="govuk-table__header">Budget Type</th>
-              <th scope="col" class="govuk-table__header">Appointee Name</th>
-              <th scope="col" class="govuk-table__header">Hiring Manager</th>
-              <th scope="col" class="govuk-table__header">HR Ref</th>
-              <th scope="col" class="govuk-table__header">Recruitment Stage</th>
-          </tr>
-      </thead>
-      <tbody class="govuk-table__body">
-          {% for vacancy in vacancies %}
-              <tr class="govuk-table__row">
-                  <td class="govuk-table__cell">{{ vacancy.get_recruitment_type_display }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.grade }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.programme_code.programme_code }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.programme_code.budget_type }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.appointee_name|default:"" }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.hiring_manager|default:"" }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.hr_ref|default:"" }}</td>
-                  <td class="govuk-table__cell">{{ vacancy.get_recruitment_stage_display }}</td>
-
-              </tr>
-          {% endfor %}
-      </tbody>
-  </table>
-
-    <a class="govuk-button" href="{% url 'payroll:add_vacancy' cost_centre_code financial_year %}">Add Vacancy</a>
 {% endblock content %}
 
 {% block scripts %}
diff --git a/payroll/views.py b/payroll/views.py
index f757ad73..510e832b 100644
--- a/payroll/views.py
+++ b/payroll/views.py
@@ -10,7 +10,6 @@
 from core.models import FinancialYear
 from costcentre.models import CostCentre
 from payroll.forms import VacancyForm
-from payroll.models import Vacancy
 
 from .services import payroll as payroll_service
 
@@ -97,7 +96,6 @@ def edit_payroll_page(
     payroll_forecast_report_data = payroll_service.payroll_forecast_report(
         cost_centre_obj, financial_year_obj
     )
-    vacancies = Vacancy.objects.filter(cost_centre=cost_centre_code)
 
     context = {
         "cost_centre_code": cost_centre_obj.cost_centre_code,
@@ -117,7 +115,6 @@ def edit_payroll_page(
             "Feb",
             "Mar",
         ],
-        "vacancies": vacancies,
     }
 
     return TemplateResponse(request, "payroll/page/edit_payroll.html", context)