diff --git a/src/components/ui/AvatarPicture.vue b/src/components/ui/AvatarPicture.vue
index a28a660c2..127bc8970 100644
--- a/src/components/ui/AvatarPicture.vue
+++ b/src/components/ui/AvatarPicture.vue
@@ -8,7 +8,7 @@ const session = useSession();
 const token = session.getToken();
 </script>
 <template>
-    <div class="avatar-picture">
+    <div class="avatar-picture column items-center">
         <QAvatar color="orange">
             <QImg
                 :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
@@ -24,13 +24,3 @@ const token = session.getToken();
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-.avatar-picture {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .description {
-        text-align: center;
-    }
-}
-</style>
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 21c56b0b3..c05ecdecf 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -4,8 +4,8 @@ import AvatarPicture from 'src/components/ui/AvatarPicture.vue';
 import { toDateHour } from 'src/filters';
 import { ref } from 'vue';
 import axios from 'axios';
-import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
+import VnPaginate from './VnPaginate.vue';
 
 const $props = defineProps({
     id: { type: String, required: true },
@@ -15,36 +15,75 @@ const $props = defineProps({
     addNote: { type: Boolean, default: false },
 });
 const { t } = useI18n();
-const notes = ref([]);
 const noteModal = ref(false);
 const newNote = ref('');
-const claimObservationRef = ref();
-
-function setNotes(data) {
-    notes.value = data;
-}
+const vnPaginateRef = ref();
 
 async function fetch() {
     const body = $props.body;
     Object.assign(body, { text: newNote.value });
     await axios.post($props.url, body);
-    claimObservationRef.value.fetch();
+    vnPaginateRef.value.fetch();
 }
 </script>
 <template>
-    <FetchData
-        :url="$props.url"
-        :filter="$props.filter"
-        @on-fetch="setNotes"
-        auto-load
-        ref="claimObservationRef"
-    />
-    <div class="notes" ref="notesContainer">
+    <div class="notes">
+        <VnPaginate
+            :data-key="$props.url"
+            :url="$props.url"
+            order="created DESC"
+            :limit="20"
+            :filter="$props.filter"
+            auto-load
+            ref="vnPaginateRef"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-pa-md q-ma-md" v-for="(note, index) in rows" :key="index">
+                    <div class="picture q-pa-sm">
+                        <slot name="picture">
+                            <AvatarPicture :worker="note.workerFk">
+                                <template #description>
+                                    <span class="link">
+                                        {{
+                                            `${note.worker.firstName} ${note.worker.lastName}`
+                                        }}
+                                    </span>
+                                    <WorkerDescriptorProxy :id="note.worker.id" />
+                                </template>
+                            </AvatarPicture>
+                        </slot>
+                    </div>
+                    <div class="text">
+                        <slot name="text">
+                            {{ note.text }}
+                        </slot>
+                    </div>
+                    <div class="actions">
+                        <slot name="actions">
+                            <div>
+                                {{ toDateHour(note.created) }}
+                            </div>
+                        </slot>
+                    </div>
+                </QCard>
+            </template>
+        </VnPaginate>
+        <QPageSticky position="bottom-right" :offset="[25, 25]">
+            <QBtn
+                v-if="addNote"
+                class="add-btn"
+                color="primary"
+                icon="add"
+                size="md"
+                round
+                @click="noteModal = true"
+            />
+        </QPageSticky>
         <QDialog v-model="noteModal" persistent>
-            <QCard class="note-dialog q-pa-sm">
-                <QCardSection class="note-dialog__header">
-                    <div class="note-dialog__title">
-                        <QIcon name="draft" class="note-dialog__title-icon" />
+            <QCard class="note-dialog column q-pa-sm">
+                <QCardSection class="note-dialog__header row self-start justify-between">
+                    <div class="note-dialog__title row items-center text-primary text-h6">
+                        <QIcon name="draft" class="note-dialog__title-icon q-mr-sm" />
                         <div class="text-h6 note-dialog__title-text">
                             {{ t('Add note') }}
                         </div>
@@ -61,7 +100,7 @@ async function fetch() {
                         v-model="newNote"
                     ></QInput>
                 </QCardSection>
-                <QCardActions class="note-dialog__actions q-mr-md">
+                <QCardActions class="note-dialog__actions self-end q-mr-md">
                     <QBtn
                         flat
                         :label="t('globals.close')"
@@ -77,76 +116,23 @@ async function fetch() {
                 </QCardActions>
             </QCard>
         </QDialog>
-        <QCard class="q-pa-md" v-for="(note, index) in notes" :key="index">
-            <div class="picture q-pa-sm">
-                <slot name="picture">
-                    <AvatarPicture :worker="note.workerFk">
-                        <template #description>
-                            <span class="link">
-                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
-                            </span>
-                            <WorkerDescriptorProxy :id="note.worker.id" />
-                        </template>
-                    </AvatarPicture>
-                </slot>
-            </div>
-            <div class="text">
-                <slot name="text">
-                    {{ note.text }}
-                </slot>
-            </div>
-            <div class="actions">
-                <slot name="actions">
-                    <div>
-                        {{ toDateHour(note.created) }}
-                    </div>
-                </slot>
-            </div>
-        </QCard>
-        <QBtn
-            v-if="addNote"
-            class="add-btn"
-            color="primary"
-            round
-            @click="noteModal = true"
-        >
-            <QIcon name="add" size="md"></QIcon>
-        </QBtn>
     </div>
 </template>
 <style lang="scss" scoped>
 .q-card {
-    min-width: 350px;
+    min-width: 340px;
 }
 .note-dialog {
-    display: flex;
-    flex-direction: column;
     .note-dialog__header {
         width: 100%;
-        align-self: flex-start;
-        display: flex;
-        justify-content: space-between;
-    }
-    .note-dialog__title {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        color: $primary;
-        font-size: large;
     }
     .note-dialog__content {
         width: 95%;
     }
-    .note-dialog__actions {
-        align-self: flex-end;
-    }
 }
 .add-btn {
     width: 70px;
     height: 70px;
-    position: sticky;
-    left: 95%;
-    bottom: 2%;
 }
 </style>
 <i18n>
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 2a5b878f5..434ebf232 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -49,6 +49,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
+defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -82,7 +83,6 @@ async function fetch() {
     if (!arrayData.hasMoreData.value) {
         isLoading.value = false;
     }
-
     emit('onFetch', store.data);
 }
 
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index c79c9e486..6c8361fde 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -9,7 +9,6 @@ const user = state.getUser();
 const id = route.params.id;
 
 const claimFilter = {
-    order: 'created DESC',
     where: { claimFk: id },
     fields: ['created', 'workerFk', 'text'],
     include: {
@@ -38,7 +37,6 @@ const body = {
 </template>
 <style lang="scss">
 .q-card {
-    width: 100%;
     max-width: 70em;
     display: flex;
     justify-content: space-between;
@@ -50,36 +48,42 @@ const body = {
         display: flex;
         flex-direction: column;
         align-items: center;
-        > * {
-            margin: 10px;
-        }
+
         .text {
-            flex: 70%;
+            width: 70%;
             padding: 10px;
         }
         .picture {
-            flex: 15%;
-            .avatar-picture {
-                width: 70px;
-            }
+            width: 15%;
         }
         .actions {
-            flex: 15%;
+            width: 15%;
             align-self: baseline;
             text-align: center;
         }
     }
 }
-@media (max-width: 1150px) {
+@media (max-width: $breakpoint-md) {
     .claim-notes {
-        .text {
-            margin-top: 20px;
-            order: 3;
-            flex: 100%;
-        }
+        .notes {
+            .picture,
+            .actions {
+                width: 50%;
+            }
+            .picture {
+                .avatar-picture {
+                    width: 135px;
+                }
+            }
+            .text {
+                width: 90%;
+                margin: 0 auto;
+                order: 3;
+            }
 
-        .actions {
-            text-align: end;
+            .actions {
+                text-align: end;
+            }
         }
     }
 }
diff --git a/test/cypress/integration/ClaimNotes.spec.js b/test/cypress/integration/ClaimNotes.spec.js
index 9370c7a9e..2afa0e4fd 100644
--- a/test/cypress/integration/ClaimNotes.spec.js
+++ b/test/cypress/integration/ClaimNotes.spec.js
@@ -11,6 +11,6 @@ describe('ClaimNotes', () => {
         cy.get('.add-btn').click();
         cy.get('.note-dialog__content').type(message);
         cy.get('.note-dialog__actions .q-btn:nth-child(2)').click();
-        cy.get('.notes > :nth-child(1) > .text').should('have.text', message);
+        cy.get('.notes .q-card .text').eq(0).should('have.text', message);
     });
 });