diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx
index f2e611b..f32f268 100644
--- a/app/(private)/layout.tsx
+++ b/app/(private)/layout.tsx
@@ -10,5 +10,8 @@ interface Props {
 export default async function RootLayout({ children }: Props) {
   const session: UserDataTypes | null = await getServerSession(authOptions);
   if (!session?.user) redirect('/auth/login');
-  return <>{session?.user && children}</>;
+
+  if (session.user) {
+    return <>{children}</>;
+  }
 }
diff --git a/app/(private)/notes/archive/page.tsx b/app/(private)/notes/archive/page.tsx
index 71f89e2..4b2f426 100644
--- a/app/(private)/notes/archive/page.tsx
+++ b/app/(private)/notes/archive/page.tsx
@@ -5,7 +5,7 @@ import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
-import { apiCall, failure } from '@/lib/client_functions';
+import { apiCall } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
 
 export default function NotesPage() {
@@ -46,24 +46,16 @@ export default function NotesPage() {
   const createNote = async (note: any) => {
     if (form.values.title || form.values.note) {
       const { _id, ...remainingNote } = note;
-      await apiCall('/api/notes', remainingNote, 'POST')
-        .then(() => {
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error);
-        });
+      await apiCall('/api/notes', remainingNote, 'POST').then(() => {
+        refetch();
+      });
     }
   };
 
   const updateNote = async (note: any) => {
-    await apiCall('/api/notes', note, 'POST')
-      .then(() => {
-        refetch();
-      })
-      .catch((err) => {
-        failure(err.response.data.error);
-      });
+    await apiCall('/api/notes', note, 'POST').then(() => {
+      refetch();
+    });
   };
 
   const onSave = async (note: any) => {
diff --git a/app/(private)/notes/page.tsx b/app/(private)/notes/page.tsx
index e3d0c56..87c5b57 100644
--- a/app/(private)/notes/page.tsx
+++ b/app/(private)/notes/page.tsx
@@ -5,7 +5,7 @@ import { Container, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
-import { apiCall, failure } from '@/lib/client_functions';
+import { apiCall } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
 import Skelton from '@/components/Skelton/Skelton';
 
@@ -46,24 +46,16 @@ export default function NotesPage() {
   const createNote = async (note: any) => {
     if (note.title || note.note) {
       const { _id, ...remainingNote } = note;
-      await apiCall('/api/notes', remainingNote, 'POST')
-        .then(() => {
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error);
-        });
+      await apiCall('/api/notes', remainingNote, 'POST').then(() => {
+        refetch();
+      });
     }
   };
 
   const updateNote = async (note: any) => {
-    await apiCall('/api/notes', note, 'PUT')
-      .then(() => {
-        refetch();
-      })
-      .catch((err) => {
-        failure(err.response.data.error);
-      });
+    await apiCall('/api/notes', note, 'PUT').then(() => {
+      refetch();
+    });
   };
 
   const onSave = async (note: any) => {
diff --git a/app/(private)/notes/trashed/page.tsx b/app/(private)/notes/trashed/page.tsx
index 888a984..408279d 100644
--- a/app/(private)/notes/trashed/page.tsx
+++ b/app/(private)/notes/trashed/page.tsx
@@ -5,7 +5,7 @@ import { useForm } from '@mantine/form';
 import { useDisclosure } from '@mantine/hooks';
 import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
-import { apiCall, failure } from '@/lib/client_functions';
+import { apiCall } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
 
 export default function NotesPage() {
@@ -46,24 +46,16 @@ export default function NotesPage() {
   const createNote = async (note: any) => {
     if (form.values.title || form.values.note) {
       const { _id, ...remainingNote } = note;
-      await apiCall('/api/notes', remainingNote, 'POST')
-        .then(() => {
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error);
-        });
+      await apiCall('/api/notes', remainingNote, 'POST').then(() => {
+        refetch();
+      });
     }
   };
 
   const updateNote = async (note: any) => {
-    await apiCall('/api/notes', note, 'PUT')
-      .then(() => {
-        refetch();
-      })
-      .catch((err) => {
-        failure(err.response.data.error);
-      });
+    await apiCall('/api/notes', note, 'PUT').then(() => {
+      refetch();
+    });
   };
 
   const onSave = async (note: any) => {
@@ -100,13 +92,9 @@ export default function NotesPage() {
   };
 
   const onDelete = async (_id: string) => {
-    await apiCall(`/api/notes?_id=${_id}`, {}, 'DELETE')
-      .then(() => {
-        refetch();
-      })
-      .catch((err) => {
-        failure(err.response.data.error);
-      });
+    await apiCall(`/api/notes?_id=${_id}`, {}, 'DELETE').then(() => {
+      refetch();
+    });
     form.reset();
     close();
   };
diff --git a/app/(private)/todos/[_id]/page.tsx b/app/(private)/todos/[_id]/page.tsx
index 086009b..d533057 100644
--- a/app/(private)/todos/[_id]/page.tsx
+++ b/app/(private)/todos/[_id]/page.tsx
@@ -28,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 { apiCall, failure, openModal } from '@/lib/client_functions';
+import { apiCall, openModal } from '@/lib/client_functions';
 
 const TodosPage = ({ params }: { params: { _id: string } }) => {
   const { data, refetch, loading } = useFetchData(`/api/todos?type=list&list=${params._id}`);
@@ -66,24 +66,16 @@ const TodosPage = ({ params }: { params: { _id: string } }) => {
   };
 
   const getTodoLists = async () => {
-    try {
-      const res = await apiCall('/api/todos/todo-list');
-      setTodoList(res?.data);
-    } catch (error) {
-      failure('Something went wrong');
-    }
+    const res = await apiCall('/api/todos/todo-list');
+    setTodoList(res?.data);
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error || 'Something went wrong');
-        });
+    openModal('This todo will be deleted permanently', () => {
+      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 48c494a..2df6335 100644
--- a/app/(private)/todos/important/page.tsx
+++ b/app/(private)/todos/important/page.tsx
@@ -28,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 { apiCall, failure, openModal } from '@/lib/client_functions';
+import { apiCall, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=important');
@@ -66,24 +66,16 @@ const TodosPage = () => {
   };
 
   const getTodoLists = async () => {
-    try {
-      const res = await apiCall('/api/todos/todo-list');
-      setTodoList(res?.data);
-    } catch (error) {
-      failure('Something went wrong');
-    }
+    const res = await apiCall('/api/todos/todo-list');
+    setTodoList(res?.data);
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error || 'Something went wrong');
-        });
+    openModal('This todo will be deleted permanently', () => {
+      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 2e0c299..c22c7e6 100644
--- a/app/(private)/todos/page.tsx
+++ b/app/(private)/todos/page.tsx
@@ -28,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 { apiCall, failure, openModal } from '@/lib/client_functions';
+import { apiCall, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos');
@@ -66,25 +66,16 @@ const TodosPage = () => {
   };
 
   const getTodoLists = async () => {
-    try {
-      await apiCall('/api/todos/todo-list').then((res) => {
-        setTodoList(res?.data);
-      });
-    } catch (error) {
-      failure('Something went wrong');
-    }
+    const res = await apiCall('/api/todos/todo-list');
+    setTodoList(res?.data);
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error || 'Something went wrong');
-        });
+    openModal('This todo will be deleted permanently', () => {
+      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 e055137..26ce4fa 100644
--- a/app/(private)/todos/recent/page.tsx
+++ b/app/(private)/todos/recent/page.tsx
@@ -28,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 { apiCall, failure, openModal } from '@/lib/client_functions';
+import { apiCall, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=recent');
@@ -66,24 +66,16 @@ const TodosPage = () => {
   };
 
   const getTodoLists = async () => {
-    try {
-      const res = await apiCall('/api/todos/todo-list');
-      setTodoList(res?.data);
-    } catch (error) {
-      failure('Something went wrong');
-    }
+    const res = await apiCall('/api/todos/todo-list');
+    setTodoList(res?.data);
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error || 'Something went wrong');
-        });
+    openModal('This todo will be deleted permanently', () => {
+      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 6369223..3842573 100644
--- a/app/(private)/todos/today/page.tsx
+++ b/app/(private)/todos/today/page.tsx
@@ -28,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 { apiCall, failure, openModal } from '@/lib/client_functions';
+import { apiCall, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=today');
@@ -66,24 +66,16 @@ const TodosPage = () => {
   };
 
   const getTodoLists = async () => {
-    try {
-      const res = await apiCall('/api/todos/todo-list');
-      setTodoList(res?.data);
-    } catch (error) {
-      failure('Something went wrong');
-    }
+    const res = await apiCall('/api/todos/todo-list');
+    setTodoList(res?.data);
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error || 'Something went wrong');
-        });
+    openModal('This todo will be deleted permanently', () => {
+      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 4bb7d61..10e598c 100644
--- a/app/(private)/todos/upcoming/page.tsx
+++ b/app/(private)/todos/upcoming/page.tsx
@@ -28,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 { apiCall, failure, openModal } from '@/lib/client_functions';
+import { apiCall, openModal } from '@/lib/client_functions';
 
 const TodosPage = () => {
   const { data, refetch, loading } = useFetchData('/api/todos?type=upcoming');
@@ -66,24 +66,16 @@ const TodosPage = () => {
   };
 
   const getTodoLists = async () => {
-    try {
-      const res = await apiCall('/api/todos/todo-list');
-      setTodoList(res?.data);
-    } catch (error) {
-      failure('Something went wrong');
-    }
+    const res = await apiCall('/api/todos/todo-list');
+    setTodoList(res?.data);
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-        })
-        .catch((err) => {
-          failure(err.response.data.error || 'Something went wrong');
-        });
+    openModal('This todo will be deleted permanently', () => {
+      apiCall(`/api/todos?_id=${form.values._id}`, {}, 'DELETE').then(() => {
+        form.reset();
+        refetch();
+      });
     });
   };
 
diff --git a/app/api/list/route.ts b/app/api/list/route.ts
index 2d7cf70..0672ee7 100644
--- a/app/api/list/route.ts
+++ b/app/api/list/route.ts
@@ -22,7 +22,7 @@ export async function GET(req: NextRequest) {
         break;
     }
     return NextResponse.json(
-      list.map((i) => ({ path: `/${schema}/${i?._id}`, label: i?.title, color: i?.color })),
+      list?.map((i) => ({ path: `/${schema}/${i?._id}`, label: i?.title, color: i?.color })),
       { status: 200 }
     );
   } catch (error: any) {
diff --git a/app/api/todos/todo-list/route.ts b/app/api/todos/todo-list/route.ts
index 187765b..eccd007 100644
--- a/app/api/todos/todo-list/route.ts
+++ b/app/api/todos/todo-list/route.ts
@@ -4,6 +4,7 @@ import startDb from '@/lib/db';
 import TodoList from '@/models/TodoList';
 import { authOptions } from '../../auth/[...nextauth]/authOptions';
 import { UserDataTypes } from '../../auth/[...nextauth]/next-auth.interfaces';
+import Todo from '@/models/Todo';
 
 export async function GET() {
   try {
@@ -48,6 +49,7 @@ export async function DELETE(req: NextRequest) {
     }
     await startDb();
     await TodoList.findByIdAndDelete(req.nextUrl.searchParams.get('_id'));
+    await Todo.deleteMany({ list: req.nextUrl.searchParams.get('_id') });
     return NextResponse.json(null, { status: 200 });
   } catch (error: any) {
     return NextResponse.json({ error: error?.message }, { status: 500 });
diff --git a/app/auth/register/page.tsx b/app/auth/register/page.tsx
index 288bd71..5522538 100644
--- a/app/auth/register/page.tsx
+++ b/app/auth/register/page.tsx
@@ -13,7 +13,7 @@ import { useForm } from '@mantine/form';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import FormButtons from '@/components/FormButtons';
-import { apiCall, failure, success } from '@/lib/client_functions';
+import { apiCall, success } from '@/lib/client_functions';
 
 const Register = () => {
   const router = useRouter();
@@ -36,12 +36,10 @@ const Register = () => {
   });
 
   const sumbitRegister = async () => {
-    await apiCall('/api/users/register', form.values, 'POST')
-      .then(() => {
-        success('User registered successfully');
-        router.push('/auth/login');
-      })
-      .catch((error) => failure(error.response.data.error));
+    await apiCall('/api/users/register', form.values, 'POST').then(() => {
+      success('User registered successfully');
+      router.push('/auth/login');
+    });
   };
 
   if (session.status === 'authenticated') {
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 4f486b3..c80eb2c 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -3,39 +3,40 @@
 import {
   ActionIcon,
   AppShell,
+  Avatar,
   Burger,
   Button,
-  Container,
   Group,
   Indicator,
   Popover,
   rem,
   SimpleGrid,
   Stack,
+  Text,
 } from '@mantine/core';
 import { useDisclosure, useNetwork } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconGridDots, IconList } from '@tabler/icons-react';
+import { IconGridDots, IconList, IconLogout, IconUser } from '@tabler/icons-react';
 import { signOut, useSession } from 'next-auth/react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useCallback, useEffect, useState } from 'react';
 import { App } from '../App';
 import { APPS } from '@/lib/constants';
-import { apiCall, failure } from '@/lib/client_functions';
+import { apiCall, getInitials } from '@/lib/client_functions';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const session = useSession();
+  const isLoggedIn = session?.status === 'authenticated';
+  const router = useRouter();
+
   const network = useNetwork();
   const [mobileOpened, { toggle: toggleMobile, close }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
   const [opened, setOpened] = useState(false);
-  const session = useSession();
-  const loading = session?.status === 'loading';
-  const isLoggedIn = session?.status === 'authenticated';
-  const isLoggedOff = session?.status === 'unauthenticated';
-  const router = useRouter();
+  const [opened1, setOpened1] = useState(false);
   const pathname = usePathname();
   const rootpath = pathname.split('/')[1];
-  const [APP, setAPP] = useState(APPS.find((app) => `/${rootpath}` === app?.path));
+  const [APP, setAPP] = useState(APPS?.find((app) => `/${rootpath}` === app?.path));
 
   const navigateTo = useCallback(
     (path?: string) => {
@@ -50,21 +51,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   );
 
   const getList = async () => {
-    try {
-      setAPP(APPS.find((app) => `/${rootpath}` === app?.path));
-      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');
+    if (session.status === 'unauthenticated') {
+      return;
+    }
+    setAPP(APPS?.find((app) => `/${rootpath}` === app?.path));
+    const res = await apiCall(`/api/list?schema=${rootpath}`);
+    if (res?.data) {
+      setAPP((old = { sidebar: [] }) => ({ ...old, sidebar: [...old.sidebar, ...res.data] }));
     }
   };
 
-  if (isLoggedOff) {
-    router.push('/auth/login');
-  }
-
   useEffect(() => {
     getList();
   }, [pathname]);
@@ -85,15 +81,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     }
   }, [network.online]);
 
-  if (loading) {
-    return <></>;
-  }
-
   return (
     <AppShell
       header={{ height: 60 }}
       navbar={{
-        width: 200,
+        width: isLoggedIn ? 200 : 0,
         breakpoint: 'sm',
         collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
@@ -133,30 +125,29 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           </Group>
           <Group gap={0}>
             {isLoggedIn && (
-              <>
+              <Group gap="xs">
                 <Popover
                   opened={opened}
                   onChange={setOpened}
                   position="bottom"
                   withArrow
                   shadow="md"
+                  radius="lg"
                 >
                   <Popover.Target>
-                    <Indicator color={network.online ? 'teal' : 'red'} offset={5}>
-                      <ActionIcon
-                        variant="subtle"
-                        color="gray"
-                        radius="xl"
-                        size="lg"
-                        onClick={() => setOpened((o) => !o)}
-                      >
-                        <IconGridDots stroke={3} style={{ width: rem(20), height: rem(20) }} />
-                      </ActionIcon>
-                    </Indicator>
+                    <ActionIcon
+                      variant="light"
+                      color="gray"
+                      radius="xl"
+                      size={rem(40)}
+                      onClick={() => setOpened((o) => !o)}
+                    >
+                      <IconGridDots stroke={3} style={{ width: rem(20), height: rem(20) }} />
+                    </ActionIcon>
                   </Popover.Target>
                   <Popover.Dropdown p="xs">
                     <SimpleGrid spacing="xs" cols={3}>
-                      {APPS.map((app) => (
+                      {APPS?.map((app) => (
                         <App
                           setOpened={setOpened}
                           isCurrent={APP?.path === app?.path}
@@ -167,17 +158,73 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                     </SimpleGrid>
                   </Popover.Dropdown>
                 </Popover>
-                <Button
-                  variant="transparent"
-                  size="compact-md"
-                  color="red"
-                  onClick={() => signOut()}
+                <Popover
+                  opened={opened1}
+                  onChange={setOpened1}
+                  position="bottom"
+                  withArrow
+                  shadow="xl"
+                  width={300}
+                  radius="lg"
                 >
-                  Logout
-                </Button>
-              </>
+                  <Popover.Target>
+                    <Indicator color={network.online ? 'teal' : 'red'} offset={5}>
+                      <Avatar
+                        variant=""
+                        color={APP?.color}
+                        radius="xl"
+                        size={rem(40)}
+                        onClick={() => setOpened1((o) => !o)}
+                        style={{ cursor: 'pointer' }}
+                      >
+                        {getInitials(session?.data?.user?.name)}
+                      </Avatar>
+                    </Indicator>
+                  </Popover.Target>
+                  <Popover.Dropdown p="xs">
+                    <Stack align="center">
+                      <Text fw={700} size="xs">
+                        {session?.data?.user?.email}
+                      </Text>
+                      <Stack align="center" gap={rem(4)}>
+                        <Indicator color={network.online ? 'teal' : 'red'} offset={8}>
+                          <Avatar variant="" color={APP?.color} radius="xl" size={rem(60)}>
+                            {getInitials(session?.data?.user?.name)}
+                          </Avatar>
+                        </Indicator>
+                        <Text fw={700} size="xs" c={network.online ? 'teal' : 'red'}>
+                          {network.online ? 'Online' : 'Offline'}
+                        </Text>
+                      </Stack>
+                      <Text fw={700} size="sm">
+                        Hi {session?.data?.user?.name},
+                      </Text>
+                      <Group>
+                        <Button
+                          variant="outline"
+                          radius="xl"
+                          color="teal"
+                          onClick={() => router.push('/profile')}
+                          leftSection={<IconUser />}
+                        >
+                          Profile
+                        </Button>
+                        <Button
+                          variant="outline"
+                          radius="xl"
+                          color="red"
+                          onClick={() => signOut()}
+                          leftSection={<IconLogout />}
+                        >
+                          Logout
+                        </Button>
+                      </Group>
+                    </Stack>
+                  </Popover.Dropdown>
+                </Popover>
+              </Group>
             )}
-            {isLoggedOff && (
+            {!isLoggedIn && (
               <>
                 <Button
                   variant="transparent"
@@ -200,8 +247,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           </Group>
         </Group>
       </AppShell.Header>
-      {isLoggedIn && APP?.sidebar?.length ? (
-        <>
+      <>
+        {isLoggedIn && APP?.sidebar?.length && (
           <AppShell.Navbar>
             <Stack gap={0} my="xs">
               {APP?.sidebar?.map((item) => (
@@ -220,13 +267,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               ))}
             </Stack>
           </AppShell.Navbar>
-          <AppShell.Main pt={rem(80)}>{children}</AppShell.Main>
-        </>
-      ) : (
-        <Container size="100%" pt={rem(80)}>
-          {children}
-        </Container>
-      )}
+        )}
+        <AppShell.Main pt={rem(80)}>{children}</AppShell.Main>
+      </>
     </AppShell>
   );
 }
diff --git a/components/Note/NoteModal.tsx b/components/Note/NoteModal.tsx
index 7e38650..1f05405 100644
--- a/components/Note/NoteModal.tsx
+++ b/components/Note/NoteModal.tsx
@@ -57,7 +57,9 @@ export const NoteModal = ({ opened, form, onSave, onDelete = () => {} }: Props)
             variant="transparent"
             size="sm"
             radius="xl"
-            onClick={() => openModal(() => onDelete?.(form.values._id))}
+            onClick={() =>
+              openModal('This note will be deleted permanently', () => onDelete?.(form.values._id))
+            }
             color="dark"
             title="Delete permanently"
           >
diff --git a/components/Todo/Todo.tsx b/components/Todo/Todo.tsx
index 27738b4..a96f1ff 100644
--- a/components/Todo/Todo.tsx
+++ b/components/Todo/Todo.tsx
@@ -10,7 +10,7 @@ import {
 } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { TodoType } from '@/models/Todo';
-import { updateTodo } from '@/lib/client_functions';
+import { apiCall } from '@/lib/client_functions';
 
 interface Props {
   todo: TodoType;
@@ -21,7 +21,7 @@ interface Props {
 const Todo = ({ todo, refetch, setSelected }: Props) => {
   const update = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, data: any) => {
     e.stopPropagation();
-    await updateTodo(String(todo?._id), data);
+    await apiCall('/api/todos', { ...data, _id: todo?._id }, 'PUT');
     refetch();
   };
 
diff --git a/components/Todo/TodoPageActions.tsx b/components/Todo/TodoPageActions.tsx
index e73338f..86db341 100644
--- a/components/Todo/TodoPageActions.tsx
+++ b/components/Todo/TodoPageActions.tsx
@@ -49,7 +49,7 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
     color: '',
     title: '',
   });
-  const selected = todoList.find((l) => l._id === pathname.split('/')[2]);
+  const selected = todoList?.find((l) => l._id === pathname.split('/')[2]);
 
   const form = useForm({
     initialValues: {
@@ -89,31 +89,27 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
   };
 
   const onDelete = () => {
-    openModal(() => {
-      apiCall(`/api/todos/todo-list?_id=${pathname.split('/')[2]}`, {}, 'DELETE')
-        .then(() => {
-          form.reset();
-          refetch();
-          getTodoLists();
-          close();
-          setOpened1(false);
-          router.push('/todos');
-        })
-        .catch(() => failure('Something went wrong'));
-    });
-  };
-
-  const createTodoList = () => {
-    apiCall('/api/todos/todo-list', list, 'POST')
-      .then((res) => {
+    openModal('This list and its todos will be deleted', () => {
+      apiCall(`/api/todos/todo-list?_id=${pathname.split('/')[2]}`, {}, 'DELETE').then(() => {
         form.reset();
         refetch();
         getTodoLists();
         close();
         setOpened1(false);
-        router.push(`/todos/${res?.data._id}`);
-      })
-      .catch(() => failure('Something went wrong'));
+        router.push('/todos');
+      });
+    });
+  };
+
+  const createTodoList = () => {
+    apiCall('/api/todos/todo-list', list, 'POST').then((res) => {
+      form.reset();
+      refetch();
+      getTodoLists();
+      close();
+      setOpened1(false);
+      router.push(`/todos/${res?.data._id}`);
+    });
   };
 
   return (
@@ -174,7 +170,7 @@ const TodoPageActions = ({ refetch, getTodoLists, todoList, isListPage = false }
             />
             <Select
               {...form.getInputProps('list')}
-              data={todoList.map(({ _id, title }) => ({ label: title, value: _id }))}
+              data={todoList?.map(({ _id, title }) => ({ label: title, value: _id }))}
               placeholder="Select a list (optional)"
               rightSection={<IconCaretUpDown />}
               clearable
diff --git a/hooks/useFetchData.tsx b/hooks/useFetchData.tsx
index 867d5a9..594c6f0 100644
--- a/hooks/useFetchData.tsx
+++ b/hooks/useFetchData.tsx
@@ -1,22 +1,17 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { apiCall, failure } from '@/lib/client_functions';
+import { apiCall } from '@/lib/client_functions';
 
 export default function useFetchData(url: string) {
   const [data, setData] = useState(null) as any;
   const [loading, setLoading] = useState(true);
 
   const refetch = async () => {
-    try {
-      setLoading(true);
-      const res: any[] | any = await apiCall(url);
-      setData(res?.data);
-    } catch (err: any) {
-      failure(err?.response?.data?.error || 'Something went wrong');
-    } finally {
-      setLoading(false);
-    }
+    setLoading(true);
+    const res: any[] | any = await apiCall(url);
+    setData(res?.data);
+    setLoading(false);
   };
 
   useEffect(() => {
diff --git a/lib/client_functions.tsx b/lib/client_functions.tsx
index 738204c..ad5f719 100644
--- a/lib/client_functions.tsx
+++ b/lib/client_functions.tsx
@@ -25,25 +25,15 @@ export const success = (message: string) =>
     icon: <IconCheck />,
   });
 
-export const openModal = (onConfirm: () => void) =>
+export const openModal = (message: string, onConfirm: () => void) =>
   modals.openConfirmModal({
     title: 'Please confirm your action',
-    children: (
-      <Text size="sm">
-        This action is so important that you are required to confirm it with a modal. Please click
-        one of these buttons to proceed.
-      </Text>
-    ),
+    children: <Text size="sm">{message}</Text>,
     labels: { confirm: 'Confirm', cancel: 'Cancel' },
     confirmProps: { color: 'red' },
     onConfirm,
   });
 
-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') => {
   let res;
   nprogress.start();