diff --git a/app/Http/Livewire/PersonalAccessTokens.php b/app/Http/Livewire/PersonalAccessTokens.php
new file mode 100644
index 0000000000..c9e30a9430
--- /dev/null
+++ b/app/Http/Livewire/PersonalAccessTokens.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\View;
+use Livewire\Component;
+
+class PersonalAccessTokens extends Component
+{
+    public function render()
+    {
+        return view('livewire.personal-access-tokens', [
+            'tokens' => Auth::user()->tokens,
+        ]);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'name' => 'required',
+            'scopes' => 'nullable|array',
+        ];
+    }
+
+    public function createToken(): void
+    {
+       Auth::user()->createToken($this->name, $this->scopes);
+    }
+
+    public function deleteToken($tokenId): void
+    {
+        Auth::user()->tokens()->where('id', $tokenId)->delete();
+    }
+
+    public function getTokensProperty(): array
+    {
+        return Auth::user()->tokens;
+    }
+}
diff --git a/resources/views/account/api.blade.php b/resources/views/account/api.blade.php
index 2e97c99748..8098ea7e35 100644
--- a/resources/views/account/api.blade.php
+++ b/resources/views/account/api.blade.php
@@ -18,8 +18,10 @@
 {{--                        token-url="{{ url('oauth/personal-access-tokens') }}"--}}
 {{--                        scopes-url="{{ url('oauth/scopes') }}">--}}
 {{--                    </passport-personal-access-tokens>--}}
-                    {{-- New Component --}}
-                    <x-personal-access-tokens.panel :tokens="$tokens" />
+                    {{-- New Blade Component --}}
+{{--                    <x-personal-access-tokens.panel :tokens="$tokens" />--}}
+                    {{-- New Livewire Component --}}
+                    <livewire:personal-access-tokens />
                  @else
                      <p class="help-block">{{ trans('general.feature_disabled') }}</p>
                 @endif
diff --git a/resources/views/livewire/personal-access-tokens.blade.php b/resources/views/livewire/personal-access-tokens.blade.php
new file mode 100644
index 0000000000..6f8fcaeb78
--- /dev/null
+++ b/resources/views/livewire/personal-access-tokens.blade.php
@@ -0,0 +1,85 @@
+@props([
+    'token_url' => url('oauth/personal-access-tokens'),
+    'scopes_url' => url('oauth/scopes'),
+])
+
+<div>
+    <p>New Personal Access Token Component</p>
+    <div>
+        <p>{{ $token_url }}</p>
+        <p>{{ $scopes_url }}</p>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <div class="text-right" style="display: flex; justify-content: space-between; align-items: center;">
+
+                <a class="btn btn-info btn-sm action-link pull-right"
+                   onclick="$('#modal-create-token').modal('show');"
+                >
+                    Create New Token
+                </a>
+            </div>
+        </div>
+        <div class="panel-body">
+            <!-- No Tokens Notice -->
+            @if($tokens->count() === 0)
+                <p class="m-b-none"
+                >
+                    You have not created any personal access tokens.
+                </p>
+            @endif
+
+            <!-- Personal Access Tokens -->
+            <table class="table table-borderless m-b-none">
+                @if($tokens->count() > 0)
+                    <thead>
+                    <tr>
+                        <th class="col-md-3">Name</th>
+                        <th class="col-md-2">Created</th>
+                        <th class="col-md-2">Expires</th>
+                        <th class="col-md-2"><span class="sr-only">Delete</span></th>
+                    </tr>
+                    </thead>
+                @endif
+                @foreach($tokens as $token)
+                    <tbody>
+                    <tr>
+                        <!-- Client Name -->
+
+                        <td style="vertical-align: middle;">
+                            {{ $token->name }}
+                        </td>
+
+                        <td style="vertical-align: middle;">
+                            {{ $token->created_at }}
+                        </td>
+
+                        <td style="vertical-align: middle;">
+                            {{ $token->expires_at }}
+                        </td>
+
+
+                        <!-- Delete Button -->
+                        <td style="vertical-align: middle;" class="text-right">
+                            <a class="action-link btn btn-danger btn-sm" wire:click="deleteToken({{ $token->id }})">
+                                <i class="fas fa-trash"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    @endforeach
+                    </tbody>
+            </table>
+        </div>
+
+
+
+    </div>
+
+    <!-- Create Token Modal -->
+    <x-personal-access-tokens.create-token-modal />
+
+    <!-- View New Token Modal -->
+    <x-personal-access-tokens.view-new-token />
+
+</div>
\ No newline at end of file