diff --git a/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
index 5d479958..f01b7671 100644
--- a/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
+++ b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
@@ -5,67 +5,18 @@
         <d2-icon name="diamond"/>
       </el-button>
     </el-tooltip>
-    <el-dialog title="主题" width="500px" :visible.sync="dialogVisible">
-      <el-table v-bind="table">
-        <el-table-column prop="name" align="center" width="100"/>
-        <el-table-column label="预览" width="220">
-          <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
-        </el-table-column>
-        <el-table-column prop="address" align="center">
-          <template slot-scope="scope">
-            <el-button type="primary">使用</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+    <el-dialog title="主题" width="600px" :visible.sync="dialogVisible">
+      <d2-theme-list/>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
 export default {
   data () {
     return {
-      dialogVisible: false,
-      table: {
-        data: [
-          {
-            name: 'd2admin',
-            preview: '/static/image/theme-preview/d2admin@2x.png'
-          },
-          {
-            name: 'star',
-            preview: '/static/image/theme-preview/star@2x.png'
-          }
-        ],
-        showHeader: false,
-        border: true
-      }
+      dialogVisible: false
     }
-  },
-  computed: {
-    ...mapState({
-      themeName: state => state.theme.themeName
-    })
-  },
-  methods: {
-    ...mapMutations([
-      'setTheme'
-    ])
-  },
-  mounted () {
-    this.setTheme('d2')
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
-.theme-preview {
-  height: 100px;
-  width: 200px;
-  border-radius: 4px;
-  background-size: cover;
-  border: 1px solid $color-border-1;
-}
-</style>
diff --git a/src/components/core/d2-theme-list/index.vue b/src/components/core/d2-theme-list/index.vue
new file mode 100644
index 00000000..5407e72f
--- /dev/null
+++ b/src/components/core/d2-theme-list/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-table v-bind="table">
+    <el-table-column prop="name" align="center" width="160"/>
+    <el-table-column label="预览" width="220">
+      <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
+    </el-table-column>
+    <el-table-column prop="address" align="center">
+      <template slot-scope="scope">
+        <el-button type="primary" @click="handleSelectTheme(scope.row.value)">使用</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  name: 'd2-theme-list',
+  data () {
+    return {
+      table: {
+        data: [
+          {
+            name: 'd2admin 经典',
+            value: 'd2',
+            preview: '/static/image/theme-preview/d2@2x.png'
+          },
+          {
+            name: '流星',
+            value: 'star',
+            preview: '/static/image/theme-preview/star@2x.png'
+          }
+        ],
+        showHeader: false,
+        border: true
+      }
+    }
+  },
+  mounted () {
+    this.setTheme('d2')
+  },
+  computed: {
+    ...mapState({
+      themeName: state => state.theme.themeName
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'setTheme'
+    ]),
+    handleSelectTheme (themeName) {
+      this.setTheme(themeName)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.theme-preview {
+  height: 100px;
+  width: 200px;
+  border-radius: 4px;
+  background-size: cover;
+  border: 1px solid $color-border-1;
+}
+</style>
diff --git a/src/components/core/register.js b/src/components/core/register.js
index b3f19794..d5c9854b 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -14,5 +14,6 @@ Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
 Vue.component('d2-icon-select', () => import('@/components/core/d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('@/components/core/d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('@/components/core/d2-markdown'))
-Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
 Vue.component('d2-mde', () => import('@/components/core/d2-mde'))
+Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
+Vue.component('d2-theme-list', () => import('@/components/core/d2-theme-list'))
diff --git a/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id b/static/image/theme-preview/d2@2x.png.REMOVED.git-id
similarity index 100%
rename from static/image/theme-preview/d2admin@2x.png.REMOVED.git-id
rename to static/image/theme-preview/d2@2x.png.REMOVED.git-id