Index: backend/auth_form/urls.py
===================================================================
--- backend/auth_form/urls.py	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ backend/auth_form/urls.py	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -3,8 +3,10 @@
 from rest_framework_simplejwt.views import TokenObtainPairView
 from .serializers import CustomTokenObtainPairSerializer
+from rest_framework_simplejwt.views import TokenRefreshView
 
 urlpatterns = [
     path('register/', RegisterView.as_view(), name='register'),
     path('login/', TokenObtainPairView.as_view(serializer_class=CustomTokenObtainPairSerializer), name='token_obtain_pair'),
-    path('form/', StudentFormView.as_view(), name="student_form")
+    path('refresh/', TokenRefreshView.as_view(), name='token_refresh'),
+    path('form/', StudentFormView.as_view(), name="student_form"),
 ]
Index: backend/auth_form/views.py
===================================================================
--- backend/auth_form/views.py	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ backend/auth_form/views.py	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -6,7 +6,9 @@
 from rest_framework.decorators import api_view, permission_classes
 from rest_framework_simplejwt.tokens import RefreshToken
+
 from .permissions import IsStudent, CanSubmitForm, CanUpdateForm
 
 # Create your views here.
+
 
 class RegisterView(APIView):
Index: backend/backend/settings.py
===================================================================
--- backend/backend/settings.py	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ backend/backend/settings.py	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -57,5 +57,5 @@
     'ACCESS_TOKEN_LIFETIME': timedelta(minutes=30),
     'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
-    'ROTATE_REFRESH_TOKENS': False,
+    'ROTATE_REFRESH_TOKENS': True,
     'BLACKLIST_AFTER_ROTATION': True,
     'UPDATE_LAST_LOGIN': False,
Index: frontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ frontend/src/context/AuthContext.tsx	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -2,8 +2,10 @@
 
 export interface AuthContextType {
-    token: string | null;
-    login: (token:string) => void;
+    accessToken: string | null;
+    refreshToken: string | null;
+    login: (accessToken: string, refreshToken: string) => void;
     logout: () => void;
     isAuthenticated: boolean;
+    refreshAccessToken: () => Promise<string | null>;
 }
 
Index: frontend/src/context/AuthProvider.tsx
===================================================================
--- frontend/src/context/AuthProvider.tsx	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ frontend/src/context/AuthProvider.tsx	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -1,31 +1,73 @@
 import React, { useState, useEffect, ReactNode } from "react";
 import AuthContext, { AuthContextType } from "./AuthContext";
+import axios from "axios";
 
+const refreshAccessToken = async (): Promise<string | null> => {
+  const refreshToken = localStorage.getItem("refresh_token");
+  if (!refreshToken) {
+    return null;
+  }
+  try {
+    const response = await axios.post<{ access: string }>(
+      "http://localhost:8000/auth/refresh/",
+      {
+        refresh: refreshToken,
+      }
+    );
+    const newAccessToken = response.data.access;
+    localStorage.setItem("access_token", newAccessToken);
+    return newAccessToken;
+  } catch (error) {
+    console.error("Error refrershing access token:", error);
+    return null;
+  }
+};
 export const AuthProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [token, setToken] = useState<string | null>(localStorage.getItem("token"));
+  const [accessToken, setAccessToken] = useState<string | null>(
+    localStorage.getItem("access_token")
+  );
+  const [refreshToken, setRefreshToken] = useState<string | null>(
+    localStorage.getItem("refresh_token")
+  );
   useEffect(() => {
-    const storedToken = localStorage.getItem("token");
-    if (storedToken !== token) {
-      setToken(storedToken);
+    const storedAccessToken = localStorage.getItem("access_token");
+    const storedRefreshToken = localStorage.getItem("refresh_token");
+
+    if (storedAccessToken !== accessToken) {
+      setAccessToken(storedAccessToken);
     }
-  }, [token]);
-  const login = (newToken: string) => {
-    console.log("Logging in with token:", newToken);
-    localStorage.setItem("token", newToken);
-    setToken(newToken);
+
+    if (storedRefreshToken !== refreshToken) {
+      setAccessToken(storedRefreshToken);
+    }
+
+  }, [accessToken, refreshToken]);
+  const login = (newAccessToken: string, newRefreshToken: string) => {
+    console.log("Logging in with access token:", newAccessToken);
+    console.log("Refresh token:", newRefreshToken);
+    localStorage.setItem("access_token", newAccessToken);
+    localStorage.setItem("refresh_token", newRefreshToken);
+    setAccessToken(newAccessToken);
+    setRefreshToken(newRefreshToken);
   };
+
   const logout = () => {
-    localStorage.removeItem("token");
-    setToken(null);
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    setAccessToken(null);
+    setRefreshToken(null);
   };
-  const isAuthenticated = !!token;
+
+  const isAuthenticated = !!accessToken;
 
   const contextValue: AuthContextType = {
-    token,
+    accessToken,
+    refreshToken,
     login,
     logout,
     isAuthenticated,
+    refreshAccessToken,
   };
   return (
Index: frontend/src/pages/Account.tsx
===================================================================
--- frontend/src/pages/Account.tsx	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ frontend/src/pages/Account.tsx	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -6,5 +6,5 @@
 
 const Account = () => {
-  const { token } = useAuth();
+  const { accessToken } = useAuth();
   const [formData, setFormData] = useState<StudentData | null>(null);
   const [subjects, setSubjects] = useState<Subject[]>([]);
@@ -14,5 +14,5 @@
     const fetchData = async () => {
       const resForm = await fetch("http://localhost:8000/auth/form/", {
-        headers: { Authorization: `Bearer ${token}` },
+        headers: { Authorization: `Bearer ${accessToken}` },
       });
       const formJson = await resForm.json();
@@ -35,5 +35,5 @@
 
     fetchData();
-  }, [token]);
+  }, [accessToken]);
 
   return (
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ frontend/src/pages/Login.tsx	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -8,9 +8,4 @@
   email: string;
   password: string;
-}
-
-interface AuthResponse {
-  
-  access: string;
 }
 
@@ -45,8 +40,6 @@
         }
       );
-      const data = response.data;
-      // Fix this error: ts related
-      const token = data.access;
-      login(token);
+      const { access, refresh } = response.data;
+      login(access, refresh);
       navigate("/");
     } catch (err: unknown) {
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 558a97d2b78660d7ba7337b75c6a39318d1f3988)
+++ frontend/src/pages/Register.tsx	(revision eea09305aa42e44ac28d4dcbda07a1986abcf7a2)
@@ -50,6 +50,6 @@
       );
 
-      const { token } = response.data;
-      login(token);
+      const { access, refresh } = response.data;
+      login(access, refresh);
       navigate("/");
     } catch (err: unknown) {