diff --git a/app/Livewire/Settings/Billing.php b/app/Livewire/Settings/Billing.php
new file mode 100644
index 0000000..b19d5f6
--- /dev/null
+++ b/app/Livewire/Settings/Billing.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace App\Livewire\Settings;
+
+use App\Models\Subscription;
+use App\Services\Payments\PaymentOrchestrator;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('components.layouts.dashboard')]
+class Billing extends Component
+{
+    public $subscriptions;
+
+    public $showCancelModal = false;
+
+    public $subscriptionToCancel = null;
+
+    public $cancellationReason = '';
+
+    public function mount()
+    {
+        $this->loadBillingData();
+    }
+
+    public function loadBillingData()
+    {
+        $user = Auth::user();
+
+        // Get user's subscriptions
+        $this->subscriptions = $user->subscriptions()
+            ->with('plan')
+            ->orderBy('created_at', 'desc')
+            ->get();
+    }
+
+    public function managePolarSubscription()
+    {
+        $user = Auth::user();
+
+        try {
+            // Check if user has polar_cust_id
+            if (! $user->polar_cust_id) {
+                $this->dispatch('error', 'No Polar customer account found. Please create a subscription first.');
+
+                return;
+            }
+
+            $paymentOrchestrator = app(PaymentOrchestrator::class);
+            $activeProviders = $paymentOrchestrator->getActiveProviders();
+            $polarProvider = $activeProviders->first(function ($provider) {
+                return $provider->getName() === 'polar';
+            });
+
+            if (! $polarProvider || ! $polarProvider->isActive()) {
+                $this->dispatch('error', 'Polar payment provider is not available.');
+
+                return;
+            }
+
+            // Create customer portal session using user's polar_cust_id
+            $portalSession = $polarProvider->createCustomerPortalSession($user);
+
+            if (isset($portalSession['portal_url'])) {
+                return redirect()->away($portalSession['portal_url']);
+            }
+
+            $this->dispatch('error', 'Unable to access Polar billing portal.');
+
+        } catch (\Exception $e) {
+            Log::error('Failed to create Polar portal session', [
+                'user_id' => $user->id,
+                'polar_cust_id' => $user->polar_cust_id ?? 'none',
+                'error' => $e->getMessage(),
+            ]);
+
+            $this->dispatch('error', 'Failed to access Polar billing portal. Please try again.');
+        }
+    }
+
+    public function confirmCancelSubscription(Subscription $subscription)
+    {
+        // Verify ownership
+        if ($subscription->user_id !== Auth::id()) {
+            abort(403, 'Unauthorized');
+        }
+
+        $this->subscriptionToCancel = $subscription;
+        $this->showCancelModal = true;
+    }
+
+    public function cancelSubscription()
+    {
+        if (! $this->subscriptionToCancel) {
+            return;
+        }
+
+        try {
+            $reason = $this->cancellationReason ?: 'User requested cancellation via billing portal';
+            $success = $this->subscriptionToCancel->cancel($reason);
+
+            if ($success) {
+                $this->dispatch('success', 'Subscription cancelled successfully.');
+                $this->loadBillingData(); // Refresh data
+            } else {
+                $this->dispatch('error', 'Failed to cancel subscription. Please try again.');
+            }
+
+        } catch (\Exception $e) {
+            Log::error('Failed to cancel subscription', [
+                'subscription_id' => $this->subscriptionToCancel->id,
+                'user_id' => Auth::id(),
+                'error' => $e->getMessage(),
+            ]);
+
+            $this->dispatch('error', 'Failed to cancel subscription. Please try again.');
+        }
+
+        $this->reset(['showCancelModal', 'subscriptionToCancel', 'cancellationReason']);
+    }
+
+    public function syncSubscription(Subscription $subscription)
+    {
+        // Verify ownership
+        if ($subscription->user_id !== Auth::id()) {
+            abort(403, 'Unauthorized');
+        }
+
+        try {
+            $success = $subscription->syncWithProvider();
+
+            if ($success) {
+                $this->dispatch('success', 'Subscription synced successfully.');
+                $this->loadBillingData(); // Refresh data
+            } else {
+                $this->dispatch('error', 'Failed to sync subscription. Please try again.');
+            }
+
+        } catch (\Exception $e) {
+            Log::error('Failed to sync subscription', [
+                'subscription_id' => $subscription->id,
+                'user_id' => Auth::id(),
+                'error' => $e->getMessage(),
+            ]);
+
+            $this->dispatch('error', 'Failed to sync subscription. Please try again.');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.settings.billing');
+    }
+}
diff --git a/app/Services/Payments/Providers/PolarProvider.php b/app/Services/Payments/Providers/PolarProvider.php
index f0a4e9d..116fd92 100644
--- a/app/Services/Payments/Providers/PolarProvider.php
+++ b/app/Services/Payments/Providers/PolarProvider.php
@@ -257,7 +257,7 @@ class PolarProvider implements PaymentProviderContract
                 $subscription = Subscription::create([
                     'user_id' => $user->id,
                     'plan_id' => $plan->id,
-                    'type' => 'recurring',
+                    'type' => 'default',
                     'stripe_id' => $checkout['id'], // Using stripe_id field for Polar checkout ID
                     'stripe_status' => 'pending',
                     'provider' => $this->getName(),
@@ -529,20 +529,38 @@ class PolarProvider implements PaymentProviderContract
         try {
             $customer = $this->getOrCreateCustomer($user);
 
-            $response = $this->makeAuthenticatedRequest('POST', '/customer-portal', [
+            // Create customer session using correct Polar API endpoint
+            $response = $this->makeAuthenticatedRequest('POST', '/customer-sessions', [
                 'customer_id' => $customer['id'],
                 'return_url' => route('dashboard'),
             ]);
 
             if (! $response->successful()) {
-                Log::error('Polar customer portal creation failed: '.$response->body());
+                Log::error('Polar customer session creation failed: '.$response->body());
+                throw new \Exception('Failed to create customer session');
             }
 
-            $portal = $response->json();
+            $session = $response->json();
+
+            // Polar provides a direct customer_portal_url in the response
+            if (! isset($session['customer_portal_url'])) {
+                Log::error('Invalid Polar customer session response', [
+                    'response' => $session,
+                ]);
+                throw new \Exception('Invalid customer session response - missing portal URL');
+            }
+
+            Log::info('Polar customer portal session created successfully', [
+                'user_id' => $user->id,
+                'customer_id' => $customer['id'],
+                'portal_url' => $session['customer_portal_url'],
+            ]);
 
             return [
-                'portal_url' => $portal['url'],
+                'portal_url' => $session['customer_portal_url'],
                 'customer_id' => $customer['id'],
+                'session_token' => $session['token'] ?? null,
+                'expires_at' => $session['expires_at'] ?? null,
             ];
 
         } catch (\Exception $e) {
diff --git a/resources/views/components/settings/layout.blade.php b/resources/views/components/settings/layout.blade.php
index 05c0637..51ce7a2 100644
--- a/resources/views/components/settings/layout.blade.php
+++ b/resources/views/components/settings/layout.blade.php
@@ -2,6 +2,7 @@
     <div class="me-10 w-full pb-4 md:w-[220px]">
         <flux:navlist>
             <flux:navlist.item :href="route('settings.profile')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
+            <flux:navlist.item :href="route('settings.billing')" wire:navigate>{{ __('Billing') }}</flux:navlist.item>
             <flux:navlist.item :href="route('settings.password')" wire:navigate>{{ __('Password') }}</flux:navlist.item>
             <flux:navlist.item :href="route('settings.appearance')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
         </flux:navlist>
diff --git a/resources/views/livewire/settings/billing.blade.php b/resources/views/livewire/settings/billing.blade.php
new file mode 100644
index 0000000..da5ad12
--- /dev/null
+++ b/resources/views/livewire/settings/billing.blade.php
@@ -0,0 +1,265 @@
+<section class="w-full">
+    @include('partials.settings-heading')
+
+    <x-settings.layout :heading="__('Billing & Subscription')" :subheading="__('Manage your subscriptions and payment methods')">
+        <!-- Success/Error Messages -->
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                Livewire.on('success', function(message) {
+                    // Show success message
+                    const successDiv = document.createElement('div');
+                    successDiv.className = 'mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md';
+                    successDiv.innerHTML = '<div class="text-green-800 dark:text-green-200 text-sm">' + message + '</div>';
+                    // Insert at the beginning of the content area
+                    const contentArea = document.querySelector('.max-w-lg').parentElement;
+                    contentArea.insertBefore(successDiv, contentArea.firstChild);
+
+                    // Remove after 5 seconds
+                    setTimeout(() => successDiv.remove(), 5000);
+                });
+
+                Livewire.on('error', function(message) {
+                    // Show error message
+                    const errorDiv = document.createElement('div');
+                    errorDiv.className = 'mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md';
+                    errorDiv.innerHTML = '<div class="text-red-800 dark:text-red-200 text-sm">' + message + '</div>';
+                    // Insert at the beginning of the content area
+                    const contentArea = document.querySelector('.max-w-lg').parentElement;
+                    contentArea.insertBefore(errorDiv, contentArea.firstChild);
+
+                    // Remove after 5 seconds
+                    setTimeout(() => errorDiv.remove(), 5000);
+                });
+            });
+        </script>
+
+        <!-- Current Subscription -->
+        <div class="space-y-6">
+            <flux:heading level="2">{{ __('Current Subscription') }}</flux:heading>
+
+            @php
+                $latestActiveSubscription = $subscriptions->first(function($sub) {
+                    return $sub->isActive();
+                });
+
+                $latestSubscription = $subscriptions->first();
+                $isWithin30Minutes = $latestSubscription &&
+                    $latestSubscription->created_at->diffInMinutes(now()) <= 30;
+            @endphp
+
+            @if($latestActiveSubscription)
+                <div class="border rounded-lg p-6 dark:border-gray-700">
+                    <div class="flex items-start justify-between">
+                        <div class="flex-1">
+                            <div class="flex items-center gap-3">
+                                <flux:heading level="3">{{ $latestActiveSubscription->plan->name }}</flux:heading>
+                                <flux:badge variant="success">
+                                    {{ ucfirst($latestActiveSubscription->status) }}
+                                </flux:badge>
+                                <flux:badge variant="neutral">
+                                    {{ $latestActiveSubscription->getProviderDisplayName() }}
+                                </flux:badge>
+                            </div>
+
+                            <flux:text class="mt-2 text-gray-600 dark:text-gray-400">
+                                {{ $latestActiveSubscription->plan->description ?? 'Subscription plan' }}
+                            </flux:text>
+
+                            @if($latestActiveSubscription->isActive())
+                                <flux:text class="mt-1 text-sm text-gray-500 dark:text-gray-500">
+                                    @if($latestActiveSubscription->ends_at)
+                                        {{ __('Renews on :date', ['date' => $latestActiveSubscription->ends_at->format('M j, Y')]) }}
+                                    @else
+                                        {{ __('Active subscription') }}
+                                    @endif
+                                </flux:text>
+                            @endif
+
+                            @if($latestActiveSubscription->provider === 'activation_key' && $latestActiveSubscription->status === 'pending_activation')
+                                <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-md">
+                                    <flux:text class="text-sm text-yellow-800 dark:text-yellow-200">
+                                        {{ __('Activation Key:') }}
+                                        <code class="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded text-xs">
+                                            {{ $latestActiveSubscription->getProviderData('activation_key') }}
+                                        </code>
+                                    </flux:text>
+                                </div>
+                            @endif
+                        </div>
+
+                        <div class="mt-4 flex flex-col sm:flex-row sm:items-center sm:gap-2 space-y-2 sm:space-y-0">
+                            @if($latestActiveSubscription->provider === 'polar' && $latestActiveSubscription->isActive())
+                                <flux:button
+                                    wire:click="managePolarSubscription"
+                                    variant="outline"
+                                    size="sm"
+                                    class="w-full sm:w-auto cursor-pointer"
+                                >
+                                    {{ __('Manage in Polar') }}
+                                </flux:button>
+                            @endif
+
+                            @if(in_array($latestActiveSubscription->provider, ['polar']) && $latestActiveSubscription->isActive())
+                                <flux:button
+                                    wire:click="syncSubscription({{ $latestActiveSubscription->id }})"
+                                    variant="outline"
+                                    size="sm"
+                                    wire:loading.attr="disabled"
+                                    class="w-full sm:w-auto cursor-pointer"
+                                >
+                                    <span wire:loading.remove>{{ __('Sync') }}</span>
+                                    <span wire:loading>{{ __('Syncing...') }}</span>
+                                </flux:button>
+                            @endif
+
+                            @if($latestActiveSubscription->isActive() && $latestActiveSubscription->provider !== 'activation_key')
+                                <flux:button
+                                    wire:click="confirmCancelSubscription({{ $latestActiveSubscription->id }})"
+                                    variant="danger"
+                                    size="sm"
+                                    class="w-full sm:w-auto cursor-pointer"
+                                >
+                                    {{ __('Cancel') }}
+                                </flux:button>
+                            @endif
+                        </div>
+                    </div>
+                </div>
+            @else
+                <div class="text-center py-12 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
+                    <flux:text class="text-gray-500 dark:text-gray-400 mb-6">
+                        {{ __('You have no active subscriptions.') }}
+                    </flux:text>
+                    <flux:button variant="primary" href="{{ route('dashboard') }}" class="cursor-pointer">
+                        {{ __('Choose a plan') }}
+                    </flux:button>
+                </div>
+            @endif
+        </div>
+
+        <!-- Transaction History -->
+        <div class="mt-12 space-y-6">
+            <flux:heading level="2">{{ __('Transaction History') }}</flux:heading>
+
+            @if($subscriptions->count() > 0)
+                <div class="space-y-4">
+                    @foreach($subscriptions as $subscription)
+                        <div class="border rounded-lg p-4 dark:border-gray-700">
+                            <div class="flex items-start justify-between">
+                                <div class="flex-1">
+                                    <div class="flex items-center gap-3">
+                                        <flux:heading level="4">{{ $subscription->plan->name }}</flux:heading>
+                                        <flux:badge
+                                            variant="{{ $subscription->isActive() ? 'success' : ($subscription->isCancelled() ? 'danger' : 'warning') }}"
+                                        >
+                                            {{ ucfirst($subscription->status) }}
+                                        </flux:badge>
+                                        <flux:badge variant="neutral">
+                                            {{ $subscription->getProviderDisplayName() }}
+                                        </flux:badge>
+                                    </div>
+
+                                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                                        <div>{{ __('Created:') }} {{ $subscription->created_at->diffForHumans() }}</div>
+                                        @if($subscription->starts_at)
+                                            <div>{{ __('Started:') }} {{ $subscription->starts_at->diffForHumans() }}</div>
+                                        @endif
+                                        @if($subscription->ends_at)
+                                            <div>{{ __('Ends:') }} {{ $subscription->ends_at->diffForHumans() }}</div>
+                                        @endif
+                                        @if($subscription->cancelled_at)
+                                            <div>{{ __('Cancelled:') }} {{ $subscription->cancelled_at->diffForHumans() }}</div>
+                                        @endif
+                                    </div>
+
+                                    @if($subscription->provider === 'activation_key' && $subscription->status === 'pending_activation')
+                                        <div class="mt-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-md">
+                                            <flux:text class="text-xs text-yellow-800 dark:text-yellow-200">
+                                                {{ __('Activation Key:') }}
+                                                <code class="bg-yellow-100 dark:bg-yellow-800 px-1 py-0.5 rounded text-xs">
+                                                    {{ $subscription->getProviderData('activation_key') }}
+                                                </code>
+                                            </flux:text>
+                                        </div>
+                                    @endif
+                                </div>
+
+                                <div class="text-right">
+                                    <flux:text class="text-lg font-semibold">
+                                        ${{ number_format($subscription->plan->price, 2) }}
+                                    </flux:text>
+
+                                    @if($isWithin30Minutes && $subscription->id === $latestSubscription->id)
+                                        <div class="mt-2">
+                                            <flux:button
+                                                wire:click="syncSubscription({{ $subscription->id }})"
+                                                variant="primary"
+                                                size="sm"
+                                                wire:loading.attr="disabled"
+                                                class="cursor-pointer"
+                                            >
+                                                <span wire:loading.remove>{{ __('Recheck Status') }}</span>
+                                                <span wire:loading>{{ __('Checking...') }}</span>
+                                            </flux:button>
+                                        </div>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            @else
+                <div class="text-center py-8 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
+                    <flux:text class="text-gray-500 dark:text-gray-400">
+                        {{ __('No subscription history found.') }}
+                    </flux:text>
+                </div>
+            @endif
+        </div>
+
+        <!-- Cancel Subscription Modal -->
+        <flux:modal name="cancel-subscription" wire:model="showCancelModal">
+            <div class="space-y-4">
+                <flux:heading level="3">{{ __('Cancel Subscription') }}</flux:heading>
+
+                <flux:text>
+                    {{ __('Are you sure you want to cancel your subscription? This action cannot be undone.') }}
+                </flux:text>
+
+                @if($subscriptionToCancel)
+                    <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-md">
+                        <flux:text class="font-medium">{{ $subscriptionToCancel->plan->name }}</flux:text>
+                        <flux:text class="text-sm text-gray-600 dark:text-gray-400">
+                            {{ $subscriptionToCancel->getProviderDisplayName() }}
+                        </flux:text>
+                    </div>
+                @endif
+
+                <flux:input
+                    wire:model="cancellationReason"
+                    label="{{ __('Reason (optional)') }}"
+                    placeholder="{{ __('Why are you cancelling?') }}"
+                />
+
+                <div class="flex gap-3">
+                    <flux:button
+                        variant="outline"
+                        wire:click="$set('showCancelModal', false)"
+                        class="flex-1 cursor-pointer"
+                    >
+                        {{ __('Nevermind') }}
+                    </flux:button>
+                    <flux:button
+                        variant="danger"
+                        wire:click="cancelSubscription"
+                        wire:loading.attr="disabled"
+                        class="flex-1 cursor-pointer"
+                    >
+                        <span wire:loading.remove>{{ __('Cancel Subscription') }}</span>
+                        <span wire:loading>{{ __('Cancelling...') }}</span>
+                    </flux:button>
+                </div>
+            </div>
+        </flux:modal>
+    </x-settings.layout>
+</section>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 06e6c70..9752c92 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -39,6 +39,7 @@ use App\Livewire\Home;
 use App\Livewire\ListBlog;
 use App\Livewire\Page;
 use App\Livewire\Settings\Appearance;
+use App\Livewire\Settings\Billing;
 use App\Livewire\Settings\Password;
 use App\Livewire\Settings\Profile;
 use App\Models\Email;
@@ -174,6 +175,7 @@ Route::middleware(['auth'])->group(function (): void {
     Route::redirect('settings', 'settings/profile');
 
     Route::get('settings/profile', Profile::class)->name('settings.profile');
+    Route::get('settings/billing', Billing::class)->name('settings.billing');
     Route::get('settings/password', Password::class)->name('settings.password');
     Route::get('settings/appearance', Appearance::class)->name('settings.appearance');
 });