diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 4dc29d2..ff7bd86 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -16,6 +16,7 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
 import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
+import CacheAllNotes from '@/modules/note/components/CacheAllNote.vue'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
 
@@ -106,6 +107,7 @@ const focusREADME = () => scrollToTop()
         <h4 class="subtitle is-5">
           <em>{{ user }}</em>
         </h4>
+        <cache-all-notes />
       </div>
       <slot />
       <lite-loading v-if="isLoading" />
diff --git a/src/hooks/useOfflineNote.hook.ts b/src/hooks/useOfflineNote.hook.ts
new file mode 100644
index 0000000..e8a6223
--- /dev/null
+++ b/src/hooks/useOfflineNote.hook.ts
@@ -0,0 +1,64 @@
+import { useAsyncState } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
+import { queryFileContent } from '@/modules/repo/services/repo'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+
+export const useOfflineNote = () => {
+  const store = useUserRepoStore()
+  const totalOfNotes = computed(() => store.files.length)
+
+  const noteCompleted = ref(0)
+
+  const cacheAllNotes = async () => {
+    const isInitialized = store.user && store.repo && totalOfNotes.value > 0
+
+    if (!isInitialized) {
+      return
+    }
+
+    noteCompleted.value = 0
+
+    for (const file of store.files) {
+      noteCompleted.value++
+
+      if (!file.sha) {
+        continue
+      }
+
+      const { getCachedNote, saveCacheNote } = prepareNoteCache(
+        file.sha,
+        file.path
+      )
+
+      const isNoteCached = (await getCachedNote()) !== null
+
+      if (isNoteCached) {
+        continue
+      }
+
+      const contentFile = await queryFileContent(
+        store.user,
+        store.repo,
+        file.sha
+      )
+
+      if (!contentFile) {
+        return null
+      }
+
+      saveCacheNote(contentFile)
+    }
+  }
+  const { execute, isLoading } = useAsyncState(cacheAllNotes, null, {
+    immediate: false
+  })
+
+  return {
+    cacheAllNotes: execute,
+    isLoading,
+    totalOfNotes,
+    noteCompleted
+  }
+}
diff --git a/src/modules/note/components/CacheAllNote.vue b/src/modules/note/components/CacheAllNote.vue
new file mode 100644
index 0000000..cb6da18
--- /dev/null
+++ b/src/modules/note/components/CacheAllNote.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useOfflineNote } from '@/hooks/useOfflineNote.hook'
+
+const { cacheAllNotes, isLoading, totalOfNotes, noteCompleted } =
+  useOfflineNote()
+
+const confirmBeforeCachingAllNotes = () => {
+  confirm('Do you want to cache all notes?')
+  cacheAllNotes()
+}
+</script>
+
+<template>
+  <div v-if="isLoading" class="cache-all-notes">
+    <div>{{ noteCompleted }}/{{ totalOfNotes }}</div>
+    <progress
+      :value="noteCompleted"
+      class="progress"
+      :max="totalOfNotes"
+    ></progress>
+  </div>
+  <button v-else class="button" @click="() => confirmBeforeCachingAllNotes()">
+    cache all notes
+  </button>
+</template>
+
+<style scoped lang="scss">
+.cache-all-notes {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>
diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts
index 407b0d4..db9e8f2 100644
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
-import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
 import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
 import { UserSettings } from '@/modules/repo/interfaces/UserSettings'
 import { SavedRepo } from '@/modules/repo/models/SavedRepo'
@@ -10,8 +9,7 @@ import {
   getCachedMainReadme,
   getFiles,
   getMainReadme,
-  getUserSettingsContent,
-  queryFileContent
+  getUserSettingsContent
 } from '@/modules/repo/services/repo'
 import { refreshToken } from '@/modules/user/service/signIn'
 
@@ -116,42 +114,6 @@ export const useUserRepoStore = defineStore({
       this.files = []
       this.readme = null
       this.userSettings = undefined
-    },
-    async cacheAllFiles() {
-      const isInitialized = this.user && this.repo && this.files.length > 0
-
-      if (!isInitialized) {
-        return
-      }
-
-      for (const file of this.files) {
-        if (!file.sha) {
-          continue
-        }
-
-        const { getCachedNote, saveCacheNote } = prepareNoteCache(
-          file.sha,
-          file.path
-        )
-
-        const isNoteCached = (await getCachedNote()) !== null
-
-        if (isNoteCached) {
-          continue
-        }
-
-        const contentFile = await queryFileContent(
-          this.user,
-          this.repo,
-          file.sha
-        )
-
-        if (!contentFile) {
-          return null
-        }
-
-        saveCacheNote(contentFile)
-      }
     }
   }
 })