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 002a409f..df6fb43c 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -13,7 +13,9 @@
 	width: 238px;
 	height: 60px;
 	position: absolute;
-	top: -12.5%;
+	top: 3%;
+	left: 12%;
+	z-index: 10;
 }
 
 .container {
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
index 3a161736..be47f10c 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import { Variants, motion, AnimatePresence } from "framer-motion";
+import { Variants, motion, AnimatePresence, cubicBezier } from "framer-motion";
 import openNewWindow from "@/assets/icons/open-new-window.svg";
 import styles from "./ResourceCard.module.scss";
 
@@ -19,16 +19,21 @@ interface ResourceCardProps {
 
 const variant: Variants = {
 	initial: {
-		scale: 3,
+		scale: 1.1,
 		opacity: 0,
+		rotateX: 20,
+		translateY: 30,
 	},
 	animate: {
 		scale: 1,
+		rotateX: 0,
 		opacity: 1,
+		translateY: 0,
 		transition: {
-			delay: 0.2,
-			duration: 0.5,
+			duration: 0.85,
 			staggerChildren: 0.1,
+			staggerDirection: -1,
+			ease: cubicBezier(0.33, 1, 0.68, 1),
 		},
 	},
 };
@@ -42,56 +47,72 @@ export default function ResourceCard({
 }: ResourceCardProps) {
 	return (
 		<AnimatePresence mode="wait">
-			<motion.div
-				variants={variant}
-				initial="initial"
-				whileInView="animate"
-				viewport={{ once: true }}
-				className={styles.group}
-				style={{
-					backgroundColor: `${stickyNoteColor}`,
-				}}
-			>
+			<motion.div style={{ position: "relative" }}>
+				<motion.div
+					initial={{
+						scale: 1.1,
+						opacity: 0,
+						rotateX: 15,
+					}}
+					whileInView={{
+						scale: 1,
+						rotateX: 0,
+						opacity: 1,
+						transition: {
+							delay: 0.4,
+							duration: 0.5,
+							ease: cubicBezier(0.33, 1, 0.68, 1),
+						},
+					}}
+					className={styles.tape}
+				></motion.div>
 				<motion.div
-					className={styles.container + " text-center px-3"}
 					variants={variant}
+					initial="initial"
+					whileInView="animate"
+					viewport={{ once: true }}
+					className={styles.group}
+					style={{
+						backgroundColor: `${stickyNoteColor}`,
+					}}
 				>
-					<motion.div className={styles.tape} variants={variant}></motion.div>
-					{stickerSrc && (
-						<motion.img
-							src={stickerSrc}
-							alt="Resource logo"
-							width="100"
-							variants={variant}
-						/>
-					)}
-					<motion.h3 variants={variant}>{title}</motion.h3>
-					{description}
-				</motion.div>
+					<div className={styles.container + " text-center px-3"}>
+						{stickerSrc && (
+							<motion.img
+								src={stickerSrc}
+								alt="Resource logo"
+								width="100"
+								variants={variant}
+							/>
+						)}
+						<h3>{title}</h3>
+						{description}
+					</div>
 
-				{links.map(({ text, link }) => (
-					<motion.a
-						key={link}
-						href={link}
-						target="_blank"
-						rel="noopener noreferrer"
-						className={styles.tag}
-						variants={variant}
-					>
-						{text}
-						<motion.div
-							className="d-inline ms-1 vertical-align-middle"
+					{links.map(({ text, link }) => (
+						<motion.a
+							key={link}
+							href={link}
+							target="_blank"
+							rel="noopener noreferrer"
+							className={styles.tag}
 							variants={variant}
 						>
-							<Image
-								src={openNewWindow}
-								width="20"
-								height="20"
-								alt="Open link in new window"
-							/>
-						</motion.div>
-					</motion.a>
-				))}
+							{text}
+							<motion.div
+								className="d-inline ms-1 vertical-align-middle"
+								variants={variant}
+							>
+								<Image
+									src={openNewWindow}
+									width="20"
+									height="20"
+									alt="Open link in new window"
+								/>
+							</motion.div>
+						</motion.a>
+					))}
+				</motion.div>
 			</motion.div>
 		</AnimatePresence>
 	);