diff --git a/src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx b/src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx
index 2d6b816bb..c19b2342b 100644
--- a/src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx
+++ b/src/features/dashboard/components/stepper-text-field/__tests__/stepperTextField.test.tsx
@@ -20,7 +20,7 @@ describe('StepperTextField', () => {
     });
   });
 
-  const renderStepperTextField = () => {
+  const renderStepperTextField = (props?: Partial<React.ComponentProps<typeof StepperTextField>>) => {
     render(
       <StepperTextField
         handleOnMinusClick={() => jest.fn()}
@@ -31,6 +31,7 @@ describe('StepperTextField', () => {
         error={{
           type: 'min',
         }}
+        {...props}
       />,
     );
   };
@@ -40,4 +41,9 @@ describe('StepperTextField', () => {
     const input = screen.getByTestId('stepper-text-field');
     expect(input).toBeInTheDocument();
   });
+
+  it('should render suffix when provided', () => {
+    renderStepperTextField({ suffix: '%' });
+    expect(screen.getByTestId('stepper-text-field-suffix')).toHaveTextContent('%');
+  });
 });
diff --git a/src/features/dashboard/components/stepper-text-field/stepper-text-field.scss b/src/features/dashboard/components/stepper-text-field/stepper-text-field.scss
index dfe9c32d5..d38690dc3 100644
--- a/src/features/dashboard/components/stepper-text-field/stepper-text-field.scss
+++ b/src/features/dashboard/components/stepper-text-field/stepper-text-field.scss
@@ -1,6 +1,7 @@
 .stepper_text_field {
   text-align: center;
   border: none;
+  padding-right: 0;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -16,7 +17,19 @@
     width: 340px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding-block: 12px;
     border: 1px solid rgba(0, 0, 0, 0.08);
   }
+
+  &__input-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  &__suffix {
+    margin-left: 4px;
+    pointer-events: none;
+  }
 }
diff --git a/src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx b/src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx
index db5f15aec..9573f5020 100644
--- a/src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx
+++ b/src/features/dashboard/components/stepper-text-field/stepper-text-field.tsx
@@ -10,6 +10,10 @@ type StepperTextFieldProps = {
   name: string;
   min: number;
   max: number;
+  /**
+   * Optional element to display after the input value
+   */
+  suffix?: React.ReactNode;
   error: {
     type: string;
   };
@@ -21,6 +25,7 @@ const StepperTextField: React.FC<StepperTextFieldProps> = ({
   name,
   min,
   max,
+  suffix,
   error,
   ...rest
 }) => {
@@ -57,14 +62,21 @@ const StepperTextField: React.FC<StepperTextFieldProps> = ({
           variant='tertiary'
           disabled={value <= min || error?.type === 'min'}
         />
-        <input
-          data-testid='stepper-text-field'
-          type='number'
-          className='stepper_text_field'
-          step='any'
-          {...register(name)}
-          {...rest}
-        />
+        <div className='stepper_text_field__input-wrapper'>
+          <input
+            data-testid='stepper-text-field'
+            type='number'
+            className='stepper_text_field'
+            step='any'
+            {...register(name)}
+            {...rest}
+          />
+          {suffix && (
+            <span className='stepper_text_field__suffix' data-testid='stepper-text-field-suffix'>
+              {suffix}
+            </span>
+          )}
+        </div>
         <Button
           color='black'
           icon={<LabelPairedPlusSmFillIcon />}
diff --git a/src/features/dashboard/update-app/AppUpdateForm/index.tsx b/src/features/dashboard/update-app/AppUpdateForm/index.tsx
index cd65c8ee8..440700e49 100644
--- a/src/features/dashboard/update-app/AppUpdateForm/index.tsx
+++ b/src/features/dashboard/update-app/AppUpdateForm/index.tsx
@@ -149,6 +149,7 @@ const AppUpdateForm = ({ initialValues, submit, onCancel, is_loading }: TAppForm
             }}
             min={0}
             max={3}
+            suffix='%'
             error={errors?.app_markup_percentage}
           />
           {errors?.app_markup_percentage && (