diff --git a/SAS/TMSS/frontend/tmss_webapp/package.json b/SAS/TMSS/frontend/tmss_webapp/package.json
index 6872d3d059ef72689f6d850b7aad5ef7e98b93a6..7fbe88927c013ce04bec99ec539f5ec28ea853cf 100644
--- a/SAS/TMSS/frontend/tmss_webapp/package.json
+++ b/SAS/TMSS/frontend/tmss_webapp/package.json
@@ -13,7 +13,8 @@
     "@testing-library/user-event": "^7.1.2",
     "ag-grid-community": "^24.1.0",
     "ag-grid-react": "^24.1.1",
-    "axios": "^0.21.4",
+    "axios": "^1.4.0",
+    "use-axios": "^1.0.0",
     "bootstrap": "^4.5.0",
     "chart.js": "^3.2.1",
     "cleave.js": "^1.6.0",
@@ -108,7 +109,9 @@
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.17.12",
     "babel-polyfill": "^6.26.0",
     "customize-cra": "^0.9.1",
-    "react-app-rewired": "^1.6.2"
+    "react-app-rewired": "^1.6.2",
+    "@babel/preset-env": "^7.22.4",
+    "babel-jest": "^29.5.0"
   },
   "resolutions": {
     "immer": "^9.0.12",
@@ -122,6 +125,15 @@
     "nth-check": "^2.0.1",
     "scss-tokenizer": "0.4.3"
   },
+  "jest": {
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    },
+    "transformIgnorePatterns": ["node_modules/(?!axios)/"]
+  },
+  "babel": {
+     "presets": ["@babel/preset-env"]
+  },
   "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
   "main": "index.js",
   "author": "",
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js b/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js
index 69e8224ac3df55fb12089dd4c2d124d405eb9549..e1a1116a410f345e11f7fffc5541ceb9404d6686 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js
@@ -1,7 +1,7 @@
 import AuthService from "../services/auth.service";
 import AuthStore from "./auth.store";
 import PermissionStackUtil from './permission.stack.handler';
-const axios = require('axios');
+import axios from "axios"
 
 /**
  * Global functions to authenticate user and get user details from browser local storage.
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js
index aca250709511632012f629127c867e829c7d5f0a..b38f37c54b9fc9353c23847f5e39ed725e88d797 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/auth.service.js
@@ -1,4 +1,4 @@
-const axios = require('axios');
+import axios from "axios"
 
 const AuthService = {
     authenticate: async(user, pass) => {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/cycle.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/cycle.service.js
index 82f5a480f1ac89904c957225e3f30f3db3267353..5977d5089389a7bdc5ba6f2a7dc06bccb56dfa07 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/cycle.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/cycle.service.js
@@ -1,4 +1,4 @@
-const axios = require('axios');
+import axios from "axios"
 
 const CycleService = {
     getAllCycles: async function () {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/data.product.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/data.product.service.js
index 63b114b0e34bcb4c2d66d850b809c87a59d8fca2..5122185eca27f6ccc86924bfc621f6ad3e489817 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/data.product.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/data.product.service.js
@@ -1,4 +1,4 @@
-const axios = require('axios');
+import axios from "axios"
 
 const DataProductService = {
     
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/project.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/project.service.js
index 27ed059cba9ac071d8a4e607a3be80e90d37e80a..c4bbaf1811bcdca79d4554ef3af17282320e2bbf 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/project.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/project.service.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 
 import UnitConverter from './../utils/unit.converter'
 
-const axios = require('axios');
+import axios from "axios"
 
 const ProjectService = {
     getProjectCategories: async function() {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js
index a0115217fc6d24771ded184046df2e087f4606b1..6bb99ea7443e613e84c19f2855de1d777c7530c9 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/reservation.service.js
@@ -1,4 +1,4 @@
-const axios = require('axios');
+import axios from "axios"
 
 const ReservationService = {
     getReservationTemplates: async function () {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/system.event.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/system.event.service.js
index fd4fff4f7147d83d7dbe990fea8a6d9a129e92bc..16c466591fbe152096b8befde7e45d7e8174b417 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/system.event.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/system.event.service.js
@@ -1,4 +1,4 @@
-const axios = require('axios');
+import axios from "axios"
 
 const SystemEventService = {
     getSEAffectedHardwareTemplates: async function () {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/task.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/task.service.js
index ef1ae9e05b431e60f9c66ebe8b92f0aa47c4db7b..0bb67c3e5afec3dc191f675b853dd6778a8defbb 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/task.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/task.service.js
@@ -1,7 +1,6 @@
+import axios from "axios"
 import {parseTemplatesToCorrectJSONFormat} from "./service.helper";
 
-const axios = require('axios');
-
 const TaskService = {
     getTaskDetails: async function (taskType, taskId, fetchSubtask) {
       try {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js
index b71091deeca75f50a931031b74931bf0707f7fc3..82378d337a1ba911f16f259fe5c2cf2b5c9bf21d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/util.service.js
@@ -2,7 +2,7 @@ import $RefParser from 'json-schema-ref-parser';
 import _ from 'lodash';
 import Auth from '../authenticate/auth';
 
-const axios = require('axios');
+import axios from "axios"
 const refParser = new $RefParser();
 const fs = require('fs');
 const path = require('path');
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/workflow.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/workflow.service.js
index 3e9b0c50a01364162faa0cdcae0b3f74421b56f6..294cfc796907b3fd311ffda827de886e1a902cf7 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/workflow.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/workflow.service.js
@@ -1,4 +1,4 @@
-const axios = require('axios');
+import axios from "axios"
 
 const WorkflowService = { 
     getWorkflowProcesses: async function (){