diff --git a/app/View/Components/personal-access-tokens.php b/app/View/Components/personal-access-tokens.php
new file mode 100644
index 000000000..79b4eab1a
--- /dev/null
+++ b/app/View/Components/personal-access-tokens.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class personal-access-tokens extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.personal-access-tokens');
+    }
+}
diff --git a/resources/views/account/api.blade.php b/resources/views/account/api.blade.php
index 970871919..8afe9a2a6 100644
--- a/resources/views/account/api.blade.php
+++ b/resources/views/account/api.blade.php
@@ -18,6 +18,8 @@
                         token-url="{{ url('oauth/personal-access-tokens') }}"
                         scopes-url="{{ url('oauth/scopes') }}">
                     </passport-personal-access-tokens>
+                    {{-- New Component --}}
+                    <x-personal-access-tokens.panel />
                  @else
                      <p class="help-block">{{ trans('general.feature_disabled') }}</p>
                 @endif
diff --git a/resources/views/components/personal-access-tokens/create-token-modal.blade.php b/resources/views/components/personal-access-tokens/create-token-modal.blade.php
new file mode 100644
index 000000000..4ac888d2f
--- /dev/null
+++ b/resources/views/components/personal-access-tokens/create-token-modal.blade.php
@@ -0,0 +1,87 @@
+@props([
+    'title' => 'Create Token',
+    ''
+])
+
+<!-- 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>
\ No newline at end of file
diff --git a/resources/views/components/personal-access-tokens/panel.blade.php b/resources/views/components/personal-access-tokens/panel.blade.php
new file mode 100644
index 000000000..043b3d81c
--- /dev/null
+++ b/resources/views/components/personal-access-tokens/panel.blade.php
@@ -0,0 +1,26 @@
+@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>
+
+</div>
\ No newline at end of file