diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..9b68b9a5
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+APP_PORT=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index de9ee66e..231bf6cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+.env
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 84150d40..b2465422 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@reduxjs/toolkit": "^2.2.5",
         "axios": "^1.7.2",
+        "dotenv": "^16.4.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^9.1.2",
@@ -3036,6 +3037,17 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "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/package.json b/package.json
index 9f5bfb2a..b80e6ee4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
     "axios": "^1.7.2",
+    "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",
diff --git a/vite.config.ts b/vite.config.ts
index df1e7b16..6fcac650 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,14 +4,16 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import dotenv from 'dotenv';
 
+dotenv.config();
 // vite.config.ts
 export default defineConfig({
   plugins: [react()],
   server: {
     host: true,
     strictPort: true,
-    port: 8080,
+    port: process.env.APP_PORT ? parseInt(process.env.APP_PORT, 10) : undefined,
   },
   test: {
     globals: true,