diff --git a/frontend/src/views/ChannelMessages.vue b/frontend/src/views/ChannelMessages.vue
index 351dff9..9959903 100644
--- a/frontend/src/views/ChannelMessages.vue
+++ b/frontend/src/views/ChannelMessages.vue
@@ -4,8 +4,8 @@
   <template v-else>
     <ListItem v-for="message in messages" :key="message.ID" :item="message" />
 
-    <div class="flex items-center justify-center">
-      <button class="px-4 py-2 hover:bg-slate-100 rounded border text-xl font-semibold w-full"
+    <div class="flex items-center justify-center mb-10">
+      <button class="py-2 hover:bg-slate-100 rounded border text-xl font-bold w-full"
         @click="loadMore">LoadMore</button>
     </div>
   </template>
@@ -28,6 +28,11 @@ const messages = ref([]);
 const loadMore = async () => {
   // router goto next page
   // offset is last message ID
+
+  // page scroll to top with animation
+  window.scrollTo({ top: 0, behavior: "smooth" });
+  messages.value = [];
+
   const offset = messages.value[messages.value.length - 1].ID
   router.push({
     name: "channel-messages",
@@ -39,8 +44,6 @@ const loadMore = async () => {
 
   messages.value = await getChannelMessages(route.params.channel, { offset: offset });
   console.log("messages", messages.value);
-  // page scroll to top with animation
-  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(async () => {
diff --git a/frontend/src/views/FavoriteMessages.vue b/frontend/src/views/FavoriteMessages.vue
index a983ed4..6b76280 100644
--- a/frontend/src/views/FavoriteMessages.vue
+++ b/frontend/src/views/FavoriteMessages.vue
@@ -6,8 +6,8 @@
   <template v-else>
     <ListItem v-for="message in messages" :key="message.ID" :item="message" />
 
-    <div class="flex items-center justify-center">
-      <button class="px-4 py-2 hover:bg-slate-100 rounded border text-xl font-semibold w-full"
+    <div class="flex items-center justify-center mb-10">
+      <button class="py-4 hover:bg-slate-100 rounded border text-xl font-bold w-full"
         @click="loadMore">LoadMore</button>
     </div>
   </template>
@@ -26,6 +26,11 @@ const messages = ref([]);
 const loadMore = async () => {
   // router goto next page
   // offset is last message ID
+  // page scroll to top with animation
+  window.scrollTo({ top: 0, behavior: "smooth" });
+
+  messages.value = [];
+
   const offset = messages.value[messages.value.length - 1].ID
   router.push({
     name: "favorite-messages",
@@ -37,8 +42,6 @@ const loadMore = async () => {
 
   messages.value = await getFavoriteMessages({ offset: offset });
   console.log("messages", messages.value);
-  // page scroll to top with animation
-  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(async () => {