diff --git a/src/lib/components/reaction-quote.svelte b/src/lib/components/reaction-quote.svelte
new file mode 100644
index 0000000..5b982ea
--- /dev/null
+++ b/src/lib/components/reaction-quote.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    // currently available reactions: pointing, joy
+    let {
+        reaction,
+        text,
+    }: {
+        reaction: string;
+        text: string;
+    } = $props();
+
+    function getReactionAlt(r: string): string {
+        switch (r) {
+            case "joy":
+                return ""
+            default:
+                return "placeholder reaction"
+        }
+    }
+</script>
+
+<div class="reaction-container blurred-background">
+    <div class="reaction-content-container">
+        <img src="/reactions/{reaction}.webp" alt={getReactionAlt(reaction)}>
+        <p>{text}</p>
+    </div>
+</div>
+
+<style>
+    .reaction-container {
+        max-width: 800px;
+        margin: 32px auto;
+        overflow: hidden;
+    }
+
+    .reaction-content-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: 0 64px;
+        padding: 16px;
+        border-radius: var(--border-radius);
+        border-left: var(--border-style) var(--border-dash-size) var(--color-text);
+        border-right: var(--border-style) var(--border-dash-size) var(--color-text);
+        gap: 16px;
+    }
+
+    img {
+        width: 160px;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    @media screen and (max-width: 600px) {
+        .reaction-content-container {
+            flex-direction: column;
+            gap: 8px;
+        }
+    }
+
+    @media screen and (max-width: 450px) {
+        .reaction-content-container {
+            margin: 0 32px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/projects/apps/avhplan.md b/src/routes/projects/apps/avhplan.md
index 150a5be..7cc7bc7 100644
--- a/src/routes/projects/apps/avhplan.md
+++ b/src/routes/projects/apps/avhplan.md
@@ -1,18 +1,21 @@
 <script lang="ts">
     import ImageGallery from "$lib/lists/image-gallery.svelte";
+    import ReactionQuote from "$lib/components/reaction-quote.svelte";
 </script>
 
 **AvH-Vertretungsplan** was an app I developed back in 2019 to view the substitution plan of my school more easily, since I disliked the disorganised design of the school's website. The substitution app allowed me to be more quickly informed about my courses, as it notified me about any cancellations and changes in my schedule. It also allowed me to view the canteen offers, even though I'd never eaten at the school's canteen.
 
 The app was initially developed in Java and later converted into Kotlin as part of my Kotlin learning effort. The backend of the app – which I needed as the school website required a login to view the substitution plan – ran on a Raspberry Pi 3B using a Python script that scraped the website using Selenium and sent out notifications via Firebase. The Raspberry Pi crashed often and the script was not perfect, requiring me to frequently remote into the Pi using VNC, often while I was at school, to edit the script!
 
+<ReactionQuote
+    reaction="joy"
+    text="one of my favourite memories regarding this app is the time I first presented the app to my classmates. I had someone from my class help me in presenting; he did the intro, hyping up the crowd, and I followed up by showing and explaining the app. I'm still very grateful he decided to help me with this! Thanks, Leon!"
+    />
+
 Since the app was written for native Android but a few of my classmates had iPhones, I had an iOS version in the works, which was developed entirely on a MacOS VM running on my laptop and debugged using an iPhone simulator in Xcode. The app achieved feature parity with the Android version at one point, but since I lacked funding to pay the $99-a-year fee Apple charges developers, it was never published and thus abandoned.
 
 This app was genuinely one of my most fun projects, not only serving me as a handy tool, but also being a great playground for my programming practice, since it taught me to build UIs, use databases, and more. The app had been downloaded by 250 other students at my school, which I was – and still am – very proud of.
 
-<!-- reaction here -->
-<!-- one of my favourite memories regarding this app is the time I first presented the app to my classmates. I had someone from my class help me in presenting; he did the intro, hyping up the crowd, and I followed up by showing and explaining the app. I'm still very grateful he decided to help me with this! Thanks, Leon! -->
-
 <ImageGallery
     images={[
         {
diff --git a/static/reactions/joy.webp b/static/reactions/joy.webp
new file mode 100644
index 0000000..8f80b03
Binary files /dev/null and b/static/reactions/joy.webp differ
diff --git a/static/reactions/pointing.webp b/static/reactions/pointing.webp
new file mode 100644
index 0000000..8f80b03
Binary files /dev/null and b/static/reactions/pointing.webp differ