diff --git a/index/src/app/view/admin/admin-article/admin-article.component.html b/index/src/app/view/admin/admin-article/admin-article.component.html
index e69de29..035908a 100644
--- a/index/src/app/view/admin/admin-article/admin-article.component.html
+++ b/index/src/app/view/admin/admin-article/admin-article.component.html
@@ -0,0 +1,36 @@
+<div class="inner-content">
+    <nz-card nzTitle="文章管理" nzSize="small">
+        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="page"
+                  [nzPageSize]="pageSize"
+                  (nzPageIndexChange)="getArticle()" nzFrontPagination="false">
+            <thead>
+            <th>标题</th>
+            <th>发布日期</th>
+            <th>更新日期</th>
+            <th>文章类型</th>
+            <th>阅读量</th>
+            <th>是否可见</th>
+            <th>操作</th>
+            </thead>
+            <tbody>
+            <tr *ngFor="let data of table.data">
+                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.title" nzTooltipPlacement="right"
+                    nz-tooltip>{{data.title}}</td>
+                <td>{{data.publishDateFormat}}</td>
+                <td>{{data.updateDateFormat}}</td>
+                <td>{{data.original ? '原创' : '转载'}}</td>
+                <td>{{data.readingNumber}}</td>
+                <td><input type="checkbox" [checked]="data.open" disabled></td>
+                <td>
+                    <a routerLink="/write" [queryParams]="{id:data.id}" class="edit-opr">编辑</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a [routerLink]="'/article'+data.id" class="show-opr">查看</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这篇文章吗?" nzOkText="删除" nzCancelText="点错了"
+                       (nzOnConfirm)="deleteArticle(data.id)" class="del-opr">删除</a>
+                </td>
+            </tr>
+            </tbody>
+        </nz-table>
+    </nz-card>
+</div>
diff --git a/index/src/app/view/admin/admin-article/admin-article.component.less b/index/src/app/view/admin/admin-article/admin-article.component.less
index e69de29..5bfd2a0 100644
--- a/index/src/app/view/admin/admin-article/admin-article.component.less
+++ b/index/src/app/view/admin/admin-article/admin-article.component.less
@@ -0,0 +1,3 @@
+td {
+  max-width: 200px;
+}
diff --git a/index/src/app/view/admin/admin-article/admin-article.component.ts b/index/src/app/view/admin/admin-article/admin-article.component.ts
index 29dea42..5513091 100644
--- a/index/src/app/view/admin/admin-article/admin-article.component.ts
+++ b/index/src/app/view/admin/admin-article/admin-article.component.ts
@@ -17,7 +17,7 @@ export class AdminArticleComponent implements OnInit {
     page: number = 1;
     pageSize: number = 10;
 
-    pageList: PageList<Article>;
+    pageList: PageList<Article> = new PageList<Article>();
 
     loading: boolean = true;
 
diff --git a/index/src/app/view/admin/admin-article/admin-article.module.ts b/index/src/app/view/admin/admin-article/admin-article.module.ts
index 9619cad..4664de6 100644
--- a/index/src/app/view/admin/admin-article/admin-article.module.ts
+++ b/index/src/app/view/admin/admin-article/admin-article.module.ts
@@ -2,6 +2,15 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminArticleComponent} from './admin-article.component';
+import {CommonTableModule} from '../components/common-table/common-table.module';
+import {
+    NzCardModule,
+    NzDividerModule,
+    NzPopconfirmModule,
+    NzTableModule,
+    NzToolTipModule,
+    NzTypographyModule
+} from 'ng-zorro-antd';
 
 @NgModule({
     declarations: [
@@ -9,7 +18,14 @@ import {AdminArticleComponent} from './admin-article.component';
     ],
     imports: [
         CommonModule,
-        RouterModule.forChild([{path: '', component: AdminArticleComponent}])
+        RouterModule.forChild([{path: '', component: AdminArticleComponent}]),
+        CommonTableModule,
+        NzTableModule,
+        NzTypographyModule,
+        NzToolTipModule,
+        NzCardModule,
+        NzDividerModule,
+        NzPopconfirmModule,
     ]
 })
 export class AdminArticleModule {
diff --git a/index/src/app/view/admin/admin.component.ts b/index/src/app/view/admin/admin.component.ts
index a626179..b2fe207 100644
--- a/index/src/app/view/admin/admin.component.ts
+++ b/index/src/app/view/admin/admin.component.ts
@@ -61,6 +61,7 @@ export class AdminComponent implements OnInit {
 
     showEditInfoModal() {
         this.editInfoModalVisible = true;
+        this.infoDrawerVisible = false;
         this.editInfoFormGroup.patchValue(this.user);
     }
 
diff --git a/index/src/styles.less b/index/src/styles.less
index 0d60725..0d1c7f8 100644
--- a/index/src/styles.less
+++ b/index/src/styles.less
@@ -6,3 +6,19 @@
 body {
   background: #ececec;
 }
+
+.inner-content {
+  padding: 10px;
+}
+
+.edit-opt {
+
+}
+
+.show-opr {
+  color: #00aaaa;
+}
+
+.del-opr {
+  color: red;
+}