diff --git a/code/websites/pokedex.online/src/views/ApiKeyManager.vue b/code/websites/pokedex.online/src/views/ApiKeyManager.vue
index 3258ba2..7429821 100644
--- a/code/websites/pokedex.online/src/views/ApiKeyManager.vue
+++ b/code/websites/pokedex.online/src/views/ApiKeyManager.vue
@@ -131,27 +131,25 @@
     </div>
 
     <!-- Delete Confirmation Modal -->
-    <div
-      v-if="showDeleteConfirm"
-      class="modal-overlay"
-      @click="showDeleteConfirm = false"
+    <BaseModal
+      v-model="showDeleteConfirm"
+      title="Delete API Key?"
+      size="small"
+      :close-on-overlay="true"
     >
-      <div class="modal" @click.stop>
-        <h3>Delete API Key?</h3>
-        <p>
-          Are you sure you want to clear the stored API key? You'll need to
-          enter it again to use the tournament tools.
-        </p>
-        <div class="modal-buttons">
-          <button @click="showDeleteConfirm = false" class="btn btn-secondary">
-            Cancel
-          </button>
-          <button @click="handleDeleteKey" class="btn btn-danger">
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
+      <p>
+        Are you sure you want to clear the stored API key? You'll need to
+        enter it again to use the tournament tools.
+      </p>
+      <template #footer>
+        <button @click="showDeleteConfirm = false" class="btn btn-secondary">
+          Cancel
+        </button>
+        <button @click="handleDeleteKey" class="btn btn-danger">
+          Delete
+        </button>
+      </template>
+    </BaseModal>
     <!-- Challonge API Key Guide Modal -->
     <ChallongeApiKeyGuide v-if="showGuide" @close="showGuide = false" />
   </div>