diff --git a/app/Community/AppServiceProvider.php b/app/Community/AppServiceProvider.php
index c68e825273..4f990474f9 100644
--- a/app/Community/AppServiceProvider.php
+++ b/app/Community/AppServiceProvider.php
@@ -16,6 +16,7 @@
 use App\Community\Commands\SyncVotes;
 use App\Community\Components\ActivePlayers;
 use App\Community\Components\DeveloperGameStatsTable;
+use App\Community\Components\ForumRecentPosts;
 use App\Community\Components\GlobalStatistics;
 use App\Community\Components\MessageIcon;
 use App\Community\Components\UserCard;
@@ -109,6 +110,7 @@ public function boot(): void
         Blade::component('active-players', ActivePlayers::class);
         Blade::component('developer-game-stats-table', DeveloperGameStatsTable::class);
         Blade::component('global-statistics', GlobalStatistics::class);
+        Blade::component('forum-recent-posts', ForumRecentPosts::class);
         Blade::component('user-card', UserCard::class);
         Blade::component('user-progression-status', UserProgressionStatus::class);
 
diff --git a/app/Community/Components/ForumRecentPosts.php b/app/Community/Components/ForumRecentPosts.php
new file mode 100644
index 0000000000..7cb4e217ee
--- /dev/null
+++ b/app/Community/Components/ForumRecentPosts.php
@@ -0,0 +1,84 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Community\Components;
+
+use App\Site\Enums\Permissions;
+use App\Site\Enums\UserPreference;
+use App\Site\Models\User;
+use App\Support\Shortcode\Shortcode;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\Component;
+
+class ForumRecentPosts extends Component
+{
+    private int $numToFetch = 4;
+    private ?User $user = null;
+
+    public function __construct(int $numToFetch = 4)
+    {
+        $this->user = Auth::user() ?? null;
+        $this->numToFetch = $numToFetch;
+    }
+
+    public function render(): ?View
+    {
+        $recentForumPosts = $this->prepareRecentForumPosts(
+            $this->numToFetch,
+            $this->user?->Permissions ?? Permissions::Unregistered,
+            $this->user?->websitePrefs ?? 0,
+        );
+
+        return view('community.components.forum.recent-posts', [
+            'recentForumPosts' => $recentForumPosts,
+            'userPreferences' => $this->user?->websitePrefs ?? 0,
+        ]);
+    }
+
+    private function prepareRecentForumPosts(int $numToFetch = 4, int $userPermissions = Permissions::Unregistered, int $userPreferences = 0): array
+    {
+        $recentForumPosts = [];
+        $rawRecentPosts = getRecentForumPosts(0, $numToFetch, 100, $userPermissions);
+
+        if ($rawRecentPosts->isEmpty()) {
+            return $recentForumPosts;
+        }
+
+        $isShowAbsoluteDatesPreferenceSet = $userPreferences && BitSet($userPreferences, UserPreference::Forum_ShowAbsoluteDates);
+
+        foreach ($rawRecentPosts as $rawRecentPost) {
+            $recentForumPosts[] = [
+                'ShortMsg' => $this->buildShortMessage($rawRecentPost),
+                'Author' => $rawRecentPost['Author'],
+                'ForumTopicTitle' => $rawRecentPost['ForumTopicTitle'],
+                'HasDateTooltip' => !$isShowAbsoluteDatesPreferenceSet,
+
+                // "viewtopic.php?t=12345&c=112233#112233"
+                'URL' => '/viewtopic.php?t='
+                    . $rawRecentPost['ForumTopicID'] . '&c=' . $rawRecentPost['CommentID']
+                    . '#' . $rawRecentPost['CommentID'],
+
+                'PostedAt' => $isShowAbsoluteDatesPreferenceSet
+                    ? getNiceDate(strtotime($rawRecentPost['PostedAt']))
+                    : Carbon::parse($rawRecentPost['PostedAt'])->diffForHumans(),
+
+                'TitleAttribute' => $isShowAbsoluteDatesPreferenceSet
+                    ? null
+                    : Carbon::parse($rawRecentPost['PostedAt'])->format('F j Y, g:ia'),
+            ];
+        }
+
+        return $recentForumPosts;
+    }
+
+    private function buildShortMessage(array $rawRecentPost): string
+    {
+        $shortMsg = trim($rawRecentPost['ShortMsg']);
+        $shortMsg = $rawRecentPost['IsTruncated'] ? $shortMsg . "..." : $shortMsg;
+
+        return Shortcode::stripAndClamp($shortMsg);
+    }
+}
diff --git a/app/Helpers/helpers.php b/app/Helpers/helpers.php
index 69798dfa64..eade16773f 100644
--- a/app/Helpers/helpers.php
+++ b/app/Helpers/helpers.php
@@ -38,7 +38,6 @@
 require_once __DIR__ . '/render/avatar.php';
 require_once __DIR__ . '/render/code-note.php';
 require_once __DIR__ . '/render/comment.php';
