diff --git a/src/components/modules/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx
index 02398eaa0..49d0f20ce 100644
--- a/src/components/modules/calendar/CalendarModule.tsx
+++ b/src/components/modules/calendar/CalendarModule.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/no-children-prop */
-import { Box, Divider, Indicator, Popover, ScrollArea, useMantineTheme } from '@mantine/core';
+import { Box, Divider, Indicator, Popover, ScrollArea } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
-import { showNotification } from '@mantine/notifications';
-import { IconCalendar as CalendarIcon, IconCheck as Check } from '@tabler/icons';
+import { IconCalendar as CalendarIcon } from '@tabler/icons';
+import axios from 'axios';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 import {
@@ -12,6 +12,7 @@ import {
   LidarrMediaDisplay,
   ReadarrMediaDisplay,
 } from './MediaDisplay';
+import { serviceItem } from '../../../tools/types';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -27,105 +28,32 @@ export default function CalendarComponent(props: any) {
   const [lidarrMedias, setLidarrMedias] = useState([] as any);
   const [radarrMedias, setRadarrMedias] = useState([] as any);
   const [readarrMedias, setReadarrMedias] = useState([] as any);
+  const sonarrService = config.services.filter((service) => service.type === 'Sonarr').at(0);
+  const radarrService = config.services.filter((service) => service.type === 'Radarr').at(0);
+  const lidarrService = config.services.filter((service) => service.type === 'Lidarr').at(0);
+  const readarrService = config.services.filter((service) => service.type === 'Readarr').at(0);
+
+  function getMedias(service: serviceItem | undefined, type: string) {
+    if (!service || !service.apiKey) {
+      return Promise.resolve({ data: [] });
+    }
+    return axios.get(`/api/modules/calendar?type=${type}`, {
+      data: {
+        body: service,
+      },
+    });
+  }
 
   useEffect(() => {
     // Filter only sonarr and radarr services
-    const filtered = config.services.filter(
-      (service) =>
-        service.type === 'Sonarr' ||
-        service.type === 'Radarr' ||
-        service.type === 'Lidarr' ||
-        service.type === 'Readarr'
-    );
 
     // Get the url and apiKey for all Sonarr and Radarr services
-    const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
-    const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
-    const lidarrService = filtered.filter((service) => service.type === 'Lidarr').at(0);
-    const readarrService = filtered.filter((service) => service.type === 'Readarr').at(0);
-    const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
-    const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
-    if (sonarrService && sonarrService.apiKey) {
-      const baseUrl = new URL(sonarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setSonarrMedias(data);
-            showNotification({
-              title: 'Sonarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (radarrService && radarrService.apiKey) {
-      const baseUrl = new URL(radarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setRadarrMedias(data);
-            showNotification({
-              title: 'Radarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (lidarrService && lidarrService.apiKey) {
-      const baseUrl = new URL(lidarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/v1/calendar?apikey=${lidarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setLidarrMedias(data);
-            showNotification({
-              title: 'Lidarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (readarrService && readarrService.apiKey) {
-      const baseUrl = new URL(readarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/v1/calendar?apikey=${readarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setReadarrMedias(data);
-            showNotification({
-              title: 'Readarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
+    getMedias(sonarrService, 'sonarr').then((res) => setSonarrMedias(res.data));
+    getMedias(radarrService, 'radarr').then((res) => setRadarrMedias(res.data));
+    getMedias(lidarrService, 'lidarr').then((res) => setLidarrMedias(res.data));
+    getMedias(readarrService, 'readarr').then((res) => setReadarrMedias(res.data));
   }, [config.services]);
 
-  if (sonarrMedias === undefined && radarrMedias === undefined) {
-    return <Calendar />;
-  }
   return (
     <Calendar
       onChange={(day: any) => {}}
@@ -152,7 +80,6 @@ function DayComponent(props: any) {
   }: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
     props;
   const [opened, setOpened] = useState(false);
-  const theme = useMantineTheme();
 
   const day = renderdate.getDate();
 
diff --git a/src/pages/api/modules/calendar.ts b/src/pages/api/modules/calendar.ts
new file mode 100644
index 000000000..768cbb90c
--- /dev/null
+++ b/src/pages/api/modules/calendar.ts
@@ -0,0 +1,66 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { serviceItem } from '../../../tools/types';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Parse req.body as a ServiceItem
+  const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
+  const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
+  const TypeToUrl: { service: string; url: string }[] = [
+    {
+      service: 'sonarr',
+      url: '/api/calendar',
+    },
+    {
+      service: 'radarr',
+      url: '/api/v3/calendar',
+    },
+    {
+      service: 'lidarr',
+      url: '/api/v1/calendar',
+    },
+    {
+      service: 'readarr',
+      url: '/api/v1/calendar',
+    },
+  ];
+  const service: serviceItem = req.body;
+  const { type } = req.query;
+  if (!type) {
+    return res.status(400).json({
+      message: 'Missing required parameter in url: type',
+    });
+  }
+  if (!service) {
+    return res.status(400).json({
+      message: 'Missing required parameter in body: service',
+    });
+  }
+  // Match the type to the correct url
+  const url = TypeToUrl.find((x) => x.service === type);
+  if (!url) {
+    return res.status(400).json({
+      message: 'Invalid type',
+    });
+  }
+  // Get the origin URL
+  const { origin } = new URL(service.url);
+  const data = await axios.get(
+    `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
+  );
+  return res.status(200).json(data.data);
+  // // Make a request to the URL
+  // const response = await axios.get(url);
+  // // Return the response
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};