diff --git a/src/lib/hooks/callApi.ts b/src/lib/hooks/callApi.ts
index c36b59a..933bbb0 100644
--- a/src/lib/hooks/callApi.ts
+++ b/src/lib/hooks/callApi.ts
@@ -1,41 +1,54 @@
 import { signRequestBody } from "$lib/modules/crypto";
 
-export const refreshToken = async () => {
-  return await fetch("/api/auth/refreshToken", { method: "POST" });
+export const refreshToken = async (fetchInternal = fetch) => {
+  return await fetchInternal("/api/auth/refreshToken", { method: "POST" });
 };
 
-const callApi = async (input: RequestInfo, init?: RequestInit) => {
-  let res = await fetch(input, init);
+const callApi = async (input: RequestInfo, init?: RequestInit, fetchInternal = fetch) => {
+  let res = await fetchInternal(input, init);
   if (res.status === 401) {
     res = await refreshToken();
     if (!res.ok) {
       return res;
     }
-    res = await fetch(input, init);
+    res = await fetchInternal(input, init);
   }
   return res;
 };
 
-export const callGetApi = async (input: RequestInfo) => {
-  return await callApi(input);
+export const callGetApi = async (input: RequestInfo, fetchInternal?: typeof fetch) => {
+  return await callApi(input, undefined, fetchInternal);
 };
 
-export const callPostApi = async <T>(input: RequestInfo, payload: T) => {
-  return await callApi(input, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
+export const callPostApi = async <T>(
+  input: RequestInfo,
+  payload: T,
+  fetchInternal?: typeof fetch,
+) => {
+  return await callApi(
+    input,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
     },
-    body: JSON.stringify(payload),
-  });
+    fetchInternal,
+  );
 };
 
-export const callSignedPostApi = async <T>(input: RequestInfo, payload: T, signKey: CryptoKey) => {
-  return await callApi(input, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
+export const callSignedPostApi = async <T>(
+  input: RequestInfo,
+  payload: T,
+  signKey: CryptoKey,
+  fetchInternal?: typeof fetch,
+) => {
+  return await callApi(
+    input,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: await signRequestBody(payload, signKey),
     },
-    body: await signRequestBody(payload, signKey),
-  });
+    fetchInternal,
+  );
 };
diff --git a/src/routes/(main)/directory/[[id]]/+page.server.ts b/src/routes/(main)/directory/[[id]]/+page.ts
similarity index 76%
rename from src/routes/(main)/directory/[[id]]/+page.server.ts
rename to src/routes/(main)/directory/[[id]]/+page.ts
index d71982e..d80e3e9 100644
--- a/src/routes/(main)/directory/[[id]]/+page.server.ts
+++ b/src/routes/(main)/directory/[[id]]/+page.ts
@@ -1,9 +1,10 @@
 import { error } from "@sveltejs/kit";
 import { z } from "zod";
+import { callGetApi } from "$lib/hooks";
 import type { DirectroyInfoResponse, FileInfoResponse } from "$lib/server/schemas";
-import type { PageServerLoad } from "./$types";
+import type { PageLoad } from "./$types";
 
-export const load: PageServerLoad = async ({ params, fetch }) => {
+export const load: PageLoad = async ({ params, fetch }) => {
   const zodRes = z
     .object({
       id: z.coerce.number().int().positive().optional(),
@@ -13,13 +14,13 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
   const { id } = zodRes.data;
 
   const directoryId = id ? id : ("root" as const);
-  const res = await fetch(`/api/directory/${directoryId}`);
+  const res = await callGetApi(`/api/directory/${directoryId}`, fetch);
   if (!res.ok) error(404, "Not found");
 
   const directoryInfo: DirectroyInfoResponse = await res.json();
   const subDirectoryInfos = await Promise.all(
     directoryInfo.subDirectories.map(async (subDirectoryId) => {
-      const res = await fetch(`/api/directory/${subDirectoryId}`);
+      const res = await callGetApi(`/api/directory/${subDirectoryId}`, fetch);
       if (!res.ok) error(500, "Internal server error");
       return {
         ...((await res.json()) as DirectroyInfoResponse),
@@ -29,7 +30,7 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
   );
   const fileInfos = await Promise.all(
     directoryInfo.files.map(async (fileId) => {
-      const res = await fetch(`/api/file/${fileId}`);
+      const res = await callGetApi(`/api/file/${fileId}`, fetch);
       if (!res.ok) error(500, "Internal server error");
       return {
         ...((await res.json()) as FileInfoResponse),