diff --git a/backend/video/views.py b/backend/video/views.py
index 91e433fb..2f859e8c 100644
--- a/backend/video/views.py
+++ b/backend/video/views.py
@@ -129,7 +129,7 @@ class VideoCommentView(ApiBaseView):
         # pylint: disable=unused-argument
         self.get_document(video_id)
 
-        return Response(self.response, status=self.status_code)
+        return Response(self.response, status=200)
 
 
 class VideoSimilarView(ApiBaseView):
@@ -153,4 +153,4 @@ class VideoSimilarView(ApiBaseView):
             },
         }
         self.get_document_list(request, pagination=False)
-        return Response(self.response, status=self.status_code)
+        return Response(self.response, status=200)
diff --git a/frontend/src/api/actions/createAppriseNotificationUrl.ts b/frontend/src/api/actions/createAppriseNotificationUrl.ts
index a3054517..cfb1d254 100644
--- a/frontend/src/api/actions/createAppriseNotificationUrl.ts
+++ b/frontend/src/api/actions/createAppriseNotificationUrl.ts
@@ -1,8 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type AppriseTaskNameType =
   | 'update_subscribed'
@@ -11,26 +7,10 @@ export type AppriseTaskNameType =
   | 'check_reindex';
 
 const createAppriseNotificationUrl = async (taskName: AppriseTaskNameType, url: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/task/notification/`, {
+  return APIClient('/api/task/notification/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-    body: JSON.stringify({ task_name: taskName, url }),
+    body: { task_name: taskName, url },
   });
-
-  const appriseNotificationUrl = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('createAppriseNotificationUrl', appriseNotificationUrl);
-  }
-
-  return appriseNotificationUrl;
 };
 
 export default createAppriseNotificationUrl;
diff --git a/frontend/src/api/actions/createCustomPlaylist.ts b/frontend/src/api/actions/createCustomPlaylist.ts
index f2d0db1d..76717070 100644
--- a/frontend/src/api/actions/createCustomPlaylist.ts
+++ b/frontend/src/api/actions/createCustomPlaylist.ts
@@ -1,30 +1,10 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const createCustomPlaylist = async (playlistId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/playlist/`, {
+  return APIClient('/api/playlist/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({ data: { create: playlistId } }),
+    body: { data: { create: playlistId } },
   });
-
-  const customPlaylist = await response.json();
-  if (isDevEnvironment()) {
-    console.log('createCustomPlaylist', customPlaylist);
-  }
-
-  return customPlaylist;
 };
 
 export default createCustomPlaylist;
diff --git a/frontend/src/api/actions/createTaskSchedule.ts b/frontend/src/api/actions/createTaskSchedule.ts
index d27ee4d7..346ad3e2 100644
--- a/frontend/src/api/actions/createTaskSchedule.ts
+++ b/frontend/src/api/actions/createTaskSchedule.ts
@@ -1,8 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type TaskScheduleNameType =
   | 'update_subscribed'
@@ -28,26 +24,10 @@ type ScheduleConfigType = {
 };
 
 const createTaskSchedule = async (taskName: TaskScheduleNameType, schedule: ScheduleConfigType) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/task/schedule/${taskName}/`, {
+  return APIClient(`/api/task/schedule/${taskName}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-    body: JSON.stringify(schedule),
+    body: schedule,
   });
-
-  const scheduledTask = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('createTaskSchedule', scheduledTask);
-  }
-
-  return scheduledTask;
 };
 
 export default createTaskSchedule;
diff --git a/frontend/src/api/actions/deleteApiToken.ts b/frontend/src/api/actions/deleteApiToken.ts
index be2a6906..76512416 100644
--- a/frontend/src/api/actions/deleteApiToken.ts
+++ b/frontend/src/api/actions/deleteApiToken.ts
@@ -1,28 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const deleteApiToken = async () => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/token/`, {
+  return APIClient('/api/appsettings/token/', {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const resetToken = await response.json();
-  if (isDevEnvironment()) {
-    console.log('deleteApiToken', resetToken);
-  }
-
-  return resetToken;
 };
 
 export default deleteApiToken;
diff --git a/frontend/src/api/actions/deleteAppriseNotificationUrl.ts b/frontend/src/api/actions/deleteAppriseNotificationUrl.ts
index 0738dc5b..5018b79f 100644
--- a/frontend/src/api/actions/deleteAppriseNotificationUrl.ts
+++ b/frontend/src/api/actions/deleteAppriseNotificationUrl.ts
@@ -1,8 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type AppriseTaskNameType =
   | 'update_subscribed'
@@ -11,26 +7,10 @@ type AppriseTaskNameType =
   | 'check_reindex';
 
 const deleteAppriseNotificationUrl = async (taskName: AppriseTaskNameType) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/task/notification/`, {
+  return APIClient('/api/task/notification/', {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-    body: JSON.stringify({ task_name: taskName }),
+    body: { task_name: taskName },
   });
-
-  const appriseNotification = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteAppriseNotificationUrl', appriseNotification);
-  }
-
-  return appriseNotification;
 };
 
 export default deleteAppriseNotificationUrl;
