diff --git a/src/components/ResourceCard.svelte b/src/components/ResourceCard.svelte
index a9099d4..81e79ea 100644
--- a/src/components/ResourceCard.svelte
+++ b/src/components/ResourceCard.svelte
@@ -1,18 +1,23 @@
 <script>
-	import { slide } from 'svelte/transition';
-	import Button from './Button.svelte';
-	import Link from './Link.svelte';
+	import {  CircleArrowRight } from '@lucide/svelte';
+	import Link from '././Link.svelte';
 	let { title = '_Resource Title_', children, link = 'https://example.com' } = $props();
 </script>
 
-<div class="bg-ecsess-200 ring-6 ring-ecsess-600 hover:ring-ecsess-200/60 hover:shadow-3xl max-w-sm rounded-lg w-full transition-all" transition:slide>
-	<Link href={link}>
-		<div class="px-8 py-4">
-			<p class="text-ecsess-800 px-2 text-xl font-semibold lg:text-2xl">
-				{title}
+<div class="h-fit w-xl px-4 bg-ecsess-50 rounded-lg relative">
+	<div class="grid grid-cols-[5fr_1fr]">
+		<div class="flex flex-col items-start p-4">
+			<p class="text-ecsess-900 my-1 text-left text-xl font-semibold"> 
+				{title} 
+			</p>
+			<p class="text-ecsess-400 text-left"> 
+				{@render children()}
 			</p>
-
-			<p class="text-ecsess-black pt-3 text-base font-normal lg:text-lg">{@render children()}</p>
 		</div>
-	</Link>
+		<div class="absolute bottom-2 right-2">
+			<Link href={link}>
+				<CircleArrowRight size="42" class="stroke-ecsess-800 hover:stroke-ecsess-400 active:scale-90 transition duration-200 cursor-pointer"/>
+			</Link>
+		</div>
+	</div>
 </div>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index 0ba6188..5045f9c 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -9,7 +9,7 @@
 <Section>
 	<p class="page-title">Resources</p>
 
-	<div class="flex flex-col gap-8">
+	<div class="grid gap-4">
 		{#each data.resources as re}
 		<ResourceCard title={re.title} link={re.url}>
 			{re.description}