diff --git a/app/(private)/notes/archive/page.tsx b/app/(private)/notes/archive/page.tsx
index 2641568..71f89e2 100644
--- a/app/(private)/notes/archive/page.tsx
+++ b/app/(private)/notes/archive/page.tsx
@@ -3,16 +3,13 @@
 import { Container, SimpleGrid } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
-import { nprogress } from '@mantine/nprogress';
-import axios from 'axios';
-import { useEffect } from 'react';
 import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
-import { failure } from '@/lib/client_functions';
+import { apiCall, failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
 
 export default function NotesPage() {
-  const { data, loading, refetch } = useFetchData('/api/notes/archived');
+  const { data, refetch } = useFetchData('/api/notes/archived');
   const [opened, { close, open }] = useDisclosure(false);
 
   const form = useForm({
@@ -27,14 +24,6 @@ export default function NotesPage() {
     },
   });
 
-  useEffect(() => {
-    if (loading) {
-      nprogress.start();
-    } else {
-      nprogress.complete();
-    }
-  }, [loading]);
-
   const handleClick = (note: NoteDocument) => {
     open();
     form.setValues({
@@ -57,8 +46,7 @@ export default function NotesPage() {
   const createNote = async (note: any) => {
     if (form.values.title || form.values.note) {
       const { _id, ...remainingNote } = note;
-      await axios
-        .post('/api/notes', { ...remainingNote })
+      await apiCall('/api/notes', remainingNote, 'POST')
         .then(() => {
           refetch();
         })
@@ -69,8 +57,7 @@ export default function NotesPage() {
   };
 
   const updateNote = async (note: any) => {
-    await axios
-      .put('/api/notes', { ...note })
+    await apiCall('/api/notes', note, 'POST')
       .then(() => {
         refetch();
       })
@@ -80,7 +67,6 @@ export default function NotesPage() {
   };
 
   const onSave = async (note: any) => {
-    nprogress.start();
     if (note.title || note.note) {
       if (note._id) {
         const _note = data?.find((n: any) => n._id === note._id);
@@ -109,7 +95,6 @@ export default function NotesPage() {
         await createNote(note);
       }
     }
-    nprogress.complete();
     form.reset();
     close();
   };
diff --git a/app/(private)/notes/page.tsx b/app/(private)/notes/page.tsx
index e304c60..dbae42d 100644
--- a/app/(private)/notes/page.tsx
+++ b/app/(private)/notes/page.tsx
@@ -3,12 +3,9 @@
 import { useForm } from '@mantine/form';
 import { Container, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { nprogress } from '@mantine/nprogress';
-import axios from 'axios';
-import { useEffect } from 'react';
 import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
-import { failure } from '@/lib/client_functions';
+import { apiCall, failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
 import Skelton from '@/components/Skelton/Skelton';
 
@@ -27,15 +24,6 @@ export default function NotesPage() {
       isTrashed: false,
     },
   });
-
-  useEffect(() => {
-    if (loading) {
-      nprogress.start();
-    } else {
-      nprogress.complete();
-    }
-  }, [loading]);
-
   const handleClick = (note: NoteDocument) => {
     open();
     form.setValues({
@@ -56,10 +44,9 @@ export default function NotesPage() {
   };
 
   const createNote = async (note: any) => {
-    if (form.values.title || form.values.note) {
+    if (note.title || note.note) {
       const { _id, ...remainingNote } = note;
-      await axios
-        .post('/api/notes', { ...remainingNote })
+      await apiCall('/api/notes', remainingNote, 'POST')
         .then(() => {
           refetch();
         })
@@ -70,8 +57,7 @@ export default function NotesPage() {
   };
 
   const updateNote = async (note: any) => {
-    await axios
-      .put('/api/notes', { ...note })
+    await apiCall('/api/notes', note, 'PUT')
       .then(() => {
         refetch();
       })
@@ -81,7 +67,6 @@ export default function NotesPage() {
   };
 
   const onSave = async (note: any) => {
-    nprogress.start();
     if (note.title || note.note) {
       if (note._id) {
         const _note = data?.find((n: any) => n._id === note._id);
@@ -104,13 +89,13 @@ export default function NotesPage() {
           isPinned: _note.isPinned,
         });
         if (formValuesString !== noteString) {
+          console.log(formValuesString, noteString);
           await updateNote(note);
         }
       } else {
         await createNote(note);
       }
     }
-    nprogress.complete();
     form.reset();
     close();
   };
diff --git a/app/(private)/notes/trashed/page.tsx b/app/(private)/notes/trashed/page.tsx
index d5bd5ce..888a984 100644
--- a/app/(private)/notes/trashed/page.tsx
+++ b/app/(private)/notes/trashed/page.tsx
@@ -3,16 +3,13 @@
 import { Container, SimpleGrid } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
-import { nprogress } from '@mantine/nprogress';
-import axios from 'axios';
-import { useEffect } from 'react';
 import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
-import { failure } from '@/lib/client_functions';
+import { apiCall, failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
 
 export default function NotesPage() {
-  const { data, loading, refetch } = useFetchData('/api/notes/trashed');
+  const { data, refetch } = useFetchData('/api/notes/trashed');
   const [opened, { close, open }] = useDisclosure(false);
 
   const form = useForm({
@@ -27,14 +24,6 @@ export default function NotesPage() {
     },
   });
 
-  useEffect(() => {
-    if (loading) {
-      nprogress.start();
-    } else {
-      nprogress.complete();
-    }
-  }, [loading]);
-
   const handleClick = (note: NoteDocument) => {
     open();
     form.setValues({
@@ -57,8 +46,7 @@ export default function NotesPage() {
   const createNote = async (note: any) => {
     if (form.values.title || form.values.note) {
       const { _id, ...remainingNote } = note;
-      await axios
-        .post('/api/notes', { ...remainingNote })
+      await apiCall('/api/notes', remainingNote, 'POST')
         .then(() => {
           refetch();
         })
@@ -69,8 +57,7 @@ export default function NotesPage() {
   };
 
   const updateNote = async (note: any) => {
-    await axios
-      .put('/api/notes', { ...note })
+    await apiCall('/api/notes', note, 'PUT')
       .then(() => {
         refetch();
       })
@@ -80,7 +67,6 @@ export default function NotesPage() {
   };
 
   const onSave = async (note: any) => {
-    nprogress.start();
     if (note.title || note.note) {
       if (note._id) {
         const _note = data?.find((n: any) => n._id === note._id);
@@ -109,22 +95,18 @@ export default function NotesPage() {
         await createNote(note);
       }
     }
-    nprogress.complete();
     form.reset();
     close();
   };
 
   const onDelete = async (_id: string) => {
-    nprogress.start();
-    await axios
-      .delete(`/api/notes?_id=${_id}`)
+    await apiCall(`/api/notes?_id=${_id}`, {}, 'DELETE')
       .then(() => {
         refetch();
       })
       .catch((err) => {
         failure(err.response.data.error);
       });
-    nprogress.complete();
     form.reset();
     close();
   };
diff --git a/app/(private)/todos/[_id]/page.tsx b/app/(private)/todos/[_id]/page.tsx
index f25fc84..c7c1f1b 100644
--- a/app/(private)/todos/[_id]/page.tsx
+++ b/app/(private)/todos/[_id]/page.tsx
@@ -21,7 +21,6 @@ import {
   IconCircleCheck,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { TodoPageActions } from '@/components/Todo';
 import TodoSkelton from '@/components/Todo/TodoSkelton';
@@ -29,7 +28,7 @@ import useFetchData from '@/hooks/useFetchData';
 import { TodoType } from '@/models/Todo';
 import Todo from '@/components/Todo/Todo';
 import { COLORS, STYLES } from '@/lib/constants';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = ({ params }: { params: { _id: string } }) => {
   const { data, refetch, loading } = useFetchData(`/api/todos?type=list&list=${params._id}`);
@@ -60,7 +59,7 @@ const TodosPage = ({ params }: { params: { _id: string } }) => {
 
   const onSubmit = async () => {
     const { _id, todo, list, date, color } = form.values;
-    await axios.put('/api/todos', { _id, todo, list: list || null, date, color }).then(() => {
+    await apiCall('/api/todos', { _id, todo, list: list || null, date, color }, 'PUT').then(() => {
       form.reset();
       refetch();
     });
@@ -68,7 +67,7 @@ const TodosPage = ({ params }: { params: { _id: string } }) => {
 
   const getTodoLists = async () => {
     try {
-      const res = await axios.get('/api/todos/todo-list');
+      const res = await apiCall('/api/todos/todo-list');
       setTodoList(res?.data);
     } catch (error) {
       failure('Something went wrong');
@@ -77,8 +76,7 @@ const TodosPage = ({ params }: { params: { _id: string } }) => {
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos?_id=${form.values._id}`)
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
diff --git a/app/(private)/todos/important/page.tsx b/app/(private)/todos/important/page.tsx
index c2198e8..1fbf31a 100644
--- a/app/(private)/todos/important/page.tsx
+++ b/app/(private)/todos/important/page.tsx
@@ -21,7 +21,6 @@ import {
   IconCircleCheck,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { TodoPageActions } from '@/components/Todo';
 import TodoSkelton from '@/components/Todo/TodoSkelton';
@@ -29,7 +28,7 @@ import useFetchData from '@/hooks/useFetchData';
 import { TodoType } from '@/models/Todo';
 import Todo from '@/components/Todo/Todo';
 import { COLORS, STYLES } from '@/lib/constants';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=important');
@@ -60,7 +59,7 @@ const TodosPage = () => {
 
   const onSubmit = async () => {
     const { _id, todo, list, date, color } = form.values;
-    await axios.put('/api/todos', { _id, todo, list: list || null, date, color }).then(() => {
+    await apiCall('/api/todos', { _id, todo, list: list || null, date, color }, 'PUT').then(() => {
       form.reset();
       refetch();
     });
@@ -68,7 +67,7 @@ const TodosPage = () => {
 
   const getTodoLists = async () => {
     try {
-      const res = await axios.get('/api/todos/todo-list');
+      const res = await apiCall('/api/todos/todo-list');
       setTodoList(res?.data);
     } catch (error) {
       failure('Something went wrong');
@@ -77,8 +76,7 @@ const TodosPage = () => {
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos?_id=${form.values._id}`)
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
diff --git a/app/(private)/todos/page.tsx b/app/(private)/todos/page.tsx
index 0d83222..5c08c5a 100644
--- a/app/(private)/todos/page.tsx
+++ b/app/(private)/todos/page.tsx
@@ -21,7 +21,6 @@ import {
   IconCircleCheck,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { TodoPageActions } from '@/components/Todo';
 import TodoSkelton from '@/components/Todo/TodoSkelton';
@@ -29,7 +28,7 @@ import useFetchData from '@/hooks/useFetchData';
 import { TodoType } from '@/models/Todo';
 import Todo from '@/components/Todo/Todo';
 import { COLORS, STYLES } from '@/lib/constants';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos');
@@ -60,7 +59,7 @@ const TodosPage = () => {
 
   const onSubmit = async () => {
     const { _id, todo, list, date, color } = form.values;
-    await axios.put('/api/todos', { _id, todo, list: list || null, date, color }).then(() => {
+    await apiCall('/api/todos', { _id, todo, list: list || null, date, color }, 'PUT').then(() => {
       form.reset();
       refetch();
     });
@@ -68,8 +67,9 @@ const TodosPage = () => {
 
   const getTodoLists = async () => {
     try {
-      const res = await axios.get('/api/todos/todo-list');
-      setTodoList(res?.data);
+      await apiCall('/api/todos/todo-list').then((res) => {
+        setTodoList(res?.data);
+      });
     } catch (error) {
       failure('Something went wrong');
     }
@@ -77,8 +77,7 @@ const TodosPage = () => {
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos?_id=${form.values._id}`)
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
diff --git a/app/(private)/todos/recent/page.tsx b/app/(private)/todos/recent/page.tsx
index a0e36a8..fb9823e 100644
--- a/app/(private)/todos/recent/page.tsx
+++ b/app/(private)/todos/recent/page.tsx
@@ -21,7 +21,6 @@ import {
   IconCircleCheck,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { TodoPageActions } from '@/components/Todo';
 import TodoSkelton from '@/components/Todo/TodoSkelton';
@@ -29,7 +28,7 @@ import useFetchData from '@/hooks/useFetchData';
 import { TodoType } from '@/models/Todo';
 import Todo from '@/components/Todo/Todo';
 import { COLORS, STYLES } from '@/lib/constants';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=recent');
@@ -60,7 +59,7 @@ const TodosPage = () => {
 
   const onSubmit = async () => {
     const { _id, todo, list, date, color } = form.values;
-    await axios.put('/api/todos', { _id, todo, list: list || null, date, color }).then(() => {
+    await apiCall('/api/todos', { _id, todo, list: list || null, date, color }, 'PUT').then(() => {
       form.reset();
       refetch();
     });
@@ -68,7 +67,7 @@ const TodosPage = () => {
 
   const getTodoLists = async () => {
     try {
-      const res = await axios.get('/api/todos/todo-list');
+      const res = await apiCall('/api/todos/todo-list');
       setTodoList(res?.data);
     } catch (error) {
       failure('Something went wrong');
@@ -77,8 +76,7 @@ const TodosPage = () => {
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos?_id=${form.values._id}`)
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
diff --git a/app/(private)/todos/today/page.tsx b/app/(private)/todos/today/page.tsx
index b8f7b90..18f297d 100644
--- a/app/(private)/todos/today/page.tsx
+++ b/app/(private)/todos/today/page.tsx
@@ -21,7 +21,6 @@ import {
   IconCircleCheck,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { TodoPageActions } from '@/components/Todo';
 import TodoSkelton from '@/components/Todo/TodoSkelton';
@@ -29,7 +28,7 @@ import useFetchData from '@/hooks/useFetchData';
 import { TodoType } from '@/models/Todo';
 import Todo from '@/components/Todo/Todo';
 import { COLORS, STYLES } from '@/lib/constants';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=today');
@@ -60,7 +59,7 @@ const TodosPage = () => {
 
   const onSubmit = async () => {
     const { _id, todo, list, date, color } = form.values;
-    await axios.put('/api/todos', { _id, todo, list: list || null, date, color }).then(() => {
+    await apiCall('/api/todos', { _id, todo, list: list || null, date, color }, 'PUT').then(() => {
       form.reset();
       refetch();
     });
@@ -68,7 +67,7 @@ const TodosPage = () => {
 
   const getTodoLists = async () => {
     try {
-      const res = await axios.get('/api/todos/todo-list');
+      const res = await apiCall('/api/todos/todo-list');
       setTodoList(res?.data);
     } catch (error) {
       failure('Something went wrong');
@@ -77,8 +76,7 @@ const TodosPage = () => {
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos?_id=${form.values._id}`)
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
diff --git a/app/(private)/todos/upcoming/page.tsx b/app/(private)/todos/upcoming/page.tsx
index d0f7501..5fa9f24 100644
--- a/app/(private)/todos/upcoming/page.tsx
+++ b/app/(private)/todos/upcoming/page.tsx
@@ -21,7 +21,6 @@ import {
   IconCircleCheck,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { TodoPageActions } from '@/components/Todo';
 import TodoSkelton from '@/components/Todo/TodoSkelton';
@@ -29,7 +28,7 @@ import useFetchData from '@/hooks/useFetchData';
 import { TodoType } from '@/models/Todo';
 import Todo from '@/components/Todo/Todo';
 import { COLORS, STYLES } from '@/lib/constants';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=upcoming');
@@ -60,7 +59,7 @@ const TodosPage = () => {
 
   const onSubmit = async () => {
     const { _id, todo, list, date, color } = form.values;
-    await axios.put('/api/todos', { _id, todo, list: list || null, date, color }).then(() => {
+    await apiCall('/api/todos', { _id, todo, list: list || null, date, color }, 'PUT').then(() => {
       form.reset();
       refetch();
     });
@@ -68,7 +67,7 @@ const TodosPage = () => {
 
   const getTodoLists = async () => {
     try {
-      const res = await axios.get('/api/todos/todo-list');
+      const res = await apiCall('/api/todos/todo-list');
       setTodoList(res?.data);
     } catch (error) {
       failure('Something went wrong');
@@ -77,8 +76,7 @@ const TodosPage = () => {
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos?_id=${form.values._id}`)
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
diff --git a/app/auth/register/page.tsx b/app/auth/register/page.tsx
index 89f1dc3..288bd71 100644
--- a/app/auth/register/page.tsx
+++ b/app/auth/register/page.tsx
@@ -10,11 +10,10 @@ import {
   Title,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import axios from 'axios';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import FormButtons from '@/components/FormButtons';
-import { failure, success } from '@/lib/client_functions';
+import { apiCall, failure, success } from '@/lib/client_functions';
 
 const Register = () => {
   const router = useRouter();
@@ -37,8 +36,7 @@ const Register = () => {
   });
 
   const sumbitRegister = async () => {
-    await axios
-      .post('/api/users/register', form.values)
+    await apiCall('/api/users/register', form.values, 'POST')
       .then(() => {
         success('User registered successfully');
         router.push('/auth/login');
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 0493914..276c5aa 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -18,12 +18,10 @@ import { notifications } from '@mantine/notifications';
 import { IconGridDots, IconList } from '@tabler/icons-react';
 import { signOut, useSession } from 'next-auth/react';
 import { usePathname, useRouter } from 'next/navigation';
-import { nprogress } from '@mantine/nprogress';
 import React, { useCallback, useEffect, useState } from 'react';
-import axios from 'axios';
 import { App } from '../App';
 import { APPS } from '@/lib/constants';
-import { failure } from '@/lib/client_functions';
+import { apiCall, failure } from '@/lib/client_functions';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const network = useNetwork();
@@ -54,8 +52,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   const getList = async () => {
     try {
       setAPP(APPS.find((app) => `/${rootpath}` === app?.path));
-      const { data } = await axios.get(`/api/list?schema=${rootpath}`);
-      setAPP((old = { sidebar: [] }) => ({ ...old, sidebar: [...old.sidebar, ...data] }));
+      const res = await apiCall(`/api/list?schema=${rootpath}`);
+      if (res?.data) {
+        setAPP((old = { sidebar: [] }) => ({ ...old, sidebar: [...old.sidebar, ...res.data] }));
+      }
     } catch (error) {
       failure('Something went wrong');
     }
@@ -66,9 +66,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   }
 
   useEffect(() => {
-    nprogress.start();
     getList();
-    nprogress.complete();
   }, [pathname]);
 
   useEffect(() => {
@@ -104,20 +102,24 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <AppShell.Header>
         <Group h="100%" px="md" justify="space-between">
           <Group>
-            <Burger
-              opened={mobileOpened}
-              hidden={!isLoggedIn}
-              onClick={toggleMobile}
-              hiddenFrom="sm"
-              size="sm"
-            />
-            <Burger
-              opened={desktopOpened}
-              hidden={!isLoggedIn}
-              onClick={toggleDesktop}
-              visibleFrom="sm"
-              size="sm"
-            />
+            {APP?.sidebar?.length && (
+              <>
+                <Burger
+                  opened={mobileOpened}
+                  hidden={!isLoggedIn}
+                  onClick={toggleMobile}
+                  hiddenFrom="sm"
+                  size="sm"
+                />
+                <Burger
+                  opened={desktopOpened}
+                  hidden={!isLoggedIn}
+                  onClick={toggleDesktop}
+                  visibleFrom="sm"
+                  size="sm"
+                />
+              </>
+            )}
             <Button
               variant="transparent"
               size="compact-md"
@@ -198,7 +200,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           </Group>
         </Group>
       </AppShell.Header>
-      {isLoggedIn ? (
+      {isLoggedIn && APP?.sidebar?.length ? (
         <>
           <AppShell.Navbar>
             <Stack gap={0} my="xs">
@@ -218,10 +220,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               ))}
             </Stack>
           </AppShell.Navbar>
-          <AppShell.Main>{children}</AppShell.Main>
+          <AppShell.Main pt={rem(80)}>{children}</AppShell.Main>
         </>
       ) : (
-        <Container size="100%" mt={rem(80)}>
+        <Container size="100%" pt={rem(80)}>
           {children}
         </Container>
       )}
diff --git a/components/Todo/TodoPageActions.tsx b/components/Todo/TodoPageActions.tsx
index 6eda1d4..e9db680 100644
--- a/components/Todo/TodoPageActions.tsx
+++ b/components/Todo/TodoPageActions.tsx
@@ -24,12 +24,10 @@ import {
   IconPrinter,
   IconTrash,
 } from '@tabler/icons-react';
-import axios from 'axios';
 import React, { useRef, useState } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
-import { nprogress } from '@mantine/nprogress';
 import { DatePickerInput } from '@mantine/dates';
-import { failure, openModal } from '@/lib/client_functions';
+import { apiCall, failure, openModal } from '@/lib/client_functions';
 import { COLORS, STYLES } from '@/lib/constants';
 import FormButtons from '../FormButtons';
 
@@ -77,10 +75,8 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
       failure('Please enter a todo');
       return;
     }
-    nprogress.start();
-    await axios.post('/api/todos', form.values);
+    await apiCall('/api/todos', form.values, 'POST');
     refetch();
-    nprogress.complete();
     onClose();
     setOpened1(false);
     getTodoLists();
@@ -94,8 +90,7 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
 
   const onDelete = () => {
     openModal(() => {
-      axios
-        .delete(`/api/todos/todo-list?_id=${pathname.split('/')[2]}`)
+      apiCall(`/api/todos/todo-list?_id=${pathname.split('/')[2]}`, {}, 'DELETE')
         .then(() => {
           form.reset();
           refetch();
@@ -109,15 +104,14 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
   };
 
   const createTodoList = () => {
-    axios
-      .post('/api/todos/todo-list', list)
+    apiCall('/api/todos/todo-list', list, 'POST')
       .then((res) => {
         form.reset();
         refetch();
         getTodoLists();
         close();
         setOpened1(false);
-        router.push(`/todos/${res.data._id}`);
+        router.push(`/todos/${res?.data._id}`);
       })
       .catch(() => failure('Something went wrong'));
   };
@@ -125,7 +119,7 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
   return (
     <Group mt="sm" mb="xl" justify="space-between">
       <Text c={selected?.color} tt="capitalize" fw={700}>
-        {selected?.title || pathname.split('/')[pathname.split('/').length - 1]}
+        {selected?.title}
       </Text>
       <Group gap={rem(6)} justify="right">
         <ActionIcon variant="subtle" color="gray" onClick={() => window.print()} title="Print">
diff --git a/hooks/useFetchData.tsx b/hooks/useFetchData.tsx
index 78a08b4..867d5a9 100644
--- a/hooks/useFetchData.tsx
+++ b/hooks/useFetchData.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import axios from 'axios';
 import { useEffect, useState } from 'react';
-import { failure } from '@/lib/client_functions';
+import { apiCall, failure } from '@/lib/client_functions';
 
 export default function useFetchData(url: string) {
   const [data, setData] = useState(null) as any;
@@ -11,7 +10,7 @@ export default function useFetchData(url: string) {
   const refetch = async () => {
     try {
       setLoading(true);
-      const res: any[] | any = await axios.get(url);
+      const res: any[] | any = await apiCall(url);
       setData(res?.data);
     } catch (err: any) {
       failure(err?.response?.data?.error || 'Something went wrong');
diff --git a/lib/client_functions.tsx b/lib/client_functions.tsx
index 9b58168..c7fe841 100644
--- a/lib/client_functions.tsx
+++ b/lib/client_functions.tsx
@@ -1,6 +1,7 @@
 import { Text } from '@mantine/core';
 import { modals } from '@mantine/modals';
 import { notifications } from '@mantine/notifications';
+import { nprogress } from '@mantine/nprogress';
 import { IconCheck, IconX } from '@tabler/icons-react';
 import axios from 'axios';
 
@@ -42,3 +43,33 @@ export const updateTodo = async (_id: string, data: any) => {
   const res = await axios.put('/api/todos', { ...data, _id });
   return res;
 };
+
+export const apiCall = async (url: string, body?: any, method: string = 'GET') => {
+  console.log(url, body, method);
+
+  let res;
+  nprogress.start();
+  try {
+    switch (method) {
+      case 'GET':
+        res = await axios.get(url);
+        break;
+      case 'POST':
+        res = await axios.post(url, body);
+        break;
+      case 'PUT':
+        res = await axios.put(url, body);
+        break;
+      case 'DELETE':
+        res = await axios.delete(url, body);
+        break;
+      default:
+        break;
+    }
+  } catch (error) {
+    failure('Error while calling API');
+  } finally {
+    nprogress.complete();
+  }
+  return res;
+};