diff --git a/frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx b/frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx
new file mode 100644
index 0000000..61d110b
--- /dev/null
+++ b/frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/coastal_dune_and_bank_system.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/hill_slopes.jsx b/frontend/src/components/diagrams/hill_slopes.jsx
new file mode 100644
index 0000000..943da06
--- /dev/null
+++ b/frontend/src/components/diagrams/hill_slopes.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/hill_slopes_features.jsx b/frontend/src/components/diagrams/hill_slopes_features.jsx
new file mode 100644
index 0000000..7a3e7cb
--- /dev/null
+++ b/frontend/src/components/diagrams/hill_slopes_features.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes_features.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/mangroves_section.jsx b/frontend/src/components/diagrams/mangroves_section.jsx
new file mode 100644
index 0000000..0707488
--- /dev/null
+++ b/frontend/src/components/diagrams/mangroves_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/mangroves_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/maori_garden.jsx b/frontend/src/components/diagrams/maori_garden.jsx
new file mode 100644
index 0000000..dd627ec
--- /dev/null
+++ b/frontend/src/components/diagrams/maori_garden.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/maori_garden.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/open_wetland_lake.jsx b/frontend/src/components/diagrams/open_wetland_lake.jsx
new file mode 100644
index 0000000..2e601cf
--- /dev/null
+++ b/frontend/src/components/diagrams/open_wetland_lake.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/open_wetland_lake.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/riparian.jsx b/frontend/src/components/diagrams/riparian.jsx
new file mode 100644
index 0000000..6c169fc
--- /dev/null
+++ b/frontend/src/components/diagrams/riparian.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/riparian.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/rural_section.jsx b/frontend/src/components/diagrams/rural_section.jsx
new file mode 100644
index 0000000..2e73cd2
--- /dev/null
+++ b/frontend/src/components/diagrams/rural_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/rural_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/salt_marsh.jsx b/frontend/src/components/diagrams/salt_marsh.jsx
new file mode 100644
index 0000000..90d7693
--- /dev/null
+++ b/frontend/src/components/diagrams/salt_marsh.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/salt_marsh.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/sand_dunes.jsx b/frontend/src/components/diagrams/sand_dunes.jsx
new file mode 100644
index 0000000..8153c94
--- /dev/null
+++ b/frontend/src/components/diagrams/sand_dunes.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/sand_dunes.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/stormwater_treatment.jsx b/frontend/src/components/diagrams/stormwater_treatment.jsx
new file mode 100644
index 0000000..4580ed1
--- /dev/null
+++ b/frontend/src/components/diagrams/stormwater_treatment.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/stormwater_treatment.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/transport_corridor_rail_section.jsx b/frontend/src/components/diagrams/transport_corridor_rail_section.jsx
new file mode 100644
index 0000000..8bc623f
--- /dev/null
+++ b/frontend/src/components/diagrams/transport_corridor_rail_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_rail_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/transport_corridor_road_section.jsx b/frontend/src/components/diagrams/transport_corridor_road_section.jsx
new file mode 100644
index 0000000..ca1b6de
--- /dev/null
+++ b/frontend/src/components/diagrams/transport_corridor_road_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_road_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/urban_section.jsx b/frontend/src/components/diagrams/urban_section.jsx
new file mode 100644
index 0000000..8ce5e82
--- /dev/null
+++ b/frontend/src/components/diagrams/urban_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/urban_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/steps/HabitatSVG.jsx b/frontend/src/components/steps/HabitatSVG.jsx
index 4fce2a0..4db5933 100644
--- a/frontend/src/components/steps/HabitatSVG.jsx
+++ b/frontend/src/components/steps/HabitatSVG.jsx
@@ -1,27 +1,15 @@
-import React from 'react';
+import { lazy, Suspense } from 'react';
+import { CircularProgress, Stack } from "@mui/material";
 
 export const HabitatSVG = ({ name, ...rest }) => {
-    const ImportedIconRef = React.useRef(null);
-    const [loading, setLoading] = React.useState(false);
-
-    React.useEffect(() => {
-        setLoading(true);
-        const importIcon = async () => {
-            try {
-                ImportedIconRef.current = (await import(`!!@svgr/webpack?-svgo,+titleProp,+ref!../../assets/img/habitatSVG/${name}.svg`)).default;
-            } catch (err) {
-                throw err;
-            } finally {
-                setLoading(false);
-            }
-        };
-        importIcon();
-    }, [name]);
-
-    if (!loading && ImportedIconRef.current) {
-        const { current: ImportedIcon } = ImportedIconRef;
-        return <ImportedIcon {...rest} />;
-    }
-
-    return null;
+  const Diagram = lazy(() => import(`../diagrams/${name}`));
+  const loadingComponent = (
+    <Stack alignItems="center">
+      <CircularProgress />
+    </Stack>
+  );
+  return (
+    <Suspense fallback={loadingComponent}>
+      <Diagram {...rest} />
+    </Suspense>);
 };