diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 0000000..5317fce
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000
diff --git a/frontend/src/components/ApiTest.vue b/frontend/src/components/ApiTest.vue
index 543791d..2098452 100644
--- a/frontend/src/components/ApiTest.vue
+++ b/frontend/src/components/ApiTest.vue
@@ -15,7 +15,7 @@ export default {
   },
   methods: {
     test() {
-      fetch('http://localhost:3000/api/test')
+      fetch('${import.meta.env.VITE_API_URL}/api/test')
         .then((response) => response.json())
         .then((data) => {
           this.message = data.message
diff --git a/frontend/src/components/ChatRoom.vue b/frontend/src/components/ChatRoom.vue
index 7585338..6b94f09 100644
--- a/frontend/src/components/ChatRoom.vue
+++ b/frontend/src/components/ChatRoom.vue
@@ -58,7 +58,7 @@ export default {
     },
     fetchMessages() {
       axios
-        .get(`http://localhost:3000/rooms/${this.roomId}/messages`)
+        .get(`${import.meta.env.VITE_API_URL}/rooms/${this.roomId}/messages`)
         .then((response) => {
           this.messages = response.data
         })
@@ -68,7 +68,7 @@ export default {
     },
     sendMessage() {
       axios
-        .post(`http://localhost:3000/rooms/${this.roomId}/messages`, {
+        .post(`${import.meta.env.VITE_API_URL}/rooms/${this.roomId}/messages`, {
           content: this.newMessageContent,
           sender_name: this.senderName,
         })
diff --git a/frontend/src/components/ChatRooms.vue b/frontend/src/components/ChatRooms.vue
index 3c5d11e..932ec58 100644
--- a/frontend/src/components/ChatRooms.vue
+++ b/frontend/src/components/ChatRooms.vue
@@ -30,7 +30,7 @@ export default {
   methods: {
     fetchChatRooms() {
       axios
-        .get('http://localhost:3000/rooms')
+        .get(`${import.meta.env.VITE_API_URL}/rooms`)
         .then((response) => {
           this.chatRooms = response.data
         })
@@ -40,7 +40,7 @@ export default {
     },
     createRoom() {
       axios
-        .post('http://localhost:3000/rooms', {
+        .post(`${import.meta.env.VITE_API_URL}/rooms`, {
           name: this.newRoomName,
         })
         .then((response) => {