diff --git a/frontend/components/Articles/Navigation/index.vue b/frontend/components/Articles/Navigation/index.vue
index de9575e..d4ba524 100644
--- a/frontend/components/Articles/Navigation/index.vue
+++ b/frontend/components/Articles/Navigation/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex text-[13.67px]" border-b-1>
+  <div class="flex text-[13.67px] bg-[var(--jjext-color-secondary-bg)] border-b-1">
     <ArticlesNavigationLink />
     <ArticlesNavigationSelect />
   </div>
diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
index 45079f5..60ab29c 100644
--- a/frontend/components/Articles/index.vue
+++ b/frontend/components/Articles/index.vue
@@ -32,12 +32,7 @@ onUnmounted(() => {
   <div class="pb-5 box-border w-full">
     <ArticlesNavigation />
     <ul v-if="!isLoading">
-      <ArticlesItem
-        v-for="item in artlistData" :id="item.id" :key="item.id" :author-id="item.authorId"
-        :created-at="item.createdAt" :title="item.title" :summary="item.summary"
-        :viewed="item.viewed" :liked="item.liked" :commented="item.commented" :cover="item.cover"
-        :tag-ids="item.tagIds"
-      />
+      <ArticlesItem :artlist-item="artlistData" />
     </ul>
     <ArticlesSkeleton v-else />
   </div>