diff --git a/.env.example b/.env.example
index cf49b2b..90fd2ba 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 # the env variable used for vite-processed frontend should begin with `VITE_`
 VITE_TURNSTILE_SITE_KEY=0x4AAAAAABz2ci0ZN9OaO-dg
 VITE_AUTH_OTP_TIMEOUT=120
-VITE_AUTH_TEMP_TOKEN_TIMEOUT=600
\ No newline at end of file
+VITE_AUTH_TEMP_TOKEN_TIMEOUT=600
+VITE_API_BASE_URL=
diff --git a/src/components/AuthInitiate.vue b/src/components/AuthInitiate.vue
index 3d4ee8d..040a18b 100644
--- a/src/components/AuthInitiate.vue
+++ b/src/components/AuthInitiate.vue
@@ -109,9 +109,10 @@
 
 <script setup>
 import { ref, onMounted, computed } from "vue";
-import { initiateAuth, getOtpState } from "../utils/auth";
+import { getOtpState } from "../utils/auth";
 import Turnstile from "./Turnstile.vue";
 import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { useAuth } from "../composables/useAuth";
 
 const props = defineProps({
   action: {
@@ -130,6 +131,8 @@ const copyButtonText = ref("Copy Code and Proceed");
 const isRedirecting = ref(false);
 const isLoading = ref(false);
 
+const { initiateAuth } = useAuth();
+
 onMounted(() => {
   const existingOtp = getOtpState();
   if (existingOtp) {
diff --git a/src/components/CourseList.vue b/src/components/CourseList.vue
index 8e444e3..0269bc5 100644
--- a/src/components/CourseList.vue
+++ b/src/components/CourseList.vue
@@ -69,7 +69,7 @@
                   v-model.number="filters.min_quality"
                   type="number"
                   min="0"
-                  class="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  class="mt-1 block w-full rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   @change="applyFiltersAndSort"
                 />
               </div>
@@ -88,12 +88,12 @@
                   @change="applyFiltersAndSort"
                 >
                   <option value="course_code">Course Code</option>
-                  <option value="num_reviews">Number of Reviews</option>
+                  <option value="review_count">Number of Reviews</option>
                   <option v-if="isAuthenticated" value="quality_score">
                     Quality Score
                   </option>
                   <option v-if="isAuthenticated" value="difficulty_score">
-                    Difficulty (Layup) Score
+                    Difficulty Score
                   </option>
                 </select>
               </div>
diff --git a/src/components/ReviewCard.vue b/src/components/ReviewCard.vue
index a942726..36cc5b5 100644
--- a/src/components/ReviewCard.vue
+++ b/src/components/ReviewCard.vue
@@ -189,7 +189,6 @@ const handleVote = async (reviewId, isKudos) => {
       user_vote: data.user_vote,
     });
   } catch (e) {
-    console.error("Error voting on review:", e);
     alert("Error voting on review. Please try again.");
   }
 };
diff --git a/src/components/SetPasswordForm.vue b/src/components/SetPasswordForm.vue
index 6af57d9..41e06e1 100644
--- a/src/components/SetPasswordForm.vue
+++ b/src/components/SetPasswordForm.vue
@@ -123,7 +123,6 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { setPassword } from "../utils/auth";
 import PasswordInput from "./PasswordInput.vue";
 import {
   validatePassword,
@@ -145,7 +144,7 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const { notifyAuthStateChanged } = useAuth();
+const { setPassword } = useAuth();
 
 const password = ref("");
 const confirmPassword = ref("");
@@ -209,7 +208,6 @@ const handleSubmit = async () => {
 
   try {
     await setPassword(props.action, password.value);
-    notifyAuthStateChanged();
     router.push("/");
   } catch (e) {
     submitError.value = e.message;
diff --git a/src/composables/useAuth.js b/src/composables/useAuth.js
index 441f1a2..a8446dd 100644
--- a/src/composables/useAuth.js
+++ b/src/composables/useAuth.js
@@ -1,14 +1,49 @@
-import { ref, onMounted, onUnmounted } from "vue";
-import { checkAuthentication as checkAuthUtil } from "../utils/api";
+import { ref } from "vue";
+import { apiFetch } from "../utils/api";
 import { getCookie } from "../utils/cookies";
+import {
+  OTP_STORAGE_KEY,
+  FLOW_STATE_STORAGE_KEY,
+  clearAuthFlowState,
+} from "../utils/auth";
 
-export function useAuth() {
-  const isAuthenticated = ref(false);
+// Default timeout
+const DEFAULT_OTP_TIMEOUT_SECONDS = 120;
+const DEFAULT_TEMP_TOKEN_TIMEOUT_SECONDS = 600;
+
+function parsePositiveInt(value, fallback) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+  return Math.floor(parsed);
+}
 
+function getOtpTimeoutSeconds() {
+  return parsePositiveInt(
+    import.meta.env.VITE_AUTH_OTP_TIMEOUT,
+    DEFAULT_OTP_TIMEOUT_SECONDS,
+  );
+}
+
+function getTempTokenTimeoutSeconds() {
+  return parsePositiveInt(
+    import.meta.env.VITE_AUTH_TEMP_TOKEN_TIMEOUT,
+    DEFAULT_TEMP_TOKEN_TIMEOUT_SECONDS,
+  );
+}
+
+// Global authentication state
+const isAuthenticated = ref(false);
+
+export function useAuth() {
   const checkAuthentication = async () => {
     try {
-      const auth = await checkAuthUtil();
-      isAuthenticated.value = !!auth;
+      const response = await apiFetch("/api/user/status/");
+      if (response.ok) {
+        const data = await response.json();
+        isAuthenticated.value = !!data.isAuthenticated;
+        return isAuthenticated.value;
+      }
+      isAuthenticated.value = false;
       return isAuthenticated.value;
     } catch (e) {
       console.error("useAuth: checkAuthentication error:", e);
@@ -17,9 +52,127 @@ export function useAuth() {
     }
   };
 
+  const initiateAuth = async (action, turnstileToken) => {
+    const response = await apiFetch("/api/auth/init/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({
+        action,
+        turnstile_token: turnstileToken,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Failed to initiate auth flow.");
+    }
+
+    const data = await response.json();
+    const now = Date.now();
+    const otpExpiresAt = now + getOtpTimeoutSeconds() * 1000;
+    const tempTokenExpiresAt = now + getTempTokenTimeoutSeconds() * 1000;
+
+    localStorage.setItem(
+      OTP_STORAGE_KEY,
+      JSON.stringify({ otp: data.otp, expires_at: otpExpiresAt }),
+    );
+    localStorage.setItem(
+      FLOW_STATE_STORAGE_KEY,
+      JSON.stringify({ status: "pending", expires_at: tempTokenExpiresAt }),
+    );
+
+    return { otp: data.otp, redirectUrl: data.redirect_url };
+  };
+
+  const verifyCallback = async (action, account, answerId) => {
+    const response = await apiFetch("/api/auth/verify/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({
+        action,
+        account,
+        answer_id: answerId,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Failed to verify authentication.");
+    }
+
+    const data = await response.json();
+
+    if (data.is_logged_in) {
+      isAuthenticated.value = true;
+    } else {
+      localStorage.setItem(
+        FLOW_STATE_STORAGE_KEY,
+        JSON.stringify({
+          status: "verified",
+          action: data.action,
+          expires_at: data.expires_at * 1000,
+        }),
+      );
+    }
+    return data;
+  };
+
+  const setPassword = async (action, password) => {
+    const url =
+      action === "signup" ? "/api/auth/signup/" : "/api/auth/password/";
+    const response = await apiFetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({ password }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Failed to set password.");
+    }
+
+    if (action === "signup") {
+      isAuthenticated.value = true;
+    }
+    clearAuthFlowState();
+    return await response.json();
+  };
+
+  const loginWithPassword = async (account, password, turnstileToken) => {
+    const response = await apiFetch("/api/auth/login/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      body: JSON.stringify({
+        account,
+        password,
+        turnstile_token: turnstileToken,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error || "Login failed.");
+    }
+
+    isAuthenticated.value = true;
+    return await response.json();
+  };
+
   const logout = async () => {
     try {
-      const response = await fetch("/api/auth/logout/", {
+      const response = await apiFetch("/api/auth/logout/", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -28,7 +181,6 @@ export function useAuth() {
       });
       if (response.ok) {
         isAuthenticated.value = false;
-        notifyAuthStateChanged();
         return true;
       } else {
         console.error("useAuth: logout failed", response.status);
@@ -40,29 +192,14 @@ export function useAuth() {
     }
   };
 
-  const onAuthStateChanged = () => {
-    // Re-check authentication when other parts of app signal change
-    checkAuthentication();
-  };
-
-  const notifyAuthStateChanged = () => {
-    window.dispatchEvent(new CustomEvent("auth-state-changed"));
-  };
-
-  onMounted(() => {
-    checkAuthentication();
-    window.addEventListener("auth-state-changed", onAuthStateChanged);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("auth-state-changed", onAuthStateChanged);
-  });
-
   return {
     isAuthenticated,
     checkAuthentication,
+    initiateAuth,
+    verifyCallback,
+    setPassword,
+    loginWithPassword,
     logout,
-    notifyAuthStateChanged,
   };
 }
 
diff --git a/src/composables/useCourses.js b/src/composables/useCourses.js
index 9b4a4cd..3025060 100644
--- a/src/composables/useCourses.js
+++ b/src/composables/useCourses.js
@@ -1,4 +1,5 @@
 import { ref, reactive } from "vue";
+import { apiFetch } from "../utils/api";
 
 export function useCourses() {
   const courses = ref([]);
@@ -10,7 +11,6 @@ export function useCourses() {
     current_page: 1,
     total_pages: 1,
     total_courses: 0,
-    limit: 20,
   });
 
   const filters = reactive({
@@ -27,11 +27,11 @@ export function useCourses() {
 
   const fetchDepartments = async () => {
     try {
-      const response = await fetch("/api/departments/");
+      const response = await apiFetch("/api/departments/");
       if (!response.ok) throw new Error("Failed to fetch departments");
       departments.value = await response.json();
     } catch (e) {
-      console.error("useCourses: Error fetching departments:", e);
+      error.value = e.message;
     }
   };
 
@@ -44,12 +44,15 @@ export function useCourses() {
     if (filters.code) params.append("code", filters.code.trim());
     if (filters.min_quality && isAuth)
       params.append("min_quality", filters.min_quality);
+    if (filters.min_difficulty && isAuth)
+      params.append("min_difficulty", filters.min_difficulty);
+
     params.append("sort_by", sorting.sort_by);
     params.append("sort_order", sorting.sort_order);
     params.append("page", pagination.current_page);
 
     try {
-      const response = await fetch(`/api/courses/?${params.toString()}`);
+      const response = await apiFetch(`/api/courses/?${params.toString()}`);
       if (!response.ok) {
         const errorData = await response
           .json()
@@ -59,13 +62,17 @@ export function useCourses() {
         );
       }
       const data = await response.json();
-      courses.value = data.courses;
-      pagination.current_page = data.pagination.current_page;
-      pagination.total_pages = data.pagination.total_pages;
-      pagination.total_courses = data.pagination.total_courses;
-      pagination.limit = data.pagination.limit;
+      // DRF pagination: { count, next, previous, results }
+      courses.value = data.results || [];
+      const totalCount = data.count || 0;
+      pagination.total_courses = totalCount;
+      // TODO: let backend return total pages
+      if (pagination.current_page == 1) {
+        const page_size = courses.value.length;
+        pagination.total_pages =
+          page_size > 0 ? Math.ceil(totalCount / page_size) : 1;
+      }
     } catch (e) {
-      console.error("useCourses: Error fetching courses:", e);
       error.value = e.message;
       courses.value = [];
     } finally {
@@ -73,6 +80,20 @@ export function useCourses() {
     }
   };
 
+  const fetchCourse = async (courseId) => {
+    if (!courseId) return null;
+    try {
+      const response = await apiFetch(`/api/courses/${courseId}/`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return await response.json();
+    } catch (e) {
+      error.value = e.message;
+      throw e;
+    }
+  };
+
   const getQueryObject = (isAuth = false) => {
     const query = {};
     if (filters.department) query.department = filters.department;
@@ -125,6 +146,7 @@ export function useCourses() {
     pagination,
     filters,
     sorting,
+    fetchCourse,
     fetchDepartments,
     fetchCourses,
     getQueryObject,
diff --git a/src/composables/useLanding.js b/src/composables/useLanding.js
new file mode 100644
index 0000000..fe35930
--- /dev/null
+++ b/src/composables/useLanding.js
@@ -0,0 +1,28 @@
+import { ref } from "vue";
+import { apiFetch } from "../utils/api";
+
+export function useLanding() {
+  const loading = ref(false);
+  const error = ref(null);
+
+  const fetchLanding = async () => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await apiFetch("/api/landing/");
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return await response.json();
+    } catch (e) {
+      error.value = e.message;
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return { loading, error, fetchLanding };
+}
+
+export default { useLanding };
diff --git a/src/composables/useReviews.js b/src/composables/useReviews.js
index 9b5c788..85fe2ab 100644
--- a/src/composables/useReviews.js
+++ b/src/composables/useReviews.js
@@ -1,14 +1,35 @@
 import { ref } from "vue";
 import { getCookie } from "../utils/cookies";
+import { apiFetch } from "../utils/api";
 
 export function useReviews() {
   const loading = ref(false);
   const error = ref(null);
 
+  const searchCourseReviews = async (courseId, q) => {
+    if (!courseId) return [];
+    try {
+      const response = await apiFetch(
+        `/api/courses/${courseId}/reviews/?q=${encodeURIComponent(q ?? "")}`,
+      );
+      if (!response.ok) {
+        const err = new Error(`HTTP error! status: ${response.status}`);
+        err.status = response.status;
+        throw err;
+      }
+      return await response.json();
+    } catch (e) {
+      error.value = e.message;
+      throw e;
+    }
+  };
+
   const fetchUserReview = async (courseId) => {
     if (!courseId) return null;
     try {
-      const response = await fetch(`/api/course/${courseId}/my-review/`);
+      const response = await apiFetch(
+        `/api/courses/${courseId}/reviews/?author=me`,
+      );
       if (response.ok) {
         const data = await response.json();
         return Array.isArray(data) ? data[0] : data;
@@ -29,7 +50,7 @@ export function useReviews() {
 
   const submitReview = async (courseId, newReview) => {
     try {
-      const response = await fetch(`/api/course/${courseId}/`, {
+      const response = await apiFetch(`/api/courses/${courseId}/reviews/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -39,35 +60,37 @@ export function useReviews() {
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => null);
-        throw new Error(errorData?.detail || "Failed to submit review");
+        const err = new Error(errorData?.detail || "Failed to submit review");
+        err.raw = errorData;
+        throw err;
       }
       return await response.json();
     } catch (e) {
-      console.error("useReviews: submitReview error", e);
+      error.value = e.message;
       throw e;
     }
   };
 
-  const deleteReview = async (courseId) => {
+  const deleteReview = async (reviewId) => {
     try {
-      const response = await fetch(`/api/course/${courseId}/review/`, {
+      const response = await apiFetch(`/api/reviews/${reviewId}/`, {
         method: "DELETE",
         headers: { "X-CSRFToken": getCookie("csrftoken") },
       });
-      if (!response.ok) {
+      if (!response.ok && response.status !== 204) {
         const errorData = await response.json().catch(() => null);
         throw new Error(errorData?.detail || "Failed to delete review");
       }
-      return await response.json();
+      return true;
     } catch (e) {
-      console.error("useReviews: deleteReview error", e);
+      error.value = e.message;
       throw e;
     }
   };
 
   const vote = async (courseId, value, forLayup) => {
     try {
-      const response = await fetch(`/api/course/${courseId}/vote/`, {
+      const response = await apiFetch(`/api/courses/${courseId}/vote/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -78,14 +101,14 @@ export function useReviews() {
       if (!response.ok) throw new Error("Vote failed");
       return await response.json();
     } catch (e) {
-      console.error("useReviews: vote error", e);
+      error.value = e.message;
       throw e;
     }
   };
 
   const voteOnReview = async (reviewId, isKudos) => {
     try {
-      const response = await fetch(`/api/review/${reviewId}/vote/`, {
+      const response = await apiFetch(`/api/reviews/${reviewId}/vote/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -96,7 +119,7 @@ export function useReviews() {
       if (!response.ok) throw new Error("Vote on review failed");
       return await response.json();
     } catch (e) {
-      console.error("useReviews: voteOnReview error", e);
+      error.value = e.message;
       throw e;
     }
   };
@@ -104,6 +127,7 @@ export function useReviews() {
   return {
     loading,
     error,
+    searchCourseReviews,
     fetchUserReview,
     submitReview,
     deleteReview,
diff --git a/src/utils/api.js b/src/utils/api.js
index c52e641..754984e 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,17 +1,9 @@
 // Lightweight API utilities used across components
-// checkAuthentication: returns a boolean indicating auth status
-export async function checkAuthentication() {
-  try {
-    const response = await fetch("/api/user/status/");
-    if (response.ok) {
-      const data = await response.json();
-      return !!data.isAuthenticated;
-    }
-    return false;
-  } catch (e) {
-    console.error("Error checking authentication:", e);
-    return false;
-  }
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "";
+
+export async function apiFetch(path, options = {}) {
+  const fetchOptions = { ...options, credentials: "include" };
+  return fetch(`${API_BASE_URL}${path}`, fetchOptions);
 }
 
-export default { checkAuthentication };
+export default { apiFetch };
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 3aa7644..5f388b4 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -1,165 +1,5 @@
-import { getCookie } from "./cookies";
-
-const OTP_STORAGE_KEY = "auth_otp";
-const FLOW_STATE_STORAGE_KEY = "auth_flow";
-
-// Default timeout
-const DEFAULT_OTP_TIMEOUT_SECONDS = 120;
-const DEFAULT_TEMP_TOKEN_TIMEOUT_SECONDS = 600;
-
-function parsePositiveInt(value, fallback) {
-  const parsed = Number(value);
-  if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
-  return Math.floor(parsed);
-}
-
-function getOtpTimeoutSeconds() {
-  return parsePositiveInt(
-    import.meta.env.VITE_AUTH_OTP_TIMEOUT,
-    DEFAULT_OTP_TIMEOUT_SECONDS,
-  );
-}
-
-function getTempTokenTimeoutSeconds() {
-  return parsePositiveInt(
-    import.meta.env.VITE_AUTH_TEMP_TOKEN_TIMEOUT,
-    DEFAULT_TEMP_TOKEN_TIMEOUT_SECONDS,
-  );
-}
-
-/**
- * Initiates the authentication flow.
- * @param {string} action - The authentication action (signup, login, reset_password).
- * @param {string} turnstileToken - The Cloudflare Turnstile token.
- * @returns {Promise<{otp: string, redirectUrl: string}>}
- */
-export async function initiateAuth(action, turnstileToken) {
-  const response = await fetch("/api/auth/init/", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRFToken": getCookie("csrftoken"),
-    },
-    body: JSON.stringify({
-      action: action,
-      turnstile_token: turnstileToken,
-    }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to initiate auth flow.");
-  }
-
-  const data = await response.json();
-  const now = Date.now();
-  const otpExpiresAt = now + getOtpTimeoutSeconds() * 1000;
-  const tempTokenExpiresAt = now + getTempTokenTimeoutSeconds() * 1000;
-
-  localStorage.setItem(
-    OTP_STORAGE_KEY,
-    JSON.stringify({ otp: data.otp, expires_at: otpExpiresAt }),
-  );
-  localStorage.setItem(
-    FLOW_STATE_STORAGE_KEY,
-    JSON.stringify({ status: "pending", expires_at: tempTokenExpiresAt }),
-  );
-
-  return { otp: data.otp, redirectUrl: data.redirect_url };
-}
-
-/**
- * Verifies the authentication callback.
- * @param {string} action - The authentication action.
- * @param {string} account - The user's account identifier.
- * @param {string} answerId - The questionnaire answer ID.
- * @returns {Promise<any>}
- */
-export async function verifyCallback(action, account, answerId) {
-  const response = await fetch("/api/auth/verify/", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRFToken": getCookie("csrftoken"),
-    },
-    body: JSON.stringify({
-      action,
-      account,
-      answer_id: answerId,
-    }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to verify authentication.");
-  }
-
-  const data = await response.json();
-  localStorage.setItem(
-    FLOW_STATE_STORAGE_KEY,
-    JSON.stringify({
-      status: "verified",
-      action: data.action,
-      expires_at: data.expires_at * 1000,
-    }),
-  );
-
-  return data;
-}
-
-/**
- * Sets or resets the user's password.
- * @param {string} action - The action being performed (signup or reset_password).
- * @param {string} password - The new password.
- * @returns {Promise<any>}
- */
-export async function setPassword(action, password) {
-  const url = action === "signup" ? "/api/auth/signup/" : "/api/auth/password/";
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRFToken": getCookie("csrftoken"),
-    },
-    body: JSON.stringify({ password }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to set password.");
-  }
-
-  clearAuthFlowState();
-  return await response.json();
-}
-
-/**
- * Logs in a user with username and password.
- * @param {string} account
- * @param {string} password
- * @param {string} turnstileToken
- * @returns {Promise<any>}
- */
-export async function loginWithPassword(account, password, turnstileToken) {
-  const response = await fetch("/api/auth/login/", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRFToken": getCookie("csrftoken"),
-    },
-    body: JSON.stringify({
-      account,
-      password,
-      turnstile_token: turnstileToken,
-    }),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Login failed.");
-  }
-  return await response.json();
-}
+export const OTP_STORAGE_KEY = "auth_otp";
+export const FLOW_STATE_STORAGE_KEY = "auth_flow";
 
 /**
  * Retrieves the current OTP state from localStorage.
diff --git a/src/views/AuthCallback.vue b/src/views/AuthCallback.vue
index c151f5d..f3dc057 100644
--- a/src/views/AuthCallback.vue
+++ b/src/views/AuthCallback.vue
@@ -58,13 +58,13 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { verifyCallback, getAuthFlowState } from "../utils/auth";
+import { getAuthFlowState } from "../utils/auth";
 import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 import { useAuth } from "../composables/useAuth";
 
 const route = useRoute();
 const router = useRouter();
-const { notifyAuthStateChanged } = useAuth();
+const { verifyCallback } = useAuth();
 
 const isProcessing = ref(true);
 const error = ref(null);
@@ -91,7 +91,6 @@ onMounted(async () => {
     const data = await verifyCallback(action, account, answer_id);
 
     if (data.is_logged_in) {
-      notifyAuthStateChanged();
       router.push("/");
     } else {
       if (action === "reset_password") {
diff --git a/src/views/CourseDetail.vue b/src/views/CourseDetail.vue
index f84fd57..b98bf30 100644
--- a/src/views/CourseDetail.vue
+++ b/src/views/CourseDetail.vue
@@ -430,7 +430,7 @@
                     type="text"
                     required
                     :placeholder="currentTerm"
-                    class="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    class="mt-1 block w-full rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   />
                   <p v-if="formErrors.term" class="mt-1 text-sm text-red-600">
                     {{ formErrors.term[0] }}
@@ -449,7 +449,7 @@
                     type="text"
                     required
                     placeholder="Full name, e.g., John Smith"
-                    class="mt-1 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    class="mt-1 block w-full rounded-md border-0 py-1.5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   />
                   <p
                     v-if="formErrors.professor"
@@ -618,6 +618,7 @@ import { MdEditor, MdPreview } from "md-editor-v3";
 import "md-editor-v3/lib/style.css";
 import { sanitize } from "../utils/sanitize";
 import { useAuth } from "../composables/useAuth";
+import { useCourses } from "../composables/useCourses";
 import { useReviews } from "../composables/useReviews";
 import ReviewPagination from "../components/ReviewPagination.vue";
 
@@ -628,6 +629,7 @@ const loading = ref(true);
 const error = ref(null);
 const currentTerm = "25S";
 const { isAuthenticated, checkAuthentication } = useAuth();
+const { fetchCourse: fetchCourseFn } = useCourses();
 const {
   fetchUserReview: fetchUserReviewFn,
   submitReview: submitReviewFn,
@@ -680,11 +682,7 @@ const fetchCourse = async () => {
   loading.value = true;
   error.value = null;
   try {
-    const response = await fetch(`/api/course/${courseId.value}/`);
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    course.value = await response.json();
+    course.value = await fetchCourseFn(courseId.value);
   } catch (e) {
     error.value = e.message;
   } finally {
@@ -746,7 +744,7 @@ const updateReviewData = (updateData) => {
 const validateReview = () => {
   const errs = {};
   if (!newReview.value.term || newReview.value.term.length !== 3) {
-    errs.term = ["Please provide a valid term, e.g. 24F"];
+    errs.term = ["Please provide a valid term, e.g. 26F"];
   }
   if (
     !newReview.value.professor ||
@@ -775,19 +773,34 @@ const submitReview = async () => {
   }
 
   try {
-    const updatedCourse = await submitReviewFn(courseId.value, newReview.value);
-    if (updatedCourse) {
-      course.value = updatedCourse;
+    const createdReview = await submitReviewFn(courseId.value, newReview.value);
+    if (createdReview) {
+      userReview.value = createdReview;
       newReview.value = { term: "", professor: "", comments: "" };
-      await fetchUserReview();
+
+      // Handle course update
+      course.value.review_set.unshift(createdReview);
+      course.value.review_count += 1;
+      course.value.can_write_review = false;
+
+      // Update professor count
+      const profName = createdReview.professor;
+      const profEntry = course.value.professors_and_review_count.find(
+        (p) => p[0] === profName,
+      );
+      if (profEntry) {
+        profEntry[1] += 1;
+      } else {
+        course.value.professors_and_review_count.push([profName, 1]);
+      }
+
       alert("Review submitted successfully!");
     }
-  } catch (error) {
-    console.error("Error submitting review:", error);
-    if (error && error.errors && typeof error.errors === "object") {
-      formErrors.value = error.errors;
+  } catch (e) {
+    if (!e.raw || "detail" in e.raw) {
+      alert(`Error submitting review:\n${e.message}`);
     } else {
-      alert(`Error submitting review:\n${error.message}`);
+      formErrors.value = e.raw;
     }
   }
 };
@@ -798,6 +811,11 @@ const deleteReview = async () => {
     return;
   }
 
+  if (!userReview.value?.id) {
+    alert("No review to delete.");
+    return;
+  }
+
   if (
     !confirm("Are you sure you want to delete your review for this course?")
   ) {
@@ -805,14 +823,35 @@ const deleteReview = async () => {
   }
 
   try {
-    const updatedCourse = await deleteReviewFn(courseId.value);
-    if (updatedCourse) {
-      course.value = updatedCourse;
-      userReview.value = null;
-      alert("Review deleted successfully!");
+    const deletedId = userReview.value.id;
+    const deletedProf = userReview.value.professor;
+
+    await deleteReviewFn(deletedId);
+
+    // Handle Course update
+    userReview.value = null;
+    course.value.review_set = course.value.review_set.filter(
+      (r) => r.id !== deletedId,
+    );
+    course.value.review_count -= 1;
+    course.value.can_write_review = true;
+
+    // Update professor count
+    const profEntry = course.value.professors_and_review_count.find(
+      (p) => p[0] === deletedProf,
+    );
+    if (profEntry) {
+      profEntry[1] -= 1;
+      if (profEntry[1] === 0) {
+        course.value.professors_and_review_count =
+          course.value.professors_and_review_count.filter(
+            (p) => p[0] !== deletedProf,
+          );
+      }
     }
+
+    alert("Review deleted successfully!");
   } catch (error) {
-    console.error("Error deleting review:", error);
     alert(`Error deleting review: ${error.message}`);
   }
 };
diff --git a/src/views/CourseReviewSearch.vue b/src/views/CourseReviewSearch.vue
index d91536a..267a187 100644
--- a/src/views/CourseReviewSearch.vue
+++ b/src/views/CourseReviewSearch.vue
@@ -76,6 +76,8 @@ import { MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
 import "md-editor-v3/lib/style.css";
 import { sanitize } from "../utils/sanitize";
 import { useAuth } from "../composables/useAuth";
+import { useCourses } from "../composables/useCourses";
+import { useReviews } from "../composables/useReviews";
 import ReviewPagination from "../components/ReviewPagination.vue";
 
 const props = defineProps({
@@ -92,10 +94,20 @@ const reviews = ref([]);
 const loading = ref(true);
 const error = ref(null);
 const reviewsFullCount = ref(0);
-const remaining = ref(0);
 const courseShortName = ref("");
 const query = ref("");
-const { isAuthenticated, checkAuthentication } = useAuth();
+const { isAuthenticated, checkAuthentication, logout } = useAuth();
+const { fetchCourse } = useCourses();
+const { searchCourseReviews } = useReviews();
+
+const fetchCourseInfo = async () => {
+  try {
+    const data = await fetchCourse(props.courseId);
+    courseShortName.value = data?.course_code || "";
+  } catch (e) {
+    console.error("Error fetching course info:", e);
+  }
+};
 
 const fetchReviews = async () => {
   loading.value = true;
@@ -108,28 +120,16 @@ const fetchReviews = async () => {
   }
 
   try {
-    const response = await fetch(
-      `/api/course/${props.courseId}/review_search/?q=${encodeURIComponent(
-        searchQuery.value,
-      )}`,
-    );
-    if (!response.ok) {
-      if (response.status === 401 || response.status === 403) {
-        error.value =
-          "Authentication required. Please log in to search reviews.";
-        isAuthenticated.value = false;
-      } else {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+    const data = await searchCourseReviews(props.courseId, searchQuery.value);
+    reviews.value = data;
+    reviewsFullCount.value = data.length;
+    query.value = searchQuery.value;
+  } catch (e) {
+    if (e?.status === 401 || e?.status === 403) {
+      error.value = "Authentication required. Please log in to search reviews.";
+      logout();
       return;
     }
-    const data = await response.json();
-    reviews.value = data.reviews;
-    reviewsFullCount.value = data.reviews_full_count;
-    remaining.value = data.remaining;
-    courseShortName.value = data.course_short_name;
-    query.value = data.query;
-  } catch (e) {
     error.value = e.message;
   } finally {
     loading.value = false;
@@ -149,16 +149,9 @@ watch(
   { immediate: true },
 );
 
-watch(isAuthenticated, (newAuth) => {
-  if (newAuth) {
-    fetchReviews();
-  }
-});
-
 onMounted(async () => {
-  searchQuery.value = route.query.q || "";
   await checkAuthentication();
-  await fetchReviews();
+  await fetchCourseInfo();
 });
 
 const updateReviewData = (updateData) => {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 985f149..b6c9ffe 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -141,23 +141,22 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 import { useAuth } from "../composables/useAuth";
+import { useLanding } from "../composables/useLanding";
 
 const router = useRouter();
 const reviewCount = ref(0);
-const { isAuthenticated } = useAuth();
+const { isAuthenticated, checkAuthentication } = useAuth();
 const searchQuery = ref("");
+const { fetchLanding } = useLanding();
 
 onMounted(async () => {
+  await checkAuthentication();
   await fetchLandingData();
 });
 
 const fetchLandingData = async () => {
   try {
-    const response = await fetch("/api/landing/");
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const data = await response.json();
+    const data = await fetchLanding();
     reviewCount.value = data.review_count;
   } catch (error) {
     console.error("Error fetching landing data:", error);
diff --git a/src/views/Login.vue b/src/views/Login.vue
index fec1008..4337e9b 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -168,7 +168,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { loginWithPassword, clearAuthFlowState } from "../utils/auth";
+import { clearAuthFlowState } from "../utils/auth";
 import AuthInitiate from "../components/AuthInitiate.vue";
 import Turnstile from "../components/Turnstile.vue";
 import PasswordInput from "../components/PasswordInput.vue";
@@ -176,8 +176,7 @@ import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 import { useAuth } from "../composables/useAuth";
 
 const router = useRouter();
-const { isAuthenticated, checkAuthentication, notifyAuthStateChanged } =
-  useAuth();
+const { isAuthenticated, checkAuthentication, loginWithPassword } = useAuth();
 
 const turnstileSiteKey = import.meta.env.VITE_TURNSTILE_SITE_KEY;
 const activeTab = ref("password");
@@ -230,7 +229,6 @@ const handlePasswordLogin = async () => {
       passwordInput.value,
       passwordTurnstileToken.value,
     );
-    notifyAuthStateChanged();
     router.push("/");
   } catch (e) {
     passwordError.value = e.message;
diff --git a/vite.config.js b/vite.config.js
index e684509..ab8b7d5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,7 +9,6 @@ export default defineConfig({
       "/api": {
         target: "http://localhost:8000", // Your Django server
         changeOrigin: false,
-        // rewrite: (path) => path.replace(/^\/api/, ''), //  Not needed if your Django URLs start with /api
       },
     },
   },