diff --git a/src/admin/add/index.php b/src/admin/add/index.php
index e1938297187126a49b0f75223fc7a4b9aa96fca0..867e12bdce63d3f227e108bc8111c0adfee54dec 100644
--- a/src/admin/add/index.php
+++ b/src/admin/add/index.php
@@ -37,6 +37,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
 
     </div>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?= NavbarAdmin() ?>
 
         <div class="authentication-form-wrapper">
diff --git a/src/admin/city/add/index.php b/src/admin/city/add/index.php
index 3ad65dee0cf52ad417b782107c894182b55af7b9..af6bf6874de17a7f14823dc2eaa96191932c9c75 100644
--- a/src/admin/city/add/index.php
+++ b/src/admin/city/add/index.php
@@ -40,6 +40,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
     </div>
 
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo NavbarAdmin();
         ?>
diff --git a/src/admin/city/edit/index.php b/src/admin/city/edit/index.php
index 450f599b66f42cb87f5eba4508ce5ad45beb43d3..294d0f42340ca39b6ae8c9e58ada735abccc67e5 100644
--- a/src/admin/city/edit/index.php
+++ b/src/admin/city/edit/index.php
@@ -22,6 +22,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
 
 <body>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo NavbarAdmin();
         ?>
diff --git a/src/admin/city/index.php b/src/admin/city/index.php
index faf6b8f433036e13f404bf6061f32c259cd88c4f..7829f6462bf756f33034b40c6fce4235af17c95e 100644
--- a/src/admin/city/index.php
+++ b/src/admin/city/index.php
@@ -21,6 +21,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
 
 <body>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo NavbarAdmin();
         ?>
diff --git a/src/admin/edit/index.php b/src/admin/edit/index.php
index f38e796bb2f7f17a9f98d53dd08c7c9bf27f5a4d..dda46c54585f615b4ce1aa6ae72e487ca98f1713 100644
--- a/src/admin/edit/index.php
+++ b/src/admin/edit/index.php
@@ -36,6 +36,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
 
     </div>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo NavbarAdmin();
         ?>
diff --git a/src/admin/edit/media/index.php b/src/admin/edit/media/index.php
index 16d152b3993a7b3a43e5c5ec1fab3b27dba45ed1..6a72c6c1f4e14227608391cce03272dfc8fbb3a8 100644
--- a/src/admin/edit/media/index.php
+++ b/src/admin/edit/media/index.php
@@ -22,6 +22,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
 
 <body>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo NavbarAdmin();
         ?>
diff --git a/src/admin/gym/index.php b/src/admin/gym/index.php
index 1a07ca6eedc8636f1fd274afe9e80bae4d8beb60..9373c45503b33540b8fa8655eb1711cc3bf622e5 100644
--- a/src/admin/gym/index.php
+++ b/src/admin/gym/index.php
@@ -25,6 +25,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
 
 <body>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo NavbarAdmin();
         ?>
diff --git a/src/admin/index.php b/src/admin/index.php
index 3683995f414554370f866304311ad44f938214ee..1d5875762969b0eee8a6d37241388a56ff797789 100644
--- a/src/admin/index.php
+++ b/src/admin/index.php
@@ -46,6 +46,7 @@ $selectedSorting = $_GET["sorting"] ?? null;
             const priceRangeOption = <?php echo json_encode($priceRangeOption) ?>;
             const itemInPage = <?php echo json_encode($itemInPage) ?>;
             const searching = <?php echo json_encode($searching) ?>;
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
         </script>
         <?php
         echo NavbarAdmin();
diff --git a/src/home/gym/index.php b/src/home/gym/index.php
index 93c1d11d71d85a11c0be69005b2b15d575b5cb3d..c9e32d0a4f9fbb240adf8e3de656b018cbe32abc 100644
--- a/src/home/gym/index.php
+++ b/src/home/gym/index.php
@@ -35,6 +35,9 @@ $gym = GymService::getInstance()->getById($gym_id);
 
 <body>
     <div class="app">
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         echo Navbar();
         ?>
diff --git a/src/home/index.php b/src/home/index.php
index 0b58f84a4ab9a10ab88c632a47177a8502d1bb18..0c0bc46739db5372ccaebf1420bd01e618a4fb81 100644
--- a/src/home/index.php
+++ b/src/home/index.php
@@ -46,6 +46,7 @@ $selectedSorting = $_GET["sorting"] ?? null;
             const priceRangeOption = <?php echo json_encode($priceRangeOption) ?>;
             const itemInPage = <?php echo json_encode($itemInPage) ?>;
             const searching = <?php echo json_encode($searching) ?>;
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
         </script>
         <?php
             echo Navbar();
