diff --git a/apps/site/src/assets/images/resources-birds.svg b/apps/site/src/assets/images/resources-birds.svg
new file mode 100644
index 00000000..b0637d13
--- /dev/null
+++ b/apps/site/src/assets/images/resources-birds.svg
@@ -0,0 +1,10 @@
+<svg width="290" height="332" viewBox="0 0 290 332" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M149.284 22V3L131.284 15.5C119.284 7.1 112.94 9.80743 105.784 11C88.9842 13.8 78.4507 4.83333 75.2839 0C71.7839 34 101.784 33 102.784 33C119.984 31.8 123.284 43.1667 122.784 49V58L129.784 51.5C136.591 45.5268 141.784 49.6932 152.284 59C174.284 78.5 189.617 66 194.284 61C181.484 62.6 169.284 45.3333 164.784 36.5C159.784 26.6858 153.617 23 149.284 22Z" fill="#95EBF3"/>
+<g style="mix-blend-mode:multiply">
+<path d="M74.2839 116V97L56.2842 109.5C44.2842 101.1 37.9396 103.807 30.7842 105C13.9842 107.8 3.45065 98.8333 0.283886 94C-3.21611 128 26.7839 127 27.7839 127C44.9839 125.8 48.2839 137.167 47.7839 143V152L54.7839 145.5C61.5914 139.527 66.7842 143.693 77.2842 153C99.2842 172.5 114.617 160 119.284 155C106.484 156.6 94.2839 139.333 89.7839 130.5C84.7842 120.686 78.6172 117 74.2839 116Z" fill="#0090b3"/>
+</g>
+<path d="M248.56 203.08L252.896 188.103L235.855 193.849C228.312 184.489 222.693 185.176 216.781 184.483C202.899 182.856 196.642 173.384 195.249 168.852C184.732 194.854 208.607 200.912 209.396 201.14C223.228 204.119 223.235 213.832 221.51 218.316L219.456 225.41L226.457 221.884C233.186 218.729 236.329 223.198 242.481 232.93C255.373 253.322 270.312 246.968 275.132 244.091C264.677 242.431 259 226.037 257.469 218.047C255.767 209.17 251.747 204.857 248.56 203.08Z" fill="#95EBF3"/>
+<g style="mix-blend-mode:multiply">
+<path d="M172.41 283.293L176.746 268.316L159.705 274.062C152.163 264.702 146.544 265.389 140.632 264.696C126.75 263.069 120.493 253.597 119.1 249.065C108.582 275.067 132.458 281.125 133.246 281.353C147.078 284.332 147.085 294.045 145.36 298.529L143.306 305.623L150.307 302.097C157.037 298.942 160.179 303.411 166.332 313.143C179.224 333.535 194.163 327.18 198.982 324.304C188.527 322.644 182.851 306.25 181.319 298.26C179.618 289.383 175.598 285.07 172.41 283.293Z" fill="#0090b3"/>
+</g>
+</svg>
diff --git a/apps/site/src/assets/images/resources-hammerhead.svg b/apps/site/src/assets/images/resources-hammerhead.svg
new file mode 100644
index 00000000..9f6e8c41
--- /dev/null
+++ b/apps/site/src/assets/images/resources-hammerhead.svg
@@ -0,0 +1,5 @@
+<svg width="228" height="240" viewBox="0 0 228 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:multiply">
+<path d="M24.9652 114.116C10.2541 84.7103 2.35804 28.187 0.248896 3.60102C2.32758 -3.26493 4.83437 4.23092 5.82793 8.83709C7.30006 24.7996 31.2393 74.9324 43.0249 98.0034C60.6534 67.4136 59.5941 93.9146 56.8609 110.989C75.6237 135.719 108.608 153.197 122.755 158.845C126.854 155.909 120.708 136.578 117.123 127.279C109.617 113.452 118.954 117.129 124.561 120.696C143.186 133.767 150.329 154.063 151.572 162.577C158.395 163.894 172.593 159.558 178.84 157.226L181.026 149.529L173.804 139.783C155.875 126.686 173.949 120.845 185.227 119.562C195.367 121.279 211.234 132.101 214.298 140.911L226.806 209.873C228.806 219.549 222.444 225.701 219.013 227.568C212.919 230.185 212.387 231.945 199.428 235.466C186.165 235.735 189.821 223.342 194.862 219.312L195.451 208.845C178.043 221.669 148.035 220.012 135.207 217.58C121.537 240.017 88.4064 240.911 73.5499 238.554C58.833 234.915 67.4824 228.621 73.6466 225.928C84.8665 222.471 96.9648 213.903 102.315 207.904C86.3566 209.881 47.3419 161.68 31.9728 140.191C13.5457 134.482 -13.6537 121.275 24.9652 114.116Z" fill="#0090b3"/>
+</g>
+</svg>
diff --git a/apps/site/src/assets/images/resources-palm-tree-shade.png b/apps/site/src/assets/images/resources-palm-tree-shade.png
new file mode 100644
index 00000000..e08c4146
Binary files /dev/null and b/apps/site/src/assets/images/resources-palm-tree-shade.png differ
diff --git a/apps/site/src/assets/images/resources-palm-tree.png b/apps/site/src/assets/images/resources-palm-tree.png
new file mode 100644
index 00000000..c994a557
Binary files /dev/null and b/apps/site/src/assets/images/resources-palm-tree.png differ
diff --git a/apps/site/src/views/Resources/Resources.tsx b/apps/site/src/views/Resources/Resources.tsx
index 26980b28..6adf7cc5 100644
--- a/apps/site/src/views/Resources/Resources.tsx
+++ b/apps/site/src/views/Resources/Resources.tsx
@@ -1,4 +1,5 @@
 import styles from "./Resources.module.scss";
