diff --git a/src/views/ProductQueueView.vue b/src/views/ProductQueueView.vue
index 548770745ad50e21b9b55435dd8bb830c9fb5ad1..1d818e72a60624e85e1d70d912ef71f1ff39839e 100644
--- a/src/views/ProductQueueView.vue
+++ b/src/views/ProductQueueView.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import GanttChart from '@/components/GanttChart/GanttChart.vue'
+import EmployeeSector from '@/components/EmployeeSector.vue'
 
 const selectedDate = ref('1/1/2024')
 const employees = Array.from({ length: 10 }, (_, i) => `EM${i + 1}`)
@@ -50,7 +51,7 @@ const handleDrop = (targetOrder) => {
           <v-col cols="auto" class="d-flex align-center" style="background-color: #7E9CD3; border-radius: 15px; ">
             <v-btn class="mr-2" style="background-color: #2B2E3F; color: white;  border-radius: 10px;">&lt; Back</v-btn>
             <v-btn style="background-color: white; color: black; min-width: 200px; border-radius: 15px;">{{ selectedDate
-              }}</v-btn>
+            }}</v-btn>
             <v-btn class="ml-2" style="background-color: #2B2E3F; color: white; border-radius: 10px;">Next &gt;</v-btn>
             <v-btn class="ml-2"
               style="background-color: white; color: black; border-radius: 10px;"><v-icon>mdi-dots-horizontal</v-icon></v-btn>
@@ -74,12 +75,7 @@ const handleDrop = (targetOrder) => {
       <v-col cols="6">
         <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px;">
           <!-- เลือกพนักงานวางทับตรงนี้ -->
-          <v-container>
-            <v-row>
-              <v-col v-for="employee in employees" :key="employee" cols="4" class="text-center">
-              </v-col>
-            </v-row>
-          </v-container>
+          <EmployeeSector :employees="employees" />
         </v-card>
       </v-col>