diff --git a/frontend/src/views/employees/EmployeeDetail.vue b/frontend/src/views/employees/EmployeeDetail.vue
index ed769bb..76f55da 100644
--- a/frontend/src/views/employees/EmployeeDetail.vue
+++ b/frontend/src/views/employees/EmployeeDetail.vue
@@ -115,7 +115,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="record in checkoutHistory" :key="record.log_id">
+              <tr v-for="record in displayedHistory" :key="record.log_id">
                 <td>
                   <router-link :to="`/usb/${record.device_id}`">
                     {{ record.device_id }}
@@ -126,6 +126,20 @@
               </tr>
             </tbody>
           </table>
+          <button
+            v-if="checkoutHistory.length > historyLimit && !showAllHistory"
+            class="btn btn-secondary show-more-btn"
+            @click="showAllHistory = true"
+          >
+            Show {{ checkoutHistory.length - historyLimit }} more
+          </button>
+          <button
+            v-if="showAllHistory && checkoutHistory.length > historyLimit"
+            class="btn btn-secondary show-more-btn"
+            @click="showAllHistory = false"
+          >
+            Show less
+          </button>
         </div>
       </div>
     </template>
@@ -163,6 +177,16 @@ const displayedRecognitions = computed(() => {
   return recognitions.value.slice(0, recognitionsLimit)
 })
 
+const historyLimit = 10
+const showAllHistory = ref(false)
+
+const displayedHistory = computed(() => {
+  if (showAllHistory.value) {
+    return checkoutHistory.value
+  }
+  return checkoutHistory.value.slice(0, historyLimit)
+})
+
 const fullName = computed(() => {
   if (!employee.value) return ''
   return `${employee.value.First_Name?.trim() || ''} ${employee.value.Last_Name?.trim() || ''}`.trim()