diff --git a/frontend/issues-management.html b/frontend/issues-management.html
index ae48593..a4c4a6a 100644
--- a/frontend/issues-management.html
+++ b/frontend/issues-management.html
@@ -181,6 +181,36 @@
             max-height: 0;
         }
         
+        /* 진행 중 카드 스타일 */
+        .issue-card {
+            transition: all 0.2s ease;
+        }
+        
+        .issue-card:hover {
+            transform: translateY(-2px);
+        }
+        
+        .issue-card label {
+            font-weight: 500;
+        }
+        
+        .issue-card input:focus,
+        .issue-card select:focus,
+        .issue-card textarea:focus {
+            transform: scale(1.01);
+            transition: transform 0.1s ease;
+        }
+        
+        .issue-card .bg-gray-50 {
+            border-left: 4px solid #e5e7eb;
+        }
+        
+        /* 카드 내 아이콘 스타일 */
+        .issue-card i {
+            width: 16px;
+            text-align: center;
+        }
+        
         .badge-new { background: #dbeafe; color: #1e40af; }
         .badge-processing { background: #fef3c7; color: #92400e; }
         .badge-pending { background: #ede9fe; color: #7c3aed; }
@@ -605,18 +635,25 @@
                         </div>
                         
                         <div class="collapse-content" id="${groupId}">
-                            <div class="issue-table-container">
-                                <table class="issue-table">
-                                           <thead>
-                                               <tr>
-                                                   ${createTableHeader()}
-                                               </tr>
-                                           </thead>
-                                    <tbody>
-                                        ${issues.map(issue => createIssueRow(issue)).join('')}
-                                    </tbody>
-                                </table>
-                            </div>
+                            ${currentTab === 'in_progress' ? 
+                                // 진행 중: 카드 형식
+                                `<div class="space-y-4 mt-4">
+                                    ${issues.map(issue => createIssueRow(issue)).join('')}
+                                </div>` :
+                                // 완료됨: 테이블 형식
+                                `<div class="issue-table-container">
+                                    <table class="issue-table">
+                                        <thead>
+                                            <tr>
+                                                ${createTableHeader()}
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            ${issues.map(issue => createIssueRow(issue)).join('')}
+                                        </tbody>
+                                    </table>
+                                </div>`
+                            }
                         </div>
                     </div>
                 `;
@@ -640,40 +677,105 @@
             }
         }
         
-        // 진행 중 행 생성
+        // 진행 중 카드 생성
         function createInProgressRow(issue, project) {
             return `
-                <tr data-issue-id="${issue.id}">
-                    <td class="col-no font-medium">${issue.project_sequence_no || '-'}</td>
-                    <td class="col-project">${project ? project.project_name : '-'}</td>
-                    <td class="col-content text-wrap">${issue.final_description || issue.description}</td>
-                    <td class="col-cause">${getCategoryText(issue.final_category || issue.category)}</td>
-                    <td class="col-solution">
-                        ${createEditableField('solution', issue.solution || '', 'textarea', issue.id, true)}
-                    </td>
-                    <td class="col-department">
-                        ${createEditableField('responsible_department', issue.responsible_department || '', 'select', issue.id, true, getDepartmentOptions())}
-                    </td>
-                    <td class="col-person">
-                        ${createEditableField('responsible_person', issue.responsible_person || '', 'text', issue.id, true)}
-                    </td>
-                    <td class="col-date">
-                        ${createEditableField('expected_completion_date', issue.expected_completion_date ? issue.expected_completion_date.split('T')[0] : '', 'date', issue.id, true)}
-                    </td>
-                    <td class="col-completion">
-                        <button onclick="completeIssue(${issue.id})" class="btn-sm bg-green-500 text-white hover:bg-green-600 whitespace-nowrap">완료처리</button>
-                    </td>
-                    <td class="col-photos">
-                        <div class="photo-container">
-                            ${issue.photo_path ? `<img src="${issue.photo_path}" class="issue-photo" onclick="openPhotoModal('${issue.photo_path}')" alt="업로드 사진 1">` : ''}
-                            ${issue.photo_path2 ? `<img src="${issue.photo_path2}" class="issue-photo" onclick="openPhotoModal('${issue.photo_path2}')" alt="업로드 사진 2">` : ''}
-                            ${!issue.photo_path && !issue.photo_path2 ? '-' : ''}
+                <div class="issue-card bg-white border border-gray-200 rounded-xl p-6 mb-4 shadow-sm hover:shadow-md transition-shadow" data-issue-id="${issue.id}">
+                    <!-- 카드 헤더 -->
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">No.${issue.project_sequence_no || '-'}</span>
+                            <h3 class="text-lg font-semibold text-gray-900">${project ? project.project_name : '프로젝트 미지정'}</h3>
                         </div>
-                    </td>
-                    <td class="col-actions">
-                        <button onclick="saveIssueChanges(${issue.id})" class="btn-sm bg-blue-500 text-white hover:bg-blue-600">저장</button>
-                    </td>
-                </tr>
+                        <div class="flex space-x-2">
+                            <button onclick="saveIssueChanges(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
+                                <i class="fas fa-save mr-1"></i>저장
+                            </button>
+                            <button onclick="completeIssue(${issue.id})" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
+                                <i class="fas fa-check mr-1"></i>완료처리
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- 카드 내용 -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <!-- 왼쪽: 기본 정보 -->
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">부적합 내용</label>
+                                <div class="p-3 bg-gray-50 rounded-lg text-gray-800 min-h-[80px]">
+                                    ${issue.final_description || issue.description}
+                                </div>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">원인 분류</label>
+                                <div class="p-3 bg-gray-50 rounded-lg text-gray-800">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                        ${getCategoryText(issue.final_category || issue.category)}
+                                    </span>
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">업로드 사진</label>
+                                <div class="flex gap-2">
+                                    ${issue.photo_path ? `<img src="${issue.photo_path}" class="w-20 h-20 object-cover rounded-lg cursor-pointer border-2 border-gray-200 hover:border-blue-400 transition-colors" onclick="openPhotoModal('${issue.photo_path}')" alt="업로드 사진 1">` : '<div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 text-xs border-2 border-dashed border-gray-300">사진 없음</div>'}
+                                    ${issue.photo_path2 ? `<img src="${issue.photo_path2}" class="w-20 h-20 object-cover rounded-lg cursor-pointer border-2 border-gray-200 hover:border-blue-400 transition-colors" onclick="openPhotoModal('${issue.photo_path2}')" alt="업로드 사진 2">` : '<div class="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 text-xs border-2 border-dashed border-gray-300">사진 없음</div>'}
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 오른쪽: 편집 가능한 정보 -->
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">
+                                    <i class="fas fa-lightbulb text-yellow-500 mr-1"></i>해결방안
+                                </label>
+                                <textarea id="solution_${issue.id}" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" placeholder="해결 방안을 입력하세요...">${issue.solution || ''}</textarea>
+                            </div>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                                        <i class="fas fa-building text-blue-500 mr-1"></i>담당부서
+                                    </label>
+                                    <select id="responsible_department_${issue.id}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                        ${getDepartmentOptions().map(opt => 
+                                            `<option value="${opt.value}" ${opt.value === (issue.responsible_department || '') ? 'selected' : ''}>${opt.text}</option>`
+                                        ).join('')}
+                                    </select>
+                                </div>
+
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                                        <i class="fas fa-user text-purple-500 mr-1"></i>담당자
+                                    </label>
+                                    <input type="text" id="responsible_person_${issue.id}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="담당자 이름" value="${issue.responsible_person || ''}">
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-2">
+                                    <i class="fas fa-calendar-alt text-red-500 mr-1"></i>조치 예상일
+                                </label>
+                                <input type="date" id="expected_completion_date_${issue.id}" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="${issue.expected_completion_date ? issue.expected_completion_date.split('T')[0] : ''}">
+                            </div>
+
+                            <!-- 진행 상태 표시 -->
+                            <div class="mt-4 p-3 bg-blue-50 rounded-lg">
+                                <div class="flex items-center justify-between">
+                                    <span class="text-sm text-blue-700 font-medium">
+                                        <i class="fas fa-clock mr-1"></i>진행 중
+                                    </span>
+                                    <span class="text-xs text-blue-600">
+                                        신고일: ${new Date(issue.report_date).toLocaleDateString('ko-KR')}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             `;
         }
         
@@ -951,6 +1053,9 @@
                         let value = element.value.trim();
                         if (value === '' || value === '선택하세요') {
                             value = null;
+                        } else if (field === 'expected_completion_date' && value) {
+                            // 날짜 필드는 ISO datetime 형식으로 변환
+                            value = value + 'T00:00:00';
                         }
                         updates[field] = value;
                     }