diff --git a/frontend/src/components/__tests__/ProxyHostForm.test.tsx b/frontend/src/components/__tests__/ProxyHostForm.test.tsx
index b8dfacbd..8feca0a6 100644
--- a/frontend/src/components/__tests__/ProxyHostForm.test.tsx
+++ b/frontend/src/components/__tests__/ProxyHostForm.test.tsx
@@ -4,11 +4,16 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import ProxyHostForm from '../ProxyHostForm'
 import { mockRemoteServers } from '../../test/mockData'
 
-// Mock the API
-vi.mock('../../services/api', () => ({
-  remoteServersAPI: {
-    list: vi.fn(() => Promise.resolve(mockRemoteServers)),
-  },
+// Mock the hook
+vi.mock('../../hooks/useRemoteServers', () => ({
+  useRemoteServers: vi.fn(() => ({
+    servers: mockRemoteServers,
+    isLoading: false,
+    error: null,
+    createRemoteServer: vi.fn(),
+    updateRemoteServer: vi.fn(),
+    deleteRemoteServer: vi.fn(),
+  })),
 }))
 
 const queryClient = new QueryClient({
diff --git a/frontend/src/hooks/__tests__/useImport.test.ts b/frontend/src/hooks/__tests__/useImport.test.tsx
similarity index 100%
rename from frontend/src/hooks/__tests__/useImport.test.ts
rename to frontend/src/hooks/__tests__/useImport.test.tsx
diff --git a/frontend/src/hooks/__tests__/useProxyHosts.test.ts b/frontend/src/hooks/__tests__/useProxyHosts.test.tsx
similarity index 100%
rename from frontend/src/hooks/__tests__/useProxyHosts.test.ts
rename to frontend/src/hooks/__tests__/useProxyHosts.test.tsx
diff --git a/frontend/src/hooks/__tests__/useRemoteServers.test.ts b/frontend/src/hooks/__tests__/useRemoteServers.test.tsx
similarity index 100%
rename from frontend/src/hooks/__tests__/useRemoteServers.test.ts
rename to frontend/src/hooks/__tests__/useRemoteServers.test.tsx