diff --git a/src/oj/announcement/list.vue b/src/oj/announcement/list.vue
new file mode 100644
index 0000000..22bb094
--- /dev/null
+++ b/src/oj/announcement/list.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { getAnnouncementList } from "~/oj/api"
+import Pagination from "~/shared/components/Pagination.vue"
+import { parseTime } from "~/utils/functions"
+import { Announcement } from "~/utils/types"
+import { isDesktop } from "~/shared/composables/breakpoints"
+
+const total = ref(0)
+const content = ref("")
+const title = ref("")
+const [show, toggleShow] = useToggle(false)
+const query = reactive({
+  limit: 10,
+  page: 1,
+})
+const columns: DataTableColumn<Announcement>[] = [
+  { key: "title", title: "公告标题", minWidth: 300 },
+  {
+    key: "create_time",
+    title: "发布时间",
+    render: (row) => parseTime(row.create_time),
+    width: 160,
+  },
+  {
+    key: "username",
+    title: "发布人",
+    render: (row) => row.created_by.username,
+    width: 100,
+  },
+]
+function rowProps(row: Announcement) {
+  return {
+    style: "cursor: pointer",
+    onclick: () => showContent(row),
+  }
+}
+
+function showContent(announcement: Announcement) {
+  toggleShow(true)
+  title.value = announcement.title
+  content.value = announcement.content
+}
+const announcements = ref<Announcement[]>([])
+
+async function listAnnouncements() {
+  const offset = (query.page - 1) * query.limit
+  const res = await getAnnouncementList(offset, query.limit)
+  total.value = res.data.total
+  announcements.value = res.data.results
+}
+
+onMounted(listAnnouncements)
+watch(query, listAnnouncements, { deep: true })
+</script>
+<template>
+  <n-data-table
+    striped
+    :data="announcements"
+    :columns="columns"
+    :row-props="rowProps"
+  />
+  <Pagination
+    v-model:limit="query.limit"
+    v-model:page="query.page"
+    :total="total"
+  />
+  <n-modal
+    v-model:show="show"
+    preset="card"
+    :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
+    :content-style="{ overflow: 'auto' }"
+    :title="title"
+  >
+    <div v-html="content"></div>
+  </n-modal>
+</template>
diff --git a/src/oj/api.ts b/src/oj/api.ts
index 6d83a2c..d5cec7d 100644
--- a/src/oj/api.ts
+++ b/src/oj/api.ts
@@ -150,3 +150,7 @@ export function uploadAvatar(file: File) {
 export function updateProfile(data: { real_name: string; mood: string }) {
   return http.put("profile", data)
 }
+
+export function getAnnouncementList(offset = 10, limit = 10) {
+  return http.get("announcement", { params: { limit, offset } })
+}
diff --git a/src/routes.ts b/src/routes.ts
index 7894612..2c2c8ef 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -70,6 +70,10 @@ export const ojs: RouteRecordRaw = {
       component: () => import("oj/rank/list.vue"),
       beforeEnter: loadChart,
     },
+    {
+      path: "announcement",
+      component: () => import("oj/announcement/list.vue"),
+    },
     {
       path: "user",
       component: () => import("oj/user/index.vue"),
diff --git a/src/shared/components/Header.vue b/src/shared/components/Header.vue
index d29c9d6..e886a96 100644
--- a/src/shared/components/Header.vue
+++ b/src/shared/components/Header.vue
@@ -51,6 +51,10 @@ const menus = computed<MenuOption[]>(() => [
     label: () => h(RouterLink, { to: "/rank" }, { default: () => "排名" }),
     key: "rank",
   },
+  {
+    label: () => h(RouterLink, { to: "/announcement" }, { default: () => "公告" }),
+    key: "announcement",
+  },
   {
     label: () => h(RouterLink, { to: "/admin" }, { default: () => "后台" }),
     show: userStore.isAdminRole,