diff --git a/frontend/src/assets/img/stepBackgrounds/step1.jpg b/frontend/src/assets/img/stepBackgrounds/step1.jpg
new file mode 100644
index 0000000..253f339
Binary files /dev/null and b/frontend/src/assets/img/stepBackgrounds/step1.jpg differ
diff --git a/frontend/src/assets/img/stepBackgrounds/step2.jpg b/frontend/src/assets/img/stepBackgrounds/step2.jpg
new file mode 100644
index 0000000..487a49d
Binary files /dev/null and b/frontend/src/assets/img/stepBackgrounds/step2.jpg differ
diff --git a/frontend/src/assets/img/stepBackgrounds/step3.jpg b/frontend/src/assets/img/stepBackgrounds/step3.jpg
new file mode 100644
index 0000000..f12c93b
Binary files /dev/null and b/frontend/src/assets/img/stepBackgrounds/step3.jpg differ
diff --git a/frontend/src/assets/img/stepBackgrounds/step4.jpg b/frontend/src/assets/img/stepBackgrounds/step4.jpg
new file mode 100644
index 0000000..f21f2e9
Binary files /dev/null and b/frontend/src/assets/img/stepBackgrounds/step4.jpg differ
diff --git a/frontend/src/assets/img/stepBackgrounds/step5.jpg b/frontend/src/assets/img/stepBackgrounds/step5.jpg
new file mode 100644
index 0000000..a0f50d4
Binary files /dev/null and b/frontend/src/assets/img/stepBackgrounds/step5.jpg differ
diff --git a/frontend/src/assets/img/stepBackgrounds/step6.jpg b/frontend/src/assets/img/stepBackgrounds/step6.jpg
new file mode 100644
index 0000000..de135e0
Binary files /dev/null and b/frontend/src/assets/img/stepBackgrounds/step6.jpg differ
diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss
index 88d8e9d..c561ed0 100644
--- a/frontend/src/assets/styles/step.scss
+++ b/frontend/src/assets/styles/step.scss
@@ -1,6 +1,7 @@
 .step-container {
     flex-grow: 1;
     overflow: auto;
+    background-size: cover;
 }
 
 .step-overlay {
diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js
index 5830608..9f28952 100644
--- a/frontend/src/components/Stepper.js
+++ b/frontend/src/components/Stepper.js
@@ -9,7 +9,7 @@ import LocationStep from './steps/location/LocationStep'
 import SoilStep from './steps/soilvariant/SoilStep'
 import HabitatStep from './steps/habitat/HabitatStep';
 import ZoneStep from './steps/zone/ZoneStep';
-import SummaryStep from './steps/summary/ZoneStep';
+import SummaryStep from './steps/summary/SummaryStep';
 import ResultsStep from './steps/results/ResultsStep'
 
 const steps = [
diff --git a/frontend/src/components/steps/Step.js b/frontend/src/components/steps/Step.js
index dd50c37..047b3c7 100644
--- a/frontend/src/components/steps/Step.js
+++ b/frontend/src/components/steps/Step.js
@@ -1,23 +1,24 @@
+import { useEffect, useState } from 'react';
 import { Row, Col } from 'reactstrap'
-import SampleBackground from '../../assets/img/sample-bg.jpg';
+import SampleBackground from '../../assets/img/stepBackgrounds/step1.jpg';
 
 export default function Step(props) {
-    const StepBackgroundImage = props.backgroundImage || SampleBackground
-    const stepBackground = {
-        backgroundImage: `url(${StepBackgroundImage})`
-    };
+
+    const [stepBackgroundImage, setStepBackground] = useState(SampleBackground)
+
+    useEffect(() => setStepBackground(props.backgroundImage || SampleBackground), [props.backgroundImage])
 
     return (
-        <div className='step-container' style={stepBackground}>
+        <div className='step-container' style={{backgroundImage: `url(${stepBackgroundImage})`}}>
             <div className='step-overlay'>
                 {props.contentComponent ? (
                     props.contentComponent
                 ) : (
                     <Row style={{height: '100%'}}>
-                        <Col lg={{ size: "3", offset: 1 }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                        <Col lg={{ size: "4" }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', paddingRight: '50px', paddingLeft: '50px'}}>
                             {props.informationComponent}
                         </Col>
-                        <Col lg={{ size: "7", offset: 1}} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
+                        <Col lg={{ size: "8" }} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
                             {props.selectionComponent}
                         </Col>
                     </Row>
diff --git a/frontend/src/components/steps/habitat/HabitatStep.js b/frontend/src/components/steps/habitat/HabitatStep.js
index 34cb0fa..52686da 100644
--- a/frontend/src/components/steps/habitat/HabitatStep.js
+++ b/frontend/src/components/steps/habitat/HabitatStep.js
@@ -2,6 +2,7 @@ import Step from '../Step';
 import HabitatSelector from './HabitatSelector' 
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import habitatBackgroundImage from '../../../assets/img/stepBackgrounds/step3.jpg';
 
 export default function HabitatStep(props) {
     const habitatInfoPanel = (
@@ -16,6 +17,6 @@ export default function HabitatStep(props) {
     )
 
     return (
-        <Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} />
+        <Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} backgroundImage={habitatBackgroundImage} />
     )
 }
diff --git a/frontend/src/components/steps/location/LocationStep.js b/frontend/src/components/steps/location/LocationStep.js
index 12126c0..870e669 100644
--- a/frontend/src/components/steps/location/LocationStep.js
+++ b/frontend/src/components/steps/location/LocationStep.js
@@ -2,6 +2,7 @@ import Step from '../Step';
 import LocationSelectorMap from './Map'
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import locationBackgroundImage from '../../../assets/img/stepBackgrounds/step1.jpg';
 
 export default function LocationStep(props) {
 
@@ -17,6 +18,6 @@ export default function LocationStep(props) {
     )
 
     return (
-        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
+        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} backgroundImage={locationBackgroundImage} />
     )
 }
diff --git a/frontend/src/components/steps/results/ResultsStep.js b/frontend/src/components/steps/results/ResultsStep.js
index e08c0f6..fa20217 100644
--- a/frontend/src/components/steps/results/ResultsStep.js
+++ b/frontend/src/components/steps/results/ResultsStep.js
@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import PlantRepository from '../../../repository/PlantRepository'
 import { Typography, Box } from '@mui/material';
+import resultsBackgroundImage from '../../../assets/img/stepBackgrounds/step6.jpg';
 
 
 export default function ResultsStep(props) {
@@ -63,7 +64,7 @@ export default function ResultsStep(props) {
     }
 
     const stepContent = (
-        <div className="pt-4">
+        <div className="py-4">
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
                 <Typography variant='h5'>Plant List Results</Typography>
                 <Stack spacing={2} direction="row" justifyContent="end">
@@ -76,6 +77,6 @@ export default function ResultsStep(props) {
     )
 
     return (
-        <Step contentComponent={stepContent} />
+        <Step contentComponent={stepContent} backgroundImage={resultsBackgroundImage} />
     )
 }
diff --git a/frontend/src/components/steps/soilvariant/SoilStep.js b/frontend/src/components/steps/soilvariant/SoilStep.js
index cf3914a..b152a29 100644
--- a/frontend/src/components/steps/soilvariant/SoilStep.js
+++ b/frontend/src/components/steps/soilvariant/SoilStep.js
@@ -2,6 +2,7 @@ import Step from '../Step';
 import SoilSelector from './SoilSelector';
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import soilBackgroundImage from '../../../assets/img/stepBackgrounds/step2.jpg';
 
 export default function SoilVariantStep(props) {
     const SOIL_DESCRIPTION = (<p>
@@ -24,6 +25,6 @@ export default function SoilVariantStep(props) {
     )
 
     return (
-        <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
+        <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} backgroundImage={soilBackgroundImage} />
     )
 }
diff --git a/frontend/src/components/steps/summary/ZoneStep.js b/frontend/src/components/steps/summary/SummaryStep.js
similarity index 79%
rename from frontend/src/components/steps/summary/ZoneStep.js
rename to frontend/src/components/steps/summary/SummaryStep.js
index 89183e0..ddc38e2 100644
--- a/frontend/src/components/steps/summary/ZoneStep.js
+++ b/frontend/src/components/steps/summary/SummaryStep.js
@@ -2,6 +2,7 @@ import Step from '../Step';
 import SummaryContent from './SummaryContent' 
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import summaryBackgroundImage from '../../../assets/img/stepBackgrounds/step5.jpg';
 
 export default function SummaryStep(props) {
     const summaryInfoPanel = (
@@ -16,6 +17,6 @@ export default function SummaryStep(props) {
     )
 
     return (
-        <Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} />
+        <Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} backgroundImage={summaryBackgroundImage} />
     )
 }
diff --git a/frontend/src/components/steps/zone/ZoneStep.js b/frontend/src/components/steps/zone/ZoneStep.js
index e67b10b..edfbb57 100644
--- a/frontend/src/components/steps/zone/ZoneStep.js
+++ b/frontend/src/components/steps/zone/ZoneStep.js
@@ -2,6 +2,7 @@ import Step from '../Step';
 import ZoneSelector from './ZoneSelector' 
 import StepInformation from '../StepInformation';
 import staticText from '../../../assets/data/staticText.json'
+import zoneBackgroundImage from '../../../assets/img/stepBackgrounds/step4.jpg';
 
 export default function ZoneStep(props) {
     const zoneInfoPanel = (
@@ -16,6 +17,6 @@ export default function ZoneStep(props) {
     )
 
     return (
-        <Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} />
+        <Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} backgroundImage={zoneBackgroundImage} />
     )
 }