diff --git a/src/components/RichText.svelte b/src/components/RichText.svelte
new file mode 100644
index 0000000..fc36b7c
--- /dev/null
+++ b/src/components/RichText.svelte
@@ -0,0 +1,9 @@
+<script>
+    // NOTE: I think there could be a better way to do this
+	import { PortableText } from '@portabletext/svelte';
+	let { value } = $props();
+</script>
+
+<div id="test" class="prose prose-base lg:prose-lg **:text-ecsess-200">
+	<PortableText {value} />
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3550d05..682da97 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import FaqAccordion from 'components/FAQAccordion.svelte';
 	import Section from 'components/Section.svelte';
-	import { PortableText } from '@portabletext/svelte';
+	import RichText from 'components/RichText.svelte';
 	import OhSchedule from 'components/OHSchedule.svelte';
 
 	/** loading things from the server side */
@@ -18,9 +18,7 @@
 <Section>
 	<div class="flex h-1/2 flex-col items-center justify-center text-center">
 		<p class="page-title">What is ECSESS?</p>
-		<div id="test">
-			<PortableText value={data.description} />
-		</div>
+		<RichText value={data.description}/>
 
 		<br />
 		<p class="italic">