diff --git a/resources/css/app.css b/resources/css/app.css
index b3c85e3..033157e 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -144,15 +144,6 @@
     border-width: 0 5px 5px 5px !important;
     margin-top: -2.5px !important;
 }
-/* Specific height override for the search filter form */
-#filterForm .ts-wrapper.form-input {
-    height: 38px !important;
-}
-#filterForm .ts-wrapper.form-input .ts-control {
-    height: 38px !important;
-    min-height: 38px !important;
-    padding: 0.375rem 1rem !important;
-}
 
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
diff --git a/resources/views/components/user-filter-form.blade.php b/resources/views/components/user-filter-form.blade.php
index c16ae8c..0e3f866 100644
--- a/resources/views/components/user-filter-form.blade.php
+++ b/resources/views/components/user-filter-form.blade.php
@@ -9,34 +9,38 @@
 ])
 
 <form id="filterForm" action="{{ $action }}" method="GET" class="flex flex-col md:flex-row md:flex-wrap items-stretch md:items-center gap-3.5 w-full mb-6 bg-white p-5 rounded-[24px] border border-white shadow-[0_10px_30px_rgba(15,23,42,0.05)]">
-<div class="search-wrapper flex-1 relative">
-    <svg class="search-icon w-4 h-4 text-text-light" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-    </svg>
-    <input type="text" id="searchInput" name="search" value="{{ $search }}" placeholder="Tìm MSNV hoặc Email..." class="w-full h-full bg-transparent border-none outline-none" />
-    <button type="button" id="btnClearSearch" class="{{ empty($search) ? 'hidden' : '' }} absolute right-3.5 text-text-light hover:text-text-dark focus:outline-none">
-        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+<div class="search-wrapper flex-1 relative flex items-center w-full">
+    <span class="absolute left-4 text-gray-400 pointer-events-none w-5 h-5 flex items-center justify-center z-10">
+        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+    </span>
+    <input type="text" id="searchInput" name="search" value="{{ $search }}" placeholder="Tìm MSNV hoặc Email..." 
+           class="form-input form-input-with-icon !rounded-xl !focus:border-[#3462f7] !focus:ring-[#3462f7]/20 w-full" 
+           style="padding-left: 44px; padding-right: 40px;" />
+    <button type="button" id="btnClearSearch" class="{{ empty($search) ? 'hidden' : '' }} absolute right-3.5 text-gray-400 hover:text-gray-600 focus:outline-none">
+        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
         </svg>
     </button>
 </div>
     
     <!-- Status Filter -->
-    <select name="status" id="statusFilter" class="form-input !py-1.5 !text-sm !w-full md:!w-[150px] border-[#d9dfe7] rounded-xl bg-white shrink-0">
+    <select name="status" id="statusFilter" class="form-input !text-sm !w-full md:!w-[150px] !rounded-xl bg-white shrink-0">
         <option value="" {{ $status === '' ? 'selected' : '' }}>Tất cả trạng thái</option>
         <option value="1" {{ $status === '1' ? 'selected' : '' }}>Hoạt động</option>
         <option value="0" {{ $status === '0' ? 'selected' : '' }}>Nghỉ việc</option>
     </select>
 
     <!-- Role Filter -->
-    <select name="role" id="roleFilter" class="form-input !py-1.5 !text-sm !w-full md:!w-[130px] border-[#d9dfe7] rounded-xl bg-white shrink-0">
+    <select name="role" id="roleFilter" class="form-input !text-sm !w-full md:!w-[130px] !rounded-xl bg-white shrink-0">
         <option value="" {{ $role === '' ? 'selected' : '' }}>Tất cả vai trò</option>
         <option value="1" {{ $role === '1' ? 'selected' : '' }}>Admin</option>
         <option value="0" {{ $role === '0' ? 'selected' : '' }}>Member</option>
     </select>
 
     <!-- Department Filter -->
-    <select name="department" id="departmentFilter" class="form-input !py-1.5 !text-sm !w-full md:!w-[170px] border-[#d9dfe7] rounded-xl bg-white shrink-0">
+    <select name="department" id="departmentFilter" class="form-input !text-sm !w-full md:!w-[170px] !rounded-xl bg-white shrink-0">
         <option value="" {{ $department === '' ? 'selected' : '' }}>Tất cả phòng ban</option>
         @foreach(config('constants.DEPARTMENTS') as $dept)
             <option value="{{ $dept }}" {{ $department === $dept ? 'selected' : '' }}>{{ $dept }}</option>
@@ -44,17 +48,17 @@
     </select>
 
     <!-- Flag Send Filter -->
-    <select name="flag_send" id="flagSendFilter" class="form-input !py-1.5 !text-sm !w-full md:!w-[150px] border-[#d9dfe7] rounded-xl bg-white shrink-0">
+    <select name="flag_send" id="flagSendFilter" class="form-input !text-sm !w-full md:!w-[150px] !rounded-xl bg-white shrink-0">
         <option value="" {{ $flagSend === '' ? 'selected' : '' }}>Tất cả quyền gửi</option>
         <option value="1" {{ $flagSend === '1' ? 'selected' : '' }}>Được gửi</option>
         <option value="0" {{ $flagSend === '0' ? 'selected' : '' }}>Không được gửi</option>
     </select>
 
-    <input type="month" name="month" id="monthFilter" value="{{ $selectedMonth }}" class="form-input !py-1.5 !text-sm !w-full md:!w-[140px] border-[#d9dfe7] rounded-xl bg-white shrink-0">
+    <input type="month" name="month" id="monthFilter" value="{{ $selectedMonth }}" class="form-input !text-sm !w-full md:!w-[140px] !rounded-xl bg-white shrink-0">
 
     <div class="flex items-center gap-2 w-full md:w-auto md:ml-auto shrink-0">
-        <button type="submit" id="btnFilter" class="btn-primary !py-2.5 !px-5 text-sm rounded-xl font-bold shadow-md shadow-blue-500/10 !bg-[#3462f7] hover:!bg-blue-700 flex items-center justify-center min-w-[80px] flex-1 md:flex-none">Tìm</button>
-        <button type="button" id="btnClearFilters" class="btn-secondary !py-2.5 !px-5 text-sm rounded-xl font-bold border border-[#d9dfe7] hover:bg-gray-100 flex items-center justify-center min-w-[100px] flex-1 md:flex-none">Xóa bộ lọc</button>
+        <button type="submit" id="btnFilter" class="btn-primary !h-[48px] !px-5 text-sm rounded-xl font-bold shadow-md shadow-blue-500/10 !bg-[#3462f7] hover:!bg-blue-700 flex items-center justify-center min-w-[80px] flex-1 md:flex-none">Tìm</button>
+        <button type="button" id="btnClearFilters" class="btn-secondary !h-[48px] !px-5 text-sm rounded-xl font-bold border border-[#d9dfe7] hover:bg-gray-100 flex items-center justify-center min-w-[100px] flex-1 md:flex-none">Xóa bộ lọc</button>
     </div>
 </form>