-require_once __DIR__ . '/render/forum.php';
 require_once __DIR__ . '/render/game.php';
 require_once __DIR__ . '/render/layout.php';
 require_once __DIR__ . '/render/leaderboard.php';
diff --git a/app/Helpers/render/forum.php b/app/Helpers/render/forum.php
deleted file mode 100644
index 8aa7141837..0000000000
--- a/app/Helpers/render/forum.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-use App\Site\Enums\Permissions;
-use App\Site\Enums\UserPreference;
-use App\Site\Models\User;
-use App\Support\Shortcode\Shortcode;
-use Illuminate\Support\Carbon;
-
-function RenderRecentForumPostsComponent(int $numToFetch = 4): void
-{
-    /** @var ?User $user */
-    $user = auth()->user();
-    $permissions = $user?->Permissions ?? Permissions::Unregistered;
-    $preferences = $user?->websitePrefs ?? 0;
-
-    echo "<div class='component'>";
-    echo "<h3>Forum Activity</h3>";
-
-    $recentPostData = getRecentForumPosts(0, $numToFetch, 100, $permissions);
-
-    if ($recentPostData->isNotEmpty()) {
-        $isShowAbsoluteDatesPreferenceSet = $preferences && BitSet($preferences, UserPreference::Forum_ShowAbsoluteDates);
-
-        foreach ($recentPostData as $nextData) {
-            $postedAt =
-                $isShowAbsoluteDatesPreferenceSet
-                    ? getNiceDate(strtotime($nextData['PostedAt']))
-                    : Carbon::parse($nextData['PostedAt'])->diffForHumans();
-
-            $shortMsg = trim($nextData['ShortMsg']);
-            if ($nextData['IsTruncated']) {
-                $shortMsg .= "...";
-            }
-            $author = $nextData['Author'];
-            $commentID = $nextData['CommentID'];
-            $forumTopicID = $nextData['ForumTopicID'];
-            $forumTopicTitle = $nextData['ForumTopicTitle'];
-
-            sanitize_outputs(
-                $shortMsg,
-                $author,
-                $forumTopicTitle,
-            );
-
-            $tooltipClassName = $isShowAbsoluteDatesPreferenceSet ? "" : "cursor-help";
-            $titleAttribute = $isShowAbsoluteDatesPreferenceSet
-                ? ""
-                : "title='" . Carbon::parse($nextData['PostedAt'])->format('F j Y, g:ia') . "'";
-
-            echo "<div class='embedded mb-1'>";
-            echo "<div class='flex justify-between items-center'><div>";
-            echo userAvatar($author, iconSize: 16);
-            echo " <span class='smalldate $tooltipClassName' $titleAttribute>$postedAt</span></div>";
-            echo "<div><a class='btn btn-link' href='/viewtopic.php?t=$forumTopicID&amp;c=$commentID#$commentID'>View</a></div>";
-            echo "</div>";
-            echo "in <a href='/viewtopic.php?t=$forumTopicID&amp;c=$commentID#$commentID'>$forumTopicTitle</a><br>";
-            echo "<div class='comment text-overflow-wrap'>";
-            echo Shortcode::stripAndClamp($shortMsg);
-            echo "</div>";
-            echo "</div>";
-        }
-    }
-
-    echo "<div class='text-right'><a class='btn btn-link' href='/forumposthistory.php'>more...</a></div>";
-
-    echo "</div>";
-}
diff --git a/public/forum.php b/public/forum.php
index 729bfc7060..11f672908f 100644
--- a/public/forum.php
+++ b/public/forum.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Site\Enums\Permissions;
+use Illuminate\Support\Facades\Blade;
 
 $requestedCategoryID = requestInputSanitized('c', null, 'integer');
 
@@ -132,8 +133,6 @@
 </article>
 <?php view()->share('sidebar', true) ?>
 <aside>
-    <?php
-    RenderRecentForumPostsComponent(8);
-    ?>
+    <?= Blade::render('<x-forum-recent-posts :numToFetch="8" />') ?>
 </aside>
 <?php RenderContentEnd(); ?>
diff --git a/public/reportissue.php b/public/reportissue.php
index 665efb470a..f8b2fae244 100644
--- a/public/reportissue.php
+++ b/public/reportissue.php
@@ -44,16 +44,35 @@
 
 RenderContentStart("Report Broken Achievement");
 ?>
+
 <script>
