diff --git a/frontend/api/api.ts b/frontend/api/api.ts
index d495812a..34e8a786 100644
--- a/frontend/api/api.ts
+++ b/frontend/api/api.ts
@@ -6,7 +6,7 @@ import {
 } from "./types/types";
 
 const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:8000/";
-const middlewareURL =  import.meta.env.MIDDLEWARE_API_URL || "http://localhost:8000/";
+const middlewareURL =  import.meta.env.VITE_MIDDLEWARE_API_URL || "http://localhost:8000/";
 
 export const AlignImage = async (
   args: AlignImageArgs,
diff --git a/frontend/src/types/templates.ts b/frontend/src/types/templates.ts
index 693ac7f8..d331a394 100644
--- a/frontend/src/types/templates.ts
+++ b/frontend/src/types/templates.ts
@@ -20,7 +20,7 @@ export interface Template {
 type TemplateStatus = "Completed" | "In Progress" | "Deprecated";
 
 const MIDDLEWARE_URL =
-  import.meta.env.MIDDLEWARE_API_URL || "http://localhost:8081";
+  import.meta.env.VITE_MIDDLEWARE_API_URL || "http://localhost:8081";
 export const TemplateAPI = {
   getTemplates: async (): Promise<Template[]> => {
     const response = await fetch(`${MIDDLEWARE_URL}/templates`);