diff --git a/package-lock.json b/package-lock.json
index bf049ec..74e0e06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "babel-preset-react": "^6.24.1",
         "babel-preset-stage-0": "^6.24.1",
         "bootstrap": "^5.2.3",
+        "http-proxy-middleware": "^2.0.6",
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-datepicker": "^4.12.0",
@@ -2279,6 +2280,14 @@
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
       "dev": true
     },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.11",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.11.tgz",
+      "integrity": "sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/jest": {
       "version": "27.5.2",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
@@ -9717,17 +9726,79 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
-      "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "dependencies": {
-        "http-proxy": "^1.16.2",
-        "is-glob": "^4.0.0",
-        "lodash": "^4.17.5",
-        "micromatch": "^3.1.9"
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
       },
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
       }
     },
     "node_modules/http-signature": {
@@ -10400,6 +10471,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -20838,6 +20920,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
+      "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
+      "dependencies": {
+        "http-proxy": "^1.16.2",
+        "is-glob": "^4.0.0",
+        "lodash": "^4.17.5",
+        "micromatch": "^3.1.9"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
diff --git a/src/components/Assignment.tsx b/src/components/Assignment.tsx
index 0ab624d..e939eb4 100644
--- a/src/components/Assignment.tsx
+++ b/src/components/Assignment.tsx
@@ -4,8 +4,7 @@ import "../style/home.css";
 import Modal from "../props/Modal";
 import Navbar from "./Navbar";
 import { navPropsType } from "./Navbar";
-import axios from "axios";
-import { stringify } from "querystring";
+import api from "../utils/api";
 
 const Assignment: FC = () => {
   interface UrlResp {
@@ -32,16 +31,16 @@ const Assignment: FC = () => {
   const [isProfessor, setIsProfessor] = useState<boolean>(false);
 
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/url/" + user_id)
+    api.client
+      .get("/urls/" + user_id)
       .then((response) => {
         setUrl(response.data.containerAddress);
       });
   }, []);
 
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/user/" + user_id)
+    api.client
+      .get("/users/" + user_id)
       .then((response) => {
         if (response.data.role == 2) {
           setIsProfessor(true);
diff --git a/src/components/AssignmentPage.tsx b/src/components/AssignmentPage.tsx
index dfa4175..98de1d5 100644
--- a/src/components/AssignmentPage.tsx
+++ b/src/components/AssignmentPage.tsx
@@ -1,13 +1,13 @@
 import React, { FC, useState, useCallback, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useForm } from "react-hook-form";
-import axios from "axios";
 import "../style/LecturePage.css";
 import Paging from "../components/Paging";
 import Assignment from "../props/Assignment";
 import AssignmentModal from "../props/AssignmentModal";
 import Navbar from "./Navbar";
 import { navPropsType } from "./Navbar";
+import api from "../utils/api";
 
 export type AssignmentType = {
   lecture_id: string;
@@ -56,8 +56,8 @@ const AssignmentPage: FC = () => {
   };
   const deleteAssignment = (data: any) => {
     const title = data.title;
-    axios
-      .delete("http://moaroom-back.duckdns.org:8080/assignment/" + title)
+    api.client
+      .delete("/assignments/" + title)
       .then(function(response) {
         if (response.data == "삭제 성공") {
           alert("과제가 삭제되었습니다.");
@@ -74,8 +74,8 @@ const AssignmentPage: FC = () => {
 
   useEffect(() => {
     var tmpList: AssignmentPropType[] = [];
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/assignment/all/" + user_id)
+    api.client
+      .get("/assignments/users/" + user_id)
       .then((response) => {
         for (let i = 0; i < response.data.length; i++) {
           if (lecture_id == response.data[i].lecture_id) {
@@ -202,7 +202,7 @@ const AssignmentPage: FC = () => {
           )}
           {
             assignmentPropsList == null &&(
-              <Paging />
+              <Paging count={assignmentList.length}/>
             )
           }
         </div>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 2ba77a2..f3effb3 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -5,8 +5,12 @@ import { navPropsType } from "./Navbar";
 import { useLocation } from "react-router-dom";
 const Home: FC = () => {
   const location = useLocation();
-  const user_id = location.state.user_id;
-  const isProfessor = location.state.isProfessor;
+  var user_id = null;
+  var isProfessor = null;
+  if(localStorage.getItem("isLogin")){
+    user_id = location.state.user_id;
+    isProfessor = location.state.isProfessor;
+  }
   return (
     <>
       <div className="background">
diff --git a/src/components/LecturePage.tsx b/src/components/LecturePage.tsx
index 435a044..6f3e04f 100644
--- a/src/components/LecturePage.tsx
+++ b/src/components/LecturePage.tsx
@@ -1,17 +1,17 @@
 import React, { FC, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import "../style/LecturePage.css";
-import axios from "axios";
 import Lecture from "../props/Lecture";
 import Paging from "../components/Paging";
 import Navbar from "./Navbar";
 import { navPropsType } from "./Navbar";
+import api from "../utils/api";
 
 export type LectureType = {
   lecture_id: string;
   title: string;
-  professor_name: string;
   room: number;
+  professor_name: string;
   enroll: Boolean | null;
 };
 
@@ -21,8 +21,8 @@ const LecturePage: FC = () => {
   const [lectureList, setLectureList] = useState<LectureType[]>([]);
   const [isProfessor, setIsProfessor] = useState<Boolean>(true);
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/lecture/all/" + user_id)
+    api.client
+      .get("/lectures/users/" + user_id)
       .then((response) => {
         setLectureList(response.data);
         if (response.data.length != 0 && response.data[0].enroll != null) {
@@ -73,7 +73,7 @@ const LecturePage: FC = () => {
             ))}
           {
             lectureList != null && (
-              <Paging />
+              <Paging count={lectureList.length} />
             )
           }
         </div>
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 914d9d5..e53d690 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -1,12 +1,11 @@
 import React, { FC, useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import "../style/home.css";
-import axios from "axios";
 import { ToastContainer, toast, Flip } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
 import { useNavigate } from "react-router";
 import Navbar from "./Navbar";
-import navPropsType from "./Navbar";
+import api from "../utils/api";
 const Login: FC = (): JSX.Element => {
   const navigate = useNavigate();
   const [loginInfo, setLoginInfo] = useState({
@@ -33,8 +32,8 @@ const Login: FC = (): JSX.Element => {
     });
   };
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/user/" + user_id)
+    api.client
+      .get("/users/" + user_id)
       .then((response) => {
         if (response.data.role == 2) {
           setIsProfessor(true);
@@ -49,9 +48,8 @@ const Login: FC = (): JSX.Element => {
     };
     console.log(params);
 
-    // TODO 서버 나오면 디버깅 필요
-    axios
-      .post("http://moaroom-back.duckdns.org:8080/login", params)
+    api.client
+      .post("/login", params)
       .then(function(response) {
         if (response.data === "") {
           alert("로그인 정보가 없습니다. 다시 로그인 해주세요.");
diff --git a/src/components/MyPage.tsx b/src/components/MyPage.tsx
index 8c315c1..b7c9428 100644
--- a/src/components/MyPage.tsx
+++ b/src/components/MyPage.tsx
@@ -1,12 +1,11 @@
 import React, { FC, useState, useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate, useLocation } from "react-router-dom";
-import axios from "axios";
 import "../style/home.css";
 import MyPageLectureList, { LectureType } from "../props/MyPageLectureList";
 import Modal from "../props/Modal";
 import Navbar from "./Navbar";
-import { isDOMComponent } from "react-dom/test-utils";
+import api from "../utils/api";
 const MyPage: FC = () => {
   const {
     register,
@@ -52,15 +51,18 @@ const MyPage: FC = () => {
   const [userNum, setUserNum] = useState<string>("");
 
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/lecture/all/" + user_id)
+    api.client
+      .get("/lectures/users/" + user_id)
       .then((response) => {
+        console.log(response)
         setLectureList(response.data);
+      }).catch(function(error) {
+        console.log(error)
       });
   }, [lectureList, iscreateModalOpen, isdeleteModalOpen]); // refresh 가능하도록
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/user/" + user_id)
+    api.client
+      .get("/users/" + user_id)
       .then((response) => {
         setUserInfo(response.data);
         setName(response.data.name);
@@ -72,20 +74,69 @@ const MyPage: FC = () => {
   const navigate = useNavigate();
 
   // 유저 수정/탈퇴 관련
-  // const updateProfile = () => {};
-  // const deleteProfile = () => {};
+  const updateProfile = (data: any) => {
+    let params = {
+      id: data.id,
+      password: user_id,
+      name: data.name,
+      user_num: data.user_num,
+      role:data.role
+    };
+    console.log(params);
+
+    api.client
+      .post("/users/"+user_id, params)
+      .then(function(response) {
+        if (response.data === null) {
+          alert("정보 수정 완료");
+          setcreateModalOpen(!iscreateModalOpen);
+        } else {
+          alert("수정 실패");
+        }
+      })
+      .catch(function(error) {
+        console.log(error);
+      });
+  };
+  const deleteProfile = () => {
+    let params = {
+      user_id: user_id
+    };
+    console.log(params);
+
+    api.client
+      .post("/users/"+user_id, {data: params})
+      .then(function(response) {
+        if (response.data === "삭제 성공") {
+          alert("삭제 성공");
+          localStorage.removeItem("isLogin")
+          localStorage.removeItem("auth")
+          setTimeout(() => {
+            navigate("/login", {
+              state: { user_id: null, isProfessor: null },
+            });
+          }, 1000);
+        } else {
+          alert("삭제 실패");
+          setcreateModalOpen(!iscreateModalOpen);
+        }
+      })
+      .catch(function(error) {
+        console.log(error);
+      });
+  };
 
   const createLecture = (data: any) => {
     let params = {
       title: data.title,
-      professor_id: user_id,
+      professorId: user_id,
       room: data.room,
-      room_count: data.room_count,
+      roomCount: data.room_count,
     };
     console.log(params);
 
-    axios
-      .post("http://moaroom-back.duckdns.org:8080/lecture/new", params)
+    api.client
+      .post("/lecture", params)
       .then(function(response) {
         if (response.data === "") {
           alert("강의 생성 안 됨");
@@ -95,7 +146,7 @@ const MyPage: FC = () => {
         }
       })
       .catch(function(error) {
-        console.log("delete" + error);
+        console.log(error);
       });
   };
   const deleteLecture = (data: any) => {
@@ -103,25 +154,21 @@ const MyPage: FC = () => {
       lecture_title: data.lecture_title,
       lecture_room: data.lecture_room,
     };
-    // TODO: 강의 삭제 기능 구현
-    // axios
-    //   .delete(
-    //     "http://moaroom-back.duckdns.org:8080/lecture/" +
-    //       params.lecture_title +
-    //       "/" +
-    //       params.lecture_room
-    //   )
-    //   .then(function(response) {
-    //     if (response.data === "") {
-    //       alert("강의 삭제 안 됨");
-    //     } else {
-    //       alert("강의 삭제 완료");
-    //       setdeleteModalOpen(!isdeleteModalOpen);
-    //     }
-    //   })
-    //   .catch(function(error) {
-    //     console.log(error);
-    //   });
+    //TODO: 강의 삭제 기능 구현
+    api.client
+      .delete(
+        "/lectures/title-class", {data : params})
+      .then(function(response) {
+        if (response.data === "삭제 성공") {
+          alert("강의 삭제 완료");
+          setdeleteModalOpen(!isdeleteModalOpen);
+        } else {
+          alert("강의 삭제 안 됨");
+        }
+      })
+      .catch(function(error) {
+        console.log(error);
+      });
   };
 
   return (
@@ -270,8 +317,7 @@ const MyPage: FC = () => {
                         float: "right",
                       }}
                     >
-                      {/* TODO: 유저 수정/탈퇴 관련 */}
-                      {/* <button
+                      <button
                         className="btn btn-outline-primary text-center shadow-none mb-3"
                         type="submit"
                         onClick={updateProfile}
@@ -285,7 +331,7 @@ const MyPage: FC = () => {
                         onClick={deleteProfile}
                       >
                         탈퇴
-                      </button> */}
+                      </button>
                     </div>
                   </div>
                 </div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 6e59406..04f6746 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -12,7 +12,8 @@ const Navbar = ({ navProps }: { navProps: navPropsType }) => {
   const { user_id, isProfessor } = navProps;
   const navigate = useNavigate();
   const logout = () => {
-    localStorage.removeItem("isLogin");
+    localStorage.removeItem("isLogin")
+    localStorage.removeItem("auth")
     navigate("/home", {
       state: { user_id: user_id, isProfessor: isProfessor },
     });
@@ -63,7 +64,7 @@ const Navbar = ({ navProps }: { navProps: navPropsType }) => {
         }}
       >
         <div>
-          <h3 className="m-3">Logo</h3>
+          <img className="logo" src={logo} />
         </div>
         <div>
           <button type="submit" className="navbtn" onClick={login}>
diff --git a/src/components/NewAssignment.tsx b/src/components/NewAssignment.tsx
index 211c967..598dbed 100644
--- a/src/components/NewAssignment.tsx
+++ b/src/components/NewAssignment.tsx
@@ -2,13 +2,13 @@ import React, { FC, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useNavigate } from "react-router";
 import { useForm } from "react-hook-form";
-import axios from "axios";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../style/AssignmentPage.css";
 import { ToastContainer, toast, Flip } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
 import Navbar from "./Navbar";
+import api from "../utils/api";
 const newAssignment: FC = () => {
   const {
     register,
@@ -44,8 +44,8 @@ const newAssignment: FC = () => {
 
     console.log(params);
     // TODO 서버 나오면 디버깅 필요
-    axios
-      .post("http://moaroom-back.duckdns.org:8080/assignment/new", params)
+    api.client
+      .post("/assignment", params)
       .then(function(response) {
         if (response.data == "새로운 과제 등록 완료") {
           navigate("/lecture", {
diff --git a/src/components/Paging.tsx b/src/components/Paging.tsx
index 6213acf..4c69709 100644
--- a/src/components/Paging.tsx
+++ b/src/components/Paging.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Pagination from "react-js-pagination";
 import "../style/Paging.css";
 
-const Paging = () => {
+const Paging = (count:any) => {
   const [page, setPage] = useState(1);
 
   const handlePageChange = (page: number) => {
@@ -12,9 +12,9 @@ const Paging = () => {
   return (
     <Pagination
       activePage={page}
-      itemsCountPerPage={10}
-      totalItemsCount={50}
-      pageRangeDisplayed={1}
+      itemsCountPerPage={5}
+      totalItemsCount={count}
+      pageRangeDisplayed={5}
       prevPageText={"‹"}
       nextPageText={"›"}
       onChange={handlePageChange}
diff --git a/src/components/Score.tsx b/src/components/Score.tsx
index a5e341a..a54cc75 100644
--- a/src/components/Score.tsx
+++ b/src/components/Score.tsx
@@ -1,16 +1,16 @@
 import React, { FC, useCallback, useState, useEffect } from "react";
-import axios from "axios";
 import { useForm } from "react-hook-form";
 import { useNavigate, useLocation } from "react-router-dom";
 import Modal from "../props/Modal";
 import File from "../props/File";
 import "../style/home.css";
 import Navbar from "./Navbar";
+import api from "../utils/api";
+import axios from "axios";
 const Score: FC = () => {
   const {
     register,
     handleSubmit,
-    watch,
     reset,
     formState: { errors },
   } = useForm();
@@ -89,8 +89,8 @@ const Score: FC = () => {
   const [score, setScore] = useState<number>();
 
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/user/" + student_id)
+    api.client
+      .get("/users/" + student_id)
       .then((response) => {
         // setUser(JSON.parse(JSON.stringify(response.data)));
         setName(JSON.parse(JSON.stringify(response.data)).name);
@@ -100,8 +100,8 @@ const Score: FC = () => {
 
   useEffect(() => {
     if (professor_id != "") {
-      axios
-        .get("http://moaroom-back.duckdns.org:8080/url/" + professor_id)
+      api.client
+        .get("/urls/" + professor_id)
         .then((response) => {
           setUrl(response.data);
           setApiEP(response.data.apiEndpoint);
@@ -126,16 +126,16 @@ const Score: FC = () => {
   }, [apiEP]);
 
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/assignment/" + assignment_id)
+    api.client
+      .get("/assignments/" + assignment_id)
       .then((response) => {
         setAssignment(JSON.parse(JSON.stringify(response.data)));
         setAsgntitle(JSON.parse(JSON.stringify(response.data)).title);
       });
   }, []);
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/lecture/info/" + assignment_id)
+    api.client
+      .get("/lectures/info/" + assignment_id)
       .then((response) => {
         setLecture(response.data);
         setLectitle(response.data.title);
@@ -175,8 +175,8 @@ const Score: FC = () => {
       score: data.score,
     };
     console.log(params);
-    axios
-      .post("http://moaroom-back.duckdns.org:8080/assignment/score", params)
+    api.client
+      .post("/assignments/score", params)
       .then(function(response) {
         console.log(response);
         setmanualModalOpen(!ismanualModalOpen);
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index e39eaf8..95ae60e 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -1,11 +1,11 @@
 import React, { FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
-import axios from "axios";
 import "../style/home.css";
 import { ToastContainer, toast, Flip } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
 import Navbar from "./Navbar";
+import api from "../utils/api";
 const SignUp: FC = () => {
   const {
     register,
@@ -42,8 +42,8 @@ const SignUp: FC = () => {
       role: Number(selectedRole),
     };
     console.log(params);
-    axios
-      .post("http://moaroom-back.duckdns.org:8080/user/new", params)
+    api.client
+      .post("/user", params)
       .then(function(response) {
         toast.success(response.data.message, {
           position: "top-right",
@@ -57,7 +57,7 @@ const SignUp: FC = () => {
         });
         setTimeout(() => {
           navigate("/login", {
-            state: { user_id: user_id, isProfessor: isProfessor },
+            state: { user_id: null, isProfessor: null },
           });
         }, 1000);
       })
diff --git a/src/components/Submit.tsx b/src/components/Submit.tsx
index 573d4d8..c056982 100644
--- a/src/components/Submit.tsx
+++ b/src/components/Submit.tsx
@@ -1,10 +1,10 @@
 import React, { FC, useState, useEffect } from "react";
-import axios from "axios";
 import SubmitterList from "../props/SubmitterList";
 import "../style/home.css";
 import Navbar from "./Navbar";
 import { useLocation } from "react-router-dom";
 import { SubmitterPropType } from "../props/SubmitterList";
+import api from "../utils/api";
 const Submit: FC = () => {
   // SubmitterList
 
@@ -21,8 +21,8 @@ const Submit: FC = () => {
 
   var tmpList: SubmitterPropType[] = [];
   useEffect(() => {
-    axios
-      .get("http://moaroom-back.duckdns.org:8080/step/" + assignment_id)
+    api.client
+      .get("/steps/" + assignment_id)
       .then((response) => {
         if (isProfessor) {
           for (let i = 0; i < response.data.length; i++) {
diff --git a/src/utils/api.tsx b/src/utils/api.tsx
new file mode 100644
index 0000000..99dade7
--- /dev/null
+++ b/src/utils/api.tsx
@@ -0,0 +1,15 @@
+import axios, { AxiosError, AxiosInstance } from 'axios';
+
+import { API_ENDPOINT } from './env';
+
+class Api {
+  public client: AxiosInstance;
+
+  constructor() {
+    this.client = axios.create({ baseURL: API_ENDPOINT });
+  }
+}
+
+const api = new Api();
+
+export default api;
\ No newline at end of file
diff --git a/src/utils/env.tsx b/src/utils/env.tsx
new file mode 100644
index 0000000..9690996
--- /dev/null
+++ b/src/utils/env.tsx
@@ -0,0 +1,2 @@
+export const API_ENDPOINT =
+  'http://moaroom-back.duckdns.org:8080';
\ No newline at end of file