+import Figures from "./sections/Figures/Figures"
 import Landing from "./sections/Landing/Landing";
 import ApiResources from "./sections/ApiResources/ApiResources";
 import BackendResources from "./sections/BackendResources/BackendResources";
@@ -8,6 +9,7 @@ import StarterPacks from "./sections/StarterPacks/StarterPacks";
 export default function Resources() {
 	return (
 		<div className={styles.resources}>
+			<Figures />
 			<Landing />
 			<ApiResources />
 			<BackendResources />
diff --git a/apps/site/src/views/Resources/sections/Figures/Figures.module.scss b/apps/site/src/views/Resources/sections/Figures/Figures.module.scss
new file mode 100644
index 00000000..7894ca84
--- /dev/null
+++ b/apps/site/src/views/Resources/sections/Figures/Figures.module.scss
@@ -0,0 +1,95 @@
+@use "bootstrap-utils" as bootstrap;
+
+.hammerhead {
+	position: absolute;
+	visibility: hidden;
+	transform: translateY(10vh);
+}
+
+.birds {
+	position: absolute;
+	visibility: hidden;
+	width: 275px;
+}
+
+.palmTree {
+	position: absolute;
+	right: 0;
+	transform: translateY(90vh);
+	width: 30vw;
+
+	z-index: 2;
+	visibility: hidden;
+	height: auto;
+}
+
+.palmTreeShade {
+	position: absolute;
+	right: 0;
+	transform: translateY(calc(100vh + 50%));
+	width: 30vw;
+
+	z-index: 1;
+	visibility: hidden;
+	height: auto;
+}
+
+@include bootstrap.media-breakpoint-up(md) {
+	.palmTree {
+		visibility: visible;
+	}
+
+	.palmTreeShade {
+		visibility: visible;
+	}
+}
+
+@include bootstrap.media-breakpoint-up(lg) {
+	.hammerhead {
+		visibility: visible;
+		left: 5vh;
+	}
+
+	.birds {
+		visibility: visible;
+		right: 2vh;
+	}
+
+	.palmTree {
+		visibility: visible;
+	}
+
+	.palmTreeShade {
+		visibility: visible;
+	}
+}
+
+@media (min-width: 1200px) {
+	.hammerhead {
+		left: 10vh;
+	}
+
+	.birds {
+		right: 10vh;
+	}
+
+	.palmTree {
+		transform: translateY(75vh);
+		width: 20vw;
+	}
+
+	.palmTreeShade {
+		transform: translateY(calc(80vh + 50%));
+		width: 20vw;
+	}
+}
+
+@media (min-width: 1600px) {
+	.hammerhead {
+		left: 20vh;
+	}
+
+	.birds {
+		right: 20vh;
+	}
+}
diff --git a/apps/site/src/views/Resources/sections/Figures/Figures.tsx b/apps/site/src/views/Resources/sections/Figures/Figures.tsx
new file mode 100644
index 00000000..fa3c58d0
--- /dev/null
+++ b/apps/site/src/views/Resources/sections/Figures/Figures.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Image from "next/image";
+
+import { motion } from "framer-motion";
+
+import palmTree from "@/assets/images/resources-palm-tree.png";
+import palmTreeShade from "@/assets/images/resources-palm-tree-shade.png";
+import hammerhead from "@/assets/images/resources-hammerhead.svg";
+import birds from "@/assets/images/resources-birds.svg";
+
+import styles from "./Figures.module.scss";
+
+export default function Figures() {
+	return (
+		<div>
+			<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 2 }} >
+				<Image
+					src={hammerhead}
+					alt="Hammerhead shark swimming in water"
+					className={styles.hammerhead}
+				/>
+
+				<Image
+					src={birds}
+					alt="Birds flying above water"
+					className={styles.birds}
+				/>
+				<Image
+					src={palmTreeShade}
+					alt="Palm tree shadow"
+					className={styles.palmTreeShade}
+				/>
+				<Image src={palmTree} alt="Palm tree" className={styles.palmTree} />
+			</motion.div>
+		</div>
+	);
+}
diff --git a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss b/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
index 51859126..cf978007 100644
--- a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
+++ b/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
@@ -1,4 +1,4 @@
-@use "bootstrap-utils" as utils;
+@use "bootstrap-utils" as bootstrap;
 
 .landing {
 	display: flex;
@@ -9,8 +9,16 @@
 	margin-top: 15vh;
 	margin-bottom: 5vh;
 	text-align: left;
+
 }
 
 .title {
-	width: 75%;
+	width: 60%;
 }
+
+@include bootstrap.media-breakpoint-up(lg) {
+	.landing {
+		margin-top: 40vh;
+		margin-bottom: 40vh;
+	}
+}
\ No newline at end of file