diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 10491a438..02283c8ad 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -252,16 +252,18 @@ export default function Payroll() {
           </a>
         </Tab>
         <Tab label="Pay modifiers" key="4">
-          <DisplayAttrition
-            attrition={allPayroll.pay_modifiers.attrition}
-            global_attrition={allPayroll.pay_modifiers.global_attrition}
-            onInputChange={handleUpdateAttrition}
-            onCreate={handleCreateAttrition}
-          />
-          <DisplayPayModifier
-            modifier={allPayroll.pay_modifiers.pay_uplift}
-            title="Pay uplift"
-          />
+          <div className="scrollable">
+            <DisplayAttrition
+              attrition={allPayroll.pay_modifiers.attrition}
+              global_attrition={allPayroll.pay_modifiers.global_attrition}
+              onInputChange={handleUpdateAttrition}
+              onCreate={handleCreateAttrition}
+            />
+            <DisplayPayModifier
+              modifier={allPayroll.pay_modifiers.pay_uplift}
+              title="Pay uplift"
+            />
+          </div>
         </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
diff --git a/front_end/src/Components/EditPayroll/DisplayAttrition/index.jsx b/front_end/src/Components/EditPayroll/DisplayAttrition/index.jsx
index 9b8a3723c..a906fbbf0 100644
--- a/front_end/src/Components/EditPayroll/DisplayAttrition/index.jsx
+++ b/front_end/src/Components/EditPayroll/DisplayAttrition/index.jsx
@@ -1,5 +1,6 @@
 import PayModifierHeaders from "../PayModifierHeaders";
 import DisplayPayModifier from "../DisplayPayModifier";
+import { decimalToPercentage, percentageToDecimal } from "../../../Util";
 
 const DisplayAttrition = ({
   attrition = [],
@@ -18,14 +19,24 @@ const DisplayAttrition = ({
               {attrition.map((value, index) => {
                 return (
                   <td className="govuk-table__cell" key={index}>
-                    <input
-                      className="govuk-input"
-                      id={`modifier-${index}`}
-                      name={`modifier-${index}`}
-                      type="number"
-                      defaultValue={value}
-                      onChange={(e) => onInputChange(index, e.target.value)}
-                    ></input>
+                    <div class="govuk-input__wrapper">
+                      <input
+                        className="govuk-input govuk-input--width-3"
+                        id={`modifier-${index}`}
+                        name={`modifier-${index}`}
+                        type="number"
+                        defaultValue={decimalToPercentage(value)}
+                        onChange={(e) =>
+                          onInputChange(
+                            index,
+                            percentageToDecimal(e.target.value),
+                          )
+                        }
+                      ></input>
+                      <div class="govuk-input__suffix" aria-hidden="true">
+                        %
+                      </div>
+                    </div>
                   </td>
                 );
               })}
diff --git a/front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx b/front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx
index fe6e297e3..e57396deb 100644
--- a/front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx
+++ b/front_end/src/Components/EditPayroll/DisplayPayModifier/index.jsx
@@ -1,3 +1,4 @@
+import { valueAboveOneToPercentage } from "../../../Util";
 import PayModifierHeaders from "../PayModifierHeaders";
 
 const DisplayPayModifier = ({ modifier = [], title }) => {
@@ -20,7 +21,7 @@ const DisplayPayModifier = ({ modifier = [], title }) => {
             {modifier.map((value, index) => {
               return (
                 <td className="govuk-table__cell" key={index}>
-                  {value}
+                  {valueAboveOneToPercentage(value)}%
                 </td>
               );
             })}
diff --git a/front_end/src/Util.js b/front_end/src/Util.js
index 0b9b005eb..4fd85dabd 100644
--- a/front_end/src/Util.js
+++ b/front_end/src/Util.js
@@ -36,6 +36,22 @@ function getCookie(name) {
   return cookieValue;
 }
 
+export const percentageToDecimal = (percentage) => {
+  return 1.0 - percentage / 100;
+};
+
+export const decimalToPercentage = (decimal) => {
+  // Converts a decimal between 0.0 and 1.0 to percentage: 0.2 = 20%
+  // Rounded to prevent decimal precision issues
+  return Math.round((1.0 - decimal) * 100 * 1e10) / 1e10;
+};
+
+export const valueAboveOneToPercentage = (value) => {
+  // Converts a value greater than 1.0 to percentage: 1.2 = 20%
+  // Rounded to prevent decimal precision issues
+  return Math.round((value - 1.0) * 100 * 1e10) / 1e10;
+};
+
 var currencyFormat = new Intl.NumberFormat("en-GB", {
   style: "currency",
   currency: "GBP",