diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index f3900eff2..e0027b5e4 100755
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -87,11 +87,9 @@ class ProfileController extends Controller
      *
      * @author [A. Gianotto] [<snipe@snipe.net>]
      * @since [v4.0]
-     * @return View
      */
-    public function api()
+    public function api(): \Illuminate\Contracts\View\View
     {
-
         // Make sure the self.api permission has been granted
         if (!Gate::allows('self.api')) {
             abort(403);
diff --git a/app/Http/Livewire/PersonalAccessTokens.php b/app/Http/Livewire/PersonalAccessTokens.php
new file mode 100644
index 000000000..35ba3e1da
--- /dev/null
+++ b/app/Http/Livewire/PersonalAccessTokens.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
+use Illuminate\View\View;
+use Livewire\Component;
+
+class PersonalAccessTokens extends Component
+{
+    public $name;
+    public $newTokenString;
+
+    protected $listeners = ['openModal' => 'autoFocusModalEvent'];
+
+    //this is just an annoying thing to make the modal input autofocus
+    public function autoFocusModalEvent(): void
+    {
+        $this->dispatchBrowserEvent('autoFocusModal');
+    }
+
+    public function render()
+    {
+        return view('livewire.personal-access-tokens', [
+            'tokens' => Auth::user()->tokens,
+        ]);
+    }
+
+    public function rules(): array
+    {
+        return [
+            'name' => 'required|string|max:255',
+        ];
+    }
+
+    public function createToken(): void
+    {
+       $this->validate();
+
+       $newToken = Auth::user()->createToken($this->name);
+
+       $this->newTokenString = $newToken->accessToken;
+
+       $this->dispatchBrowserEvent('tokenCreated', $newToken->accessToken);
+    }
+
+    public function deleteToken($tokenId): void
+    {
+        //this needs safety (though the scope of auth::user might kind of do it...)
+        //seems like it does, test more
+        Auth::user()->tokens()->find($tokenId)->delete();
+    }
+}
diff --git a/resources/assets/js/components/passport/PersonalAccessTokens.vue b/resources/assets/js/components/passport/PersonalAccessTokens.vue
deleted file mode 100644
index b2b41e3b6..000000000
--- a/resources/assets/js/components/passport/PersonalAccessTokens.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<style scoped>
-    .action-link {
-        cursor: pointer;
-    }
-
-    .m-b-none {
-        margin-bottom: 0;
-    }
-</style>
-
-<template>
-    <div>
-        <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" @click="showCreateTokenForm">
-                            Create New Token
-                        </a>
-                    </div>
-                </div>
-
-                <div class="panel-body">
-                    <!-- No Tokens Notice -->
-                    <p class="m-b-none" v-if="tokens.length === 0">
-                        You have not created any personal access tokens.
-                    </p>
-
-                    <!-- Personal Access Tokens -->
-                    <table class="table table-borderless m-b-none" v-if="tokens.length > 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>
-
-                        <tbody>
-                            <tr v-for="token in tokens">
-                                <!-- 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" @click="revoke(token)">
-                                      <i class="fas fa-trash"></i>
-                                    </a>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-
-        <!-- Create Token Modal -->
-        <div class="modal fade" id="modal-create-token" tabindex="-1" role="dialog">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-
-                        <h4 class="modal-title">
-                            Create Token
-                        </h4>
-                    </div>
-
-                    <div class="modal-body">
-                        <!-- Form Errors -->
-                        <div class="alert alert-danger" v-if="form.errors.length > 0">
-                            <p><strong>Whoops!</strong> Something went wrong!</p>
-                            <br>
-                            <ul>
-                                <li v-for="error in form.errors">
-                                    {{ error }}
-                                </li>
-                            </ul>
-                        </div>
-
-                        <!-- Create Token Form -->
-                        <form class="form-horizontal" role="form" @submit.prevent="store">
-                            <!-- Name -->
-                            <div class="form-group">
-                                <label class="col-md-4 control-label" for="name">Name</label>
-
-                                <div class="col-md-6">
-                                    <input id="create-token-name" type="text" aria-label="name" class="form-control" name="name" v-model="form.name">
-                                </div>
-                            </div>
-
-                            <!-- Scopes -->
-                            <div class="form-group" v-if="scopes.length > 0">
-                                <label class="col-md-4 control-label">Scopes</label>
-
-                                <div class="col-md-6">
-                                    <div v-for="scope in scopes">
-                                        <div class="checkbox">
-                                            <label>
-                                                <input type="checkbox"
-                                                    @click="toggleScope(scope.id)"
-                                                    :checked="scopeIsAssigned(scope.id)">
-
-                                                    {{ scope.id }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-
-                    <!-- Modal Actions -->
-                    <div class="modal-footer">
-                        <button type="button" class="btn primary" data-dismiss="modal">Close</button>
-
-                        <button type="button" class="btn btn-primary" @click="store">
-                            Create
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Access Token Modal -->
-        <div class="modal fade" id="modal-access-token" tabindex="-1" role="dialog">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-
-                        <h4 class="modal-title">
-                            Personal Access Token
-                        </h4>
-                    </div>
-
-                    <div class="modal-body">
-                        <p>
-                            Here is your new personal access token. This is the only time it will be shown so don't lose it!
-                            You may now use this token to make API requests.
-                        </p>
-
-                        <pre><code>{{ accessToken }}</code></pre>
-                    </div>
-
-                    <!-- Modal Actions -->
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        props: ['tokenUrl', 'scopesUrl'],
-        /*
-         * The component's data.
-         */
-        data() {
-            return {
-                accessToken: null,
-
-                tokens: [],
-                scopes: [],
-
-                form: {
-                    name: '',
-                    scopes: [],
-                    errors: []
-                }
-            };
-        },
-
-        /**
-         * Prepare the component (Vue 1.x).
-         */
-        ready() {
-            this.prepareComponent();
-        },
-
-        /**
-         * Prepare the component (Vue 2.x).
-         */
-        mounted() {
-            this.prepareComponent();
-        },
-
-        methods: {
-            /**
-             * Prepare the component.
-             */
-            prepareComponent() {
-                this.getTokens();
-                this.getScopes();
-
-                $('#modal-create-token').on('shown.bs.modal', () => {
-                    $('#create-token-name').focus();
-                });
-            },
-
-            /**
-             * Get all of the personal access tokens for the user.
-             */
-            getTokens() {
-                this.$http.get(this.tokenUrl)
-                        .then(response => {
-                            this.tokens = response.data;
-                        });
-            },
-
-            /**
-             * Get all of the available scopes.
-             */
-            getScopes() {
-                this.$http.get(this.scopesUrl)
-                        .then(response => {
-                            this.scopes = response.data;
-                        });
-            },
-
-            /**
-             * Show the form for creating new tokens.
-             */
-            showCreateTokenForm() {
-                $('#modal-create-token').modal('show');
-            },
-
-            /**
-             * Create a new personal access token.
-             */
-            store() {
-                this.accessToken = null;
-
-                this.form.errors = [];
-
-                this.$http.post(this.tokenUrl, this.form)
-                        .then(response => {
-                            this.form.name = '';
-                            this.form.scopes = [];
-                            this.form.errors = [];
-
-                            this.tokens.push(response.data.token);
-
-                            this.showAccessToken(response.data.accessToken);
-                        })
-                        .catch(response => {
-                            if (typeof response.data === 'object') {
-                                this.form.errors = _.flatten(_.toArray(response.data));
-                            } else {
-                            console.dir(this.form);
-                                this.form.errors = ['Something went wrong. Please try again.'];
-                            }
-                        });
-            },
-
-            /**
-             * Toggle the given scope in the list of assigned scopes.
-             */
-            toggleScope(scope) {
-                if (this.scopeIsAssigned(scope)) {
-                    this.form.scopes = _.reject(this.form.scopes, s => s == scope);
-                } else {
-                    this.form.scopes.push(scope);
-                }
-            },
-
-            /**
-             * Determine if the given scope has been assigned to the token.
-             */
-            scopeIsAssigned(scope) {
-                return _.indexOf(this.form.scopes, scope) >= 0;
-            },
-
-            /**
-             * Show the given access token to the user.
-             */
-            showAccessToken(accessToken) {
-                $('#modal-create-token').modal('hide');
-
-                this.accessToken = accessToken;
-
-                $('#modal-access-token').modal('show');
-            },
-
-            /**
-             * Revoke the given token.
-             */
-            revoke(token) {
-                this.$http.delete(this.tokenUrl +'/'+ token.id)
-                        .then(response => {
-                            this.getTokens();
-                        });
-            }
-        }
-    }
-</script>
diff --git a/resources/assets/js/vue.js b/resources/assets/js/vue.js
index a5b903e51..916e8759a 100644
--- a/resources/assets/js/vue.js
+++ b/resources/assets/js/vue.js
@@ -21,10 +21,11 @@ Vue.component(
     require('./components/passport/AuthorizedClients.vue').default
 );
 
-Vue.component(
-    'passport-personal-access-tokens',
-    require('./components/passport/PersonalAccessTokens.vue').default
-);
+// This component has been removed and replaced with a Livewire implementation
+// Vue.component(
+//     'passport-personal-access-tokens',
+//     require('./components/passport/PersonalAccessTokens.vue').default
+// );
 
 // This component has been removed and replaced with a Livewire implementation
 // Vue.component(
diff --git a/resources/views/account/api.blade.php b/resources/views/account/api.blade.php
index 970871919..af263fb3b 100644
--- a/resources/views/account/api.blade.php
+++ b/resources/views/account/api.blade.php
@@ -1,23 +1,16 @@
 @extends('layouts/default')
-
 {{-- Page title --}}
 @section('title')
     {{ trans('account/general.personal_api_keys') }}
     @parent
 @stop
-
 {{-- Page content --}}
 @section('content')
-
-
         <div class="row">
             <div class="col-md-8">
 
                  @if (!config('app.lock_passwords'))
-                    <passport-personal-access-tokens
-                        token-url="{{ url('oauth/personal-access-tokens') }}"
-                        scopes-url="{{ url('oauth/scopes') }}">
-                    </passport-personal-access-tokens>
+                    <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 000000000..a2c55dff5
--- /dev/null
+++ b/resources/views/livewire/personal-access-tokens.blade.php
@@ -0,0 +1,169 @@
+<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');"
+                   wire:click="$emit('openModal')"
+                >
+                    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>
+                    </tbody>
+                @endforeach
+            </table>
+        </div>
+    </div>
+    <!-- Create Token Modal -->
+    <div wire:ignore.self class="modal fade" id="modal-create-token" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+
+                    <h4 class="modal-title">
+                        Create Token
+                    </h4>
+                </div>
+
+                <div class="modal-body">
+                    <!-- Form Errors -->
+                    @if($errors->has('name'))
+                        <div class="alert alert-danger"
+                        >
+                            <p><strong>Whoops!</strong> Something went wrong!</p>
+                            <br>
+                            <ul>
+                                <li
+                                >
+                                    @error('name') <span class="error">{{ $message }}</span> @enderror
+                                </li>
+                            </ul>
+                        </div>
+                    @endif
+
+                    <!-- Create Token Form -->
+                    <form class="form-horizontal" role="form"
+                    >
+                        <!-- Name -->
+                        <div class="form-group">
+                            <label class="col-md-4 control-label" for="name">Name</label>
+
+                            <div class="col-md-6">
+                                <input id="create-token-name" type="text" aria-label="name" class="form-control"
+                                       name="name"
+                                       wire:keydown.enter="createToken(name)"
+                                       {{-- defer because it's submitting as i type if i don't --}}
+                                       wire:model.defer="name"
+                                       autofocus
+                                >
+                            </div>
+                        </div>
+                    </form>
+
+                </div>
+
+                <!-- Modal Actions -->
+                <div class="modal-footer">
+                    <button type="button" class="btn primary" data-dismiss="modal">Close</button>
+
+                    <button type="button" class="btn btn-primary"
+                            wire:click="createToken(name)"
+                    >
+                        Create
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- View New Token Modal -->
+    <div class="modal fade" id="modal-access-token" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+
+                    <h4 class="modal-title">
+                        Personal Access Token
+                    </h4>
+                </div>
+
+                <div class="modal-body">
+                    <p>
+                        Here is your new personal access token. This is the only time it will be shown so don't lose it!
+                        You may now use this token to make API requests.
+                    </p>
+
+                    <pre><code>{{ $newTokenString }}</code></pre>
+                </div>
+
+                <!-- Modal Actions -->
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        window.addEventListener('tokenCreated', token => {
+            $('#modal-create-token').modal('hide');
+            $('#modal-access-token').modal('show');
+        })
+        window.addEventListener('autoFocusModal', function() {
+            $('#modal-create-token').on('shown.bs.modal', function() {
+                $(this).find('[autofocus]').focus();
+            });
+        })
+        // was trying to do a submit on the form when enter was pressed
+        window.addEventListener("keydown", function (event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        })
+    </script>
+</div>
\ No newline at end of file