diff --git a/src/login/index.php b/src/login/index.php
index eff88c348018e464ac33609233b7cc2938b51b97..c7659cc31c5f81850c74173f2346362914fa98f5 100644
--- a/src/login/index.php
+++ b/src/login/index.php
@@ -23,6 +23,9 @@ AuthMiddleware::getInstance()->unsecureRouteLogin();
 </head>
 
 <body>
+    <script>
+        const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+    </script>
     <div class="authentication-form-wrapper">
         <div>
             <button class="authentication-pages-button" id="login-button-on-login">LOGIN</button>
diff --git a/src/public/css/style.css b/src/public/css/style.css
index 021cea177d9c87c81617b9d6836fac13f19b38bc..836d0eb496210bee88d38bf06ce4edc2cae3e198 100644
--- a/src/public/css/style.css
+++ b/src/public/css/style.css
@@ -261,7 +261,7 @@ input.input-search {
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
-  border: 1px solid var(--border-standard);
+  /* border: 1px solid var(--border-standard); */
   background: var(--navbar-color);
   color: var(--text-light);
   text-align: center;
diff --git a/src/public/javascript/admin.js b/src/public/javascript/admin.js
index 11861d1c2aa9647eab3fadffdcf08946c2e34c94..f016e1cd4c20e9e5d377f59413161aa2ebd60184 100644
--- a/src/public/javascript/admin.js
+++ b/src/public/javascript/admin.js
@@ -25,5 +25,6 @@ function deleteGymCall(gymId) {
   };
 
   xhr.open("DELETE", `/api/gym?gym_id=${gymId}`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send();
 }
diff --git a/src/public/javascript/city.js b/src/public/javascript/city.js
index 1843d653e8fa12db1c2d6c4599583624ff2806a7..d74532406826d4727f5d0f25616fd7c02d115e43 100644
--- a/src/public/javascript/city.js
+++ b/src/public/javascript/city.js
@@ -13,6 +13,7 @@ function addCityCall() {
   };
 
   xhr.open("POST", `/api/city/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(
     JSON.stringify({
       name: document.getElementById("city-name-field").value,
@@ -34,6 +35,7 @@ function editCityCall(cityId, newName) {
   };
 
   xhr.open("PUT", `/api/city/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(
     JSON.stringify({
       city_id: cityId,
@@ -56,5 +58,6 @@ function deleteCityCall(cityId) {
   };
 
   xhr.open("DELETE", `/api/city?city_id=${cityId}`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send();
 }
diff --git a/src/public/javascript/gym/filter.js b/src/public/javascript/gym/filter.js
index 5486e4cf5f4678a8b09624eddf08ae6c3378d149..bd07588612f6cd83ef060231f4367b159eb706c1 100644
--- a/src/public/javascript/gym/filter.js
+++ b/src/public/javascript/gym/filter.js
@@ -30,6 +30,7 @@ function getFilteredGyms(){
   };
   
   xhr.open("PUT", `/api/gym/filter`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(jsonParams);
 }
 // check if the params has a gym_name
diff --git a/src/public/javascript/gym/gym.js b/src/public/javascript/gym/gym.js
index b9d7f3b4e2f0fd521d610ed06b01d1be60ef3b07..caa004c28d287f4e651b8190938d785748dc6985 100644
--- a/src/public/javascript/gym/gym.js
+++ b/src/public/javascript/gym/gym.js
@@ -35,7 +35,7 @@ function addGymCall() {
     "monthly-price",
     document.getElementById("monthly-price-field").value
   );
-
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(formData);
 }
 
@@ -71,7 +71,7 @@ function editGymCall() {
     "monthly-price",
     document.getElementById("monthly-price-field").value
   );
-
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(
     JSON.stringify({
       gym_id: document.getElementById("gym-id-field").value,
@@ -112,6 +112,6 @@ function editGymMediaCall() {
   if (videoInput.files.length > 0) {
     formData.append("gym-video", videoInput.files[0]);
   }
-
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(formData);
 }
diff --git a/src/public/javascript/gym/rating.js b/src/public/javascript/gym/rating.js
index 09e07d5b4c94ff4fda693ae20966553e94ce0583..a0ef8bc5533019c440b781ca20776116ac99e726 100644
--- a/src/public/javascript/gym/rating.js
+++ b/src/public/javascript/gym/rating.js
@@ -44,6 +44,7 @@ function getRatings(gymId, username) {
   };
 
   xhr.open("GET", `/api/gym/rating?gym_id=${gymId}`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send();
 }
 
@@ -65,6 +66,7 @@ function updateAvgRatingCall(gymId) {
     }
   };
   xhr.open("PATCH", `/api/gym/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(JSON.stringify({ gym_id: gymId, update_rating: 'true' }));
 }
 
@@ -85,6 +87,7 @@ function newRatingCall(gymId) {
 
   xhr.open("POST", `/api/gym/rating/`, true);
   xhr.setRequestHeader("Content-type", "application/json");
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(JSON.stringify({ gym_id: gymId, new_rating: getRating() }));
 }
 
@@ -104,6 +107,7 @@ function updateRatingCall(gymId) {
   };
 
   xhr.open("PUT", `/api/gym/rating/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(JSON.stringify({ gym_id: gymId, new_rating: getRating() }));
 }
 
@@ -124,6 +128,7 @@ function deleteRatingCall(gymId) {
   };
 
   xhr.open("DELETE", `/api/gym/rating?gym_id=${gymId}`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send();
 }
 
diff --git a/src/public/javascript/gym/search.js b/src/public/javascript/gym/search.js
index cdcf1af999a0dc5b64a366824a7af0891cf76aea..dc079d2794bc79356089c4e642646b5ba7256c29 100644
--- a/src/public/javascript/gym/search.js
+++ b/src/public/javascript/gym/search.js
@@ -43,6 +43,7 @@ function callSearchGym(gym_name) {
     };
 
    xhr.open("GET", `/api/gym/`, true);
+   xhr.setRequestHeader("X-API-KEY", apikey);
    xhr.send(); 
 }
 
diff --git a/src/public/javascript/user.js b/src/public/javascript/user.js
index 775e3ecc44cbd96c1ab7d6be93dd7bf038ca5634..40f10e053d6ed8b228402fcc0a36330aef5e421f 100644
--- a/src/public/javascript/user.js
+++ b/src/public/javascript/user.js
@@ -18,6 +18,7 @@ function editUserCall() {
   const cityId = document.getElementById("city-change").value;
   const password = document.getElementById("password-field").value;
 
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(
     JSON.stringify({
       username: username,
@@ -43,6 +44,7 @@ function logoutCall() {
   };
 
   xhr.open("POST", `/api/logout/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send();
 }
 
@@ -65,6 +67,7 @@ function loginCall() {
   };
 
   xhr.open("POST", `/api/login/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(
     JSON.stringify({
       username: document.getElementById("username-field").value,
@@ -92,6 +95,7 @@ function signupCall() {
   };
 
   xhr.open("POST", `/api/signup/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send(
     JSON.stringify({
       username: document.getElementById("username-field").value,
@@ -120,5 +124,6 @@ function deleteAccountCall() {
   };
 
   xhr.open("DELETE", `/api/user/`, true);
+  xhr.setRequestHeader("X-API-KEY", apikey);
   xhr.send();
 }
diff --git a/src/setting/account/edit/index.php b/src/setting/account/edit/index.php
index a192899d5194dcd8664ff965ef10a75bdd661fd4..0507cabaa0e91cfdc19338626602ac218d750318 100644
--- a/src/setting/account/edit/index.php
+++ b/src/setting/account/edit/index.php
@@ -28,6 +28,9 @@ AuthMiddleware::getInstance()->unsecureRoute();
         <?php
         echo Navbar();
         ?>
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <?php
         $user = UserService::getInstance()->getUser();
         ?>
diff --git a/src/setting/index.php b/src/setting/index.php
index e65ce6a79bcc9abf7691c679a33a7fa59a2c7590..0cf22b378139d02ed264f3cc93b90efd2cd9001d 100644
--- a/src/setting/index.php
+++ b/src/setting/index.php
@@ -25,6 +25,9 @@ AuthMiddleware::getInstance()->unsecureRoute();
         <?php
         echo Navbar();
         ?>
+        <script>
+            const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+        </script>
         <h1 class="first-line-title">
             <img class="setting-icon" src="/public/icon/setting.svg" alt="icon" style="width: 38px;height: 38px;">
             Setting
diff --git a/src/signup/index.php b/src/signup/index.php
index 39a33a3ed31ab85cb1b4d8fbb81e2e6ac12f4c00..ce65c822e665c43f5641f848bce5afebc85731ec 100644
--- a/src/signup/index.php
+++ b/src/signup/index.php
@@ -26,6 +26,9 @@ session_start();
 </head>
 
 <body>
+    <script>
+        const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+    </script>
     <div class="authentication-form-wrapper">
         <div>
             <button onclick="location.href = '../login'" class="authentication-pages-button"