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 0f67fc57..b838edb6 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
@@ -1,7 +1,59 @@
 <template>
-  <el-tooltip effect="dark" content="theme" placement="bottom">
-    <el-button class="d2-ml-0 d2-mr btn-text" type="text">
-      <d2-icon name="diamond"/>
-    </el-button>
-  </el-tooltip>
+  <div>
+    <el-tooltip effect="dark" content="theme" placement="bottom">
+      <el-button class="d2-ml-0 d2-mr btn-text" type="text" @click="dialogVisible = true">
+        <d2-icon name="diamond"/>
+      </el-button>
+    </el-tooltip>
+    <el-dialog title="主题" :visible.sync="dialogVisible">
+      <el-table :data="tableData">
+        <el-table-column prop="name" label="主题名称" width="100"></el-table-column>
+        <el-table-column
+          label="预览"
+          width="220">
+          <template slot-scope="scope">
+            <div
+              class="theme-preview"
+              :style="{'backgroundImage': `url(${ scope.row.preview })`}">
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址">
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogVisible: false,
+      tableData: [
+        {
+          name: 'd2admin',
+          preview: '/static/image/theme-preview/d2admin@2x.png'
+        },
+        {
+          name: 'star',
+          preview: '/static/image/theme-preview/star@2x.png'
+        }
+      ]
+    }
+  }
+}
+</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/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id b/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id
new file mode 100644
index 00000000..03df04ce
--- /dev/null
+++ b/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id
@@ -0,0 +1 @@
+74d02da8079b497b2c221e237eda7a63594b3d85
\ No newline at end of file