diff --git a/app/Livewire/Member/Membership.php b/app/Livewire/Member/Membership.php
index 034e9fb..7a9721f 100644
--- a/app/Livewire/Member/Membership.php
+++ b/app/Livewire/Member/Membership.php
@@ -15,6 +15,8 @@
 #[Layout('components.layouts.member')]
 class Membership extends Component
 {
+    public ?MembershipModel $membership = null;
+
     public array $stats = [];
 
     public string $nextTierName = '';
@@ -31,7 +33,11 @@ class Membership extends Component
 
     public function mount()
     {
-        $membership = MembershipModel::with(['tier', 'tier.rewards'])->where('user_id', auth()->id())->first();
+        $this->membership = MembershipModel::with(['tier', 'tier.rewards'])->where('user_id', auth()->id())->first();
+
+        if (! $this->membership) {
+            return;
+        }
 
         $monthlyTierAddition = PointRecord::where('user_id', auth()->id())
             ->where('type', PointRecordType::TIER)
@@ -40,42 +46,42 @@ public function mount()
             ->whereMonth('created_at', now()->month)
             ->sum('change');
 
-        $nextTier = Tier::where('min_points', '>', $membership->tier_points)
+        $nextTier = Tier::where('min_points', '>', $this->membership->tier_points)
             ->orderBy('min_points', 'asc')
             ->first();
 
         $this->nextTierName = $nextTier ? $nextTier->name : 'Maksimal';
 
-        $this->currentPoints = $membership->tier_points;
+        $this->currentPoints = $this->membership->tier_points;
 
         $this->nextTierPoints = $nextTier ? $nextTier->min_points : 'Maksimal';
 
-        $this->progress = ($membership->tier_points / $nextTier->min_points) * 100;
+        $this->progress = ($this->membership->tier_points / $nextTier->min_points) * 100;
 
         $this->stats = [
             [
                 'title' => 'Poin Tier',
-                'value' => currency($membership->tier_points),
+                'value' => currency($this->membership->tier_points),
                 'description' => '+'.currency($monthlyTierAddition).' bulan ini',
             ],
             [
                 'title' => 'Tier Sekarang',
-                'value' => $membership->tier->name,
-                'description' => 'Terdaftar sejak '.formatDate($membership->created_at),
+                'value' => $this->membership->tier->name,
+                'description' => 'Terdaftar sejak '.formatDate($this->membership->created_at),
             ],
             [
                 'title' => 'Tier Selanjutnya',
                 'value' => $nextTier ? $nextTier->name : 'Maksimal',
-                'description' => $nextTier ? ($nextTier->min_points - $membership->tier_points).' poin lagi' : 'Anda sudah berada di tier tertinggi',
+                'description' => $nextTier ? ($nextTier->min_points - $this->membership->tier_points).' poin lagi' : 'Anda sudah berada di tier tertinggi',
             ],
             [
                 'title' => 'Poin Hadiah',
-                'value' => currency($membership->reward_points),
+                'value' => currency($this->membership->reward_points),
                 'description' => 'Nikmati hadiah sekarang',
             ],
         ];
 
-        $this->rewards = TierReward::where('tier_id', $membership->tier_id)
+        $this->rewards = TierReward::where('tier_id', $this->membership->tier_id)
             ->latest()
             ->get()
             ->map(fn ($reward) => [
diff --git a/resources/views/livewire/member/memberships.blade.php b/resources/views/livewire/member/memberships.blade.php
index 7cad2cc..82d1ee4 100644
--- a/resources/views/livewire/member/memberships.blade.php
+++ b/resources/views/livewire/member/memberships.blade.php
@@ -2,90 +2,104 @@
     <flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
 
     <div class="mt-6">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-            @foreach ($stats as $stat)
-                <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
-                    <div class="flex items-center justify-between">
-                        <flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
+        @if ($membership)
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                @foreach ($stats as $stat)
+                    <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
+                        <div class="flex items-center justify-between">
+                            <flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
+                        </div>
+                        <flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
+                        <flux:text size="lg">{{ $stat['description'] }}</flux:text>
                     </div>
-                    <flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
-                    <flux:text size="lg">{{ $stat['description'] }}</flux:text>
-                </div>
-            @endforeach
-        </div>
-
-        <div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
-            <h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
-            <div class="relative">
-                <div class="flex justify-between mb-2 text-sm text-gray-600">
-                    <flux:text>Sekarang: {{ $currentPoints }} poin</flux:text>
-                    <flux:text>Target: {{ $nextTierPoints }}</flux:text>
-                </div>
-                <div class="h-4 bg-white rounded-full overflow-hidden">
-                    <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
-                        style="width: {{ $progress }}%"></div>
-                </div>
-                <flux:heading class="mt-2">{{ $progress }} %</flux:heading>
+                @endforeach
             </div>
-        </div>
 
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <div class="lg:col-span-2">
-                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
-                    <flux:heading size="xl" class="text-2xl font-semibold mb-4">Redeem Hadiah
-                    </flux:heading>
+            <div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
+                <h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
+                <div class="relative">
+                    <div class="flex justify-between mb-2 text-sm text-gray-600">
+                        <flux:text>Sekarang: {{ $currentPoints }} poin</flux:text>
+                        <flux:text>Target: {{ $nextTierPoints }}</flux:text>
+                    </div>
+                    <div class="h-4 bg-white rounded-full overflow-hidden">
+                        <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
+                            style="width: {{ $progress }}%"></div>
+                    </div>
+                    <flux:heading class="mt-2">{{ $progress }} %</flux:heading>
+                </div>
+            </div>
 
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        @foreach ($rewards as $reward)
-                            <div class="bg-zinc-50 rounded-xl p-4">
-                                <div class="flex items-start gap-4">
-                                    <div class="flex-1">
-                                        <h3 class="font-semibold text-gray-900 mb-1">{{ $reward['name'] }}</h3>
-                                        <p class="text-sm text-gray-500 mb-3">Seharga {{ $reward['value'] }}</p>
-                                        <button
-                                            class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
-                                            Redeem
-                                        </button>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div class="lg:col-span-2">
+                    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+                        <flux:heading size="xl" class="text-2xl font-semibold mb-4">Redeem Hadiah
+                        </flux:heading>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            @foreach ($rewards as $reward)
+                                <div class="bg-zinc-50 rounded-xl p-4">
+                                    <div class="flex items-start gap-4">
+                                        <div class="flex-1">
+                                            <h3 class="font-semibold text-gray-900 mb-1">{{ $reward['name'] }}</h3>
+                                            <p class="text-sm text-gray-500 mb-3">Seharga {{ $reward['value'] }}</p>
+                                            <button
+                                                class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
+                                                Redeem
+                                            </button>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        @endforeach
-                    </div>
-                </flux:card>
-            </div>
-
-            <div class="lg:col-span-1">
-                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
-                    <flux:heading size="xl" class="text-2xl font-semibold mb-4">Riwayat Poin
-                    </flux:heading>
-
-                    <flux:table>
-                        <flux:table.columns>
-                            <flux:table.column>Tanggal</flux:table.column>
-                            <flux:table.column>Keterangan</flux:table.column>
-                            <flux:table.column>Poin</flux:table.column>
-                            <flux:table.column>Tipe</flux:table.column>
-                        </flux:table.columns>
-
-                        <flux:table.rows>
-                            @foreach ($pointRecords as $pointRecords)
-                                <flux:table.row>
-                                    <flux:table.cell>{{ $pointRecords['date'] }}</flux:table.cell>
-                                    <flux:table.cell>{{ $pointRecords['description'] }}</flux:table.cell>
-                                    <flux:table.cell variant="strong">
-                                        <flux:text
-                                            class="{{ $pointRecords['is_addition'] ? 'text-emerald-500' : 'text-red-500' }}">
-                                            {{ $pointRecords['is_addition'] ? '+' : '-' }}
-                                            {{ $pointRecords['change'] }}
-                                        </flux:text>
-                                    </flux:table.cell>
-                                    <flux:table.cell>{{ $pointRecords['type'] }}</flux:table.cell>
-                                </flux:table.row>
                             @endforeach
-                        </flux:table.rows>
-                    </flux:table>
-                </flux:card>
+                        </div>
+                    </flux:card>
+                </div>
+
+                <div class="lg:col-span-1">
+                    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+                        <flux:heading size="xl" class="text-2xl font-semibold mb-4">Riwayat Poin
+                        </flux:heading>
+
+                        <flux:table>
+                            <flux:table.columns>
+                                <flux:table.column>Tanggal</flux:table.column>
+                                <flux:table.column>Keterangan</flux:table.column>
+                                <flux:table.column>Poin</flux:table.column>
+                                <flux:table.column>Tipe</flux:table.column>
+                            </flux:table.columns>
+
+                            <flux:table.rows>
+                                @foreach ($pointRecords as $pointRecords)
+                                    <flux:table.row>
+                                        <flux:table.cell>{{ $pointRecords['date'] }}</flux:table.cell>
+                                        <flux:table.cell>{{ $pointRecords['description'] }}</flux:table.cell>
+                                        <flux:table.cell variant="strong">
+                                            <flux:text
+                                                class="{{ $pointRecords['is_addition'] ? 'text-emerald-500' : 'text-red-500' }}">
+                                                {{ $pointRecords['is_addition'] ? '+' : '-' }}
+                                                {{ $pointRecords['change'] }}
+                                            </flux:text>
+                                        </flux:table.cell>
+                                        <flux:table.cell>{{ $pointRecords['type'] }}</flux:table.cell>
+                                    </flux:table.row>
+                                @endforeach
+                            </flux:table.rows>
+                        </flux:table>
+                    </flux:card>
+                </div>
             </div>
-        </div>
+        @else
+            <div class="flex justify-center flex-col">
+                <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
+                    loop style="width: 200px; height: 200px; margin: 0 auto;">
+                </dotlottie-wc>
+                <flux:text class="block text-center italic mt-5">
+                Apa? Anda belum menjadi member, ayo sini <flux:link href="#">daftar.</flux:link>
+                </flux:text>
+            </div>
+        @endif
     </div>
 </flux:main>
+@assets
+    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
+@endassets