diff --git a/src/components/GanttChart/MakequeueBtn.vue b/src/components/GanttChart/MakequeueBtn.vue
index bff4e23c5ed44de0ddc2bcd62f241f4d4ab3aea7..33f5ad09d2955498684a3117c636e65afe081e52 100644
--- a/src/components/GanttChart/MakequeueBtn.vue
+++ b/src/components/GanttChart/MakequeueBtn.vue
@@ -1,28 +1,50 @@
 <template>
-    <div>
-      <button @click="makeQueue">Make Queue</button>
-    </div>
-  </template>
-  
-  <script>
-  import { scheduleAllOrders } from './scheduleCalculator.js';
-  
-  export default {
-    name: 'MakequeueBtn',
-    methods: {
-      makeQueue() {
-        const queueItems = scheduleAllOrders();
-        // ส่งข้อมูล queue ไปยังคอมโพเนนต์พาเรนต์
-        this.$emit('updateQueue', queueItems);
-      }
+  <div>
+    <button @click="makeQueue">Make a queue</button>
+  </div>
+</template>
+
+<script>
+import { scheduleAllOrders } from './scheduleCalculator.js';
+
+export default {
+  name: 'MakequeueBtn',
+  methods: {
+    makeQueue() {
+      const queueItems = scheduleAllOrders();
+      this.$emit('updateQueue', queueItems);
     }
   }
-  </script>
-  
-  <style scoped>
-  button {
-    padding: 8px 16px;
-    font-size: 16px;
-  }
-  </style>
-  
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+button {
+  /* พื้นหลังสีน้ำเงิน */
+  background-color: #2196f3;
+  /* สีตัวอักษรเป็นสีขาว */
+  color: #fff;
+  /* ไม่มีขอบ */
+  border: none;
+  /* มุมโค้ง */
+  border-radius: 8px;
+  /* ขนาดตัวอักษรใหญ่ขึ้น */
+  font-size: 18px;
+  font-weight: bold;
+  /* ปรับขนาดปุ่มให้กว้างขึ้น */
+  width: 200px;
+  height: 60px;
+  /* กึ่งกลางตัวอักษร */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* เปลี่ยนเคอร์เซอร์เป็นแบบคลิกได้ */
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+/* เมื่อเอาเมาส์ไปชี้ */
+button:hover {
+  background-color: #1976d2;
+}
+</style>