diff --git a/components/site-footer.module.css b/components/site-footer.module.css
index d54e366..f8058b5 100644
--- a/components/site-footer.module.css
+++ b/components/site-footer.module.css
@@ -1,35 +1,65 @@
 .footer {
-	background: var(--color-navy-deep);
+	background: #042849;
+	border-top: 1.125rem solid #ed8403;
 	color: var(--color-cream);
+	overflow: hidden;
 }
 
-.truss {
-	background:
-		repeating-linear-gradient(
-			45deg,
-			transparent 0 1.25rem,
-			var(--color-bridge) 1.3rem 1.48rem,
-			transparent 1.53rem 2.75rem
-		),
-		repeating-linear-gradient(
-			-45deg,
-			transparent 0 1.25rem,
-			var(--color-bridge) 1.3rem 1.48rem,
-			transparent 1.53rem 2.75rem
-		);
-	border-bottom: 3px solid var(--color-bridge);
-	border-top: 3px solid var(--color-bridge);
-	height: 2rem;
+.scene {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	min-height: 13.125rem;
+	position: relative;
 }
 
 .inner {
-	align-items: end;
+	align-items: center;
 	display: flex;
 	gap: 2rem;
 	justify-content: space-between;
-	margin: 0 auto;
-	max-width: var(--site-width);
-	padding: 3rem var(--site-gutter);
+	max-width: 84rem;
+	min-height: 9.5rem;
+	padding: 2rem 3rem;
+	position: relative;
+	transform: translate(clamp(0rem, 3vw, 4rem), 0.5rem);
+	width: calc(100% - clamp(18rem, 32vw, 36rem));
+	z-index: 2;
+}
+
+.artwork {
+	inset: 0;
+	pointer-events: none;
+	position: absolute;
+	z-index: 1;
+}
+
+.city,
+.flower {
+	position: absolute;
+	user-select: none;
+}
+
+.city {
+	bottom: 0;
+	height: auto;
+	left: clamp(1rem, 4.5vw, 5.75rem);
+	width: clamp(12rem, 16.25vw, 20.5rem);
+}
+
+.flower {
+	height: auto;
+	right: clamp(1rem, 4.5vw, 5.75rem);
+	top: 1.25rem;
+	width: clamp(7rem, 8.7vw, 11rem);
+}
+
+.truss {
+	background: #fbc543 url("/images/footer/bridge-part.svg") left top / 4.75rem
+		3.25rem repeat-x;
+	height: 3.25rem;
+	position: relative;
+	z-index: 3;
 }
 
 .wordmark {
@@ -65,13 +95,55 @@
 	outline-color: var(--color-bridge);
 }
 
-@media (max-width: 650px) {
+@media (max-width: 1000px) {
+	.scene {
+		min-height: 0;
+		padding: 2.5rem 0 8rem;
+	}
+
 	.inner {
 		align-items: flex-start;
 		flex-direction: column;
+		min-height: 0;
+		padding: 2rem;
+		transform: none;
+		width: calc(100% - 4rem);
+	}
+
+	.flower {
+		bottom: 0;
+		top: auto;
 	}
 
 	.nav {
 		justify-content: flex-start;
 	}
 }
+
+@media (max-width: 520px) {
+	.footer {
+		border-top-width: 0.75rem;
+	}
+
+	.scene {
+		padding: 1.5rem 0;
+	}
+
+	.inner {
+		padding: 1.5rem;
+		width: calc(100% - 2rem);
+	}
+
+	.artwork {
+		display: none;
+	}
+
+	.nav {
+		gap: 0.25rem 1rem;
+	}
+
+	.truss {
+		background-size: 3.8rem 2.6rem;
+		height: 2.6rem;
+	}
+}
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index 9d66b6a..d68f6e7 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -1,21 +1,40 @@
+import Image from "next/image";
 import Link from "next/link";
 import style from "./site-footer.module.css";
 
 export function SiteFooter() {
 	return (
 		<footer className={style.footer}>
-			<div aria-hidden="true" className={style.truss} />
-			<div className={style.inner}>
-				<div>
-					<p className={style.wordmark}>SACTECH</p>
-					<p className={style.tagline}>Sacramento tech, built together.</p>
+			<div className={style.scene}>
+				<div aria-hidden="true" className={style.artwork}>
+					<Image
+						alt=""
+						className={style.city}
+						height={111}
+						src="/images/footer/city-outline.svg"
+						width={200}
+					/>
+					<Image
+						alt=""
+						className={style.flower}
+						height={200}
+						src="/images/footer/flower.svg"
+						width={108}
+					/>
+				</div>
+				<div className={style.inner}>
+					<div>
+						<p className={style.wordmark}>SACTECH</p>
+						<p className={style.tagline}>Sacramento tech, built together.</p>
+					</div>
+					<nav aria-label="Footer" className={style.nav}>
+						<Link href="/#community">Community</Link>
+						<Link href="/events">Events</Link>
+						<Link href="/code-of-conduct">Code of Conduct</Link>
+					</nav>
 				</div>
-				<nav aria-label="Footer" className={style.nav}>
-					<Link href="/#community">Community</Link>
-					<Link href="/events">Events</Link>
-					<Link href="/code-of-conduct">Code of Conduct</Link>
-				</nav>
 			</div>
+			<div aria-hidden="true" className={style.truss} />
 		</footer>
 	);
 }
diff --git a/public/images/footer/bridge-part.svg b/public/images/footer/bridge-part.svg
new file mode 100644
index 0000000..2960613
--- /dev/null
+++ b/public/images/footer/bridge-part.svg
@@ -0,0 +1,4 @@
+<svg width="46.5" height="33" viewBox="1.5 0 46.5 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.75 32.5H1.5V1.5H24.75H48V32.5H24.75Z" fill="#042849"/>
+<path d="M1.5 32.5L24.75 1.5M24.75 1.5H1.5V32.5H24.75M24.75 1.5V32.5M24.75 1.5L48 32.5M24.75 32.5H48V1.5H24.75" stroke="#FBC543" stroke-width="3"/>
+</svg>
diff --git a/public/images/footer/city-outline.svg b/public/images/footer/city-outline.svg
new file mode 100644
index 0000000..1047f4a
--- /dev/null
+++ b/public/images/footer/city-outline.svg
@@ -0,0 +1,3 @@
+<svg width="200" height="111" viewBox="0 0 200 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.220861 75.5C0.054194 86.6667 -0.179139 109.4 0.220861 111H199.221V73.5H186.221V78H178.721V50.5H165.721V68.5H156.721V9L137.221 28.5V62H130.221V45.5H122.221V56H116.721V26.5L107.721 17L100.221 26.5V56H91.7209V36H83.7209V9L76.7209 0L70.7209 9V50.5H61.2209V36L53.7209 28.5L47.2209 36V68.5H35.2209V50.5H18.2209V80H13.2209V75.5H0.220861Z" fill="#003945"/>
+</svg>
diff --git a/public/images/footer/flower.svg b/public/images/footer/flower.svg
new file mode 100644
index 0000000..3a69159
--- /dev/null
+++ b/public/images/footer/flower.svg
@@ -0,0 +1,10 @@
+<svg width="108" height="200" viewBox="0 0 108 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.93 199.038C103.93 164.038 100.33 126.738 77.9302 85.5377" stroke="#479398" stroke-width="4"/>
+<path d="M62.9302 82.0377C70.4302 88.0377 84.8302 94.1377 82.4302 70.5377L62.9302 82.0377Z" fill="#479398"/>
+<path d="M76.7563 87.3199C77.9833 87.0572 79.0955 86.4638 80.0169 85.4443" stroke="black" stroke-opacity="0.48" stroke-width="0.5" stroke-linecap="round"/>
+<path d="M71.9302 17.5377L74.4302 74.0377C88.4302 66.0377 94.5969 52.7044 95.9302 47.0377C99.7636 34.871 107.43 9.43769 107.43 5.03769C107.43 -0.462311 100.43 0.0376924 97.4302 0.0376924C79.8302 -0.762308 73.0969 11.371 71.9302 17.5377Z" fill="#E25629"/>
+<path d="M70.9302 17.5377L73.4302 74.0377L70.9302 76.5377L31.4302 58.5377C27.2636 56.871 17.8302 53.7377 13.4302 54.5377C7.93024 55.5377 4.43024 43.5377 12.4302 37.5377C20.4302 31.5377 18.4302 31.0377 26.4302 28.5377C32.8302 26.5377 38.4302 21.0377 40.4302 18.5377C42.2636 16.2044 48.4302 11.4377 58.4302 11.0377C68.4302 10.6377 70.9302 15.2044 70.9302 17.5377Z" fill="#E25629"/>
+<path d="M31.4302 59.5377L70.9302 77.5377L59.4302 82.0377C55.9302 83.5377 45.4302 85.8377 31.4302 83.0377C17.4302 80.2377 9.26356 78.2044 6.93023 77.5377C2.76356 76.5377 -3.86977 73.2377 2.93023 68.0377C-0.403099 65.371 -3.66975 59.2377 9.93025 56.0377C13.5302 55.2377 25.7636 58.0377 31.4302 59.5377Z" fill="#E25629"/>
+<path d="M67.001 56.3292C68.0456 56.1249 69.0957 56.6859 69.5059 57.6681L69.584 57.8849L70.5977 61.2296L70.6816 58.4699L70.7002 58.2404C70.8496 57.1097 71.8344 56.2529 72.999 56.2882L73.2295 56.3068C74.3599 56.4571 75.2138 57.4425 75.1787 58.6056L75.1426 59.7843L75.2959 59.3263L75.3799 59.1115C75.8171 58.1404 76.882 57.6091 77.9199 57.8419L78.1416 57.9035L78.3555 57.9874C79.3949 58.4551 79.9331 59.643 79.5645 60.7492C79.5645 60.7492 78.4302 67.5377 76.8145 68.9992C75.1987 70.4606 75.225 69.9269 73.9688 70.422C73.7779 70.3584 73.6028 70.269 73.4424 70.1632C73.173 70.266 72.8794 70.32 72.5732 70.3107C72.1332 70.2973 71.7279 70.156 71.3877 69.9269C71.3134 69.9685 71.2374 70.0087 71.1572 70.0421L70.9404 70.1193C70.6293 70.2135 70.3137 70.2352 70.0107 70.1974C69.8802 70.3426 69.7315 70.476 69.5596 70.5871C69.4656 70.6477 69.3665 70.6973 69.2676 70.7423C69.3284 71.2915 69.1909 71.8638 68.834 72.34L68.833 72.341C68.7413 72.4632 68.6392 72.5731 68.5293 72.671C68.6375 73.0067 68.6682 73.3707 68.6055 73.7365L68.5557 73.9611C68.2442 75.0823 70.0107 73.5377 69.4302 74.5377C69.4302 74.5377 67.4302 75.5275 65.7861 75.5275C60.9395 75.5275 53.8281 72.2062 53.8281 72.2062C52.6312 71.8737 51.9293 70.6331 52.2617 69.4357L52.335 69.2169C52.722 68.2256 53.7584 67.6397 54.8076 67.8195L55.0322 67.8693L61.5303 69.674L57.0811 66.3371C56.0873 65.5917 55.8854 64.182 56.6309 63.1876C57.3762 62.1945 58.7851 61.9924 59.7793 62.7374L63.7266 65.6974L60.54 60.757C59.8668 59.7131 60.1669 58.3214 61.2109 57.6476C62.2547 56.9743 63.6464 57.2737 64.3203 58.3175L65.626 60.3429L65.2773 59.1906C64.917 58.0014 65.5882 56.7444 66.7773 56.3839L67.001 56.3292Z" fill="#EFFF0B" fill-opacity="0.62"/>
+<path d="M54.4302 70.0377L72.4302 75.0377L77.4302 60.0377M72.4302 75.0377L72.9302 58.5377M72.4302 75.0377L67.4302 58.5377M72.4302 75.0377L62.4302 59.5377M72.4302 75.0377L58.4302 64.5377" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>