diff --git a/apps/admin-web/src/i18n/messages/en-US.ts b/apps/admin-web/src/i18n/messages/en-US.ts
index 9113e8c..7e42a9f 100644
--- a/apps/admin-web/src/i18n/messages/en-US.ts
+++ b/apps/admin-web/src/i18n/messages/en-US.ts
@@ -137,6 +137,9 @@ const enUS = {
     userFallback: 'Admin',
     logout: 'Logout',
     planFallback: 'Free Plan',
+    openNavigation: 'Open navigation',
+    collapseNavigation: 'Collapse navigation',
+    expandNavigation: 'Expand navigation',
     aiUsageTitle: 'AI Point Usage',
     aiUsageRecent: 'Recent Usage',
     aiUsageEmpty: 'No AI point usage yet',
diff --git a/apps/admin-web/src/i18n/messages/zh-CN.ts b/apps/admin-web/src/i18n/messages/zh-CN.ts
index 1d00783..e97a4fc 100644
--- a/apps/admin-web/src/i18n/messages/zh-CN.ts
+++ b/apps/admin-web/src/i18n/messages/zh-CN.ts
@@ -134,6 +134,9 @@ const zhCN = {
     userFallback: "管理员",
     logout: "退出",
     planFallback: "免费版",
+    openNavigation: "打开导航",
+    collapseNavigation: "收起导航",
+    expandNavigation: "展开导航",
     aiUsageTitle: "AI 点数明细",
     aiUsageRecent: "最近消耗",
     aiUsageEmpty: "暂无 AI 点数流水",
diff --git a/apps/admin-web/src/layouts/AppShell.vue b/apps/admin-web/src/layouts/AppShell.vue
index 9728dbb..1c3a980 100644
--- a/apps/admin-web/src/layouts/AppShell.vue
+++ b/apps/admin-web/src/layouts/AppShell.vue
@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import {
   AppstoreOutlined,
-  BookOutlined,
+  BarChartOutlined,
+  CopyOutlined,
+  DatabaseOutlined,
   DownOutlined,
+  EditOutlined,
+  FileTextOutlined,
   GlobalOutlined,
-  HistoryOutlined,
+  LineChartOutlined,
   LogoutOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
   PictureOutlined,
-  RadarChartOutlined,
-  SearchOutlined,
   SendOutlined,
+  ShopOutlined,
+  SolutionOutlined,
+  TagsOutlined,
+  ThunderboltOutlined,
+  UserOutlined,
+  WalletOutlined,
 } from '@ant-design/icons-vue'
 import { useQuery } from '@tanstack/vue-query'
-import { computed, type Component } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, type Component, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -24,6 +34,12 @@ const router = useRouter()
 const authStore = useAuthStore()
 const { locale, t } = useI18n()
 
+const MOBILE_BREAKPOINT = '(max-width: 991px)'
+const siderCollapsed = ref(false)
+const mobileDrawerOpen = ref(false)
+const isMobile = ref(false)
+let mobileMediaQuery: MediaQueryList | null = null
+
 const isMembershipBlocked = computed(() => authStore.isMembershipBlocked)
 const membershipBlockedMessage = computed(() =>
   authStore.membership?.blocked_reason === 'user_disabled'
@@ -86,6 +102,16 @@ const selectedKeys = computed(() => {
   return effectiveNavKey.value ? [effectiveNavKey.value] : []
 })
 const pageTitle = computed(() => t(String(route.meta.titleKey ?? 'route.workspace.title')))
+const navigationButtonLabel = computed(() => {
+  if (isMobile.value) {
+    return t('shell.openNavigation')
+  }
+
+  return siderCollapsed.value ? t('shell.expandNavigation') : t('shell.collapseNavigation')
+})
+const navigationButtonIcon = computed(() =>
+  isMobile.value || siderCollapsed.value ? MenuUnfoldOutlined : MenuFoldOutlined,
+)
 
 type HeaderBreadcrumb = {
   label: string
@@ -121,21 +147,21 @@ const navSections = computed<NavSection[]>(() => {
       key: 'articleCreation',
       title: t('nav.articleCreation'),
       items: [
-        { key: '/articles/templates', label: t('nav.templates') },
-        { key: '/articles/custom', label: t('nav.custom') },
-        { key: '/articles/free-create', label: t('nav.freeCreate') },
-        { key: '/articles/imitations', label: t('nav.imitation') },
+        { key: '/articles/templates', label: t('nav.templates'), icon: FileTextOutlined },
+        { key: '/articles/custom', label: t('nav.custom'), icon: ThunderboltOutlined },
+        { key: '/articles/free-create', label: t('nav.freeCreate'), icon: EditOutlined },
+        { key: '/articles/imitations', label: t('nav.imitation'), icon: CopyOutlined },
       ],
     },
     {
       key: 'brandManagement',
       title: t('nav.brandManagement'),
-      items: [{ key: '/brands', label: t('nav.brands'), icon: SearchOutlined }],
+      items: [{ key: '/brands', label: t('nav.brands'), icon: TagsOutlined }],
     },
     {
       key: 'tracking',
       title: t('nav.tracking'),
-      items: [{ key: '/tracking', label: t('nav.trackingDetail'), icon: RadarChartOutlined }],
+      items: [{ key: '/tracking', label: t('nav.trackingDetail'), icon: LineChartOutlined }],
     },
     {
       key: 'contentManagement',
@@ -143,19 +169,19 @@ const navSections = computed<NavSection[]>(() => {
       items: [
         { key: '/media', label: t('nav.media'), icon: GlobalOutlined },
         { key: '/publish-management', label: t('nav.publishManagement'), icon: SendOutlined },
-        { key: '/knowledge', label: t('nav.knowledge'), icon: BookOutlined },
+        { key: '/knowledge', label: t('nav.knowledge'), icon: DatabaseOutlined },
         { key: '/images', label: t('nav.images'), icon: PictureOutlined },
       ],
     },
     {
       key: 'kolMarket',
       title: t('nav.kolMarket'),
-      items: [{ key: '/kol/marketplace', label: t('nav.kolMarketplace') }],
+      items: [{ key: '/kol/marketplace', label: t('nav.kolMarketplace'), icon: ShopOutlined }],
     },
     {
       key: 'personalCenter',
       title: t('nav.personalCenter'),
-      items: [{ key: '/account/ai-points', label: t('nav.aiPointUsage'), icon: HistoryOutlined }],
+      items: [{ key: '/account/ai-points', label: t('nav.aiPointUsage'), icon: WalletOutlined }],
     },
   ]
 
@@ -164,9 +190,9 @@ const navSections = computed<NavSection[]>(() => {
       key: 'kolWorkspace',
       title: t('nav.kolWorkspace'),
       items: [
-        { key: '/kol/manage', label: t('nav.kolManage') },
-        { key: '/kol/dashboard', label: t('nav.kolDashboard') },
-        { key: '/kol/profile', label: t('nav.kolProfile') },
+        { key: '/kol/manage', label: t('nav.kolManage'), icon: SolutionOutlined },
+        { key: '/kol/dashboard', label: t('nav.kolDashboard'), icon: BarChartOutlined },
+        { key: '/kol/profile', label: t('nav.kolProfile'), icon: UserOutlined },
       ],
     })
   }
@@ -212,23 +238,76 @@ const headerBreadcrumbs = computed<HeaderBreadcrumb[]>(() => {
 })
 
 function go(path: string): void {
+  mobileDrawerOpen.value = false
   void router.push(path)
 }
 
+function toggleNavigation(): void {
+  if (isMobile.value) {
+    mobileDrawerOpen.value = true
+    return
+  }
+
+  siderCollapsed.value = !siderCollapsed.value
+}
+
+function syncMobileState(event?: MediaQueryListEvent | MediaQueryList): void {
+  const matches = Boolean(event?.matches ?? mobileMediaQuery?.matches)
+  isMobile.value = matches
+
+  if (!matches) {
+    mobileDrawerOpen.value = false
+  }
+}
+
 async function handleLogout(): Promise<void> {
   await authStore.logout()
   await router.replace('/login')
 }
+
+watch(
+  () => route.fullPath,
+  () => {
+    mobileDrawerOpen.value = false
+  },
+)
+
+onMounted(() => {
+  mobileMediaQuery = window.matchMedia(MOBILE_BREAKPOINT)
+  syncMobileState(mobileMediaQuery)
+  mobileMediaQuery.addEventListener('change', syncMobileState)
+})
+
+onBeforeUnmount(() => {
+  mobileMediaQuery?.removeEventListener('change', syncMobileState)
+  mobileMediaQuery = null
+})
 </script>
 
 <template>
   <a-layout class="admin-layout">
-    <a-layout-sider width="250" theme="light" class="admin-sider">
+    <a-layout-sider
+      v-model:collapsed="siderCollapsed"
+      width="250"
+      :collapsed-width="80"
+      :trigger="null"
+      collapsible
+      theme="light"
+      class="admin-sider"
+      :class="{ 'admin-sider--collapsed': siderCollapsed }"
+    >
       <div class="admin-brand">
-        {{ t('app.name') }}
+        <span class="admin-brand__full">{{ t('app.name') }}</span>
+        <span class="admin-brand__short">省</span>
       </div>
 
-      <a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
+      <a-menu
+        mode="inline"
+        theme="light"
+        :selected-keys="selectedKeys"
+        :inline-collapsed="siderCollapsed"
+        class="admin-menu"
+      >
         <template v-for="section in navSections" :key="section.key">
           <template v-if="section.title">
             <a-menu-item-group :title="section.title">
@@ -251,12 +330,27 @@ async function handleLogout(): Promise<void> {
 
     <a-layout
       class="admin-main-layout"
-      :class="{ 'admin-main-layout--blocked': isMembershipBlocked }"
+      :class="{
+        'admin-main-layout--collapsed': siderCollapsed,
+        'admin-main-layout--blocked': isMembershipBlocked,
+      }"
     >
       <a-layout-header
         class="admin-header"
         :class="{ 'admin-header--blocked': isMembershipBlocked }"
       >
+        <a-button
+          type="text"
+          class="admin-shell-trigger"
+          :aria-label="navigationButtonLabel"
+          :title="navigationButtonLabel"
+          @click="toggleNavigation"
+        >
+          <component :is="navigationButtonIcon" />
+        </a-button>
+
+        <div v-if="!isMembershipBlocked" class="admin-mobile-title">{{ pageTitle }}</div>
+
         <nav v-if="!isMembershipBlocked" class="admin-header-breadcrumb" aria-label="Breadcrumb">
           <span
             v-for="(crumb, index) in headerBreadcrumbs"
@@ -353,6 +447,39 @@ async function handleLogout(): Promise<void> {
         <router-view v-else />
       </a-layout-content>
     </a-layout>
+
+    <a-drawer
+      v-model:open="mobileDrawerOpen"
+      placement="left"
+      width="min(86vw, 320px)"
+      class="admin-mobile-drawer"
+      :closable="false"
+      :body-style="{ padding: 0 }"
+    >
+      <div class="admin-brand admin-brand--drawer">
+        {{ t('app.name') }}
+      </div>
+
+      <a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
+        <template v-for="section in navSections" :key="section.key">
+          <template v-if="section.title">
+            <a-menu-item-group :title="section.title">
+              <a-menu-item v-for="item in section.items" :key="item.key" @click="go(item.key)">
+                <template v-if="item.icon" #icon><component :is="item.icon" /></template>
+                {{ item.label }}
+              </a-menu-item>
+            </a-menu-item-group>
+          </template>
+
+          <template v-else>
+            <a-menu-item v-for="item in section.items" :key="item.key" @click="go(item.key)">
+              <template v-if="item.icon" #icon><component :is="item.icon" /></template>
+              {{ item.label }}
+            </a-menu-item>
+          </template>
+        </template>
+      </a-menu>
+    </a-drawer>
   </a-layout>
 </template>
 
@@ -371,11 +498,22 @@ async function handleLogout(): Promise<void> {
   background: #fff;
   border-right: 1px solid #f0f0f0;
   z-index: 10;
+  transition:
+    width 0.2s ease,
+    flex-basis 0.2s ease,
+    max-width 0.2s ease,
+    min-width 0.2s ease;
 }
 
 .admin-main-layout {
   margin-left: 250px;
   isolation: isolate;
+  min-width: 0;
+  transition: margin-left 0.2s ease;
+}
+
+.admin-main-layout--collapsed {
+  margin-left: 80px;
 }
 
 .admin-main-layout--blocked {
@@ -395,6 +533,28 @@ async function handleLogout(): Promise<void> {
   font-weight: 800;
   font-size: 16px;
   letter-spacing: 0.05em;
+  white-space: nowrap;
+  transition:
+    margin 0.2s ease,
+    width 0.2s ease;
+}
+
+.admin-brand__short {
+  display: none;
+  letter-spacing: 0;
+}
+
+.admin-sider--collapsed .admin-brand {
+  width: 40px;
+  margin-inline: auto;
+}
+
+.admin-sider--collapsed .admin-brand__full {
+  display: none;
+}
+
+.admin-sider--collapsed .admin-brand__short {
+  display: inline;
 }
 
 .admin-menu {
@@ -402,14 +562,23 @@ async function handleLogout(): Promise<void> {
   padding-bottom: 32px;
 }
 
+.admin-sider--collapsed :deep(.ant-menu-item-group-title) {
+  height: 12px;
+  padding: 0;
+  overflow: hidden;
+  color: transparent;
+}
+
 .admin-header {
   position: sticky;
   top: 0;
   background: #fff;
-  padding: 0 24px;
+  height: 64px;
+  padding: 0 24px 0 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   z-index: 100;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 }
@@ -418,6 +587,34 @@ async function handleLogout(): Promise<void> {
   justify-content: flex-end;
 }
 
+.admin-shell-trigger.ant-btn {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #595959;
+  border-radius: 8px;
+}
+
+.admin-shell-trigger.ant-btn:hover {
+  color: #1677ff;
+  background: #f0f8ff;
+}
+
+.admin-mobile-title {
+  display: none;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  color: #141414;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .admin-header-breadcrumb {
   min-width: 0;
   flex: 1;
@@ -579,6 +776,7 @@ async function handleLogout(): Promise<void> {
   z-index: 0;
   margin: 24px;
   min-height: auto;
+  min-width: 0;
 }
 
 .admin-content--blocked {
@@ -621,4 +819,68 @@ async function handleLogout(): Promise<void> {
   line-height: 1.6;
   text-align: center;
 }
+
+@media (max-width: 991px) {
+  .admin-sider {
+    display: none;
+  }
+
+  .admin-main-layout,
+  .admin-main-layout--collapsed {
+    margin-left: 0;
+  }
+
+  .admin-header {
+    padding: 0 12px;
+  }
+
+  .admin-header-breadcrumb {
+    display: none;
+  }
+
+  .admin-mobile-title {
+    display: block;
+  }
+
+  .admin-header-actions {
+    gap: 8px;
+    margin-left: 0;
+  }
+
+  .quota-pill {
+    display: none;
+  }
+
+  .admin-content {
+    margin: 16px;
+  }
+
+  .admin-content--blocked {
+    margin: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .admin-header {
+    height: 56px;
+  }
+
+  .admin-shell-trigger.ant-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .admin-content {
+    margin: 12px;
+  }
+
+  .user-name,
+  .user-dropdown-icon {
+    display: none;
+  }
+
+  .user-dropdown-trigger {
+    padding: 4px;
+  }
+}
 </style>
diff --git a/apps/admin-web/src/styles.css b/apps/admin-web/src/styles.css
index 8508455..2116dd2 100644
--- a/apps/admin-web/src/styles.css
+++ b/apps/admin-web/src/styles.css
@@ -23,10 +23,15 @@ html,
 body,
 #app {
   min-height: 100vh;
+  width: 100%;
   margin: 0;
   padding: 0;
 }
 
+body {
+  overflow-x: hidden;
+}
+
 /* Typography Utilities */
 .eyebrow {
   margin: 0 0 8px;
@@ -157,6 +162,15 @@ body,
 .app-root {
   display: flex;
   min-height: 100vh;
+  width: 100%;
+  min-width: 0;
+}
+
+.ant-app,
+.ant-layout,
+.ant-layout-content,
+.ant-layout .ant-layout {
+  min-width: 0;
 }
 
 /* Workspace Layout Specifics */
@@ -306,3 +320,160 @@ body,
   padding: 0 20px !important;
   font-weight: 500 !important;
 }
+
+.ant-drawer-content-wrapper {
+  max-width: 100vw;
+}
+
+.ant-table-wrapper {
+  max-width: 100%;
+}
+
+.ant-table-wrapper .ant-table-container,
+.ant-table-wrapper .ant-table-content,
+.ant-table-wrapper .ant-table-body {
+  max-width: 100%;
+  scrollbar-width: thin;
+}
+
+.ant-table-wrapper .ant-table-content,
+.ant-table-wrapper .ant-table-body {
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 768px) {
+  .section-heading,
+  .page-title-card__header,
+  .page-title-card__actions,
+  .table-actions-row,
+  [class$='__header'],
+  [class$='__table-head'],
+  [class*='__toolbar'],
+  [class*='-toolbar'],
+  [class*='__filters-inline'],
+  [class*='__filters'] {
+    flex-wrap: wrap;
+  }
+
+  .section-heading,
+  .page-title-card__header {
+    align-items: stretch;
+    gap: 16px;
+  }
+
+  .section-heading {
+    margin-bottom: 16px;
+  }
+
+  .page-title-card__header {
+    padding: 16px;
+  }
+
+  .page-title-card__actions {
+    width: 100%;
+  }
+
+  .page-title-card__actions > * {
+    min-width: 0;
+  }
+
+  .page-title-card__copy h2 {
+    font-size: 18px;
+  }
+
+  .ant-card-body {
+    padding: 16px !important;
+  }
+
+  .ant-table-wrapper {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .ant-table-wrapper .ant-spin-nested-loading,
+  .ant-table-wrapper .ant-spin-container,
+  .ant-table-wrapper .ant-table,
+  .ant-table-wrapper .ant-table-container {
+    min-width: 0;
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 14px !important;
+  }
+
+  .ant-tabs-nav-wrap {
+    overflow: auto !important;
+    scrollbar-width: none;
+  }
+
+  .ant-tabs-nav-wrap::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ant-tabs-nav-list {
+    min-width: max-content;
+  }
+
+  .ant-form,
+  .ant-form-item,
+  .ant-picker,
+  .ant-select,
+  .ant-input,
+  .ant-input-number,
+  .ant-input-affix-wrapper,
+  .ant-space,
+  [class*='__filter'],
+  [class*='filter-item'] {
+    max-width: 100%;
+  }
+
+  .ant-form .ant-row,
+  .ant-space,
+  [class*='__filters'],
+  [class*='__filters-inline'] {
+    row-gap: 12px;
+  }
+
+  .ant-space {
+    flex-wrap: wrap;
+  }
+
+  .ant-modal {
+    max-width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .ant-modal-root .ant-modal-wrap {
+    padding: 0 12px !important;
+  }
+
+  .ant-modal-body {
+    max-height: calc(100dvh - 180px);
+    overflow: auto;
+  }
+}
+
+@media (max-width: 576px) {
+  .login-screen__form-container {
+    padding: 40px 20px;
+  }
+
+  .ant-card-body {
+    padding: 14px !important;
+  }
+
+  .ant-table-wrapper {
+    font-size: 13px;
+  }
+
+  .ant-pagination {
+    justify-content: center;
+  }
+
+  .table-actions-row {
+    justify-content: flex-start;
+  }
+}
diff --git a/apps/admin-web/src/views/TemplateWizardView.vue b/apps/admin-web/src/views/TemplateWizardView.vue
index 5960cd9..9312eaa 100644
--- a/apps/admin-web/src/views/TemplateWizardView.vue
+++ b/apps/admin-web/src/views/TemplateWizardView.vue
@@ -2931,20 +2931,31 @@ function onStructureDragEnd(): void {
       </main>
 
       <footer class="wizard-page__footer">
-        <div>
-          <a-button v-if="currentStep === 0" disabled>{{ t('common.previous') }}</a-button>
-          <a-button v-else @click="handlePrev">{{ t('common.previous') }}</a-button>
+        <div class="footer-previous">
+          <a-button v-if="currentStep === 0" class="footer-btn" disabled>
+            {{ t('common.previous') }}
+          </a-button>
+          <a-button v-else class="footer-btn" @click="handlePrev">
+            {{ t('common.previous') }}
+          </a-button>
         </div>
         <div class="footer-actions">
-          <a-button :loading="savingDraft" @click="handleSaveDraftAndExit">
+          <a-button class="footer-btn" :loading="savingDraft" @click="handleSaveDraftAndExit">
             {{ t('common.cancel') }}
           </a-button>
-          <a-button v-if="currentStep < 2" type="primary" :loading="assistBusy" @click="handleNext">
+          <a-button
+            v-if="currentStep < 2"
+            type="primary"
+            class="footer-btn footer-btn--primary"
+            :loading="assistBusy"
+            @click="handleNext"
+          >
             {{ t('common.next') }}
           </a-button>
           <a-button
             v-else
             type="primary"
+            class="footer-btn footer-btn--primary"
             :loading="mutation.isPending.value"
             @click="handleGenerate"
           >
@@ -2967,8 +2978,8 @@ function onStructureDragEnd(): void {
       :closable="false"
       :mask-closable="false"
       :keyboard="false"
-      centered
       width="460px"
+      wrap-class-name="leave-confirm-modal-wrap"
     >
       <p class="leave-confirm-text">{{ t('templates.wizard.leaveConfirm.content') }}</p>
       <template #footer>
@@ -3000,6 +3011,32 @@ function onStructureDragEnd(): void {
   line-height: 1.7;
 }
 
+:deep(.leave-confirm-modal-wrap) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 32px 16px 16px;
+  overflow: auto;
+}
+
+:deep(.leave-confirm-modal-wrap .ant-modal) {
+  top: 0;
+  width: min(460px, calc(100vw - 32px)) !important;
+  margin: 0;
+  padding-bottom: 0;
+}
+
+:deep(.leave-confirm-modal-wrap .ant-modal-footer) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+:deep(.leave-confirm-modal-wrap .ant-modal-footer .ant-btn) {
+  margin-inline-start: 0 !important;
+}
+
 .wizard-page__loading {
   padding: 40px;
 }
@@ -3736,9 +3773,27 @@ function onStructureDragEnd(): void {
   background: rgba(255, 255, 255, 0.88);
 }
 
+.footer-previous {
+  flex: 0 0 auto;
+}
+
 .footer-actions {
   display: flex;
   gap: 12px;
+  flex: 0 0 auto;
+}
+
+.footer-btn.ant-btn {
+  min-width: 104px;
+  height: 40px;
+  border-radius: 8px;
+  padding: 0 20px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.footer-btn--primary.ant-btn {
+  min-width: 144px;
 }
 
 @media (max-width: 1024px) {
@@ -3791,9 +3846,10 @@ function onStructureDragEnd(): void {
   }
 
   .wizard-page__footer {
-    flex-direction: column;
+    flex-direction: row;
     gap: 12px;
-    align-items: stretch;
+    align-items: center;
+    padding: 14px 16px;
   }
 
   .custom-outline-row {
@@ -3805,8 +3861,27 @@ function onStructureDragEnd(): void {
   }
 
   .footer-actions {
-    width: 100%;
     justify-content: flex-end;
   }
 }
+
+@media (max-width: 560px) {
+  .wizard-page__footer {
+    gap: 8px;
+  }
+
+  .footer-actions {
+    gap: 8px;
+  }
+
+  .footer-btn.ant-btn {
+    min-width: auto;
+    padding: 0 14px;
+    font-size: 14px;
+  }
+
+  .footer-btn--primary.ant-btn {
+    min-width: auto;
+  }
+}
 </style>
diff --git a/apps/admin-web/src/views/TemplatesView.vue b/apps/admin-web/src/views/TemplatesView.vue
index 07c6e80..3aeee4b 100644
--- a/apps/admin-web/src/views/TemplatesView.vue
+++ b/apps/admin-web/src/views/TemplatesView.vue
@@ -240,6 +240,7 @@ const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
     title: t('common.title'),
     dataIndex: 'title',
     key: 'title',
+    width: 360,
   },
   {
     title: t('common.templateType'),
@@ -273,6 +274,19 @@ const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
   },
 ])
 
+const articlePagination = computed(() =>
+  shouldUseRecentFallback.value
+    ? false
+    : {
+        current: page.value,
+        pageSize: pageSize.value,
+        total: displayedArticleTotal.value,
+        showSizeChanger: true,
+        onChange: handleTableChange,
+        onShowSizeChange: handleTableChange,
+      },
+)
+
 // removed wizard watch effect
 
 function applyFilters(): void {
@@ -545,22 +559,13 @@ function refreshRecords(): void {
       </div>
 
       <a-table
+        class="templates-view__desktop-table"
         :columns="articleColumns"
         :data-source="displayedArticles"
         :loading="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
         row-key="id"
-        :pagination="
-          shouldUseRecentFallback
-            ? false
-            : {
-                current: page,
-                pageSize,
-                total: displayedArticleTotal,
-                showSizeChanger: true,
-                onChange: handleTableChange,
-                onShowSizeChange: handleTableChange,
-              }
-        "
+        :pagination="articlePagination"
+        :scroll="{ x: 1068 }"
       >
         <template #emptyText>{{ t('templates.list.empty') }}</template>
 
@@ -609,6 +614,82 @@ function refreshRecords(): void {
           </template>
         </template>
       </a-table>
+
+      <div class="templates-view__mobile-records">
+        <a-skeleton
+          v-if="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
+          active
+          :paragraph="{ rows: 6 }"
+        />
+
+        <a-empty v-else-if="!displayedArticles.length" :description="t('templates.list.empty')" />
+
+        <template v-else>
+          <article
+            v-for="record in displayedArticles"
+            :key="record.id"
+            class="templates-view__mobile-record"
+          >
+            <div class="templates-view__mobile-record-main">
+              <h4>{{ record.title || t('article.untitled') }}</h4>
+              <ArticleSourceMeta
+                :source-type="record.source_type"
+                :generation-mode="record.generation_mode"
+                :created-at="record.created_at"
+              />
+            </div>
+
+            <div class="templates-view__mobile-record-meta">
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.templateType') }}</span>
+                <strong>{{ record.template_name || '--' }}</strong>
+              </div>
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.wordCount') }}</span>
+                <strong>{{ record.word_count || '--' }}</strong>
+              </div>
+            </div>
+
+            <div class="templates-view__mobile-record-status">
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.generateStatus') }}</span>
+                <ArticleGenerateStatus :status="record.generate_status" />
+              </div>
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.publishStatus') }}</span>
+                <ArticlePublishStatus :status="record.publish_status" :article-id="record.id" />
+              </div>
+            </div>
+
+            <div class="templates-view__mobile-record-actions">
+              <span>{{ t('common.actions') }}</span>
+              <ArticleActionGroup
+                v-bind="resolveArticleActionState(record)"
+                :delete-confirm-title="t('templates.list.deleteConfirm')"
+                :delete-loading="deleteMutation.isPending.value"
+                :regenerate-confirm-title="t('common.regenerateConfirm')"
+                :regenerate-loading="regeneratingArticleId === record.id"
+                @publish="openPublish(record)"
+                @edit="openEditor(record)"
+                @preview="openPreview(record)"
+                @copy="copyArticle(record.id)"
+                @regenerate="handleRegenerate(record)"
+                @delete="handleDelete(record.id)"
+              />
+            </div>
+          </article>
+
+          <a-pagination
+            v-if="!shouldUseRecentFallback"
+            class="templates-view__mobile-pagination"
+            :current="page"
+            :page-size="pageSize"
+            :total="displayedArticleTotal"
+            size="small"
+            @change="handleTableChange"
+          />
+        </template>
+      </div>
     </section>
 
     <a-drawer
@@ -802,6 +883,10 @@ function refreshRecords(): void {
   border-radius: 12px;
 }
 
+.templates-view__desktop-table :deep(.ant-table) {
+  min-width: 1068px;
+}
+
 .templates-view__filters-inline {
   display: flex;
   align-items: center;
@@ -853,6 +938,91 @@ function refreshRecords(): void {
   font-size: 24px;
 }
 
+.templates-view__mobile-records {
+  display: none;
+}
+
+.templates-view__mobile-record {
+  padding: 16px 0;
+  border-top: 1px solid #eef2f6;
+}
+
+.templates-view__mobile-record:first-of-type {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.templates-view__mobile-record-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.templates-view__mobile-record-main h4 {
+  margin: 0;
+  color: #101828;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.templates-view__mobile-record-meta,
+.templates-view__mobile-record-status {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.templates-view__mobile-record-field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.templates-view__mobile-record-field > span,
+.templates-view__mobile-record-actions > span {
+  color: #98a2b3;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.templates-view__mobile-record-field > strong {
+  min-width: 0;
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.templates-view__mobile-record-status {
+  padding: 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.templates-view__mobile-record-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.templates-view__mobile-record-actions :deep(.table-actions-row) {
+  justify-content: flex-end;
+}
+
+.templates-view__mobile-pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
 .templates-view__drawer-intro {
   margin-bottom: 20px;
 }
@@ -1326,5 +1496,24 @@ function refreshRecords(): void {
   .templates-view__drawer-mode-grid {
     grid-template-columns: 1fr;
   }
+
+  .templates-view__table-card {
+    padding: 24px 16px 16px;
+  }
+
+  .templates-view__desktop-table {
+    display: none;
+  }
+
+  .templates-view__mobile-records {
+    display: block;
+  }
+}
+
+@media (max-width: 420px) {
+  .templates-view__mobile-record-meta,
+  .templates-view__mobile-record-status {
+    grid-template-columns: 1fr;
+  }
 }
 </style>