diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts
index e33a3e78..5c1af973 100644
--- a/src/hooks/useExport.ts
+++ b/src/hooks/useExport.ts
@@ -20,7 +20,7 @@ interface ExportImageConfig {
 }
 
 export default () => {
-  const { slides, theme } = storeToRefs(useSlidesStore())
+  const { slides, theme, viewportRatio } = storeToRefs(useSlidesStore())
 
   const exporting = ref(false)
 
@@ -335,6 +335,10 @@ export default () => {
     exporting.value = true
     const pptx = new pptxgen()
 
+    if (viewportRatio.value === 0.625) pptx.layout = 'LAYOUT_16x10'
+    else if (viewportRatio.value === 0.75) pptx.layout = 'LAYOUT_4x3'
+    else pptx.layout = 'LAYOUT_16x9'
+
     const { color: bgColor, alpha: bgAlpha } = formatColor(theme.value.backgroundColor)
     pptx.defineSlideMaster({
       title: 'PPTIST_MASTER',
diff --git a/src/views/Editor/ExportDialog/ExportJSON.vue b/src/views/Editor/ExportDialog/ExportJSON.vue
index c7d6217f..142336e5 100644
--- a/src/views/Editor/ExportDialog/ExportJSON.vue
+++ b/src/views/Editor/ExportDialog/ExportJSON.vue
@@ -46,13 +46,13 @@ export default defineComponent({
   overflow: hidden;
 }
 .preview {
-  width: calc(100% - 20px);
+  width: 100%;
   height: calc(100% - 100px);
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background-color: #2d2d30;
-  color: #fff;
+  background-color: #f9f9f9;
+  color: #0451a5;
 }
 .btns {
   width: 300px;
@@ -72,9 +72,9 @@ export default defineComponent({
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
-  background-color: #2d2d30;
+  background-color: #f9f9f9;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #777;
+  background-color: #c1c1c1;
 }
 </style>
\ No newline at end of file