diff --git a/frontend/src/api/actions/deleteChannel.ts b/frontend/src/api/actions/deleteChannel.ts
index fad7ddb8..e2046a83 100644
--- a/frontend/src/api/actions/deleteChannel.ts
+++ b/frontend/src/api/actions/deleteChannel.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const deleteChannel = async (channelId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/channel/${channelId}/`, {
+  return APIClient(`/api/channel/${channelId}/`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const channelDeleted = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteChannel', channelDeleted);
-  }
-
-  return channelDeleted;
 };
 
 export default deleteChannel;
diff --git a/frontend/src/api/actions/deleteDownloadById.ts b/frontend/src/api/actions/deleteDownloadById.ts
index e46d1844..f9e8f147 100644
--- a/frontend/src/api/actions/deleteDownloadById.ts
+++ b/frontend/src/api/actions/deleteDownloadById.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const deleteDownloadById = async (youtubeId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/download/${youtubeId}/`, {
+  return APIClient(`/api/download/${youtubeId}/`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const downloadState = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteDownloadById', downloadState);
-  }
-
-  return downloadState;
 };
 
 export default deleteDownloadById;
diff --git a/frontend/src/api/actions/deleteDownloadQueueByFilter.ts b/frontend/src/api/actions/deleteDownloadQueueByFilter.ts
index 51d5b949..65a01a3c 100644
--- a/frontend/src/api/actions/deleteDownloadQueueByFilter.ts
+++ b/frontend/src/api/actions/deleteDownloadQueueByFilter.ts
@@ -1,37 +1,14 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type FilterType = 'ignore' | 'pending';
 
 const deleteDownloadQueueByFilter = async (filter: FilterType) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   const searchParams = new URLSearchParams();
+  if (filter) searchParams.append('filter', filter);
 
-  if (filter) {
-    searchParams.append('filter', filter);
-  }
-
-  const response = await fetch(`${apiUrl}/api/download/?${searchParams.toString()}`, {
+  return APIClient(`/api/download/?${searchParams.toString()}`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const downloadState = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteDownloadQueueByFilter', downloadState);
-  }
-
-  return downloadState;
 };
 
 export default deleteDownloadQueueByFilter;
diff --git a/frontend/src/api/actions/deletePlaylist.ts b/frontend/src/api/actions/deletePlaylist.ts
index af5a7951..ce60e8cd 100644
--- a/frontend/src/api/actions/deletePlaylist.ts
+++ b/frontend/src/api/actions/deletePlaylist.ts
@@ -1,34 +1,14 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const deletePlaylist = async (playlistId: string, allVideos = false) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   let params = '';
   if (allVideos) {
     params = '?delete-videos=true';
   }
 
-  const response = await fetch(`${apiUrl}/api/playlist/${playlistId}/${params}`, {
+  return APIClient(`/api/playlist/${playlistId}/${params}`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const playlistDeleted = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deletePlaylist', playlistDeleted);
-  }
-
-  return playlistDeleted;
 };
 
 export default deletePlaylist;
diff --git a/frontend/src/api/actions/deleteTaskSchedule.ts b/frontend/src/api/actions/deleteTaskSchedule.ts
index 26f17650..ac873681 100644
--- a/frontend/src/api/actions/deleteTaskSchedule.ts
+++ b/frontend/src/api/actions/deleteTaskSchedule.ts
@@ -1,30 +1,10 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 import { TaskScheduleNameType } from './createTaskSchedule';
 
 const deleteTaskSchedule = async (taskName: TaskScheduleNameType) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/task/schedule/${taskName}/`, {
+  return APIClient(`/api/task/schedule/${taskName}/`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const scheduledTask = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteTaskSchedule', scheduledTask);
-  }
-
-  return scheduledTask;
 };
 
 export default deleteTaskSchedule;
diff --git a/frontend/src/api/actions/deleteVideo.ts b/frontend/src/api/actions/deleteVideo.ts
index 76aa5b6a..a4ef87a2 100644
--- a/frontend/src/api/actions/deleteVideo.ts
+++ b/frontend/src/api/actions/deleteVideo.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const deleteVideo = async (videoId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/video/${videoId}/`, {
+  return APIClient(`/api/video/${videoId}/`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const videoDeleted = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteVideo', videoDeleted);
-  }
-
-  return videoDeleted;
 };
 
 export default deleteVideo;
diff --git a/frontend/src/api/actions/deleteVideoProgressById.ts b/frontend/src/api/actions/deleteVideoProgressById.ts
index bf497e0f..72275f18 100644
--- a/frontend/src/api/actions/deleteVideoProgressById.ts
+++ b/frontend/src/api/actions/deleteVideoProgressById.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const deleteVideoProgressById = async (youtubeId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/progress/`, {
+  return APIClient(`/api/video/${youtubeId}/progress/`, {
     method: 'DELETE',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const watchedState = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('deleteVideoProgressById', watchedState);
-  }
-
-  return watchedState;
 };
 
 export default deleteVideoProgressById;
diff --git a/frontend/src/api/actions/logOut.ts b/frontend/src/api/actions/logOut.ts
index 4e99c02c..e5dbaefa 100644
--- a/frontend/src/api/actions/logOut.ts
+++ b/frontend/src/api/actions/logOut.ts
@@ -1,22 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 const logOut = async () => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/user/logout/`, {
+  return APIClient('/api/user/logout/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  return response;
 };
 
 export default logOut;
diff --git a/frontend/src/api/actions/queueBackup.ts b/frontend/src/api/actions/queueBackup.ts
index 0ab231a5..4896122d 100644
--- a/frontend/src/api/actions/queueBackup.ts
+++ b/frontend/src/api/actions/queueBackup.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const queueBackup = async () => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/backup/`, {
+  return APIClient('/api/appsettings/backup/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const backupQueued = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('queueBackup', backupQueued);
-  }
-
-  return backupQueued;
 };
 
 export default queueBackup;
diff --git a/frontend/src/api/actions/queueReindex.ts b/frontend/src/api/actions/queueReindex.ts
index 17cfa460..18a611a1 100644
--- a/frontend/src/api/actions/queueReindex.ts
+++ b/frontend/src/api/actions/queueReindex.ts
@@ -1,8 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type ReindexType = 'channel' | 'video' | 'playlist';
 
@@ -13,36 +9,15 @@ export const ReindexTypeEnum = {
 };
 
 const queueReindex = async (id: string, type: ReindexType, reindexVideos = false) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   let params = '';
   if (reindexVideos) {
     params = '?extract_videos=true';
   }
 
-  const body = JSON.stringify({
-    [type]: [id],
-  });
-
-  const response = await fetch(`${apiUrl}/api/refresh/${params}`, {
+  return APIClient(`/api/refresh/${params}`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body,
+    body: { [type]: [id] },
   });
-
-  const channelDeleted = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('queueReindex', channelDeleted);
-  }
-
-  return channelDeleted;
 };
 
 export default queueReindex;
diff --git a/frontend/src/api/actions/queueSnapshot.ts b/frontend/src/api/actions/queueSnapshot.ts
index 6d55c47e..cba692ad 100644
--- a/frontend/src/api/actions/queueSnapshot.ts
+++ b/frontend/src/api/actions/queueSnapshot.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const queueSnapshot = async () => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/snapshot/`, {
+  return APIClient('/api/appsettings/snapshot/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const snapshotQueued = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('queueSnapshot', snapshotQueued);
-  }
-
-  return snapshotQueued;
 };
 
 export default queueSnapshot;
diff --git a/frontend/src/api/actions/restoreBackup.ts b/frontend/src/api/actions/restoreBackup.ts
index 996f4313..95f15d42 100644
--- a/frontend/src/api/actions/restoreBackup.ts
+++ b/frontend/src/api/actions/restoreBackup.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const restoreBackup = async (fileName: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/backup/${fileName}/`, {
+  return APIClient(`/api/appsettings/backup/${fileName}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const backupRestored = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('restoreBackup', backupRestored);
-  }
-
-  return backupRestored;
 };
 
 export default restoreBackup;
diff --git a/frontend/src/api/actions/restoreSnapshot.ts b/frontend/src/api/actions/restoreSnapshot.ts
index 6d77021f..c33141f9 100644
--- a/frontend/src/api/actions/restoreSnapshot.ts
+++ b/frontend/src/api/actions/restoreSnapshot.ts
@@ -1,29 +1,9 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const restoreSnapshot = async (snapshotId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/snapshot/${snapshotId}/`, {
+  return APIClient(`/api/appsettings/snapshot/${snapshotId}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const backupRestored = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('restoreSnapshot', backupRestored);
-  }
-
-  return backupRestored;
 };
 
 export default restoreSnapshot;
diff --git a/frontend/src/api/actions/signIn.ts b/frontend/src/api/actions/signIn.ts
index 41cd32a9..6df51b43 100644
--- a/frontend/src/api/actions/signIn.ts
+++ b/frontend/src/api/actions/signIn.ts
@@ -12,6 +12,7 @@ export type LoginResponseType = {
 };
 
 const signIn = async (username: string, password: string, saveLogin: boolean) => {
+  // works differently, response status is checked
   const apiUrl = getApiUrl();
   const csrfCookie = getCookie('csrftoken');
 
diff --git a/frontend/src/api/actions/stopTaskByName.ts b/frontend/src/api/actions/stopTaskByName.ts
index 77f599bf..7103879a 100644
--- a/frontend/src/api/actions/stopTaskByName.ts
+++ b/frontend/src/api/actions/stopTaskByName.ts
@@ -1,27 +1,10 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 const stopTaskByName = async (taskId: string) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/task/by-id/${taskId}/`, {
+  APIClient(`/api/task/by-id/${taskId}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({ command: 'stop' }),
+    body: { command: 'stop' },
   });
-
-  const downloadQueueState = await response.json();
-  console.log('stopTaskByName', downloadQueueState);
-
-  return downloadQueueState;
 };
 
 export default stopTaskByName;
diff --git a/frontend/src/api/actions/updateAppsettingsConfig.ts b/frontend/src/api/actions/updateAppsettingsConfig.ts
index 60c82dde..59207d51 100644
--- a/frontend/src/api/actions/updateAppsettingsConfig.ts
+++ b/frontend/src/api/actions/updateAppsettingsConfig.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 import { AppSettingsConfigType } from '../loader/loadAppsettingsConfig';
 
 type ObjectType = Record<
@@ -32,23 +29,10 @@ function flattenObject(ob: ObjectType) {
 }
 
 const updateAppsettingsConfig = async (config: AppSettingsConfigType) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/config/`, {
+  return APIClient('/api/appsettings/config/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-    body: JSON.stringify(flattenObject(config)),
+    body: flattenObject(config),
   });
-
-  const appSettingsConfig = await response.json();
-  console.log('updateAppsettingsConfig', appSettingsConfig);
-
-  return appSettingsConfig;
 };
 
 export default updateAppsettingsConfig;
diff --git a/frontend/src/api/actions/updateChannelOverwrite.ts b/frontend/src/api/actions/updateChannelOverwrite.ts
index ab412041..f97d21fd 100644
--- a/frontend/src/api/actions/updateChannelOverwrite.ts
+++ b/frontend/src/api/actions/updateChannelOverwrite.ts
@@ -1,37 +1,20 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 const updateChannelOverwrites = async (
   channelId: string,
   configKey: string,
   configValue: string | boolean | number | null,
 ) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   const data = {
     channel_overwrites: {
       [configKey]: configValue,
     },
   };
 
-  const response = await fetch(`${apiUrl}/api/channel/${channelId}/`, {
+  return APIClient(`/api/channel/${channelId}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify(data),
+    body: data,
   });
