diff --git a/apps/site/src/assets/background/resources/back-mountains.png b/apps/site/src/assets/background/resources/back-mountains.png
new file mode 100644
index 00000000..bdeffbc7
Binary files /dev/null and b/apps/site/src/assets/background/resources/back-mountains.png differ
diff --git a/apps/site/src/assets/background/resources/front-mountains.png b/apps/site/src/assets/background/resources/front-mountains.png
new file mode 100644
index 00000000..6c776213
Binary files /dev/null and b/apps/site/src/assets/background/resources/front-mountains.png differ
diff --git a/apps/site/src/assets/background/resources/stars.png b/apps/site/src/assets/background/resources/stars.png
new file mode 100644
index 00000000..7a62eff2
Binary files /dev/null and b/apps/site/src/assets/background/resources/stars.png differ
diff --git a/apps/site/src/views/Resources/Resources.module.scss b/apps/site/src/views/Resources/Resources.module.scss
index 9d5316b0..6b6565cf 100644
--- a/apps/site/src/views/Resources/Resources.module.scss
+++ b/apps/site/src/views/Resources/Resources.module.scss
@@ -11,3 +11,18 @@ $container-padding: 6rem;
 		}
 	}
 }
+.resources {
+	background: url("~@/assets/background/resources/stars.png"),
+		url("~@/assets/background/resources/front-mountains.png"),
+		url("~@/assets/background/resources/back-mountains.png"),
+		radial-gradient(101.83% 44.96% at 50% 50%, #172750 0%, #121c32 100%);
+
+	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+	background-size: cover, cover, cover, cover;
+	background-position:
+		center top,
+		center 50vh,
+		center 30vh,
+		center;
+	padding-bottom: 2rem;
+}
diff --git a/apps/site/src/views/Resources/Resources.tsx b/apps/site/src/views/Resources/Resources.tsx
index 245c5d3d..3d06ad68 100644
--- a/apps/site/src/views/Resources/Resources.tsx
+++ b/apps/site/src/views/Resources/Resources.tsx
@@ -1,15 +1,13 @@
-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";
 import FrontendResources from "./sections/FrontendResources/FrontendResources";
 import StarterPacks from "./sections/StarterPacks/StarterPacks";
+import styles from "./Resources.module.scss";
 
 export default function Resources() {
 	return (
 		<div className={styles.resources}>
-			<Figures />
 			<Landing />
 			<ApiResources />
 			<BackendResources />
diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss
index 7729d5d5..cba08d1e 100644
--- a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss
+++ b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss
@@ -10,40 +10,41 @@ $item-padding-x: 3rem;
 $heading-font-size: 1.75rem;
 
 .card {
-	background-color: theme.$white;
-	border: 6px solid theme.$white;
-	box-shadow: inset 0 0 0 6px theme.$black;
-	border-radius: 16px;
-
-	padding: $mobile-item-padding-y $mobile-item-padding-x;
-
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-}
-
-.bang {
-	display: none;
-	margin-right: $mobile-item-padding-x - 0.4375;
+	justify-content: center;
+	width: 100%;
+	max-width: 900px;
+	margin: 0 auto;
+	height: auto;
+	gap: 10px;
+	padding: 20px;
 }
 
 .title {
-	font-size: $heading-font-size;
-	font-weight: 600;
-	color: theme.$light-blue;
+	font-family: "Reddit Mono", monospace;
+	font-weight: 800;
+	font-style: normal;
+	font-size: 25px;
+	line-height: 180%;
+	letter-spacing: 2%;
+	text-align: center;
+	color: rgba(202, 202, 202, 1);
 }
 
 .description {
-	margin: 0;
-	font-weight: 500;
+	font-family: "Reddit Mono", monospace;
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 180%;
+	letter-spacing: 0.02em;
+	text-align: center;
+	color: rgba(153, 177, 203, 1);
 }
 
 @include utils.media-breakpoint-up(md) {
 	.card {
 		padding: $item-padding-y $item-padding-x;
 	}
-
-	.bang {
-		display: block;
-		margin-right: $item-padding-x - 0.4375;
-	}
 }
diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx
index f8f75f8e..5023cfd2 100644
--- a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx
+++ b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx
@@ -1,6 +1,3 @@
-import Image from "next/image";
-import resourcesBang from "@/assets/images/resources-bang.svg";
-
 import styles from "./HeadingCard.module.scss";
 
 interface HeadingCardProps {
@@ -11,11 +8,6 @@ interface HeadingCardProps {
 export default function HeadingCard({ title, description }: HeadingCardProps) {
 	return (
 		<div className={styles.card}>
-			<Image
-				className={styles.bang}
-				src={resourcesBang}
-				alt="exclamation mark"
-			/>
 			<div>
 				<h2 className={styles.title}>{title}</h2>
 				<p className={styles.description}>{description}</p>
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
index 0845cc6c..07520f57 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -1,94 +1,69 @@
 @use "zothacks-theme" as theme;
 @use "bootstrap-utils" as utils;
-
-.group {
-	position: relative;
-	padding: 1rem 0;
-	width: 200px;
-}
-
-.container {
-	position: relative;
+.frame {
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
 	align-items: center;
-	gap: 10px;
+	justify-content: center;
+	width: 423px;
+	min-height: 260px;
+	padding: 3vh 0 0;
+	border-radius: 20px;
+	border: 5px solid rgba(42, 80, 75, 1);
+	background-color: rgba(42, 80, 75, 0.69);
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+	gap: 16px;
 }
 
-.buttonImage {
-	width: 50px;
+.logo {
+	width: 80px;
+	height: auto;
+	fill: #ffffff;
 }
 
-.titleLink {
-	font-family: inherit;
+.cardLinkWrapper {
+	display: flex;
+	flex: 1 1 auto;
 	text-decoration: none;
 	color: inherit;
-	font-weight: 600;
-	color: theme.$lighter-black;
-	:link {
-		text-decoration: none;
-	}
-}
+	cursor: pointer;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
 
-.titleLinkIcon {
-	margin-bottom: 0.2rem;
-}
-
-.islandBackground {
-	position: absolute;
-	width: 350px;
-}
-
-.CardContainer {
-	position: relative;
-	height: auto;
-	aspect-ratio: 1 / 1.3;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-family: utils.$font-family-base;
-	width: 350px;
-	min-width: 350px;
+	&:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+	}
 }
 
-.description > * {
-	margin: 0;
-	font-size: 1.05rem;
-	color: theme.$lighter-black;
+.text {
+	font-family: "Reddit Mono", monospace;
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 180%;
+	letter-spacing: 0.02em;
+	text-align: center;
+	color: rgba(153, 177, 203, 1);
+	max-width: 90%;
 }
 
-@include utils.media-breakpoint-up(md) {
-	.container {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		gap: 10px;
-		height: 450px;
-	}
-
-	.buttonImage {
-		width: 100px;
-	}
+.bold {
+	font-weight: 800;
+	color: rgba(202, 202, 202, 1);
 }
 
-@include utils.media-breakpoint-up(sm) {
-	.CardContainer {
-		width: 500px;
-		min-width: 500px;
-	}
-
-	.islandBackground {
-		width: 500px;
+@media (max-width: 480px) {
+	.frame {
+		width: 90%;
+		padding: 20px;
 	}
 
-	.group {
-		width: 300px;
+	.logo {
+		width: 60px;
 	}
 
-	.description > * {
-		font-size: 24px;
+	.text {
+		font-size: 15px;
 	}
 }
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
index 0085d02e..9ef8bfb2 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -1,7 +1,8 @@
 "use client";
-import Image from "next/image";
-import { Variants, motion, AnimatePresence, cubicBezier } from "framer-motion";
-import openNewWindow from "@/assets/icons/open-new-window.svg";
+import React from "react";
+import { motion, AnimatePresence, cubicBezier, Variants } from "framer-motion";
+import Link from "next/link";
+
 import styles from "./ResourceCard.module.scss";
 
 type Tag = {
@@ -11,28 +12,23 @@ type Tag = {
 
 interface ResourceCardProps {
 	title: string;
-	description: JSX.Element;
-	stickerSrc?: string;
-	links: Tag[];
-	islandBackground: string;
+	description: string | React.ReactNode;
+	image: string;
+	links?: Tag[];
 }
 
 const variant: Variants = {
 	initial: {
-		scale: 1.1,
+		scale: 1.05,
 		opacity: 0,
-		rotateX: 20,
 		translateY: 30,
 	},
 	animate: {
 		scale: 1,
-		rotateX: 0,
 		opacity: 1,
 		translateY: 0,
 		transition: {
-			duration: 0.85,
-			staggerChildren: 0.1,
-			staggerDirection: -1,
+			duration: 0.8,
 			ease: cubicBezier(0.33, 1, 0.68, 1),
 		},
 	},
@@ -41,74 +37,55 @@ const variant: Variants = {
 export default function ResourceCard({
 	title,
 	description,
-	stickerSrc,
-	links,
-	islandBackground,
+	image,
+	links = [],
 }: ResourceCardProps) {
+	const mainLink = links.length > 0 ? links[0].link : null;
+
+	const renderedDescription =
+		typeof description === "string" ? (
+			<>
+				{description.includes(title) ? (
+					<>
+						<span className={styles.bold}>{title}</span>
+						{description.replace(title, "")}
+					</>
+				) : (
+					description
+				)}
+			</>
+		) : (
+			description
+		);
+
+	const content = (
+		<motion.div
+			className={styles.frame}
+			initial="initial"
+			whileInView="animate"
+			viewport={{ once: true }}
+			variants={variant}
+			whileHover={{ scale: 1.03 }}
+		>
+			<motion.img src={image} alt={`${title} logo`} className={styles.logo} />
+			<p className={styles.text}>{renderedDescription}</p>
+		</motion.div>
+	);
+
 	return (
 		<AnimatePresence mode="wait">
-			<motion.div className={styles.CardContainer}>
-				<motion.img
-					src={islandBackground}
-					alt="island"
-					initial="initial"
-					viewport={{ once: true }}
-					whileInView="animate"
-					className={styles.islandBackground}
-					variants={variant}
-				/>
-				<motion.div
-					variants={variant}
-					initial="initial"
-					whileInView="animate"
-					viewport={{ once: true }}
-					className={styles.group}
+			{mainLink ? (
+				<Link
+					href={mainLink}
+					target="_blank"
+					rel="noopener noreferrer"
+					className={styles.cardLinkWrapper}
 				>
-					<div className={styles.container + " text-center px-3"}>
-						{stickerSrc && (
-							<motion.img
-								src={stickerSrc}
-								alt="Resource logo"
-								className={styles.buttonImage}
-								variants={variant}
-							/>
-						)}
-						<h3>
-							{links && links[0] ? (
-								<motion.a
-									href={links[0].link}
-									target="_blank"
-									rel="noopener noreferrer"
-									className={styles.titleLink}
-								>
-									{title}
-								</motion.a>
-							) : (
-								title
-							)}{" "}
-							{links.map(({ text, link }) => (
-								<motion.a
-									className={"d-inline ms-1 vertical-align-middle"}
-									variants={variant}
-									key={link}
-									href={link}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									<Image
-										className={styles.titleLinkIcon}
-										src={openNewWindow}
-										width="20"
-										height="20"
-										alt="Open link in new window"
-									/>
-								</motion.a>
-							))}
-						</h3>
-						<div className={styles.description}>{description}</div>
-					</div>
-				</motion.div>
-			</motion.div>
+					{content}
+				</Link>
+			) : (
+				content
+			)}
 		</AnimatePresence>
 	);
 }
diff --git a/apps/site/src/views/Resources/getResources.ts b/apps/site/src/views/Resources/getResources.ts
index b44370c5..d3847a8b 100644
--- a/apps/site/src/views/Resources/getResources.ts
+++ b/apps/site/src/views/Resources/getResources.ts
@@ -50,7 +50,7 @@ const Resources = z.array(
 export const getResources = cache(async (resourceType: string) => {
 	return Resources.parse(
 		await client.fetch(
-			`*[_type == 'resource' && resourceType == '${resourceType}']`,
+			`*[_type == 'resource' && resourceType == '${resourceType}'] | order(lower(title) asc)`,
 		),
 	);
 });
diff --git a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss
index 31fae379..3254ef0a 100644
--- a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss
+++ b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss
@@ -1,16 +1,23 @@
 @use "bootstrap-utils" as utils;
 
 .bottom-spacer {
-	margin-bottom: 50px;
-	width: 100%;
-	height: auto;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	margin: 0 auto 3rem;
+	width: fit-content;
+	max-width: 100%;
+	padding-left: 2rem;
 }
 
 .column {
+	flex: 1 1 320px;
 	display: flex;
-	flex-direction: row;
 	justify-content: center;
-	align-items: center;
+	align-items: stretch;
+	max-width: 420px;
 }
 
 .text {
@@ -50,3 +57,24 @@
 		font-size: 13px;
 	}
 }
+
+@include utils.media-breakpoint-down(md) {
+	.bottom-spacer {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.column {
+		max-width: 90%;
+	}
+}
+
+@include utils.media-breakpoint-down(sm) {
+	.text {
+		font-size: 13px;
+	}
+}
+
+.apiResources {
+	padding-top: 20vh;
+}
diff --git a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx
index fbcce4a0..81e0683e 100644
--- a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx
+++ b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx
@@ -10,34 +10,32 @@ import styles from "./ApiResources.module.scss";
 
 async function ApiResources() {
 	const resources = await getResources("api");
+	const builder = imageUrlBuilder(client);
+
 	return (
-		<div className="container">
+		<div className={`container ${styles.apiResources}`}>
 			<HeadingCard
 				title="API Resources"
-				description="Application Programming Interface (API) are interfaces or
-					communication protocols that simplify implementation and maintenance
-					of software. In order to access most API's, many languages use
-					HTTP protocol to communicate with the servers that host the API and
-					retrieve data."
+				description="Application Programming Interface (API) are interfaces or communication protocols that simplify implementation and maintenance of software. In order to access most APIs, many languages use HTTP protocol to communicate with the servers that host the API and retrieve data."
 			/>
 
 			<div className={styles["bottom-spacer"] + " row"}>
-				{resources.map(
-					({ _id, title, description, link, logo, background }) => (
+				{resources.map(({ _id, title, description, link, logo }) => {
+					const plainText =
+						description[0]?.children?.map((c: any) => c.text).join("") || "";
+
+					return (
 						<div className={styles.column + " col"} key={_id}>
 							<ResourceCard
 								key={_id}
 								title={title}
-								description={<PortableText value={description} />}
-								stickerSrc={imageUrlBuilder(client).image(logo).url()}
-								links={[{ text: "API Reference", link: link }]}
-								islandBackground={imageUrlBuilder(client)
-									.image(background)
-									.url()}
+								description={plainText}
+								image={builder.image(logo).url()}
+								links={[{ text: "API Reference", link }]}
 							/>
 						</div>
-					),
-				)}
+					);
+				})}
 			</div>
 		</div>
 	);
diff --git a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.module.scss b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.module.scss
index 52a2284e..3254ef0a 100644
--- a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.module.scss
+++ b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.module.scss
@@ -1,60 +1,80 @@
 @use "bootstrap-utils" as utils;
 
 .bottom-spacer {
-	margin-bottom: 50px;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	margin: 0 auto 3rem;
+	width: fit-content;
+	max-width: 100%;
+	padding-left: 2rem;
 }
 
 .column {
+	flex: 1 1 320px;
 	display: flex;
-	flex-direction: row;
 	justify-content: center;
-	margin-bottom: 20px;
-	gap: 60px;
+	align-items: stretch;
+	max-width: 420px;
 }
 
-.card {
-	background-image: url("~@/assets/index_cards/backend-description-card.svg");
-	filter: drop-shadow(5px 5px 5px darkgray);
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 100% 100%;
-	height: 230px;
+.text {
+	font-size: 24px;
+	height: 60%;
+	width: 80%;
+	margin: auto;
 	position: relative;
-	display: flex;
-	justify-content: center;
+	top: 10%;
 }
 
 .title {
+	top: 8%;
 	position: absolute;
-	top: 10%;
 }
 
-.text {
-	position: absolute;
-	bottom: 10%;
-	width: 90%;
-	height: 40%;
-	font-size: 24px;
+@include utils.media-breakpoint-down(xl) {
+	.text {
+		font-size: 22px;
+	}
 }
 
 @include utils.media-breakpoint-down(lg) {
-	.title {
-		font-size: 28px;
-		top: 20%;
+	.text {
+		font-size: 18px;
 	}
+}
 
+@include utils.media-breakpoint-down(md) {
 	.text {
-		font-size: 20px;
+		font-size: 15px;
 	}
 }
 
 @include utils.media-breakpoint-down(sm) {
-	.title {
-		font-size: 18px;
-		top: 20%;
+	.text {
+		font-size: 13px;
+	}
+}
+
+@include utils.media-breakpoint-down(md) {
+	.bottom-spacer {
+		flex-direction: column;
+		align-items: center;
 	}
 
+	.column {
+		max-width: 90%;
+	}
+}
+
+@include utils.media-breakpoint-down(sm) {
 	.text {
-		font-size: 14px;
+		font-size: 13px;
 	}
 }
+
+.apiResources {
+	padding-top: 20vh;
+}
diff --git a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx
index 0c7a4bf9..32cf7945 100644
--- a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx
+++ b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx
@@ -19,21 +19,22 @@ async function BackendResources() {
 					needs."
 			/>
 			<div className={styles["bottom-spacer"] + " row"}>
-				{resources.map(
-					({ _id, title, description, link, logo, background }) => (
+				{resources.map(({ _id, title, description, link, logo }) => {
+					const plainText =
+						description[0]?.children?.map((c: any) => c.text).join("") || "";
+
+					return (
 						<div className={styles.column + " col"} key={_id}>
 							<ResourceCard
+								key={_id}
 								title={title}
-								description={<PortableText value={description} />}
-								stickerSrc={urlImageBuilder(client).image(logo).url()}
-								islandBackground={urlImageBuilder(client)
-									.image(background)
-									.url()}
-								links={[{ text: "Reference", link: link }]}
+								description={plainText}
+								image={urlImageBuilder(client).image(logo).url()}
+								links={[{ text: "API Reference", link }]}
 							/>
 						</div>
-					),
-				)}
+					);
+				})}
 			</div>
 		</div>
 	);
diff --git a/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.module.scss b/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.module.scss
index ba6e17da..3254ef0a 100644
--- a/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.module.scss
+++ b/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.module.scss
@@ -1,58 +1,80 @@
 @use "bootstrap-utils" as utils;
 
 .bottom-spacer {
-	margin-bottom: 50px;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	margin: 0 auto 3rem;
+	width: fit-content;
+	max-width: 100%;
+	padding-left: 2rem;
 }
 
 .column {
+	flex: 1 1 320px;
 	display: flex;
-	flex-direction: row;
 	justify-content: center;
-	align-items: center;
+	align-items: stretch;
+	max-width: 420px;
 }
 
-.card {
-	background-image: url("~@/assets/index_cards/api-description-card.svg");
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 100% 100%;
-	height: 343px;
+.text {
+	font-size: 24px;
+	height: 60%;
+	width: 80%;
+	margin: auto;
 	position: relative;
-	display: flex;
-	justify-content: center;
-	margin-bottom: 30px;
+	top: 10%;
 }
 
 .title {
-	position: absolute;
 	top: 8%;
+	position: absolute;
 }
 
-.text {
-	position: absolute;
-	bottom: 25%;
-	width: 90%;
-	height: 40%;
-	font-size: 24px;
+@include utils.media-breakpoint-down(xl) {
+	.text {
+		font-size: 22px;
+	}
 }
 
 @include utils.media-breakpoint-down(lg) {
-	.title {
-		font-size: 28px;
+	.text {
+		font-size: 18px;
 	}
 }
 
-@include utils.media-breakpoint-only(md) {
+@include utils.media-breakpoint-down(md) {
 	.text {
-		font-size: 20px;
+		font-size: 15px;
 	}
 }
 
 @include utils.media-breakpoint-down(sm) {
-	.title {
-		font-size: 18px;
+	.text {
+		font-size: 13px;
 	}
+}
+
+@include utils.media-breakpoint-down(md) {
+	.bottom-spacer {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.column {
+		max-width: 90%;
+	}
+}
+
+@include utils.media-breakpoint-down(sm) {
 	.text {
-		font-size: 15px;
+		font-size: 13px;
 	}
 }
+
+.apiResources {
+	padding-top: 20vh;
+}
diff --git a/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx b/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx
index 30b9c0aa..95bd8c82 100644
--- a/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx
+++ b/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx
@@ -19,21 +19,22 @@ async function FrontendResources() {
 					frontend."
 			/>
 			<div className={styles["bottom-spacer"] + " row"}>
-				{resources.map(
-					({ _id, title, description, link, logo, background }) => (
+				{resources.map(({ _id, title, description, link, logo }) => {
+					const plainText =
+						description[0]?.children?.map((c: any) => c.text).join("") || "";
+
+					return (
 						<div className={styles.column + " col"} key={_id}>
 							<ResourceCard
+								key={_id}
 								title={title}
-								description={<PortableText value={description} />}
-								stickerSrc={urlImageBuilder(client).image(logo).url()}
-								islandBackground={urlImageBuilder(client)
-									.image(background)
-									.url()}
-								links={[{ text: "Reference", link: link }]}
+								description={plainText}
+								image={urlImageBuilder(client).image(logo).url()}
+								links={[{ text: "API Reference", link }]}
 							/>
 						</div>
-					),
-				)}
+					);
+				})}
 			</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 35550de2..6511f491 100644
--- a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
+++ b/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
@@ -6,9 +6,12 @@
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-	margin-top: 15vh;
-	margin-bottom: 5vh;
-	text-align: left;
+	min-height: 100vh;
+	margin: 0;
+}
+.header {
+	color: rgba(202, 202, 202, 1);
+	font-size: clamp(2.5rem, 5vw, 4rem);
 }
 
 .title {
@@ -17,7 +20,7 @@
 
 @include bootstrap.media-breakpoint-up(lg) {
 	.landing {
-		margin-top: 200px;
+		min-height: 90vh;
 		margin-bottom: 300px;
 	}
 }
diff --git a/apps/site/src/views/Resources/sections/Landing/Landing.tsx b/apps/site/src/views/Resources/sections/Landing/Landing.tsx
index 07f28126..b71593dc 100644
--- a/apps/site/src/views/Resources/sections/Landing/Landing.tsx
+++ b/apps/site/src/views/Resources/sections/Landing/Landing.tsx
@@ -6,12 +6,7 @@ import styles from "./Landing.module.scss";
 function Landing() {
 	return (
 		<div className={styles.landing}>
-			<h1 className="visually-hidden">Resources</h1>
-			<Image
-				src={resourcesTitle}
-				className={styles.title}
-				alt="resources title"
-			/>
+			<h1 className={styles.header}>Resources</h1>
 		</div>
 	);
 }
diff --git a/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.module.scss b/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.module.scss
index 52a2284e..8660f98a 100644
--- a/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.module.scss
+++ b/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.module.scss
@@ -1,60 +1,81 @@
 @use "bootstrap-utils" as utils;
 
 .bottom-spacer {
-	margin-bottom: 50px;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: center;
+	align-items: stretch;
+	gap: 2rem;
+	margin: 0 auto 3rem;
+	width: 100%;
+	max-width: 1300px;
+	padding-left: 2rem;
 }
 
 .column {
+	flex: 1 1 360px;
 	display: flex;
-	flex-direction: row;
 	justify-content: center;
-	margin-bottom: 20px;
-	gap: 60px;
+	align-items: stretch;
+	max-width: 400px;
 }
 
-.card {
-	background-image: url("~@/assets/index_cards/backend-description-card.svg");
-	filter: drop-shadow(5px 5px 5px darkgray);
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 100% 100%;
-	height: 230px;
+.text {
+	font-size: 24px;
+	height: 60%;
+	width: 80%;
+	margin: auto;
 	position: relative;
-	display: flex;
-	justify-content: center;
+	top: 10%;
 }
 
 .title {
+	top: 8%;
 	position: absolute;
-	top: 10%;
 }
 
-.text {
-	position: absolute;
-	bottom: 10%;
-	width: 90%;
-	height: 40%;
-	font-size: 24px;
+@include utils.media-breakpoint-down(xl) {
+	.text {
+		font-size: 22px;
+	}
 }
 
 @include utils.media-breakpoint-down(lg) {
-	.title {
-		font-size: 28px;
-		top: 20%;
+	.text {
+		font-size: 18px;
 	}
+}
 
+@include utils.media-breakpoint-down(md) {
 	.text {
-		font-size: 20px;
+		font-size: 15px;
 	}
 }
 
 @include utils.media-breakpoint-down(sm) {
-	.title {
-		font-size: 18px;
-		top: 20%;
+	.text {
+		font-size: 13px;
+	}
+}
+
+@include utils.media-breakpoint-down(md) {
+	.bottom-spacer {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.column {
+		max-width: 90%;
 	}
+}
 
+@include utils.media-breakpoint-down(sm) {
 	.text {
-		font-size: 14px;
+		font-size: 13px;
 	}
 }
+
+.apiResources {
+	padding-top: 20vh;
+}
diff --git a/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx b/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx
index 41ecd7b6..d2541d70 100644
--- a/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx
+++ b/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx
@@ -11,28 +11,29 @@ import styles from "./StarterPacks.module.scss";
 async function StarterPacks() {
 	const resources = await getResources("starter-pack");
 	return (
-		<div className="container">
+		<div className={`container ${styles.starterPacks}`}>
 			<HeadingCard
 				title="Starter Pack Resources"
 				description="Various starter packs to start you off on your coding journeys at
 					ZotHacks, featuring a variety of technologies and tech stacks!"
 			/>
 			<div className={styles["bottom-spacer"] + " row"}>
-				{resources.map(
-					({ _id, title, description, link, logo, background }) => (
+				{resources.map(({ _id, title, description, link, logo }) => {
+					const plainText =
+						description[0]?.children?.map((c: any) => c.text).join("") || "";
+
+					return (
 						<div className={styles.column + " col"} key={_id}>
 							<ResourceCard
+								key={_id}
 								title={title}
-								description={<PortableText value={description} />}
-								stickerSrc={urlImageBuilder(client).image(logo).url()}
-								islandBackground={urlImageBuilder(client)
-									.image(background)
-									.url()}
-								links={[{ text: "Reference", link: link }]}
+								description={plainText}
+								image={urlImageBuilder(client).image(logo).url()}
+								links={[{ text: "API Reference", link }]}
 							/>
 						</div>
-					),
-				)}
+					);
+				})}
 			</div>
 		</div>
 	);