diff --git a/pages/API/canvas/canvas.uvue b/pages/API/canvas/canvas.uvue
index ab79490101d3bdacfe812625bbdd92ab43e8bddf..053583aba2e5218bee906ba7254cdf5c22163c42 100644
--- a/pages/API/canvas/canvas.uvue
+++ b/pages/API/canvas/canvas.uvue
@@ -3,12 +3,12 @@
     <page-head :title="title"></page-head>
     <canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
     <scroll-view class="scroll-view" :scroll-y="true">
-      <view class="grid-list">
+      <view class="grid-view">
         <view class="grid-item" v-for="(name, index) in names" :key="index">
-          <button class="canvas-button" @click="handleCanvasButton(name)">{{name}}</button>
+          <button class="canvas-drawing-button" @click="handleCanvasButton(name)">{{name}}</button>
         </view>
       </view>
-      <button class="canvas-drawing-button" @click="toTempFilePath" type="primary">toTempFilePath</button>
+      <button class="btn-to-image" @click="toTempFilePath" type="primary">toTempFilePath</button>
     </scroll-view>
   </view>
 </template>
@@ -434,6 +434,7 @@
 
   .scroll-view {
     flex: 1;
+    padding-bottom: 50px;
   }
 
   .canvas-element {
@@ -442,16 +443,18 @@
     background-color: #ffffff;
   }
 
-  .grid-list {
-    padding: 15px;
+  .grid-view {
+    padding: 10px;
     flex-direction: row;
     flex-wrap: wrap;
-    box-sizing: border-box;
   }
 
   .grid-item {
-    box-sizing: border-box;
     width: 50%;
     padding: 5px;
   }
+
+  .btn-to-image {
+    margin: 10px;
+  }
 </style>