-
-  const channelSubscription = await response.json();
-  console.log('updateChannelOverwrites', channelSubscription);
-
-  return channelSubscription;
 };
 
 export default updateChannelOverwrites;
diff --git a/frontend/src/api/actions/updateChannelSubscription.ts b/frontend/src/api/actions/updateChannelSubscription.ts
index 94f6a1d9..32d26f44 100644
--- a/frontend/src/api/actions/updateChannelSubscription.ts
+++ b/frontend/src/api/actions/updateChannelSubscription.ts
@@ -1,12 +1,6 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 const updateChannelSubscription = async (channelIds: string, status: boolean) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   const channels = [];
   const containsMultiple = channelIds.includes('\n');
 
@@ -20,23 +14,10 @@ const updateChannelSubscription = async (channelIds: string, status: boolean) =>
     channels.push({ channel_id: channelIds, channel_subscribed: status });
   }
 
-  const response = await fetch(`${apiUrl}/api/channel/`, {
+  return APIClient('/api/channel/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({
-      data: [...channels],
-    }),
+    body: { data: [...channels] },
   });
-
-  const channelSubscription = await response.json();
-  console.log('updateChannelSubscription', channelSubscription);
-
-  return channelSubscription;
 };
 
 export default updateChannelSubscription;
diff --git a/frontend/src/api/actions/updateCookie.ts b/frontend/src/api/actions/updateCookie.ts
index 95a82d14..0e04d172 100644
--- a/frontend/src/api/actions/updateCookie.ts
+++ b/frontend/src/api/actions/updateCookie.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 export type ValidatedCookieType = {
   cookie_enabled: boolean;
@@ -12,22 +9,9 @@ export type ValidatedCookieType = {
 };
 
 const updateCookie = async (): Promise<ValidatedCookieType> => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/appsettings/cookie/`, {
+  return APIClient('/api/appsettings/cookie/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const validatedCookie = await response.json();
-  console.log('updateCookie', validatedCookie);
-
-  return validatedCookie;
 };
 
 export default updateCookie;
diff --git a/frontend/src/api/actions/updateCustomPlaylist.ts b/frontend/src/api/actions/updateCustomPlaylist.ts
index 67daa62b..bef8403d 100644
--- a/frontend/src/api/actions/updateCustomPlaylist.ts
+++ b/frontend/src/api/actions/updateCustomPlaylist.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 type CustomPlaylistActionType = 'create' | 'up' | 'down' | 'top' | 'bottom' | 'remove';
 
@@ -10,24 +7,10 @@ const updateCustomPlaylist = async (
   playlistId: string,
   videoId: string,
 ) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/playlist/${playlistId}/`, {
+  return APIClient(`/api/playlist/${playlistId}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({ action, video_id: videoId }),
+    body: { action, video_id: videoId },
   });
-
-  const customPlaylist = await response.json();
-  console.log('updateCustomPlaylist', action, customPlaylist);
-
-  return customPlaylist;
 };
 
 export default updateCustomPlaylist;
diff --git a/frontend/src/api/actions/updateDownloadQueue.ts b/frontend/src/api/actions/updateDownloadQueue.ts
index c006d72b..a96e71cb 100644
--- a/frontend/src/api/actions/updateDownloadQueue.ts
+++ b/frontend/src/api/actions/updateDownloadQueue.ts
@@ -1,12 +1,6 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 const updateDownloadQueue = async (youtubeIdStrings: string, autostart: boolean) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   const urls = [];
   const containsMultiple = youtubeIdStrings.includes('\n');
 
@@ -25,23 +19,10 @@ const updateDownloadQueue = async (youtubeIdStrings: string, autostart: boolean)
     params = '?autostart=true';
   }
 
-  const response = await fetch(`${apiUrl}/api/download/${params}`, {
+  return APIClient(`/api/download/${params}`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({
-      data: [...urls],
-    }),
+    body: { data: [...urls] },
   });
-
-  const downloadState = await response.json();
-  console.log('updateDownloadQueue', downloadState);
-
-  return downloadState;
 };
 
 export default updateDownloadQueue;
diff --git a/frontend/src/api/actions/updateDownloadQueueStatusById.ts b/frontend/src/api/actions/updateDownloadQueueStatusById.ts
index fafcca8f..9673aab7 100644
--- a/frontend/src/api/actions/updateDownloadQueueStatusById.ts
+++ b/frontend/src/api/actions/updateDownloadQueueStatusById.ts
@@ -1,31 +1,12 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 export type DownloadQueueStatus = 'ignore' | 'pending' | 'priority';
 
 const updateDownloadQueueStatusById = async (youtubeId: string, status: DownloadQueueStatus) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/download/${youtubeId}/`, {
+  return APIClient(`/api/download/${youtubeId}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({
-      status,
-    }),
+    body: { status: status },
   });
-
-  const downloadQueueState = await response.json();
-  console.log('updateDownloadQueueStatusById', downloadQueueState);
-
-  return downloadQueueState;
 };
 
 export default updateDownloadQueueStatusById;
diff --git a/frontend/src/api/actions/updatePlaylistSubscription.ts b/frontend/src/api/actions/updatePlaylistSubscription.ts
index e7b6e307..a920c673 100644
--- a/frontend/src/api/actions/updatePlaylistSubscription.ts
+++ b/frontend/src/api/actions/updatePlaylistSubscription.ts
@@ -1,12 +1,6 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 const updatePlaylistSubscription = async (playlistIds: string, status: boolean) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   const playlists = [];
   const containsMultiple = playlistIds.includes('\n');
 
@@ -20,23 +14,10 @@ const updatePlaylistSubscription = async (playlistIds: string, status: boolean)
     playlists.push({ playlist_id: playlistIds, playlist_subscribed: status });
   }
 
-  const response = await fetch(`${apiUrl}/api/playlist/`, {
+  return APIClient('/api/playlist/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({
-      data: [...playlists],
-    }),
+    body: { data: [...playlists] },
   });
-
-  const playlistSubscription = await response.json();
-  console.log('updatePlaylistSubscription', playlistSubscription);
-
-  return playlistSubscription;
 };
 
 export default updatePlaylistSubscription;
diff --git a/frontend/src/api/actions/updateTaskByName.ts b/frontend/src/api/actions/updateTaskByName.ts
index 8dc77ccb..786c1a26 100644
--- a/frontend/src/api/actions/updateTaskByName.ts
+++ b/frontend/src/api/actions/updateTaskByName.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 type TaskNamesType =
   | 'download_pending'
@@ -11,22 +8,9 @@ type TaskNamesType =
   | 'rescan_filesystem';
 
 const updateTaskByName = async (taskName: TaskNamesType) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/task/by-name/${taskName}/`, {
+  return APIClient(`/api/task/by-name/${taskName}/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
   });
-
-  const downloadQueueState = await response.json();
-  console.log('updateTaskByName', downloadQueueState);
-
-  return downloadQueueState;
 };
 
 export default updateTaskByName;
diff --git a/frontend/src/api/actions/updateUserConfig.ts b/frontend/src/api/actions/updateUserConfig.ts
index 9831d191..c0ff4a5d 100644
--- a/frontend/src/api/actions/updateUserConfig.ts
+++ b/frontend/src/api/actions/updateUserConfig.ts
@@ -1,8 +1,5 @@
 import { SortByType, SortOrderType, ViewLayoutType } from '../../pages/Home';
-import getApiUrl from '../../configuration/getApiUrl';
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getCookie from '../../functions/getCookie';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
+import APIClient from '../../functions/APIClient';
 
 export type UserMeType = {
   id: number;
@@ -33,24 +30,10 @@ export type UserConfigType = {
 };
 
 const updateUserConfig = async (config: Partial<UserConfigType>): Promise<UserConfigType> => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/user/me/`, {
+  return APIClient('/api/user/me/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({ config }),
+    body: { config: config },
   });
-
-  const userConfig = await response.json();
-  console.log('updateUserConfig', userConfig);
-
-  return userConfig;
 };
 
 export default updateUserConfig;
diff --git a/frontend/src/api/actions/updateVideoProgressById.ts b/frontend/src/api/actions/updateVideoProgressById.ts
index bbb8b40a..8ef6b7ff 100644
--- a/frontend/src/api/actions/updateVideoProgressById.ts
+++ b/frontend/src/api/actions/updateVideoProgressById.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 
 type VideoProgressProp = {
   youtubeId: string;
@@ -9,26 +6,10 @@ type VideoProgressProp = {
 };
 
 const updateVideoProgressById = async ({ youtubeId, currentProgress }: VideoProgressProp) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/progress/`, {
+  return APIClient(`/api/video/${youtubeId}/progress/`, {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({
-      position: currentProgress,
-    }),
+    body: { position: currentProgress },
   });
-
-  const userConfig = await response.json();
-  console.log('updateVideoProgressById', userConfig);
-
-  return userConfig;
 };
 
 export default updateVideoProgressById;
diff --git a/frontend/src/api/actions/updateWatchedState.ts b/frontend/src/api/actions/updateWatchedState.ts
index 449a1191..08deddff 100644
--- a/frontend/src/api/actions/updateWatchedState.ts
+++ b/frontend/src/api/actions/updateWatchedState.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
+import APIClient from '../../functions/APIClient';
 import deleteVideoProgressById from './deleteVideoProgressById';
 
 export type Watched = {
@@ -10,28 +7,14 @@ export type Watched = {
 };
 
 const updateWatchedState = async (watched: Watched) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
   if (watched.is_watched) {
     await deleteVideoProgressById(watched.id);
   }
 
-  const response = await fetch(`${apiUrl}/api/watched/`, {
+  return APIClient('/api/watched/', {
     method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify(watched),
+    body: watched,
   });
-
-  const watchedState = await response.json();
-  console.log('updateWatchedState', watchedState);
-
-  return watchedState;
 };
 
 export default updateWatchedState;
diff --git a/frontend/src/api/loader/loadApiToken.ts b/frontend/src/api/loader/loadApiToken.ts
index 204eb041..86f9f455 100644
--- a/frontend/src/api/loader/loadApiToken.ts
+++ b/frontend/src/api/loader/loadApiToken.ts
@@ -1,36 +1,11 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type ApiTokenResponse = {
   token: string;
 };
 
 const loadApiToken = async (): Promise<ApiTokenResponse> => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  try {
-    const response = await fetch(`${apiUrl}/api/appsettings/token/`, {
-      headers: {
-        ...defaultHeaders,
-        'X-CSRFToken': csrfCookie || '',
-      },
-      credentials: getFetchCredentials(),
-    });
-
-    const apiToken = await response.json();
-
-    if (isDevEnvironment()) {
-      console.log('loadApiToken', apiToken);
-    }
-
-    return apiToken;
-  } catch {
-    return { token: '' };
-  }
+  return APIClient('/api/appsettings/token/');
 };
 
 export default loadApiToken;
diff --git a/frontend/src/api/loader/loadAppriseNotification.ts b/frontend/src/api/loader/loadAppriseNotification.ts
index 3e1a1449..4f276dd0 100644
--- a/frontend/src/api/loader/loadAppriseNotification.ts
+++ b/frontend/src/api/loader/loadAppriseNotification.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type AppriseNotificationType = {
   check_reindex?: {
@@ -23,20 +20,7 @@ export type AppriseNotificationType = {
 };
 
 const loadAppriseNotification = async (): Promise<AppriseNotificationType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/task/notification/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notification = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadAppriseNotification', notification);
-  }
-
-  return notification;
+  return APIClient('/api/task/notification/');
 };
 
 export default loadAppriseNotification;
diff --git a/frontend/src/api/loader/loadAppsettingsConfig.ts b/frontend/src/api/loader/loadAppsettingsConfig.ts
index 8c9c8f66..1aeacc22 100644
--- a/frontend/src/api/loader/loadAppsettingsConfig.ts
+++ b/frontend/src/api/loader/loadAppsettingsConfig.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type AppSettingsConfigType = {
   subscriptions: {
@@ -35,20 +32,7 @@ export type AppSettingsConfigType = {
 };
 
 const loadAppsettingsConfig = async (): Promise<AppSettingsConfigType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/appsettings/config/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const appSettingsConfig = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadApplicationConfig', appSettingsConfig);
-  }
-
-  return appSettingsConfig;
+  return APIClient('/api/appsettings/config/');
 };
 
 export default loadAppsettingsConfig;
diff --git a/frontend/src/api/loader/loadAuth.ts b/frontend/src/api/loader/loadAuth.ts
index 31848cf0..dc0b24d9 100644
--- a/frontend/src/api/loader/loadAuth.ts
+++ b/frontend/src/api/loader/loadAuth.ts
@@ -4,6 +4,7 @@ import getFetchCredentials from '../../configuration/getFetchCredentials';
 import getCookie from '../../functions/getCookie';
 
 const loadAuth = async () => {
+  // works differently, return response to check for status in main.tsx
   const apiUrl = getApiUrl();
   const csrfCookie = getCookie('csrftoken');
 
diff --git a/frontend/src/api/loader/loadBackupList.ts b/frontend/src/api/loader/loadBackupList.ts
index 252ce4ef..64d11951 100644
--- a/frontend/src/api/loader/loadBackupList.ts
+++ b/frontend/src/api/loader/loadBackupList.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadBackupList = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/appsettings/backup/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const backupList = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadBackupList', backupList);
-  }
-
-  return backupList;
+  return APIClient('/api/appsettings/backup/');
 };
 
 export default loadBackupList;
diff --git a/frontend/src/api/loader/loadChannelAggs.ts b/frontend/src/api/loader/loadChannelAggs.ts
index e3d175d9..435cdba3 100644
--- a/frontend/src/api/loader/loadChannelAggs.ts
+++ b/frontend/src/api/loader/loadChannelAggs.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type ChannelAggsType = {
   total_items: {
@@ -17,20 +14,7 @@ export type ChannelAggsType = {
 };
 
 const loadChannelAggs = async (channelId: string): Promise<ChannelAggsType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/channel/${channelId}/aggs/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const channel = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadChannelAggs', channel);
-  }
-
-  return channel;
+  return APIClient(`/api/channel/${channelId}/aggs/`);
 };
 
 export default loadChannelAggs;
diff --git a/frontend/src/api/loader/loadChannelById.ts b/frontend/src/api/loader/loadChannelById.ts
index de4e581c..05c72722 100644
--- a/frontend/src/api/loader/loadChannelById.ts
+++ b/frontend/src/api/loader/loadChannelById.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadChannelById = async (youtubeChannelId: string) => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/channel/${youtubeChannelId}/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const channel = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadChannelById', channel);
-  }
-
-  return channel;
+  return APIClient(`/api/channel/${youtubeChannelId}/`);
 };
 
 export default loadChannelById;
diff --git a/frontend/src/api/loader/loadChannelList.ts b/frontend/src/api/loader/loadChannelList.ts
index bff7006f..42cda1fd 100644
--- a/frontend/src/api/loader/loadChannelList.ts
+++ b/frontend/src/api/loader/loadChannelList.ts
@@ -1,33 +1,14 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadChannelList = async (page: number, showSubscribed: boolean) => {
-  const apiUrl = getApiUrl();
-
   const searchParams = new URLSearchParams();
 
-  if (page) {
-    searchParams.append('page', page.toString());
-  }
+  if (page) searchParams.append('page', page.toString());
+  if (showSubscribed) searchParams.append('filter', 'subscribed');
 
-  if (showSubscribed) {
-    searchParams.append('filter', 'subscribed');
-  }
+  const endpoint = `/api/channel/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
 
-  const response = await fetch(`${apiUrl}/api/channel/?${searchParams.toString()}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const channels = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadChannelList', channels);
-  }
-
-  return channels;
+  return APIClient(endpoint);
 };
 
 export default loadChannelList;
diff --git a/frontend/src/api/loader/loadChannelNav.ts b/frontend/src/api/loader/loadChannelNav.ts
index 79486afe..ee0aff16 100644
--- a/frontend/src/api/loader/loadChannelNav.ts
+++ b/frontend/src/api/loader/loadChannelNav.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type ChannelNavResponseType = {
   has_streams: boolean;
@@ -11,20 +8,7 @@ export type ChannelNavResponseType = {
 };
 
 const loadChannelNav = async (youtubeChannelId: string): Promise<ChannelNavResponseType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/channel/${youtubeChannelId}/nav/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const channel = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadChannelNav', channel);
-  }
-
-  return channel;
+  return APIClient(`/api/channel/${youtubeChannelId}/nav/`);
 };
 
 export default loadChannelNav;
diff --git a/frontend/src/api/loader/loadCommentsbyVideoId.ts b/frontend/src/api/loader/loadCommentsbyVideoId.ts
index 294a13b6..5d5484b1 100644
--- a/frontend/src/api/loader/loadCommentsbyVideoId.ts
+++ b/frontend/src/api/loader/loadCommentsbyVideoId.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadCommentsbyVideoId = async (youtubeId: string) => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/comment/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const comments = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadCommentsbyVideoId', comments);
-  }
-
-  return comments;
+  return APIClient(`/api/video/${youtubeId}/comment/`);
 };
 
 export default loadCommentsbyVideoId;
diff --git a/frontend/src/api/loader/loadDownloadAggs.ts b/frontend/src/api/loader/loadDownloadAggs.ts
index 56a21bc8..113fa5d2 100644
--- a/frontend/src/api/loader/loadDownloadAggs.ts
+++ b/frontend/src/api/loader/loadDownloadAggs.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type DownloadAggsBucket = {
   key: string[];
@@ -18,20 +15,7 @@ export type DownloadAggsType = {
 };
 
 const loadDownloadAggs = async (): Promise<DownloadAggsType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/download/aggs/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const downloadAggs = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadDownloadAggs', downloadAggs);
-  }
-
-  return downloadAggs;
+  return APIClient('/api/download/aggs/');
 };
 
 export default loadDownloadAggs;
diff --git a/frontend/src/api/loader/loadDownloadQueue.ts b/frontend/src/api/loader/loadDownloadQueue.ts
index f9628deb..8aa28d90 100644
--- a/frontend/src/api/loader/loadDownloadQueue.ts
+++ b/frontend/src/api/loader/loadDownloadQueue.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 import { DownloadResponseType } from '../../pages/Download';
 
 const loadDownloadQueue = async (
@@ -9,32 +6,15 @@ const loadDownloadQueue = async (
   channelId: string | null,
   showIgnored: boolean,
 ): Promise<DownloadResponseType> => {
-  const apiUrl = getApiUrl();
-
   const searchParams = new URLSearchParams();
 
-  if (page) {
-    searchParams.append('page', page.toString());
-  }
-
-  if (channelId) {
-    searchParams.append('channel', channelId);
-  }
-
+  if (page) searchParams.append('page', page.toString());
+  if (channelId) searchParams.append('channel', channelId);
   searchParams.append('filter', showIgnored ? 'ignore' : 'pending');
 
-  const response = await fetch(`${apiUrl}/api/download/?${searchParams.toString()}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
+  const endpoint = `/api/download/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
 
-  const playlist = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadDownloadQueue', playlist);
-  }
-
-  return playlist;
+  return APIClient(endpoint);
 };
 
 export default loadDownloadQueue;
diff --git a/frontend/src/api/loader/loadNotifications.ts b/frontend/src/api/loader/loadNotifications.ts
index 1bd3f08a..a8fb9974 100644
--- a/frontend/src/api/loader/loadNotifications.ts
+++ b/frontend/src/api/loader/loadNotifications.ts
@@ -1,30 +1,16 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type NotificationPages = 'download' | 'settings' | 'channel' | 'all';
 
 const loadNotifications = async (pageName: NotificationPages, includeReindex = false) => {
-  const apiUrl = getApiUrl();
+  const searchParams = new URLSearchParams();
 
-  let params = '';
   if (!includeReindex && pageName !== 'all') {
-    params = `?filter=${pageName}`;
+    searchParams.append('filter', pageName);
   }
 
-  const response = await fetch(`${apiUrl}/api/notification/${params}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadNotifications', notifications);
-  }
-
-  return notifications;
+  const endpoint = `/api/notification/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+  return APIClient(endpoint);
 };
 
 export default loadNotifications;
diff --git a/frontend/src/api/loader/loadPlaylistById.ts b/frontend/src/api/loader/loadPlaylistById.ts
index d0ad78e6..ad31fcf6 100644
--- a/frontend/src/api/loader/loadPlaylistById.ts
+++ b/frontend/src/api/loader/loadPlaylistById.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadPlaylistById = async (playlistId: string | undefined) => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/playlist/${playlistId}/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const videos = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadPlaylistById', videos);
-  }
-
-  return videos;
+  return APIClient(`/api/playlist/${playlistId}/`);
 };
 
 export default loadPlaylistById;
diff --git a/frontend/src/api/loader/loadPlaylistList.ts b/frontend/src/api/loader/loadPlaylistList.ts
index fd42ff3b..c8779e6a 100644
--- a/frontend/src/api/loader/loadPlaylistList.ts
+++ b/frontend/src/api/loader/loadPlaylistList.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type PlaylistType = 'regular' | 'custom';
 
@@ -13,38 +10,15 @@ type LoadPlaylistListProps = {
 };
 
 const loadPlaylistList = async ({ channel, page, subscribed, type }: LoadPlaylistListProps) => {
-  const apiUrl = getApiUrl();
-
   const searchParams = new URLSearchParams();
 
-  if (channel) {
-    searchParams.append('channel', channel);
-  }
+  if (channel) searchParams.append('channel', channel);
+  if (page) searchParams.append('page', page.toString());
+  if (subscribed) searchParams.append('subscribed', subscribed.toString());
+  if (type) searchParams.append('type', type);
 
-  if (page) {
-    searchParams.append('page', page.toString());
-  }
-
-  if (subscribed) {
-    searchParams.append('subscribed', subscribed.toString());
-  }
-
-  if (type) {
-    searchParams.append('type', type);
-  }
-
-  const response = await fetch(`${apiUrl}/api/playlist/?${searchParams.toString()}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const playlist = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadPlaylistList', playlist);
-  }
-
-  return playlist;
+  const endpoint = `/api/playlist/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+  return APIClient(endpoint);
 };
 
 export default loadPlaylistList;
diff --git a/frontend/src/api/loader/loadSchedule.ts b/frontend/src/api/loader/loadSchedule.ts
index e67b73e3..ae32c992 100644
--- a/frontend/src/api/loader/loadSchedule.ts
+++ b/frontend/src/api/loader/loadSchedule.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type ScheduleType = {
   name: string;
@@ -17,20 +14,7 @@ type ScheduleType = {
 export type ScheduleResponseType = ScheduleType[];
 
 const loadSchedule = async (): Promise<ScheduleResponseType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/task/schedule/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const schedule = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadSchedule', schedule);
-  }
-
-  return schedule;
+  return APIClient('/api/task/schedule/');
 };
 
 export default loadSchedule;
diff --git a/frontend/src/api/loader/loadSearch.ts b/frontend/src/api/loader/loadSearch.ts
index 40d2c6a1..fe11c969 100644
--- a/frontend/src/api/loader/loadSearch.ts
+++ b/frontend/src/api/loader/loadSearch.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadSearch = async (query: string) => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/search/?query=${query}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const searchResults = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadSearch', searchResults);
-  }
-
-  return searchResults;
+  return APIClient(`/api/search/?query=${query}`);
 };
 
 export default loadSearch;
diff --git a/frontend/src/api/loader/loadSimmilarVideosById.ts b/frontend/src/api/loader/loadSimmilarVideosById.ts
index 221b454c..36b1d8be 100644
--- a/frontend/src/api/loader/loadSimmilarVideosById.ts
+++ b/frontend/src/api/loader/loadSimmilarVideosById.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadSimmilarVideosById = async (youtubeId: string) => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/similar/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const videos = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadSimmilarVideosById', videos);
-  }
-
-  return videos;
+  return APIClient(`/api/video/${youtubeId}/similar/`);
 };
 
 export default loadSimmilarVideosById;
diff --git a/frontend/src/api/loader/loadSnapshots.ts b/frontend/src/api/loader/loadSnapshots.ts
index a6560016..39593af2 100644
--- a/frontend/src/api/loader/loadSnapshots.ts
+++ b/frontend/src/api/loader/loadSnapshots.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadSnapshots = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/appsettings/snapshot/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const backupList = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadSnapshots', backupList);
-  }
-
-  return backupList;
+  return APIClient('/api/appsettings/snapshot/');
 };
 
 export default loadSnapshots;
diff --git a/frontend/src/api/loader/loadStatsBiggestChannels.ts b/frontend/src/api/loader/loadStatsBiggestChannels.ts
index 14a66438..ec522277 100644
--- a/frontend/src/api/loader/loadStatsBiggestChannels.ts
+++ b/frontend/src/api/loader/loadStatsBiggestChannels.ts
@@ -1,28 +1,12 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 type BiggestChannelsOrderType = 'doc_count' | 'duration' | 'media_size';
 
 const loadStatsBiggestChannels = async (order: BiggestChannelsOrderType) => {
-  const apiUrl = getApiUrl();
-
   const searchParams = new URLSearchParams();
   searchParams.append('order', order);
 
-  const response = await fetch(`${apiUrl}/api/stats/biggestchannels/?${searchParams.toString()}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsBiggestChannels', notifications);
-  }
-
-  return notifications;
+  return APIClient(`/api/stats/biggestchannels/?${searchParams.toString()}`);
 };
 
 export default loadStatsBiggestChannels;
diff --git a/frontend/src/api/loader/loadStatsChannel.ts b/frontend/src/api/loader/loadStatsChannel.ts
index 6e8fd1f3..e149a658 100644
--- a/frontend/src/api/loader/loadStatsChannel.ts
+++ b/frontend/src/api/loader/loadStatsChannel.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadStatsChannel = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/stats/channel/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsChannel', notifications);
-  }
-
-  return notifications;
+  return APIClient('/api/stats/channel/');
 };
 
 export default loadStatsChannel;
diff --git a/frontend/src/api/loader/loadStatsDownload.ts b/frontend/src/api/loader/loadStatsDownload.ts
index 65152ff2..cec35971 100644
--- a/frontend/src/api/loader/loadStatsDownload.ts
+++ b/frontend/src/api/loader/loadStatsDownload.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadStatsDownload = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/stats/download/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsDownload', notifications);
-  }
-
-  return notifications;
+  return APIClient('/api/stats/download/');
 };
 
 export default loadStatsDownload;