-function displayCore() {
-    if (['RetroArch', 'RALibRetro'].indexOf(document.getElementById('emulator').value) > -1) {
-        document.getElementById('core-row').style.display = '';
-    } else {
-        document.getElementById('core-row').style.display = 'none';
+function reportIssueComponent() {
+    return {
+        description: document.getElementById('description').value ?? '',
+        emulator: document.getElementById('emulator').value ?? '',
+
+        displayCore() {
+            if (['RetroArch', 'RALibRetro'].includes(this.emulator)) {
+                document.getElementById('core-row').style.display = '';
+            } else {
+                document.getElementById('core-row').style.display = 'none';
+            }
+        },
+
+        get descriptionIsNetworkProblem() {
+            const networkRegex = /(manual\s+unlock|internet)/ig;
+            return networkRegex.test(this.description);
+        },
+        
+        get descriptionIsUnhelpful() {
+            const unhelpfulRegex = /(n'?t|not?).*work/ig;
+            return this.description.length < 25 && unhelpfulRegex.test(this.description);
+        }
     }
 }
 </script>
-<article>
+
+<article x-data="reportIssueComponent()">
     <div class="navpath">
         <?= renderGameBreadcrumb($dataOut) ?>
         &raquo; <a href="/achievement/<?= $achievementID ?>">
@@ -110,11 +129,22 @@ function displayCore() {
             <tr>
                 <td><label for="emulator">Emulator</label></td>
                 <td>
-                    <select name="emulator" id="emulator" required data-bind="value: emulator">
+                    <select
+                        name="emulator"
+                        id="emulator"
+                        required
+                        x-model="emulator"
+                        @change="displayCore()"
+                    >
                         <option <?= empty(old('emulator')) ? 'selected' : '' ?> disabled hidden>Select your emulator...</option>
                         <?php foreach ($emulators as $emulator): ?>
                             <?php if (array_key_exists($consoleID, $emulator['systems'])): ?>
-                                <option value="<?= $emulator['handle'] ?>" <?= old('emulator') === $emulator['handle'] ? 'selected' : '' ?>><?= $emulator['handle'] ?></option>
+                                <option
+                                    value="<?= $emulator['handle'] ?>"
+                                    <?= old('emulator') === $emulator['handle'] ? 'selected' : '' ?>
+                                >
+                                    <?= $emulator['handle'] ?>
+                                </option>
                             <?php endif ?>
                         <?php endforeach ?>
                     </select>
@@ -123,9 +153,13 @@ function displayCore() {
             <tr>
                 <td><label for="emulator_version">Emulator Version</label></td>
                 <td>
-                    <input type="text" name="emulator_version" id="emulator_version" required
-                           placeholder="Emulator version"
-                           value="<?= old('emulator_version') ?>"
+                    <input
+                        type="text"
+                        name="emulator_version"
+                        id="emulator_version"
+                        required
+                        placeholder="Emulator version"
+                        value="<?= old('emulator_version') ?>"
                     >
 
                     <?=
@@ -142,9 +176,13 @@ function displayCore() {
                     <label for="core">Core</label>
                 </td>
                 <td>
-                    <input class="w-full" type="text" name="core" id="core"
-                           placeholder="Which core did you use?"
-                           value="<?= old('core') ?>"
+                    <input
+                        class="w-full"
+                        type="text"
+                        name="core"
+                        id="core"
+                        placeholder="Which core did you use?"
+                        value="<?= old('core') ?>"
                     >
                 </td>
             </tr>
@@ -190,43 +228,40 @@ function displayCore() {
             <tr>
                 <td><label for="description">Description</label></td>
                 <td colspan="2">
-                    <textarea class="w-full forum" name="description" id="description"
-                              style="height:160px" rows="5" cols="61" placeholder="Describe your issue here..."
-                              required data-bind="textInput: description"><?= old('description') ?></textarea>
-                    <p data-bind="visible: descriptionIsNetworkProblem">Please do not use this tool for network issues. See <a href='https://docs.retroachievements.org/FAQ/#how-can-i-get-credit-for-an-achievement-i-earned-but-wasnt-awarded'>here</a> for instructions on how to request a manual unlock.</p>
-                    <p data-bind="visible: descriptionIsUnhelpful">Please be more specific with your issue&mdash;such as by adding specific reproduction steps or what you did before encountering it&mdash;instead of simply stating that it doesn't work. The more specific, the better.</p>
+                    <textarea
+                        class="w-full forum"
+                        name="description"
+                        id="description"
+                        style="height:160px"
+                        rows="5"
+                        cols="61"
+                        placeholder="Describe your issue here..."
+                        required
+                        x-model="description"
+                    ><?= old('description') ?></textarea>
+
+                    <div x-cloak>
+                        <p x-show="descriptionIsNetworkProblem">
+                            Please do not use this tool for network issues.
+                            See <a href='https://docs.retroachievements.org/FAQ/#how-can-i-get-credit-for-an-achievement-i-earned-but-wasnt-awarded'>here</a>
+                            for instructions on how to request a manual unlock.
+                        </p>
+                        <p x-show="descriptionIsUnhelpful">
+                            Please be more specific with your issue&mdash;such as by adding specific reproduction steps or what you 
+                            did before encountering it&mdash;instead of simply stating that it doesn't work. The more specific, the better.
+                        </p>
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td></td>
                 <td colspan="2" class="text-right">
-                    <button class="btn" data-bind="disable: descriptionIsUnhelpful">Submit Issue Report</button>
+                    <button class="btn" :disabled="descriptionIsUnhelpful">Submit Issue Report</button>
                 </td>
             </tr>
             </tbody>
         </table>
     </form>
 </article>
-<script type="text/javascript">
-    // TODO replace with alpine
-    let ReportViewModel = function () {
-        this.description = ko.observable($('#description').val());
-        this.emulator = ko.observable($('#emulator').val());
-        this.emulator.subscribe(function () {
-            displayCore();
-        });
-
-        this.descriptionIsNetworkProblem = ko.pureComputed(function () {
-            let networkRegex = /(manual\s+unlock|internet)/ig;
-            return networkRegex.test(this.description());
-        }, this);
-
-        this.descriptionIsUnhelpful = ko.pureComputed(function () {
-            let unhelpfulRegex = /(n'?t|not?).*work/ig;
-            return this.description().length < 25 && unhelpfulRegex.test(this.description());
-        }, this);
-    };
-
-    ko.applyBindings(new ReportViewModel());
-</script>
+
 <?php RenderContentEnd(); ?>
diff --git a/public/viewforum.php b/public/viewforum.php
index 9f504b1758..6e6e43cbbd 100644
--- a/public/viewforum.php
+++ b/public/viewforum.php
@@ -2,6 +2,7 @@
 
 use App\Site\Enums\Permissions;
 use App\Support\Shortcode\Shortcode;
+use Illuminate\Support\Facades\Blade;
 
 authenticateFromCookie($user, $permissions, $userDetails);
 
@@ -167,6 +168,6 @@
 </article>
 <?php view()->share('sidebar', true) ?>
 <aside>
-    <?php RenderRecentForumPostsComponent(8); ?>
+    <?= Blade::render('<x-forum-recent-posts :numToFetch="8" />') ?>
 </aside>
 <?php RenderContentEnd(); ?>
diff --git a/resources/views/community/components/forum/recent-posts.blade.php b/resources/views/community/components/forum/recent-posts.blade.php
new file mode 100644
index 0000000000..373913a596
--- /dev/null
+++ b/resources/views/community/components/forum/recent-posts.blade.php
@@ -0,0 +1,39 @@
+@props([
+    'recentForumPosts' => [],
+    'userPreferences' => 0,
+])
+
+<div class="component">
+    <h3>Forum Activity</h3>
+
+    <div class="flex flex-col gap-y-1">
+        @foreach ($recentForumPosts as $recentForumPost)
+            <div class="embedded">
+                <div class="flex justify-between items-center">
+                    <div>
+                        {!! userAvatar($recentForumPost['Author'], iconSize: 16) !!}
+                        <span
+                            class="smalldate
+                            {{ $recentForumPost['HasDateTooltip'] ? 'cursor-help' : '' }}"
+                            @if ($recentForumPost['TitleAttribute']) title="{{ $recentForumPost['TitleAttribute'] }}" @endif
+                        >
+                            {{ $recentForumPost['PostedAt'] }}
+                        </span>
+                    </div>
+
+                    <a class="btn btn-link" href="{{ $recentForumPost['URL'] }}">View</a>
+                </div>
+
+                <p>in <a href="{{ $recentForumPost['URL'] }}">{{ $recentForumPost['ForumTopicTitle'] }}</a></p>
+
+                <p class="comment text-overflow-wrap">
+                    {{ $recentForumPost['ShortMsg'] }}
+                </p>
+            </div>
+        @endforeach
+    </div>
+
+    <div class="text-right">
+        <a class="btn btn-link" href="/forumposthistory.php">more...</a>
+    </div>
+</div>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index f1586416ac..4bd93f0f9d 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -18,12 +18,12 @@
 
     <x-active-players />
 
-    <x-user.online-count-chart />
+    <div class="mb-8">
+        <x-user.online-count-chart />
+    </div>
+    
     <x-claims.new-claims count="5" />
-
-    <?php
-        RenderRecentForumPostsComponent();
-    ?>
+    <x-forum-recent-posts />
 
     @slot('sidebar')
         @include('content.top-links')