diff --git a/docker-compose.yml b/docker-compose.yml
index d47c559b58557b9f63c786a55219164bdd1a1db2..ab607307e46bdb3a5fddd6877206b34fea3c7204 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -18,11 +18,13 @@ services:
   frontend:
     build: ./frontend
     ports:
-      - "8080:80"
+      - "8080:3000"
     environment:
       - REACT_APP_API_URL=http://localhost:3000/api
+      - NODE_ENV=development
     depends_on:
       - backend
+    command: npm start # Ensure it runs in development mode
 
   mysql:
     image: mysql:8.0
diff --git a/frontend/.env.development b/frontend/.env.development
new file mode 100644
index 0000000000000000000000000000000000000000..fe24afa7c7c2a5967b5176df52f106d36686fb54
--- /dev/null
+++ b/frontend/.env.development
@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:3000/api
\ No newline at end of file
diff --git a/frontend/.env.production b/frontend/.env.production
new file mode 100644
index 0000000000000000000000000000000000000000..a9c18278c7767f26eec535c7928bb90de474a79a
--- /dev/null
+++ b/frontend/.env.production
@@ -0,0 +1 @@
+REACT_APP_API_URL=https://corpsdirectory.discovery.cs.vt.edu/api
\ No newline at end of file
diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
index 6443a491df1ec8ed0027ef2163b222999efa00aa..a37cea1d3cd8fbc830ee087406cf7c8de77f77d6 100644
--- a/frontend/src/components/Home.js
+++ b/frontend/src/components/Home.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import axios from "axios";
 
 /*
@@ -11,9 +11,10 @@ function Home() {
 
   // always use the REACT_APP_API_URL instead of http://localhost:3000
   // bc our cluster has a different value for REACT_APP_API_URL
-  const url = `${process.env.API_URL}`;
+  const url = `${process.env.REACT_APP_API_URL}`;
 
-  console.log("URL: ", url);
+  console.log("URL after change: ", url);
+  console.log("Change");
 
   // async function to make the API call
   const fetchData = async () => {
@@ -28,7 +29,7 @@ function Home() {
   // useEffect to make the API call
   useEffect(() => {
     fetchData(); // Call the async function
-  }, []);
+  }, [fetchData]);
 
   return (
     <div>
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d563c0fb10ba0e42724b21286eb546ee4e5734fc..7ae3d713b4a426563eeed0ccca1f186b241aec93 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,10 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const apiUrl = process.env.REACT_APP_API_URL;
+const environment = process.env.NODE_ENV;
+const serverUrl =
+  environment === "development" ? "http://localhost:3000" : apiUrl;
+
+console.log(`App started on ${serverUrl} in ${environment} mode`);
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />