diff --git a/.github/workflows/ec2deploy.yaml b/.github/workflows/ec2deploy.yaml
index 6ddc9f4..9f35e08 100644
--- a/.github/workflows/ec2deploy.yaml
+++ b/.github/workflows/ec2deploy.yaml
@@ -8,6 +8,7 @@ on:
 env:
   AWS_PRIVATE_KEY: ${{ secrets.KEYAWS }}
   EC2_IP: ${{ secrets.EC2_IP }}
+  BACKEND_PORT: ${{ secrets.BACKEND_PORT }}
   SSH_OPTIONS: '-o StrictHostKeyChecking=no -i key.pem ubuntu@${{ secrets.EC2_IP }}'
 
 jobs:
@@ -51,6 +52,10 @@ jobs:
         run: |
           scp -o StrictHostKeyChecking=no -i key.pem -r ./tupan/ ubuntu@${{ env.EC2_IP }}:/home/ubuntu/tupan
 
+      - name: Create .env file
+        run: |
+          echo "BACKEND_URL=${{ env.EC2_IP }}:${{ env.BACKEND_PORT }}/" >> tupan/.env
+
       - name: SSH into AWS and build Docker image
         run: |
           ssh ${{ env.SSH_OPTIONS }} 'cd /home/ubuntu/tupan/tupan && sudo docker build -t tupan-front .'
diff --git a/tupan/.gitignore b/tupan/.gitignore
index fd3dbb5..6530858 100644
--- a/tupan/.gitignore
+++ b/tupan/.gitignore
@@ -19,6 +19,7 @@
 # misc
 .DS_Store
 *.pem
+.env
 
 # debug
 npm-debug.log*
diff --git a/tupan/package-lock.json b/tupan/package-lock.json
index ea2c116..2d328bf 100644
--- a/tupan/package-lock.json
+++ b/tupan/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@material-tailwind/react": "^2.1.10",
         "axios": "^1.7.7",
+        "dotenv": "^16.4.5",
         "flowbite": "^2.5.1",
         "highcharts": "^11.4.8",
         "js-cookie": "^3.0.5",
@@ -4095,6 +4096,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
diff --git a/tupan/package.json b/tupan/package.json
index 2da8113..ffde6ae 100644
--- a/tupan/package.json
+++ b/tupan/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@material-tailwind/react": "^2.1.10",
     "axios": "^1.7.7",
+    "dotenv": "^16.4.5",
     "flowbite": "^2.5.1",
     "highcharts": "^11.4.8",
     "js-cookie": "^3.0.5",
diff --git a/tupan/src/app/_api/index.ts b/tupan/src/app/_api/index.ts
index 514953e..a2c2a58 100644
--- a/tupan/src/app/_api/index.ts
+++ b/tupan/src/app/_api/index.ts
@@ -1 +1,4 @@
-export const api_route: string = 'http://localhost:8000/';
\ No newline at end of file
+import * as dotenv from 'dotenv';
+dotenv.config();
+
+export const api_route: string = process.env.BACKEND_URL || 'http://localhost:8000/';