diff --git a/.gitignore b/.gitignore
index 3cf52cc..655dcc6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 5d79ca8..2a905fc 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   db:
     image: postgres:15
@@ -37,8 +35,11 @@ services:
       - app-network
 
   frontend:
-    build: ./frontend
-    env_file: ./.env
+    build: 
+      context: ./frontend
+      args:
+        VITE_API_URL: ${API_URL}
+
     ports:
       - "3000:80"
     depends_on:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 4321151..e6e67c7 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -4,6 +4,10 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+
 RUN npm run build
 
 # Production stage
diff --git a/frontend/src/utils/BlogList.tsx b/frontend/src/utils/BlogList.tsx
index 5e441b7..29c30b7 100644
--- a/frontend/src/utils/BlogList.tsx
+++ b/frontend/src/utils/BlogList.tsx
@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
+import { API_URL } from "./constants";
 
 export function BlogList() {
   const [content, setContent] = useState("");
   useEffect(() => {
-    fetch(`localhost:8000/get-blogs`)
+    fetch(`${API_URL}/get-blogs`)
       .then((res) => res.text())
       .then(setContent);
   }, []);