diff --git a/src/backend/services/runtimeConfig.ts b/src/backend/services/runtimeConfig.ts
index 0ec1435..e06c1b8 100644
--- a/src/backend/services/runtimeConfig.ts
+++ b/src/backend/services/runtimeConfig.ts
@@ -1,6 +1,7 @@
 import { writeFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import logger from './logger.js';
+import config from './config';
 
 /**
  * Generates the runtime configuration file (env.js) for the frontend
@@ -32,6 +33,7 @@ export function generateRuntimeConfig(
     // Generate env.js content
     const envConfig = {
       basePath: basePath || '/',
+      FRONTEND_API_KEY: config.apiKeys.frontend,
     };
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx
index d565a2b..962f293 100644
--- a/src/frontend/src/main.tsx
+++ b/src/frontend/src/main.tsx
@@ -8,6 +8,7 @@ declare global {
   interface Window {
     env?: {
       basePath?: string;
+      FRONTEND_API_KEY: string;
     };
   }
 }
diff --git a/src/frontend/src/services/api.ts b/src/frontend/src/services/api.ts
index 7ed2621..26b78bc 100644
--- a/src/frontend/src/services/api.ts
+++ b/src/frontend/src/services/api.ts
@@ -21,7 +21,7 @@ const pathCombine = (baseUrl: string, path: string): string => {
 };
 
 const isDevelopment = import.meta.env.MODE === 'development';
-const API_KEY = import.meta.env.VITE_API_KEY || 'frontend-default-key';
+const API_KEY = window.env?.FRONTEND_API_KEY || import.meta.env.VITE_API_KEY;
 const BASE_URL = isDevelopment
   ? pathCombine(import.meta.env.VITE_API_URL, '/api')
   : '/api';