diff --git a/src/Forum/Components/MissionRSVPs.php b/src/Forum/Components/MissionRSVPs.php
index 2ff7a0e..d1cf8e6 100644
--- a/src/Forum/Components/MissionRSVPs.php
+++ b/src/Forum/Components/MissionRSVPs.php
@@ -5,65 +5,36 @@
 namespace Forumify\PerscomPlugin\Forum\Components;
 
 use Forumify\PerscomPlugin\Perscom\Entity\Mission;
-use Forumify\PerscomPlugin\Perscom\Entity\MissionRSVP;
-use Forumify\PerscomPlugin\Perscom\Entity\PerscomUser;
-use Forumify\PerscomPlugin\Perscom\Entity\Unit;
-use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
-use Symfony\UX\LiveComponent\Attribute\LiveProp;
-use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
-#[AsLiveComponent('Perscom\\MissionRSVPs', '@ForumifyPerscomPlugin/frontend/components/mission_rsvps.html.twig')]
+#[AsTwigComponent('Perscom\\MissionStats', '@ForumifyPerscomPlugin/frontend/components/mission_stats.html.twig')]
 class MissionRSVPs
 {
-    #[LiveProp]
     public Mission $mission;
 
-    use DefaultActionTrait;
-
-    /**
-     * @return array<int, array{ unit: Unit, rsvps: array<array{ rsvp: MissionRSVP, user: PerscomUser }>}>
-     */
-    public function getRSVPs(): array
+    public function getGoing(): int
     {
-        $rsvps = [];
+        $count = 0;
+
         foreach ($this->mission->getRsvps() as $rsvp) {
-            $user = $rsvp->getUser();
-            if ($user === null) {
-                continue;
+            if ($rsvp->isGoing() === true) {
+                $count++;
             }
-
-            $rsvps[] = [
-                'rsvp' => $rsvp,
-                'user' => $user,
-            ];
         }
 
-        return $this->groupByUnit($rsvps);
+        return $count;
     }
 
-    /**
-     * @param array<array{ rsvp: MissionRSVP, user: PerscomUser }> $rsvps
-     * @return array<int, array{ unit: Unit, rsvps: array<array{ rsvp: MissionRSVP, user: PerscomUser }>}>
-     */
-    private function groupByUnit(array $rsvps): array
+    public function getAbsent(): int
     {
-        $units = [];
-        foreach ($rsvps as $rsvp) {
-            $user = $rsvp['user'];
-            $unit = $user->getUnit();
-            if ($unit === null) {
-                continue;
-            }
+        $count = 0;
 
-            $unitId = $unit->getPerscomId();
-            if (!isset($units[$unitId])) {
-                $units[$unitId]['unit'] = $unit;
+        foreach ($this->mission->getRsvps() as $rsvp) {
+            if ($rsvp->isGoing() === false) {
+                $count++;
             }
-
-            $units[$unitId]['rsvps'][] = $rsvp;
         }
 
-        uasort($units, fn (array $a, array $b): int => $a['unit']->getPosition() <=> $b['unit']->getPosition());
-        return $units;
+        return $count;
     }
 }
diff --git a/src/Forum/Components/MissionRoster.php b/src/Forum/Components/MissionRoster.php
new file mode 100644
index 0000000..c667f70
--- /dev/null
+++ b/src/Forum/Components/MissionRoster.php
@@ -0,0 +1,84 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Forumify\PerscomPlugin\Forum\Components;
+
+use Forumify\PerscomPlugin\Perscom\Entity\Mission;
+use Forumify\PerscomPlugin\Perscom\Entity\MissionRSVP;
+use Forumify\PerscomPlugin\Perscom\Entity\PerscomUser;
+use Forumify\PerscomPlugin\Perscom\Entity\Unit;
+use Forumify\PerscomPlugin\Perscom\Service\PerscomUserService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent('Forumify\\Perscom\\MissionRoster', '@ForumifyPerscomPlugin/frontend/components/mission_roster.html.twig')]
+class MissionRoster extends AbstractController
+{
+
+    public Mission $mission;
+
+    private array $rsvpsByUserId = [];
+    private ?array $unitsWithRSVPs = null;
+
+    public function __construct(
+        private readonly PerscomUserService $userService,
+    ) {
+    }
+
+    public function getUnitsWithRSVPs(): array
+    {
+        if ($this->unitsWithRSVPs !== null) {
+            return $this->unitsWithRSVPs;
+        }
+
+        $this->loadRSVPs();
+        $units = [];
+
+        foreach ($this->rsvpsByUserId as $rsvp) {
+            $user = $rsvp->getUser();
+            $unit = $user?->getUnit();
+
+            if ($unit && !isset($units[$unit->getId()])) {
+                $units[$unit->getId()] = $unit;
+            }
+        }
+
+        uasort($units, fn (Unit $a, Unit $b) => $a->getPosition() <=> $b->getPosition());
+        return $this->unitsWithRSVPs = $units;
+    }
+
+    public function getUsersInUnitWithRSVPs(Unit $unit): array
+    {
+        $this->loadRSVPs();
+        $users = [];
+
+        foreach ($unit->getUsers() as $user) {
+            if (isset($this->rsvpsByUserId[$user->getId()])) {
+                $users[$user->getId()] = $user;
+            }
+        }
+
+        $this->userService->sortPerscomUsers($users);
+        return $users;
+    }
+
+    public function getRSVPForUser(PerscomUser $user): ?MissionRSVP
+    {
+        $this->loadRSVPs();
+        return $this->rsvpsByUserId[$user->getId()] ?? null;
+    }
+
+    private function loadRSVPs(): void
+    {
+        if (!empty($this->rsvpsByUserId)) {
+            return;
+        }
+
+        foreach ($this->mission->getRsvps() as $rsvp) {
+            if ($user = $rsvp->getUser()) {
+                $this->rsvpsByUserId[$user->getId()] = $rsvp;
+            }
+        }
+    }
+}
diff --git a/templates/frontend/components/mission_roster.html.twig b/templates/frontend/components/mission_roster.html.twig
new file mode 100644
index 0000000..4ea5e76
--- /dev/null
+++ b/templates/frontend/components/mission_roster.html.twig
@@ -0,0 +1,34 @@
+<div {{ attributes }}>
+    {% set units = this.unitsWithRSVPs %}
+
+    {% if units is not empty %}
+        <ul>
+            {% for unit in units %}
+                {% set users = this.getUsersInUnitWithRSVPs(unit) %}
+                {% if users is not empty %}
+                    <li class="card mb-4">
+                        <div class="card-title">{{ unit.name }}</div>
+                        <ul class="card-body">
+                            {% for user in users %}
+                                <li class="text-small">
+                                    <a href="{{ path('perscom_user', { id: user.id }) }}" class="btn-link w-100">
+                                        {% include '@ForumifyPerscomPlugin/frontend/mission/components/soldier_row.html.twig' with {
+                                            soldier: user,
+                                            rsvp: this.getRSVPForUser(user)
+                                        } only %}
+                                    </a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    {% else %}
+        <div class="card">
+            <div class="card-body text-center text-muted">
+                No attendance has been marked yet.
+            </div>
+        </div>
+    {% endif %}
+</div>
diff --git a/templates/frontend/components/mission_rsvp_button.html.twig b/templates/frontend/components/mission_rsvp_button.html.twig
index 11fa77b..9cba9e2 100644
--- a/templates/frontend/components/mission_rsvp_button.html.twig
+++ b/templates/frontend/components/mission_rsvp_button.html.twig
@@ -1,45 +1,47 @@
 {% set rsvp = this.rsvp %}
 {% set going = rsvp is not null and rsvp.going %}
 <div {{ attributes }}>
-    <div {{ stimulus_controller('forumify/forumify-platform/menu', { placement: 'bottom-end' }) }}>
-        {% if going %}
-            <button class="btn-link" {{ stimulus_target('forumify/forumify-platform/menu', 'openButton') }}>
-                <i class="ph ph-check" style="color: green"></i>{{ 'perscom.mission.rsvp.going'|trans }}
-            </button>
-        {% elseif rsvp is not null %}
-            <button class="btn-link" {{ stimulus_target('forumify/forumify-platform/menu', 'openButton') }}>
-                <i class="ph ph-x-circle" style="color: red"></i>{{ 'perscom.mission.rsvp.not_going'|trans }}
-            </button>
-        {% else %}
-            <button class="btn-primary" {{ stimulus_target('forumify/forumify-platform/menu', 'openButton') }}>
-                <i class="ph ph-calendar"></i>{{ 'perscom.mission.rsvp.rsvp'|trans }}
-            </button>
-        {% endif %}
-        <div class="menu" {{ stimulus_target('forumify/forumify-platform/menu', 'menu') }}>
-            {% if rsvp is null or not going %}
-                <button class="btn-link" {{
-                    stimulus_action('live', 'action', parameters: { action: 'toggle', going: true })
-                        |stimulus_action('forumify/forumify-platform/menu', 'close')
-                }}>
-                    <i class="ph ph-check-circle" style="color: green"></i>{{ 'perscom.mission.rsvp.going'|trans }}
+    <div class="flex gap-2 items-center">
+        <div {{ stimulus_controller('forumify/forumify-platform/menu', { placement: 'bottom-end' }) }}>
+            {% if going %}
+                <button class="btn-link" {{ stimulus_target('forumify/forumify-platform/menu', 'openButton') }}>
+                    <i class="ph ph-check" style="color: green"></i>{{ 'perscom.mission.rsvp.going'|trans }}
                 </button>
-            {% endif %}
-            {% if rsvp is null or going %}
-                <button class="btn-link" {{
-                    stimulus_action('live', 'action', parameters: { action: 'toggle', going: false })
-                        |stimulus_action('forumify/forumify-platform/menu', 'close')
-                }}>
+            {% elseif rsvp is not null %}
+                <button class="btn-link" {{ stimulus_target('forumify/forumify-platform/menu', 'openButton') }}>
                     <i class="ph ph-x-circle" style="color: red"></i>{{ 'perscom.mission.rsvp.not_going'|trans }}
                 </button>
-            {% endif %}
-            {% if rsvp is not null %}
-                <button class="btn-link" {{
-                    stimulus_action('live', 'action', parameters: { action: 'cancel' })
-                        |stimulus_action('forumify/forumify-platform/menu', 'close')
-                }}>
-                    <i class="ph ph-prohibit-inset" style="color: gray"></i>{{ 'perscom.mission.rsvp.remove_rsvp'|trans }}
+            {% else %}
+                <button class="btn-primary" {{ stimulus_target('forumify/forumify-platform/menu', 'openButton') }}>
+                    <i class="ph ph-calendar"></i>{{ 'perscom.mission.rsvp.rsvp'|trans }}
                 </button>
             {% endif %}
+            <div class="menu" {{ stimulus_target('forumify/forumify-platform/menu', 'menu') }}>
+                {% if rsvp is null or not going %}
+                    <button class="btn-link" {{
+                    stimulus_action('live', 'action', parameters: { action: 'toggle', going: true })
+                    |stimulus_action('forumify/forumify-platform/menu', 'close')
+                    }}>
+                        <i class="ph ph-check-circle" style="color: green"></i>{{ 'perscom.mission.rsvp.going'|trans }}
+                    </button>
+                {% endif %}
+                {% if rsvp is null or going %}
+                    <button class="btn-link" {{
+                    stimulus_action('live', 'action', parameters: { action: 'toggle', going: false })
+                    |stimulus_action('forumify/forumify-platform/menu', 'close')
+                    }}>
+                        <i class="ph ph-x-circle" style="color: red"></i>{{ 'perscom.mission.rsvp.not_going'|trans }}
+                    </button>
+                {% endif %}
+                {% if rsvp is not null %}
+                    <button class="btn-link" {{
+                    stimulus_action('live', 'action', parameters: { action: 'cancel' })
+                    |stimulus_action('forumify/forumify-platform/menu', 'close')
+                    }}>
+                        <i class="ph ph-prohibit-inset" style="color: gray"></i>{{ 'perscom.mission.rsvp.remove_rsvp'|trans }}
+                    </button>
+                {% endif %}
+            </div>
         </div>
     </div>
 </div>
diff --git a/templates/frontend/components/mission_rsvps.html.twig b/templates/frontend/components/mission_rsvps.html.twig
deleted file mode 100644
index c9fc0f8..0000000
--- a/templates/frontend/components/mission_rsvps.html.twig
+++ /dev/null
@@ -1,29 +0,0 @@
-<div {{ attributes }}>
-    {% for rsvp in this.RSVPs %}
-        <div class="mb-2">
-            <h5>{{ rsvp.unit.name }}</h5>
-            <ul>
-                {% for userRsvp in rsvp.rsvps %}
-                    {% set user = userRsvp.user %}
-                    <li class="flex items-center gap-1">
-                        {% if user.rank is not null and user.rank.image is not null %}
-                            <img width="24px" height="24px" src="{{ asset(user.rank.image, 'perscom.asset') }}">
-                        {% endif %}
-                        {{ user.name }}
-                        {% if userRsvp.rsvp.going %}
-                            <i class="ph ph-check-circle" style="color: green"></i>
-                        {% else %}
-                            <i class="ph ph-x-circle" style="color: red"></i>
-                        {% endif %}
-                    </li>
-                {% endfor %}
-            </ul>
-        </div>
-    {% endfor %}
-</div>
-
-{% macro placeholder(props) %}
-    <div class="flex justify-center">
-        {% include '@Forumify/components/loader.html.twig' %}
-    </div>
-{% endmacro %}
diff --git a/templates/frontend/components/mission_stats.html.twig b/templates/frontend/components/mission_stats.html.twig
new file mode 100644
index 0000000..6cc901d
--- /dev/null
+++ b/templates/frontend/components/mission_stats.html.twig
@@ -0,0 +1,10 @@
+<div class="flex gap-10 justify-center mt-2">
+    <div class="flex flex-col">
+        <span style="color:green;">{{ this.getGoing }}</span>
+        {{ 'perscom.mission.rsvp.going'|trans }}
+    </div>
+    <div class="flex flex-col">
+        <span style="color:red;">{{ this.getAbsent }}</span>
+        {{ 'perscom.mission.rsvp.not_going'|trans }}
+    </div>
+</div>
diff --git a/templates/frontend/mission/components/soldier_row.html.twig b/templates/frontend/mission/components/soldier_row.html.twig
new file mode 100644
index 0000000..27a2546
--- /dev/null
+++ b/templates/frontend/mission/components/soldier_row.html.twig
@@ -0,0 +1,34 @@
+<div class="flex justify-between items-center w-100">
+    <div class="w-5 text-left">
+        {% if soldier.rank is not null and soldier.rank.image is not null %}
+            <img width="24px" height="24px" src="{{ asset(soldier.rank.image, 'perscom.asset') }}" alt="">
+        {% endif %}
+    </div>
+    <div class="w-35 text-center">
+        <span class="hide-phone">
+            {% if soldier.rank is not null %}
+                {{ soldier.rank.name }}
+            {% endif %}
+        </span>
+        {{ soldier.name }}
+    </div>
+    <div class="w-20 text-center hide-phone">
+        {% if soldier.position is not null %}
+            {{ soldier.position.name }}
+        {% endif %}
+    </div>
+    <div class="w-20 text-center hide-phone">
+        {% if soldier.position is not null %}
+            {{ soldier.specialty.name }}
+        {% endif %}
+    </div>
+    <div class="w-15 text-center">
+        {% if rsvp is not null %}
+            {% include '@ForumifyPerscomPlugin/frontend/mission/components/status.html.twig' with {
+                rsvp: rsvp
+            } only %}
+        {% else %}
+            <span class="text-muted">No RSVP</span>
+        {% endif %}
+    </div>
+</div>
diff --git a/templates/frontend/mission/components/status.html.twig b/templates/frontend/mission/components/status.html.twig
new file mode 100644
index 0000000..a18bef4
--- /dev/null
+++ b/templates/frontend/mission/components/status.html.twig
@@ -0,0 +1,14 @@
+{% set statusClass = '' %}
+{% set statusText = '' %}
+
+{% if rsvp.going == '1' %}
+    {% set statusClass = 'badge-success' %}
+    {% set statusText = 'Going' %}
+    {% set statusColor = 'green' %}
+{% elseif rsvp.going == '0' %}
+    {% set statusClass = 'badge-danger' %}
+    {% set statusText = 'Not Going' %}
+    {% set statusColor = 'red' %}
+{% endif %}
+
+<span class="badge {{ statusClass }}" style="color:{{ statusColor }};">{{ statusText }}</span>
diff --git a/templates/frontend/mission/mission.html.twig b/templates/frontend/mission/mission.html.twig
index 7ac741b..15cef60 100644
--- a/templates/frontend/mission/mission.html.twig
+++ b/templates/frontend/mission/mission.html.twig
@@ -39,35 +39,60 @@
             {% endif %}
         </div>
     </div>
-    {% if can('view_after_action_reports', mission.operation) and not mission.afterActionReports.empty %}
-        <div class="mb-8">
-            <h3>{{ 'perscom.mission.aars'|trans }}</h3>
-            {{ component('Perscom\\AfterActionReportList', { mission: mission }) }}
+    <div class="flex gap-2" {{ stimulus_controller('forumify/forumify-platform/tabs') }}>
+        <div class="w-20">
+            <div class="card">
+                <div class="card-body text-center">
+                    {% if mission.operation.image %}
+                        <div class="border-b">
+                            <img src="{{ asset(mission.operation.image, 'forumify.asset') }}" width="250px" height="auto">
+                        </div>
+                    {% endif %}
+                    {{ component('Perscom\\MissionStats', {mission: mission}) }}
+                    <div role="tablist" {{ stimulus_target('forumify/forumify-platform/tabs', 'tabs') }}>
+                        {% block tabs %}
+                            <button type="button" class="btn-outlined w-100 mt-2" data-tab-id="brief" >Briefing</button>
+                            <button type="button" class="btn-outlined w-100 mt-2" data-tab-id="attendance" >Attendance</button>
+                            <button type="button" class="btn-outlined w-100 mt-2" data-tab-id="aar" >After Action Reports</button>
+                        {% endblock %}
+                    </div>
+                </div>
+            </div>
         </div>
-    {% endif %}
-    <div>
-        <h3>{{ 'perscom.mission.mission'|trans }}</h3>
-        <p class="mb-2">
-            {{ 'perscom.mission.start'|trans }}
-            <span class="text-bold">{{ mission.start|format_date(true) }}</span>
-        </p>
-        {% if mission.end %}
-            <p class="mb-2">
-                {{ 'perscom.mission.end'|trans }}
-                <span class="text-bold">{{ mission.end|format_date(true) }}</span>
-            </p>
-        {% endif %}
-        <div class="box">
-            {{ mission.briefing|rich }}
+        <div class="mission_content w-80 d-none" {{ stimulus_target('forumify/forumify-platform/tabs', 'tabPanels') }}>
+            {% block tabpanels %}
+                <div id="brief">
+                    <div>
+                        <div class="box">
+                            <h3>{{ 'perscom.mission.mission'|trans }}</h3>
+                            <p class="mb-6">
+                                {{ 'perscom.mission.start'|trans }}
+                                <span class="text-bold">{{ mission.start|format_date(true) }}</span>
+                            </p>
+                            {% if mission.end %}
+                                <p class="mb-2">
+                                    {{ 'perscom.mission.end'|trans }}
+                                    <span class="text-bold">{{ mission.end|format_date(true) }}</span>
+                                </p>
+                            {% endif %}
+                            {{ mission.briefing|rich }}
+                        </div>
+                    </div>
+                </div>
+                <div id="attendance">
+                    <div id="attendance">
+                        {{ component('Forumify\\Perscom\\MissionRoster', {mission: mission}) }}
+                    </div>
+                </div>
+                <div id="aar">
+                    {% if can('view_after_action_reports', mission.operation) and not mission.afterActionReports.empty %}
+                        <div class="mb-8">
+                            <h3>{{ 'perscom.mission.aars'|trans }}</h3>
+                            {{ component('Perscom\\AfterActionReportList', { mission: mission }) }}
+                        </div>
+                    {% endif %}
+                </div>
+            {% endblock %}
         </div>
     </div>
-    {% if mission.operation.requestRsvp %}
-        <div class="mt-8">
-            <h3>{{ 'perscom.mission.rsvps'|trans }}</h3>
-            {{ component('Perscom\\MissionRSVPs', {
-                loading: 'lazy',
-                mission: mission,
-            }) }}
-        </div>
-    {% endif %}
 {% endblock %}