diff --git a/frontend/src/api/loader/loadStatsDownloadHistory.ts b/frontend/src/api/loader/loadStatsDownloadHistory.ts
index 45a1ca40..095504ab 100644
--- a/frontend/src/api/loader/loadStatsDownloadHistory.ts
+++ b/frontend/src/api/loader/loadStatsDownloadHistory.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadStatsDownloadHistory = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/stats/downloadhist/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsDownloadHistory', notifications);
-  }
-
-  return notifications;
+  return APIClient('/api/stats/downloadhist/');
 };
 
 export default loadStatsDownloadHistory;
diff --git a/frontend/src/api/loader/loadStatsPlaylist.ts b/frontend/src/api/loader/loadStatsPlaylist.ts
index c40bba47..22f4dd01 100644
--- a/frontend/src/api/loader/loadStatsPlaylist.ts
+++ b/frontend/src/api/loader/loadStatsPlaylist.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadStatsPlaylist = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/stats/playlist/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsPlaylist', notifications);
-  }
-
-  return notifications;
+  return APIClient('/api/stats/playlist/');
 };
 
 export default loadStatsPlaylist;
diff --git a/frontend/src/api/loader/loadStatsVideo.ts b/frontend/src/api/loader/loadStatsVideo.ts
index c214435d..d1812e21 100644
--- a/frontend/src/api/loader/loadStatsVideo.ts
+++ b/frontend/src/api/loader/loadStatsVideo.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadStatsVideo = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/stats/video/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsVideo', notifications);
-  }
-
-  return notifications;
+  return APIClient('/api/stats/video/');
 };
 
 export default loadStatsVideo;
