diff --git a/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js b/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js
new file mode 100644
index 0000000..2a9632d
--- /dev/null
+++ b/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js
@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import ApiKeyManager from '../../../src/views/ApiKeyManager.vue';
+
+/**
+ * Integration tests for refactored ApiKeyManager component
+ * Tests the use of BaseModal and refactored state management
+ */
+describe('ApiKeyManager - Integration Tests', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    // Create target element for Teleport (BaseModal uses Teleport)
+    const el = document.createElement('div');
+    el.id = 'modal-target';
+    document.body.appendChild(el);
+
+    // Mock localStorage
+    global.localStorage = {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+      removeItem: vi.fn(),
+      clear: vi.fn()
+    };
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+    document.body.innerHTML = '';
+    vi.clearAllMocks();
+  });
+
+  it('renders the API key manager page', () => {
+    wrapper = mount(ApiKeyManager);
+    expect(wrapper.find('.api-key-manager').exists()).toBe(true);
+    expect(wrapper.find('h1').text()).toBe('API Key Manager');
+  });
+
+  it('shows delete confirmation modal using BaseModal', async () => {
+    wrapper = mount(ApiKeyManager);
+    
+    // Find the button that triggers the delete modal
+    const deleteButton = wrapper.findAll('button').find(b => 
+      b.text().includes('Clear Stored Key') || b.text().includes('Delete')
+    );
+    
+    // Modal should not be visible initially
+    expect(document.querySelector('.modal-overlay')).toBeFalsy();
+  });
+
+  it('contains ChallongeApiKeyGuide component', () => {
+    wrapper = mount(ApiKeyManager);
+    // The guide component is conditionally rendered
+    expect(wrapper.findComponent({ name: 'ChallongeApiKeyGuide' }).exists()).toBe(true);
+  });
+
+  it('has proper form structure for API key input', () => {
+    wrapper = mount(ApiKeyManager);
+    
+    const input = wrapper.find('#api-key');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('password');
+  });
+});