diff --git a/apps/client/components/Alert.vue b/apps/client/components/Alert.vue
new file mode 100644
index 000000000..593a99c84
--- /dev/null
+++ b/apps/client/components/Alert.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="flex w-full items-center justify-between rounded-lg bg-purple-600 px-4 py-1 text-white"
+    v-if="showAlert"
+  >
+    <span class="font-bold"
+      >【邀请函】加入 Earthworm 创始会员 与我们一起成就更好的英语学习平台</span
+    >
+    <div class="flex space-x-4">
+      <button
+        class="rounded-lg bg-white px-4 font-bold text-purple-600"
+        @click="handleShowDetails"
+      >
+        查看详情
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const showAlert = ref(true);
+
+function handleShowDetails() {
+  window.open("https://earthworm-docs.cuixueshe.com/get-started/founding-member.html", "_blank");
+  showAlert.value = false;
+}
+</script>
+
+<style scoped></style>
diff --git a/apps/client/layouts/default.vue b/apps/client/layouts/default.vue
index bb6a86053..41f762afc 100644
--- a/apps/client/layouts/default.vue
+++ b/apps/client/layouts/default.vue
@@ -4,6 +4,7 @@
   >
     <div class="m-auto flex h-fit min-h-screen flex-col items-center">
       <Navbar />
+      <Alert></Alert>
       <!-- 多一层内容的横向内边距是为了和 Navbar 对齐 -->
       <div class="flex w-full flex-1 px-5">
         <div class="mx-auto flex w-full max-w-screen-xl flex-1">
@@ -15,4 +16,6 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Alert from "../components/Alert.vue";
+</script>