diff --git a/app/(private)/notes/archive/page.tsx b/app/(private)/notes/archive/page.tsx
index 9a1e13d..2641568 100644
--- a/app/(private)/notes/archive/page.tsx
+++ b/app/(private)/notes/archive/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { Container } from '@mantine/core';
+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 { NewNote, NoteModal, Notes } from '@/components/Note';
+import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
@@ -118,7 +118,11 @@ export default function NotesPage() {
     <>
       <NewNote newNote={newNote} />
       <Container px={0} size="md">
-        <Notes data={data} handleClick={handleClick} />
+        <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+          {data?.map((note: NoteDocument) => (
+            <Note key={String(note._id)} note={note} handleClick={handleClick} />
+          ))}
+        </SimpleGrid>
       </Container>
       <NoteModal opened={opened} form={form} onSave={onSave} />
     </>
diff --git a/app/(private)/notes/page.tsx b/app/(private)/notes/page.tsx
index 8d90d64..e304c60 100644
--- a/app/(private)/notes/page.tsx
+++ b/app/(private)/notes/page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
 import { useForm } from '@mantine/form';
-import { Container, Text } from '@mantine/core';
+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 { NewNote, NoteModal, Notes } from '@/components/Note';
+import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
+import Skelton from '@/components/Skelton/Skelton';
 
 export default function NotesPage() {
   const { data, loading, refetch } = useFetchData('/api/notes');
@@ -121,18 +122,34 @@ export default function NotesPage() {
     <>
       <NewNote newNote={newNote} />
       <Container px={0} size="md">
-        {pinned?.length > 0 && (
+        {loading ? (
+          <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+            <Skelton items={6} />
+          </SimpleGrid>
+        ) : (
           <>
-            <Text size="sm" mb="xs">
-              PINNED
-            </Text>
-            <Notes data={pinned} handleClick={handleClick} />
-            <Text size="sm" my="xs">
-              OTHERS
-            </Text>
+            {pinned?.length > 0 && (
+              <Stack>
+                <Text size="sm" mb="xs">
+                  PINNED
+                </Text>
+                <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+                  {pinned?.map((note: NoteDocument) => (
+                    <Note key={String(note._id)} note={note} handleClick={handleClick} />
+                  ))}
+                </SimpleGrid>
+                <Text size="sm" my="xs">
+                  OTHERS
+                </Text>
+              </Stack>
+            )}
+            <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+              {others?.map((note: NoteDocument) => (
+                <Note key={String(note._id)} note={note} handleClick={handleClick} />
+              ))}
+            </SimpleGrid>
           </>
         )}
-        <Notes data={others} handleClick={handleClick} />
       </Container>
       <NoteModal opened={opened} form={form} onSave={onSave} />
     </>
diff --git a/app/(private)/notes/trashed/page.tsx b/app/(private)/notes/trashed/page.tsx
index 87599ff..d5bd5ce 100644
--- a/app/(private)/notes/trashed/page.tsx
+++ b/app/(private)/notes/trashed/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { Container } from '@mantine/core';
+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 { NewNote, NoteModal, Notes } from '@/components/Note';
+import Note, { NewNote, NoteModal } from '@/components/Note';
 import useFetchData from '@/hooks/useFetchData';
 import { failure } from '@/lib/client_functions';
 import { NoteDocument } from '@/models/Note';
@@ -133,7 +133,11 @@ export default function NotesPage() {
     <>
       <NewNote newNote={newNote} />
       <Container px={0} size="md">
-        <Notes data={data} handleClick={handleClick} />
+        <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
+          {data?.map((note: NoteDocument) => (
+            <Note key={String(note._id)} note={note} handleClick={handleClick} />
+          ))}
+        </SimpleGrid>
       </Container>
       <NoteModal onDelete={onDelete} opened={opened} form={form} onSave={onSave} />
     </>
diff --git a/components/Note/Notes.tsx b/components/Note/Notes.tsx
deleted file mode 100644
index 458992e..0000000
--- a/components/Note/Notes.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-import React from 'react';
-import Note from './Note';
-import { NoteDocument } from '@/models/Note';
-
-interface Props {
-  data: NoteDocument[];
-  handleClick: (note: NoteDocument) => void;
-}
-
-export const Notes = ({ data, handleClick }: Props) => (
-  <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }}>
-    {data?.map((note: NoteDocument) => (
-      <Note key={String(note._id)} note={note} handleClick={handleClick} />
-    ))}
-  </SimpleGrid>
-);
diff --git a/components/Note/index.ts b/components/Note/index.ts
index 3697556..d30f688 100644
--- a/components/Note/index.ts
+++ b/components/Note/index.ts
@@ -2,6 +2,5 @@ import Note from './Note';
 
 export * from './NoteModal';
 export * from './NewNote';
-export * from './Notes';
 
 export default Note;
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;