diff --git a/backend/.tmp/data.db b/backend/.tmp/data.db
index 55a672b..694e88d 100644
Binary files a/backend/.tmp/data.db and b/backend/.tmp/data.db differ
diff --git a/frontend/components/ArticlesList/Item.vue b/frontend/components/ArticlesList/Item.vue
deleted file mode 100644
index cae6ae8..0000000
--- a/frontend/components/ArticlesList/Item.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import type { IArticleItem } from '~~/types/IArticleItem'
-defineProps({
-  artlistItem: {
-    type: Array<IArticleItem>,
-  },
-})
-const format = (num: number) => {
-  return num > 10000 ? `${(num / 10000).toFixed(1)}w` : num
-}
-</script>
-
-<template>
-  <li v-for="artItem in artlistItem" :key="artItem.id" class="f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer">
-    <NuxtLink class="flex-1 pl-[1.67rem] truncate" :to="`/article/${artItem.id}`">
-      <div class="flex items-center pr-4 text-[13px]">
-        <span class="text-jj_sec-app px-3 border-r-1 pl-0">{{ artItem.authorId.name }}</span>
-        <span class="text-jj_thirdly px-3 border-r-1">{{ formatTime(artItem.createdAt) }}</span>
-        <div class="flex px-3">
-          <div v-for="(item, index) of artItem.tagIds.data" :key="item.tag" class="items-center flex">
-            <span class="px-0 text-jj_thirdly">{{ item.tag }}</span>
-            <div v-if="index !== artItem.tagIds.data.length - 1" class="i-carbon-circle-solid px-2 text-[0.15rem]" />
-          </div>
-        </div>
-      </div>
-      <div class="py-4">
-        <div class="truncate text-jj_sec-app text-[16px] title font-semibold tracking-wide">
-          {{ artItem.title }}
-        </div>
-        <div class="truncate pt-4 text-jj_thirdly text-[13px]">
-          {{ artItem.summary }}
-        </div>
-      </div>
-      <div class="flex all-flex all-items-center all-text-jj_sec_app all-text-[13px]">
-        <div>
-          <div class="i-carbon-view" />
-          <span class="pl-2">{{ artItem.viewed ? format(artItem.viewed) : '观看' }}</span>
-        </div>
-        <div class="mx-7">
-          <div class="i-carbon-thumbs-up" />
-          <span class="pl-2">{{ artItem.liked[1] ? format(artItem.liked) : '点赞' }}</span>
-        </div>
-        <div>
-          <div class="i-carbon-chat" />
-          <span class="pl-2">{{ artItem.commented[2] ? format(artItem.commented) : '评论' }}</span>
-        </div>
-      </div>
-    </NuxtLink>
-    <div class="px-[1.67rem]">
-      <nuxt-img
-        v-if="artItem.cover"
-        :src="artItem.cover"
-        :alt="artItem.summary"
-        width="120"
-        height="80"
-        loading="lazy"
-        fit="cover"
-        quality="80"
-        format="webp"
-      />
-    </div>
-  </li>
-</template>
-
-<style scoped>
-a:visited .title {
-  color: #909090;
-}
-</style>
diff --git a/frontend/components/ArticlesList/Items/Bottombar.vue b/frontend/components/ArticlesList/Items/Bottombar.vue
new file mode 100644
index 0000000..22cb132
--- /dev/null
+++ b/frontend/components/ArticlesList/Items/Bottombar.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  viewed: Number,
+  liked: Number,
+  commented: Number,
+})
+const format = (num: number) => {
+  return num > 10000 ? `${(num / 10000).toFixed(1)}w` : num
+}
+</script>
+
+<template>
+  <div class="flex all-flex all-items-center all-text-jj_sec_app all-text-[13px]">
+    <div>
+      <div class="i-carbon-view" />
+      <span class="pl-2">{{ viewed ? format(viewed) : '观看' }}</span>
+    </div>
+    <div class="mx-7">
+      <div class="i-carbon-thumbs-up" />
+      <span class="pl-2">{{ liked ? format(liked) : '点赞' }}</span>
+    </div>
+    <div>
+      <div class="i-carbon-chat" />
+      <span class="pl-2">{{ commented ? format(commented) : '评论' }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/components/ArticlesList/Items/Link.vue b/frontend/components/ArticlesList/Items/Link.vue
new file mode 100644
index 0000000..367b40b
--- /dev/null
+++ b/frontend/components/ArticlesList/Items/Link.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+defineProps({
+  id: String,
+  url: String,
+})
+</script>
+
+<template>
+  <NuxtLink v-if="id" class="flex-1 pl-[1.67rem] truncate" :to="`/article/${id}`">
+    <slot />
+  </NuxtLink>
+  <NuxtLink v-if="url" class="flex-1 pl-[1.67rem] truncate" :to="`/article/${url}`">
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/frontend/components/ArticlesList/Items/Mainbar.vue b/frontend/components/ArticlesList/Items/Mainbar.vue
new file mode 100644
index 0000000..70ce97f
--- /dev/null
+++ b/frontend/components/ArticlesList/Items/Mainbar.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+  title: String,
+  summary: String,
+})
+</script>
+
+<template>
+  <div class="py-4">
+    <div class="truncate text-jj_sec-app text-[16px] title font-semibold tracking-wide">
+      {{ title }}
+    </div>
+    <div class="truncate pt-4 text-jj_thirdly text-[13px]">
+      {{ summary }}
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/ArticlesList/Items/Topbar.vue b/frontend/components/ArticlesList/Items/Topbar.vue
new file mode 100644
index 0000000..eca1946
--- /dev/null
+++ b/frontend/components/ArticlesList/Items/Topbar.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ITagItem } from '~~/types/IArticleItem'
+defineProps({
+  name: String,
+  duration: String,
+  tags: {
+    type: Array<ITagItem>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="flex items-center pr-4 text-[13px]">
+    <span class="text-jj_sec-app px-3 border-r-1 pl-0">{{ name }}</span>
+    <span class="text-jj_thirdly px-3 border-r-1">{{ duration }}</span>
+    <div class="flex px-3">
+      <div v-for="(item, index) of tags" :key="item.tag" class="items-center flex">
+        <span class="px-0 text-jj_thirdly">{{ item.tag }}</span>
+        <div v-if="index !== tags.length - 1" class="i-carbon-circle-solid px-2 text-[0.15rem]" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/ArticlesList/Items/index.vue b/frontend/components/ArticlesList/Items/index.vue
new file mode 100644
index 0000000..d51fb04
--- /dev/null
+++ b/frontend/components/ArticlesList/Items/index.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { IArticleItem } from '~~/types/IArticleItem'
+defineProps({
+  artlistItem: {
+    type: Array<IArticleItem>,
+  },
+  artlistAd: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <li>
+    <ArticlesListItemsLink :url="artlistAd.url">
+      <ArticlesListItemsTopbar
+        :name="artlistAd.author"
+      />
+      <ArticlesListItemsMainbar
+        :title="artlistAd.title"
+        :summary="artlistAd.summary"
+      />
+    </ArticlesListItemsLink>
+  </li>
+  <li
+    v-for="artItem in artlistItem"
+    :key="artItem.id"
+    class="f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer"
+  >
+    <ArticlesListItemsLink :id="artItem.id">
+      <ArticlesListItemsTopbar
+        :name="artItem.authorId.name"
+        :duration="formatTime(artItem.createdAt)"
+        :tags="artItem.tagIds.data"
+      />
+      <ArticlesListItemsMainbar
+        :title="artItem.title"
+        :summary="artItem.summary"
+      />
+      <ArticlesListItemsBottombar
+        :viewed="artItem.viewed"
+        :liked="artItem.liked"
+        :commented="artItem.commented"
+      />
+    </ArticlesListItemsLink>
+    <div class="px-[1.67rem]">
+      <nuxt-img
+        v-if="artItem.cover"
+        :src="artItem.cover"
+        :alt="artItem.summary"
+        width="120"
+        height="80"
+        loading="lazy"
+        fit="cover"
+        quality="80"
+        format="webp"
+      />
+    </div>
+  </li>
+</template>
+
+<style scoped>
+  a:visited .title {
+    color: #909090;
+  }
+</style>
diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
index b244fc9..5e33bfd 100644
--- a/frontend/components/ArticlesList/index.vue
+++ b/frontend/components/ArticlesList/index.vue
@@ -4,6 +4,7 @@ let pagenum = 1
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
 const artlistData = useArtlist([])
+const artlistAd = await useFetchArtlistAd()
 const addArtListItem = () => {
   if (useScrollBottom()) {
     pagenum++
@@ -42,7 +43,7 @@ onUnmounted(() => {
   <div class="bg-white pb-5 box-border w-full">
     <ArticlesListNavigation />
     <ul v-if="!isLoading && !isEmpty">
-      <ArticlesListItem :artlist-item="artlistData" />
+      <ArticlesListItems :artlist-item="artlistData" :artlist-ad="artlistAd" />
     </ul>
     <ArticlesListSkeleton v-else />
   </div>
diff --git a/frontend/composables/Articlelist/useArtlistFn.ts b/frontend/composables/Articlelist/useArtlistFn.ts
index 4bde075..177b9a1 100644
--- a/frontend/composables/Articlelist/useArtlistFn.ts
+++ b/frontend/composables/Articlelist/useArtlistFn.ts
@@ -1,4 +1,4 @@
-import type { IArticleItem } from '~~/types/IArticleItem'
+import type { IArticleAd, IArticleItem } from '~~/types/IArticleItem'
 export const formatTime = (createdAt: string): string => {
   const created = new Date(createdAt)
   const now = new Date()
@@ -22,6 +22,10 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
     return ''
   return path
 })
+export const useFetchArtlistAd = async (): Promise<IArticleAd> => {
+  const { data } = await useFetch('/api/global')
+  return data.value
+}
 export const useFetchPostData = async (
   type?: string,
   sort: any = 'recommended',
diff --git a/frontend/types/IArticleItem.ts b/frontend/types/IArticleItem.ts
index 34ad405..9df1b72 100644
--- a/frontend/types/IArticleItem.ts
+++ b/frontend/types/IArticleItem.ts
@@ -1,11 +1,9 @@
 interface IAuthor {
   name: string
 }
-
 interface ITagItem {
   tag: string
 }
-
 interface IArticleItem {
   id: string
   title: string
@@ -17,8 +15,16 @@ interface IArticleItem {
   createdAt: string
   authorId: IAuthor
   tagIds: { data: ITagItem[] }
-  error?: boolean
+}
+interface IArticleAd {
+  title: string
+  author: string
+  summary: string
+  cover: string
+  url: string
 }
 export {
   IArticleItem,
+  IArticleAd,
+  ITagItem,
 }