diff --git a/app/(private)/notes/page.tsx b/app/(private)/notes/page.tsx
index 88a8d63..e304c60 100644
--- a/app/(private)/notes/page.tsx
+++ b/app/(private)/notes/page.tsx
@@ -10,7 +10,7 @@ import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
-import TodoSkelton from '@/components/Todo/TodoSkelton';
+import Skelton from '@/components/Skelton/Skelton';
 
 export default function NotesPage() {
   const { data, loading, refetch } = useFetchData('/api/notes');
@@ -124,7 +124,7 @@ export default function NotesPage() {
       <Container px={0} size="md">
         {loading ? (
           <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
-            <TodoSkelton items={6} />
+            <Skelton items={6} />
           </SimpleGrid>
         ) : (
           <>
diff --git a/components/Skelton/Skelton.tsx b/components/Skelton/Skelton.tsx
new file mode 100644
index 0000000..af6aea8
--- /dev/null
+++ b/components/Skelton/Skelton.tsx
@@ -0,0 +1,7 @@
+import { Skeleton } from '@mantine/core';
+import React from 'react';
+
+const Skelton = ({ items = 4 }: { items?: number }) =>
+  [...Array(items)].map((_, i) => <Skeleton key={String(i)} height={100} mt="md" animate />);
+
+export default Skelton;