diff --git a/frontend/src/api/loader/loadStatsWatchProgress.ts b/frontend/src/api/loader/loadStatsWatchProgress.ts
index 395fd8ea..3fdf58f9 100644
--- a/frontend/src/api/loader/loadStatsWatchProgress.ts
+++ b/frontend/src/api/loader/loadStatsWatchProgress.ts
@@ -1,23 +1,7 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 const loadStatsWatchProgress = async () => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/stats/watch/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const notifications = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadStatsWatchProgress', notifications);
-  }
-
-  return notifications;
+  return APIClient('/api/stats/watch/');
 };
 
 export default loadStatsWatchProgress;
diff --git a/frontend/src/api/loader/loadUserConfig.ts b/frontend/src/api/loader/loadUserConfig.ts
index 2fa00996..3cd89736 100644
--- a/frontend/src/api/loader/loadUserConfig.ts
+++ b/frontend/src/api/loader/loadUserConfig.ts
@@ -1,24 +1,8 @@
 import { UserMeType } from '../actions/updateUserConfig';
-import isDevEnvironment from '../../functions/isDevEnvironment';
-import getApiUrl from '../../configuration/getApiUrl';
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
+import APIClient from '../../functions/APIClient';
 
 const loadUserMeConfig = async (): Promise<UserMeType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/user/me/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const userConfig = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadUserMeConfig', userConfig);
