diff --git a/products/statement-generator/src/components-layout/Affirmation.tsx b/products/statement-generator/src/components-layout/Affirmation.tsx
index 395971df..882c4216 100644
--- a/products/statement-generator/src/components-layout/Affirmation.tsx
+++ b/products/statement-generator/src/components-layout/Affirmation.tsx
@@ -65,7 +65,7 @@ const Affirmation = () => {
         className={`${utilityClasses.buttonContainer} ${utilityClasses.justifyRight}`}
       >
         <Button
-          hasArrow
+          hasForwardArrow
           onClick={() => updateAffirmationData({ isActive: false })}
           buttonText={t(affirmationData.buttonText)}
         />
diff --git a/products/statement-generator/src/components-layout/FlowNavigation.tsx b/products/statement-generator/src/components-layout/FlowNavigation.tsx
index fb485c50..5f7b2053 100644
--- a/products/statement-generator/src/components-layout/FlowNavigation.tsx
+++ b/products/statement-generator/src/components-layout/FlowNavigation.tsx
@@ -72,6 +72,7 @@ export default function FlowNavigation({
           disabled={isBackDisabled}
           buttonText={backButtonLabel || 'BACK'}
           theme={backBtnTheme}
+          hasBackArrow
         />
       )}
 
@@ -82,7 +83,7 @@ export default function FlowNavigation({
           disabled={isNextDisabled}
           buttonText={nextButtonLabel || 'NEXT'}
           theme="dark"
-          hasArrow
+          hasForwardArrow
         />
       )}
     </div>
diff --git a/products/statement-generator/src/components/Button.tsx b/products/statement-generator/src/components/Button.tsx
index 80732a1c..bfa9cae6 100644
--- a/products/statement-generator/src/components/Button.tsx
+++ b/products/statement-generator/src/components/Button.tsx
@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Theme, makeStyles, createStyles } from '@material-ui/core';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { AppUrl } from 'contexts/RoutingProps';
 import RoutingContext from 'contexts/RoutingContext';
 
@@ -126,7 +127,8 @@ const useStyles = makeStyles<Theme, StyleProps>(({ palette }) =>
 interface ComponentProps {
   className?: string;
   theme?: string;
-  hasArrow?: boolean;
+  hasBackArrow?: boolean;
+  hasForwardArrow?: boolean;
   disabled?: boolean;
   icon?: React.ReactNode;
   buttonText?: string;
@@ -136,13 +138,14 @@ interface ComponentProps {
 const ButtonComponent = ({
   className = '',
   theme,
-  hasArrow,
+  hasBackArrow,
+  hasForwardArrow,
   disabled = false,
   icon,
   buttonText,
   onClick,
 }: ComponentProps) => {
-  const styleProps = { theme, hasArrow };
+  const styleProps = { theme, hasBackArrow, hasForwardArrow };
   const classes = useStyles(styleProps);
   return (
     <Button
@@ -151,9 +154,10 @@ const ButtonComponent = ({
       className={`${classes.root} ${className}`}
       onClick={onClick}
     >
+      {hasBackArrow && <ArrowBackIcon style={{ height: '.8em' }} />}
       {icon}
       {buttonText}
-      {hasArrow && <ArrowForwardIcon style={{ height: '.8em' }} />}
+      {hasForwardArrow && <ArrowForwardIcon style={{ height: '.8em' }} />}
     </Button>
   );
 };
diff --git a/products/statement-generator/src/components/PopUp.tsx b/products/statement-generator/src/components/PopUp.tsx
index 11e93ff1..e26e94e2 100644
--- a/products/statement-generator/src/components/PopUp.tsx
+++ b/products/statement-generator/src/components/PopUp.tsx
@@ -67,7 +67,11 @@ const AlertDialog: React.FC<AlertDialogProps> = ({ title, info }) => {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => handleClose()} buttonText="OK" hasArrow />
+          <Button
+            onClick={() => handleClose()}
+            buttonText="OK"
+            hasForwardArrow
+          />
         </DialogActions>
       </Dialog>
     </div>