diff --git a/extension/assets/empty.png b/extension/assets/empty.png
new file mode 100644
index 00000000..b642d95c
Binary files /dev/null and b/extension/assets/empty.png differ
diff --git a/extension/assets/loading.gif b/extension/assets/loading.gif
new file mode 100644
index 00000000..49eaaab3
Binary files /dev/null and b/extension/assets/loading.gif differ
diff --git a/src/components/Empty.vue b/src/components/Empty.vue
new file mode 100644
index 00000000..ed01a6e0
--- /dev/null
+++ b/src/components/Empty.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const emptyImg = browser.runtime.getURL('/assets/empty.png')
+</script>
+
+<template>
+  <div flex="~" justify="center" items="center">
+    <img :src="emptyImg" w="200px" h="auto">
+  </div>
+</template>
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 00000000..c3876c41
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const imgURL = browser.runtime.getURL('/assets/loading.gif')
+</script>
+
+<template>
+  <div
+    w="full"
+    h="46px"
+    p="y-8"
+    flex="~"
+    justify="center"
+    items="center"
+  >
+    <img
+      :src="imgURL"
+      alt="loading"
+      w="46px"
+      h="46px"
+      m="r-2"
+    />
+    {{ $t('home.loading_more') }}
+  </div>
+</template>
diff --git a/src/manifest.ts b/src/manifest.ts
index ad26a34b..f82c7022 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -45,7 +45,7 @@ export async function getManifest() {
         js: ['./dist/contentScripts/index.global.js'],
       },
     ],
-    web_accessible_resources: ['dist/contentScripts/style.css'],
+    web_accessible_resources: ['dist/contentScripts/style.css', 'assets/*'],
   }
 
   if (isDev) {