-  }
-
-  return userConfig;
+  return APIClient('/api/user/me/');
 };
 
 export default loadUserMeConfig;
diff --git a/frontend/src/api/loader/loadVideoById.ts b/frontend/src/api/loader/loadVideoById.ts
index 4081acef..ed01831c 100644
--- a/frontend/src/api/loader/loadVideoById.ts
+++ b/frontend/src/api/loader/loadVideoById.ts
@@ -1,24 +1,8 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 import { VideoResponseType } from '../../pages/Video';
 
 const loadVideoById = async (youtubeId: string): Promise<VideoResponseType> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const videos = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadVideoById', videos);
-  }
-
-  return videos;
+  return APIClient(`/api/video/${youtubeId}/`);
 };
 
 export default loadVideoById;
diff --git a/frontend/src/api/loader/loadVideoListByPage.ts b/frontend/src/api/loader/loadVideoListByPage.ts
index 16c45c5a..c2c019da 100644
--- a/frontend/src/api/loader/loadVideoListByPage.ts
+++ b/frontend/src/api/loader/loadVideoListByPage.ts
@@ -1,9 +1,6 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
 import { ConfigType, SortByType, SortOrderType, VideoType } from '../../pages/Home';
 import { PaginationType } from '../../components/Pagination';
+import APIClient from '../../functions/APIClient';
 
 export type VideoListByFilterResponseType = {
   data?: VideoType[];
@@ -27,48 +24,22 @@ type FilterType = {
 const loadVideoListByFilter = async (
   filter: FilterType,
 ): Promise<VideoListByFilterResponseType> => {
-  const apiUrl = getApiUrl();
-
   const searchParams = new URLSearchParams();
 
-  if (filter.page) {
-    searchParams.append('page', filter.page.toString());
-  }
-
   if (filter.playlist) {
     searchParams.append('playlist', filter.playlist);
   } else if (filter.channel) {
     searchParams.append('channel', filter.channel);
   }
 
-  if (filter.watch) {
-    searchParams.append('watch', filter.watch);
-  }
+  if (filter.page) searchParams.append('page', filter.page.toString());
+  if (filter.watch) searchParams.append('watch', filter.watch);
+  if (filter.sort) searchParams.append('sort', filter.sort);
+  if (filter.order) searchParams.append('order', filter.order);
+  if (filter.type) searchParams.append('type', filter.type);
 
-  if (filter.sort) {
-    searchParams.append('sort', filter.sort);
-  }
-
-  if (filter.order) {
-    searchParams.append('order', filter.order);
-  }
-
-  if (filter.type) {
-    searchParams.append('type', filter.type);
-  }
-
-  const response = await fetch(`${apiUrl}/api/video/?${searchParams.toString()}`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const videos = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadVideoListByFilter', filter, videos);
-  }
-
-  return videos;
+  const endpoint = `/api/video/${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+  return APIClient(endpoint);
 };
 
 export default loadVideoListByFilter;
diff --git a/frontend/src/api/loader/loadVideoNav.ts b/frontend/src/api/loader/loadVideoNav.ts
index d65694a7..46cee633 100644
--- a/frontend/src/api/loader/loadVideoNav.ts
+++ b/frontend/src/api/loader/loadVideoNav.ts
@@ -1,7 +1,4 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import isDevEnvironment from '../../functions/isDevEnvironment';
+import APIClient from '../../functions/APIClient';
 
 export type VideoNavResponseType = {
   playlist_meta: {
@@ -29,20 +26,7 @@ export type VideoNavResponseType = {
 };
 
 const loadVideoNav = async (youtubeVideoId: string): Promise<VideoNavResponseType[]> => {
-  const apiUrl = getApiUrl();
-
-  const response = await fetch(`${apiUrl}/api/video/${youtubeVideoId}/nav/`, {
-    headers: defaultHeaders,
-    credentials: getFetchCredentials(),
-  });
-
-  const videoNav = await response.json();
-
-  if (isDevEnvironment()) {
-    console.log('loadVideoNav', videoNav);
-  }
-
-  return videoNav;
+  return APIClient(`/api/video/${youtubeVideoId}/nav/`);
 };
 
 export default loadVideoNav;
diff --git a/frontend/src/functions/APIClient.ts b/frontend/src/functions/APIClient.ts
new file mode 100644
index 00000000..427e2ed0
--- /dev/null
+++ b/frontend/src/functions/APIClient.ts
@@ -0,0 +1,60 @@
+import defaultHeaders from '../configuration/defaultHeaders';
+import getApiUrl from '../configuration/getApiUrl';
+import getFetchCredentials from '../configuration/getFetchCredentials';
+import logOut from '../api/actions/logOut';
+import getCookie from './getCookie';
+
+export interface ApiClientOptions extends Omit<RequestInit, 'body'> {
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  body?: Record<string, unknown> | string;
+}
+
+const APIClient = async (
+  endpoint: string,
+  { method = 'GET', body, headers = {}, ...options }: ApiClientOptions = {},
+) => {
+  const apiUrl = getApiUrl();
+  const csrfToken = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}${endpoint}`, {
+    method,
+    headers: {
+      ...defaultHeaders,
+      ...(csrfToken ? { 'X-CSRFToken': csrfToken } : {}),
+      ...headers,
+    },
+    credentials: getFetchCredentials(),
+    body: body ? JSON.stringify(body) : undefined,
+    ...options,
+  });
+
+  // Handle common errors
+  if (response.status === 401) {
+    logOut();
+    window.location.href = '/login';
+    throw new Error('Unauthorized: Redirecting to login.');
+  }
+
+  if (response.status === 403) {
+    logOut();
+    window.location.href = '/login';
+    throw new Error('Forbidden: Access denied.');
+  }
+
+  // Try parsing response data
+  let data;
+  try {
+    data = await response.json();
+  } catch (error) {
+    data = null;
+    console.error(`error fetching data: ${error}`);
+  }
+
+  if (!response.ok) {
+    throw new Error(data?.detail || 'An error occurred while processing the request.');
+  }
+
+  return data;
+};
+
+export default APIClient;